2 files changed, 23 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"