diff options
Diffstat (limited to 'app/assets/javascripts/cycle_analytics')
3 files changed, 24 insertions, 18 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue index af7334ecf2e..72a7659aac0 100644 --- a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue +++ b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue @@ -1,10 +1,5 @@ <script> -import { - GlPath, - GlPopover, - GlDeprecatedSkeletonLoading as GlSkeletonLoading, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; +import { GlPath, GlPopover, GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import Tracking from '~/tracking'; import { OVERVIEW_STAGE_ID } from '../constants'; import FormattedStageCount from './formatted_stage_count.vue'; @@ -13,7 +8,7 @@ export default { name: 'PathNavigation', components: { GlPath, - GlSkeletonLoading, + GlSkeletonLoader, GlPopover, FormattedStageCount, }, @@ -57,7 +52,7 @@ export default { }; </script> <template> - <gl-skeleton-loading v-if="loading" :lines="2" /> + <gl-skeleton-loader v-if="loading" :width="235" :lines="2" /> <gl-path v-else :key="selectedStage.id" :items="stages" @selected="onSelectStage"> <template #default="{ pathItem, pathId }"> <gl-popover diff --git a/app/assets/javascripts/cycle_analytics/components/stage_table.vue b/app/assets/javascripts/cycle_analytics/components/stage_table.vue index e4236968efc..85a40b89b77 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_table.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_table.vue @@ -13,6 +13,7 @@ import { __ } from '~/locale'; import Tracking from '~/tracking'; import { NOT_ENOUGH_DATA_ERROR, + FIELD_KEY_TITLE, PAGINATION_SORT_FIELD_END_EVENT, PAGINATION_SORT_FIELD_DURATION, PAGINATION_SORT_DIRECTION_ASC, @@ -22,7 +23,8 @@ import TotalTime from './total_time.vue'; const DEFAULT_WORKFLOW_TITLE_PROPERTIES = { thClass: 'gl-w-half', - key: PAGINATION_SORT_FIELD_END_EVENT, + key: FIELD_KEY_TITLE, + sortable: false, }; const WORKFLOW_COLUMN_TITLES = { @@ -132,14 +134,16 @@ export default { return [ this.workflowTitle, { + key: PAGINATION_SORT_FIELD_END_EVENT, + label: __('Last event'), + sortable: this.sortable, + }, + { key: PAGINATION_SORT_FIELD_DURATION, - label: __('Time'), - thClass: 'gl-w-half', + label: __('Duration'), + sortable: this.sortable, }, - ].map((field) => ({ - ...field, - sortable: this.sortable, - })); + ]; }, prevPage() { return Math.max(this.pagination.page - 1, 0); @@ -182,7 +186,7 @@ export default { </script> <template> <div data-testid="vsa-stage-table"> - <gl-loading-icon v-if="isLoading" class="gl-mt-4" size="md" /> + <gl-loading-icon v-if="isLoading" class="gl-mt-4" size="lg" /> <gl-empty-state v-else-if="isEmptyStage" :title="emptyStateTitleText" @@ -201,7 +205,7 @@ export default { :empty-text="emptyStateMessage" @sort-changed="onSort" > - <template v-if="stageCount" #head(end_event)="data"> + <template v-if="stageCount" #head(title)="data"> <span>{{ data.label }}</span ><gl-badge class="gl-ml-2" size="sm" ><formatted-stage-count :stage-count="stageCount" @@ -210,7 +214,10 @@ export default { <template #head(duration)="data"> <span data-testid="vsa-stage-header-duration">{{ data.label }}</span> </template> - <template #cell(end_event)="{ item }"> + <template #head(end_event)="data"> + <span data-testid="vsa-stage-header-last-event">{{ data.label }}</span> + </template> + <template #cell(title)="{ item }"> <div data-testid="vsa-stage-event"> <div v-if="item.id" data-testid="vsa-stage-content"> <p class="gl-m-0"> @@ -282,6 +289,9 @@ export default { <template #cell(duration)="{ item }"> <total-time :time="item.totalTime" data-testid="vsa-stage-event-time" /> </template> + <template #cell(end_event)="{ item }"> + <span data-testid="vsa-stage-last-event">{{ item.endEventTimestamp }}</span> + </template> </gl-table> <gl-pagination v-if="pagination && !isLoading && !isEmptyStage" diff --git a/app/assets/javascripts/cycle_analytics/constants.js b/app/assets/javascripts/cycle_analytics/constants.js index f0b2bd9dc5b..2758d686fb1 100644 --- a/app/assets/javascripts/cycle_analytics/constants.js +++ b/app/assets/javascripts/cycle_analytics/constants.js @@ -22,6 +22,7 @@ export const PAGINATION_SORT_FIELD_END_EVENT = 'end_event'; export const PAGINATION_SORT_FIELD_DURATION = 'duration'; export const PAGINATION_SORT_DIRECTION_DESC = 'desc'; export const PAGINATION_SORT_DIRECTION_ASC = 'asc'; +export const FIELD_KEY_TITLE = 'title'; export const I18N_VSA_ERROR_STAGES = __( 'There was an error fetching value stream analytics stages.', |