Merge branch...

Merge branch '214841-fe-add-lead-time-and-cycle-time-stage-to-group-level-value-stream-analytics' into 'master'

Add time metrics card component

See merge request gitlab-org/gitlab!31460

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

+<script>
+import MetricCard from '../../shared/components/metric_card.vue';
+import { timeMetricsData as mockTimeMetricsData } from '../../../../../../spec/frontend/analytics/cycle_analytics/mock_data';
+
+export default {
+  name: 'TimeMetricsCard',
+  components: {
+    MetricCard,
+  },
+  props: {
+    groupPath: {
+      type: String,
+      required: true,
+    },
+    additionalParams: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      data: [],
+      loading: false,
+    };
+  },
+  watch: {
+    additionalParams() {
+      this.fetchData();
+    },
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.data = mockTimeMetricsData;
+    },
+  },
+  render() {
+    return this.$scopedSlots.default({
+      metrics: this.data,
+      loading: this.loading,
+    });
+  },
+};
+</script>

ee/app/assets/javascripts/analytics/shared/components/metric_card.vue

@@ -22,6 +22,13 @@ export default {
       default: false,
     },
   },
+  methods: {
+    valueText(metric) {
+      const { value = null, unit = null } = metric;
+      if (!value) return '-';
+      return unit ? `${value} ${unit}` : value;
+    },
+  },
 };
 </script>
 
@@ -39,12 +46,7 @@ export default {
           ref="metricItem"
           class="js-metric-card-item flex-grow text-center"
         >
-          <h3 class="my-2">
-            <template v-if="metric.value === null"
-              >-</template
-            >
-            <template v-else>{{ metric.value }}</template>
-          </h3>
+          <h3 class="my-2">{{ valueText(metric) }}</h3>
           <p class="text-secondary gl-font-sm mb-2">{{ metric.label }}</p>
         </div>
       </div>

ee/spec/frontend/analytics/cycle_analytics/mock_data.js

@@ -53,6 +53,10 @@ const getStageByTitle = (stages, title) =>
   stages.find(stage => stage.title && stage.title.toLowerCase().trim() === title) || {};
 
 export const recentActivityData = getJSONFixture(fixtureEndpoints.recentActivityData);
+export const timeMetricsData = [
+  { label: 'Lead time', value: '2', unit: 'days' },
+  { label: 'Cycle time', value: '1.5', unit: 'days' },
+];
 
 export const customizableStagesAndEvents = getJSONFixture(
   fixtureEndpoints.customizableCycleAnalyticsStagesAndEvents,

ee/spec/frontend/analytics/shared/components/metric_card_spec.js

@@ -5,9 +5,9 @@ import MetricCard from 'ee/analytics/shared/components/metric_card.vue';
 const defaultProps = {
   title: 'My fancy title',
   metrics: [
-    { key: 'first_metric', value: 10, label: 'First metric' },
+    { key: 'first_metric', value: 10, label: 'First metric', unit: 'days' },
     { key: 'second_metric', value: 20, label: 'Yet another metric' },
-    { key: 'third_metric', value: null, label: 'Metric without value' },
+    { key: 'third_metric', value: null, label: 'Metric without value', unit: 'parsecs' },
   ],
   isLoading: false,
 };
@@ -93,6 +93,24 @@ describe('MetricCard', () => {
           ).toContain(value);
         });
       });
+
+      describe('units', () => {
+        it(`renders when there is a value`, () => {
+          expect(
+            findMetricItem()
+              .at(0)
+              .text(),
+          ).toContain('10 days');
+        });
+
+        it(`does not render without a value`, () => {
+          expect(
+            findMetricItem()
+              .at(2)
+              .text(),
+          ).toContain('-');
+        });
+      });
     });
   });
 });