Add latest changes from gitlab-org/gitlab@master

2 files changed, 72 insertions, 8 deletions

diff --git a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
index 1a3544e7677..acc82761e88 100644
--- a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
+++ b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
@@ -28,6 +28,22 @@ const fetchMetricsData = (reqs = [], path, params) => {
   );
 };
 
+const extractMetricsGroupData = (keyList = [], data = []) => {
+  if (!keyList.length || !data.length) return [];
+  return data.filter(({ identifier = '' }) => identifier.length && keyList.includes(identifier));
+};
+
+const groupRawMetrics = (groups = [], rawData = []) => {
+  return groups.map((curr) => {
+    const { keys, ...rest } = curr;
+    return {
+      data: extractMetricsGroupData(keys, rawData),
+      keys,
+      ...rest,
+    };
+  });
+};
+
 export default {
   name: 'ValueStreamMetrics',
   components: {
@@ -52,13 +68,24 @@ export default {
       required: false,
       default: null,
     },
+    groupBy: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
       metrics: [],
+      groupedMetrics: [],
       isLoading: false,
     };
   },
+  computed: {
+    hasGroupedMetrics() {
+      return Boolean(this.groupBy.length);
+    },
+  },
   watch: {
     requestParams(newVal, oldVal) {
       if (!isEqual(newVal, oldVal)) {
@@ -76,6 +103,11 @@ export default {
       return fetchMetricsData(this.requests, this.requestPath, this.requestParams)
         .then((data) => {
           this.metrics = this.filterFn ? this.filterFn(data) : data;
+
+          if (this.hasGroupedMetrics) {
+            this.groupedMetrics = groupRawMetrics(this.groupBy, this.metrics);
+          }
+
           this.isLoading = false;
         })
         .catch(() => {
@@ -86,14 +118,35 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-flex-wrap" data-testid="vsa-metrics">
+  <div class="gl-display-flex gl-mt-6" data-testid="vsa-metrics">
     <gl-skeleton-loading v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6" />
-    <metric-tile
-      v-for="metric in metrics"
-      v-show="!isLoading"
-      :key="metric.identifier"
-      :metric="metric"
-      class="gl-my-6 gl-pr-9"
-    />
+    <template v-else>
+      <div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
+        <div
+          v-for="group in groupedMetrics"
+          :key="group.key"
+          class="gl-mb-7"
+          data-testid="vsa-metrics-group"
+        >
+          <h4 class="gl-my-0">{{ group.title }}</h4>
+          <div class="gl-display-flex gl-flex-wrap">
+            <metric-tile
+              v-for="metric in group.data"
+              :key="metric.identifier"
+              :metric="metric"
+              class="gl-mt-5 gl-pr-10"
+            />
+          </div>
+        </div>
+      </div>
+      <div v-else class="gl-display-flex gl-flex-wrap gl-mb-7">
+        <metric-tile
+          v-for="metric in metrics"
+          :key="metric.identifier"
+          :metric="metric"
+          class="gl-mt-5 gl-pr-10"
+        />
+      </div>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/analytics/shared/constants.js b/app/assets/javascripts/analytics/shared/constants.js
index 2ac144ceb5e..05e68bf5d9a 100644
--- a/app/assets/javascripts/analytics/shared/constants.js
+++ b/app/assets/javascripts/analytics/shared/constants.js
@@ -56,3 +56,14 @@ export const METRICS_POPOVER_CONTENT = {
     description: s__('ValueStreamAnalytics|Number of commits pushed to the default branch'),
   },
 };
+
+const KEY_METRICS_TITLE = s__('ValueStreamAnalytics|Key metrics');
+const KEY_METRICS_KEYS = ['lead_time', 'cycle_time', 'issues', 'commits', 'deploys'];
+
+const DORA_METRICS_TITLE = s__('ValueStreamAnalytics|DORA metrics');
+const DORA_METRICS_KEYS = ['deployment_frequency', 'lead_time_for_changes'];
+
+export const VSA_METRICS_GROUPS = [
+  { key: 'key_metrics', title: KEY_METRICS_TITLE, keys: KEY_METRICS_KEYS },
+  { key: 'dora_metrics', title: DORA_METRICS_TITLE, keys: DORA_METRICS_KEYS },
+];