Turn commit sha in monitor charts popover to link11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable

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

4 files changed, 29 insertions, 6 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index 9a3ce5174db..81773bd140e 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -1,5 +1,6 @@
 <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>
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 23687c54fd3..2cbda8ea05d 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/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)"
diff --git a/changelogs/unreleased/11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable.yml b/changelogs/unreleased/11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable.yml
new file mode 100644
index 00000000000..606abe818b4
--- /dev/null
+++ b/changelogs/unreleased/11888-regression-deploy-correlation-markers-on-monitoring-graphs-not-clickable.yml
@@ -0,0 +1,5 @@
+---
+title: Turn commit sha in monitor charts popover to link
+merge_request: 29914
+author:
+type: fixed
diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js
index ac7e0bb12a1..d3a76f33679 100644
--- a/spec/javascripts/monitoring/charts/area_spec.js
+++ b/spec/javascripts/monitoring/charts/area_spec.js
@@ -1,14 +1,19 @@
 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);
         });
       });
     });