1 files changed, 17 insertions, 1 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 cc7b554f32c..f917248cd13 100644
--- a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
+++ b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
@@ -4,6 +4,7 @@ import { isEqual, keyBy } from 'lodash';
 import { createAlert } from '~/flash';
 import { sprintf, s__ } from '~/locale';
 import { fetchMetricsData, removeFlash } from '../utils';
+import ValueStreamsDashboardLink from './value_streams_dashboard_link.vue';
 import MetricTile from './metric_tile.vue';
 
 const extractMetricsGroupData = (keyList = [], data = []) => {
@@ -28,6 +29,7 @@ export default {
   components: {
     GlSkeletonLoader,
     MetricTile,
+    ValueStreamsDashboardLink,
   },
   props: {
     requestPath: {
@@ -52,6 +54,11 @@ export default {
       required: false,
       default: () => [],
     },
+    dashboardsPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -76,6 +83,10 @@ export default {
     this.fetchData();
   },
   methods: {
+    shouldDisplayDashboardLink(index) {
+      // When we have groups of metrics, we should only display the link for the first group
+      return index === 0 && this.dashboardsPath;
+    },
     fetchData() {
       removeFlash();
       this.isLoading = true;
@@ -110,7 +121,7 @@ export default {
     <template v-else>
       <div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
         <div
-          v-for="group in groupedMetrics"
+          v-for="(group, groupIndex) in groupedMetrics"
           :key="group.key"
           class="gl-mb-7"
           data-testid="vsa-metrics-group"
@@ -123,6 +134,11 @@ export default {
               :metric="metric"
               class="gl-mt-5 gl-pr-10"
             />
+            <value-streams-dashboard-link
+              v-if="shouldDisplayDashboardLink(groupIndex)"
+              class="gl-mt-5"
+              :request-path="dashboardsPath"
+            />
           </div>
         </div>
       </div>