Merge branch '341739-vsa-fix-last-updated-time' into 'master'

VSA calculate last updated time against current time

See merge request gitlab-org/gitlab!82952

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -94,7 +94,10 @@ export default {
       return this.glFeatures.useVsaAggregatedTables;
     },
     isAggregationEnabled() {
-      return this.canToggleAggregation && this.aggregation?.enabled;
+      return this.canToggleAggregation && this.aggregation.enabled;
+    },
+    isAggregationStatusAvailable() {
+      return this.isAggregationEnabled && this.aggregation.lastRunAt;
     },
     query() {
       const { project_ids, created_after, created_before } = this.cycleAnalyticsRequestParams;
@@ -200,7 +203,7 @@ export default {
     >
       <h3>{{ __('Value Stream Analytics') }}</h3>
       <div class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-mt-0 gl-sm-mt-5">
-        <value-stream-aggregation-status v-if="isAggregationEnabled" :data="aggregation" />
+        <value-stream-aggregation-status v-if="isAggregationStatusAvailable" :data="aggregation" />
         <value-stream-select v-if="shouldDisplayCreateMultipleValueStreams" />
       </div>
     </div>

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_aggregation_status.vue

@@ -25,7 +25,7 @@ export default {
   },
   computed: {
     elapsedTimeParsedSeconds() {
-      return differenceInMilliseconds(this.lastUpdated, this.nextUpdate) / 1000;
+      return differenceInMilliseconds(this.lastUpdated, this.currentTime) / 1000;
     },
     elapsedTimeText() {
       return sprintf(this.$options.i18n.LAST_UPDATED_AGO_TEXT, {
@@ -51,6 +51,7 @@ export default {
     NEXT_UPDATE_TEXT,
     POPOVER_TITLE,
   },
+  currentTime: Date.now(),
 };
 </script>
 <template>

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -363,6 +363,24 @@ describe('EE Value Stream Analytics component', () => {
       expect(findAggregationStatus().props('data')).toEqual(aggregationData);
     });
 
+    describe('lastRunAt is null', () => {
+      beforeEach(async () => {
+        wrapper = await createComponent({
+          initialState: {
+            ...initialCycleAnalyticsState,
+            aggregation: {
+              ...aggregationData,
+              lastRunAt: null,
+            },
+          },
+        });
+      });
+
+      it('does not render the aggregation status', () => {
+        expect(findAggregationStatus().exists()).toBe(false);
+      });
+    });
+
     describe('enabled=false', () => {
       beforeEach(async () => {
         wrapper = await createComponent({

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_aggregation_status_spec.js

@@ -7,6 +7,7 @@ import ValueStreamAggregationStatus, {
   toYmdhs,
 } from 'ee/analytics/cycle_analytics/components/value_stream_aggregation_status.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { useFakeDate } from 'helpers/fake_date';
 import { aggregationData } from '../mock_data';
 
 const createComponent = (props = {}) =>
@@ -20,6 +21,8 @@ const createComponent = (props = {}) =>
   );
 
 describe('ValueStreamAggregationStatus', () => {
+  useFakeDate(2022, 2, 12);
+
   let wrapper = null;
 
   const findBadge = () => wrapper.findComponent(GlBadge);
@@ -38,7 +41,7 @@ describe('ValueStreamAggregationStatus', () => {
 
     it('renders the elapsed time badge', () => {
       expect(findBadge().exists()).toBe(true);
-      expect(findBadge().text()).toContain('Last updated about 1 hour ago');
+      expect(findBadge().text()).toContain('Last updated about 19 hours ago');
     });
 
     it('renders the data refresh popover', () => {