Turn commit sha in monitor charts popover to link

Commit sha in deployment popovers within monitoring dashboard are
not clickable or selectable. This commit makes those commit sha
links selectable and point to projects commit page

app/assets/javascripts/monitoring/components/charts/area.vue

 <script>
 import { __ } from '~/locale';
+import { GlLink } from '@gitlab/ui';
 import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
@@ -14,6 +15,7 @@ export default {
   components: {
     GlAreaChart,
     GlChartSeriesLabel,
+    GlLink,
     Icon,
   },
   inheritAttrs: false,
@@ -44,6 +46,10 @@ export default {
       required: false,
       default: () => [],
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
     thresholds: {
       type: Array,
       required: false,
@@ -55,6 +61,7 @@ export default {
       tooltip: {
         title: '',
         content: [],
+        commitUrl: '',
         isDeployment: false,
         sha: '',
       },
@@ -195,12 +202,13 @@ export default {
       this.tooltip.title = dateFormat(params.value, 'dd mmm yyyy, h:MMTT');
       this.tooltip.content = [];
       params.seriesData.forEach(seriesData => {
-        if (seriesData.componentSubType === graphTypes.deploymentData) {
-          this.tooltip.isDeployment = true;
+        this.tooltip.isDeployment = seriesData.componentSubType === graphTypes.deploymentData;
+        if (this.tooltip.isDeployment) {
           const [deploy] = this.recentDeployments.filter(
             deployment => deployment.createdAt === seriesData.value[0],
           );
           this.tooltip.sha = deploy.sha.substring(0, 8);
+          this.tooltip.commitUrl = deploy.commitUrl;
         } else {
           const { seriesName, color } = seriesData;
           // seriesData.value contains the chart's [x, y] value pair
@@ -259,7 +267,7 @@ export default {
         </template>
         <div slot="tooltipContent" class="d-flex align-items-center">
           <icon name="commit" class="mr-2" />
-          {{ tooltip.sha }}
+          <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
         </div>
       </template>
       <template v-else>

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -359,6 +359,7 @@ export default {
         <monitor-area-chart
           v-for="(graphData, graphIndex) in chartsWithData(groupData.metrics)"
           :key="graphIndex"
+          :project-path="projectPath"
           :graph-data="graphData"
           :deployment-data="deploymentData"
           :thresholds="getGraphAlertValues(graphData.queries)"

changelogs/unreleased/11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable.yml

+---
+title: Turn commit sha in monitor charts popover to link
+merge_request: 29914
+author:
+type: fixed

spec/javascripts/monitoring/charts/area_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
 import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper';
 import Area from '~/monitoring/components/charts/area.vue';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
+import { TEST_HOST } from 'spec/test_constants';
 import MonitoringMock, { deploymentData } from '../mock_data';
 
 describe('Area component', () => {
+  const mockSha = 'mockSha';
   const mockWidgets = 'mockWidgets';
   const mockSvgPathContent = 'mockSvgPathContent';
+  const projectPath = `${TEST_HOST}/path/to/project`;
+  const commitUrl = `${projectPath}/commit/${mockSha}`;
   let mockGraphData;
   let areaChart;
   let spriteSpy;
@@ -26,6 +31,7 @@ describe('Area component', () => {
         graphData: mockGraphData,
         containerWidth: 0,
         deploymentData: store.state.monitoringDashboard.deploymentData,
+        projectPath,
       },
       slots: {
         default: mockWidgets,
@@ -88,11 +94,14 @@ describe('Area component', () => {
           );
         });
 
-        it('renders commit sha in tooltip content', () => {
-          const mockSha = 'mockSha';
+        it('renders clickable commit sha in tooltip content', () => {
           areaChart.vm.tooltip.sha = mockSha;
+          areaChart.vm.tooltip.commitUrl = commitUrl;
 
-          expect(shallowWrapperContainsSlotText(glAreaChart, 'tooltipContent', mockSha)).toBe(true);
+          const commitLink = areaChart.find(GlLink);
+
+          expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true);
+          expect(commitLink.attributes('href')).toEqual(commitUrl);
         });
       });
     });