Skip to content
Snippets Groups Projects

DevOps Adoption: Integrate table component

Merged Brandon Labuschagne requested to merge 271249-fe-devops-report-add-table into master
4 files
+ 115
10
Compare changes
  • Side-by-side
  • Inline
Files
4
<script>
import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import { GlLoadingIcon, GlButton, GlSprintf, GlAlert } from '@gitlab/ui';
import * as Sentry from '~/sentry/wrapper';
import getGroupsQuery from '../graphql/queries/get_groups.query.graphql';
import DevopsAdoptionEmptyState from './devops_adoption_empty_state.vue';
import DevopsAdoptionTable from './devops_adoption_table.vue';
import devopsAdoptionSegmentsQuery from '../graphql/queries/devops_adoption_segments.query.graphql';
import { DEVOPS_ADOPTION_STRINGS } from '../constants';
export default {
@@ -11,19 +13,28 @@ export default {
GlAlert,
GlLoadingIcon,
DevopsAdoptionEmptyState,
},
i18n: {
...DEVOPS_ADOPTION_STRINGS.app,
DevopsAdoptionTable,
GlButton,
GlSprintf,
},
data() {
return {
loadingError: false,
selectedSegmentId: null,
};
},
apollo: {
devopsAdoptionSegments: {
query: devopsAdoptionSegmentsQuery,
error() {
this.hasError = true;
},
context: {
isSingleRequest: true,
},
},
groups: {
query: getGroupsQuery,
loadingKey: 'loading',
result() {
if (this.groups?.pageInfo?.nextPage) {
this.fetchNextPage();
@@ -35,13 +46,25 @@ export default {
},
},
computed: {
timestamp() {
return this.devopsAdoptionSegments.nodes[0].latestSnapshot?.recordedAt;
},
isLoading() {
return this.$apollo.queries.groups.loading;
return (
this.$apollo.queries.groups.loading || this.$apollo.queries.devopsAdoptionSegments.loading
);
},
isEmpty() {
return this.groups?.nodes?.length === 0;
},
groupsDataAvailable() {
return Boolean(this.groups?.nodes?.length);
},
},
i18n: {
...DEVOPS_ADOPTION_STRINGS.app,
},
methods: {
handleError(error) {
this.loadingError = true;
@@ -66,8 +89,31 @@ export default {
</script>
<template>
<gl-loading-icon v-if="isLoading" size="md" class="gl-my-5" />
<gl-alert v-else-if="loadingError" variant="danger" :dismissible="false" class="gl-mt-3">
{{ $options.i18n.groupsError }}
</gl-alert>
<devops-adoption-empty-state v-else-if="isEmpty" />
<div v-else>
<gl-alert v-if="loadingError" variant="danger" :dismissible="false" class="gl-mt-3">
{{ $options.i18n.groupsError }}
</gl-alert>
<devops-adoption-empty-state
v-if="!devopsAdoptionSegments.nodes.length"
:groups-data-available="groupsDataAvailable"
/>
<div v-else class="gl-mt-3">
<div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-my-3">
<span class="gl-text-gray-400">
<gl-sprintf
:message="
s__(
'DevopsAdoption|Feature adoption is based on usage over the last 30 days. Last updated: %{timestamp}',
)
"
>
<template #timestamp>{{ timestamp }}</template>
</gl-sprintf>
</span>
<gl-button>{{ s__('DevopsAdoption|Add new segment') }}</gl-button>
</div>
<devops-adoption-table :segments="devopsAdoptionSegments.nodes" />
</div>
</div>
</template>
Loading