1 files changed, 26 insertions, 23 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue b/app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue
index 7371ffd2c7c..9671742e564 100644
--- a/app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue
+++ b/app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue
@@ -1,11 +1,13 @@
 <script>
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlPopover } from '@gitlab/ui';
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { flatten } from 'lodash';
 import createFlash from '~/flash';
 import { sprintf, s__ } from '~/locale';
+import { redirectTo } from '~/lib/utils/url_utility';
 import { METRICS_POPOVER_CONTENT } from '../constants';
 import { removeFlash, prepareTimeMetricsData } from '../utils';
+import MetricPopover from './metric_popover.vue';
 
 const requestData = ({ request, endpoint, path, params, name }) => {
   return request({ endpoint, params, requestPath: path })
@@ -31,9 +33,9 @@ const fetchMetricsData = (reqs = [], path, params) => {
 export default {
   name: 'ValueStreamMetrics',
   components: {
-    GlPopover,
     GlSingleStat,
     GlSkeletonLoading,
+    MetricPopover,
   },
   props: {
     requestPath: {
@@ -76,32 +78,33 @@ export default {
           this.isLoading = false;
         });
     },
+    hasLinks(links) {
+      return links?.length && links[0].url;
+    },
+    clickHandler({ links }) {
+      if (this.hasLinks(links)) {
+        redirectTo(links[0].url);
+      }
+    },
   },
 };
 </script>
 <template>
   <div class="gl-display-flex gl-flex-wrap" data-testid="vsa-time-metrics">
-    <div v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6">
-      <gl-skeleton-loading />
+    <gl-skeleton-loading v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6" />
+    <div v-for="metric in metrics" v-show="!isLoading" :key="metric.key" class="gl-my-6 gl-pr-9">
+      <gl-single-stat
+        :id="metric.key"
+        :value="`${metric.value}`"
+        :title="metric.label"
+        :unit="metric.unit || ''"
+        :should-animate="true"
+        :animation-decimal-places="1"
+        :class="{ 'gl-hover-cursor-pointer': hasLinks(metric.links) }"
+        tabindex="0"
+        @click="clickHandler(metric)"
+      />
+      <metric-popover :metric="metric" :target="metric.key" />
     </div>
-    <template v-else>
-      <div v-for="metric in metrics" :key="metric.key" class="gl-my-6 gl-pr-9">
-        <gl-single-stat
-          :id="metric.key"
-          :value="`${metric.value}`"
-          :title="metric.label"
-          :unit="metric.unit || ''"
-          :should-animate="true"
-          :animation-decimal-places="1"
-          tabindex="0"
-        />
-        <gl-popover :target="metric.key" placement="bottom">
-          <template #title>
-            <span class="gl-display-block gl-text-left">{{ metric.label }}</span>
-          </template>
-          <span v-if="metric.description">{{ metric.description }}</span>
-        </gl-popover>
-      </div>
-    </template>
   </div>
 </template>