Monitoring chart tooltip improvement

This MR improves monitoring dashboard charts
tooltip display logic

app/assets/javascripts/monitoring/components/charts/annotations.js

@@ -87,11 +87,17 @@ export const generateAnnotationsSeries = ({ deployments = [], annotations = [] }
     return {
       name: 'deployments',
       value: [deployment.createdAt, annotationsYAxisCoords.pos],
+      // style options
       symbol: deployment.icon,
       symbolSize: symbolSizes.default,
       itemStyle: {
         color: deployment.color,
       },
+      // metadata that are accessible in `formatTooltipText` method
+      tooltipData: {
+        sha: deployment.sha.substring(0, 8),
+        commitUrl: deployment.commitUrl,
+      },
     };
   });
 
@@ -100,8 +106,12 @@ export const generateAnnotationsSeries = ({ deployments = [], annotations = [] }
     return {
       name: 'annotations',
       value: [annotation.from, annotationsYAxisCoords.pos],
+      // style options
       symbol: 'none',
+      // metadata that are accessible in `formatTooltipText` method
+      tooltipData: {
         description: annotation.description,
+      },
     };
   });
 

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

@@ -262,19 +262,17 @@ export default {
 
       params.seriesData.forEach(dataPoint => {
         if (dataPoint.value) {
-          const [xVal, yVal] = dataPoint.value;
+          const [, yVal] = dataPoint.value;
           this.tooltip.type = dataPoint.name;
           if (this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.deployments)) {
-            const [deploy] = this.recentDeployments.filter(
-              deployment => deployment.createdAt === xVal,
-            );
-            this.tooltip.sha = deploy.sha.substring(0, 8);
-            this.tooltip.commitUrl = deploy.commitUrl;
+            const { data = {} } = dataPoint;
+            this.tooltip.sha = data?.tooltipData?.sha;
+            this.tooltip.commitUrl = data?.tooltipData?.commitUrl;
           } else if (
             this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.annotations)
           ) {
             const { data } = dataPoint;
-            this.tooltip.content.push(data?.description);
+            this.tooltip.content.push(data?.tooltipData?.description);
           } else {
             const { seriesName, color, dataIndex } = dataPoint;
 

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -155,43 +155,56 @@ describe('Time series component', () => {
 
       describe('methods', () => {
         describe('formatTooltipText', () => {
-          let mockDate;
-          let mockCommitUrl;
-          let generateSeriesData;
-
-          beforeEach(() => {
-            mockDate = deploymentData[0].created_at;
-            mockCommitUrl = deploymentData[0].commitUrl;
-            generateSeriesData = type => ({
+          const mockCommitUrl = deploymentData[0].commitUrl;
+          const mockDate = deploymentData[0].created_at;
+          const mockSha = 'f5bcd1d9';
+          const mockLineSeriesData = () => ({
             seriesData: [
               {
                 seriesName: timeSeriesChart.vm.chartData[0].name,
-                  componentSubType: type,
+                componentSubType: 'line',
                 value: [mockDate, 5.55555],
                 dataIndex: 0,
-                  ...(type === 'scatter' && { name: 'deployments' }),
               },
             ],
             value: mockDate,
           });
-          });
+
+          const annotationsMetadata = {
+            tooltipData: {
+              sha: mockSha,
+              commitUrl: mockCommitUrl,
+            },
+          };
+
+          const mockAnnotationsSeriesData = {
+            seriesData: [
+              {
+                componentSubType: 'scatter',
+                seriesName: 'series01',
+                dataIndex: 0,
+                value: [mockDate, 5.55555],
+                type: 'scatter',
+                name: 'deployments',
+              },
+            ],
+            value: mockDate,
+          };
 
           it('does not throw error if data point is outside the zoom range', () => {
-            const seriesDataWithoutValue = generateSeriesData('line');
-            expect(
-              timeSeriesChart.vm.formatTooltipText({
-                ...seriesDataWithoutValue,
-                seriesData: seriesDataWithoutValue.seriesData.map(data => ({
+            const seriesDataWithoutValue = {
+              ...mockLineSeriesData(),
+              seriesData: mockLineSeriesData().seriesData.map(data => ({
                 ...data,
                 value: undefined,
               })),
-              }),
-            ).toBeUndefined();
+            };
+            expect(timeSeriesChart.vm.formatTooltipText(seriesDataWithoutValue)).toBeUndefined();
           });
 
           describe('when series is of line type', () => {
             beforeEach(done => {
-              timeSeriesChart.vm.formatTooltipText(generateSeriesData('line'));
+              timeSeriesChart.vm.formatTooltipText(mockLineSeriesData());
               timeSeriesChart.vm.$nextTick(done);
             });
 
@@ -223,7 +236,14 @@ describe('Time series component', () => {
 
           describe('when series is of scatter type, for deployments', () => {
             beforeEach(() => {
-              timeSeriesChart.vm.formatTooltipText(generateSeriesData('scatter'));
+              timeSeriesChart.vm.formatTooltipText({
+                ...mockAnnotationsSeriesData,
+                seriesData: mockAnnotationsSeriesData.seriesData.map(data => ({
+                  ...data,
+                  data: annotationsMetadata,
+                })),
+              });
+              return timeSeriesChart.vm.$nextTick;
             });
 
             it('set tooltip type to deployments', () => {
@@ -242,6 +262,25 @@ describe('Time series component', () => {
               expect(timeSeriesChart.vm.tooltip.commitUrl).toBe(mockCommitUrl);
             });
           });
+
+          describe('when series is of scatter type and deployments data is missing', () => {
+            beforeEach(() => {
+              timeSeriesChart.vm.formatTooltipText(mockAnnotationsSeriesData);
+              return timeSeriesChart.vm.$nextTick;
+            });
+
+            it('formats tooltip title', () => {
+              expect(timeSeriesChart.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM');
+            });
+
+            it('formats tooltip sha', () => {
+              expect(timeSeriesChart.vm.tooltip.sha).toBeUndefined();
+            });
+
+            it('formats tooltip commit url', () => {
+              expect(timeSeriesChart.vm.tooltip.commitUrl).toBeUndefined();
+            });
+          });
         });
 
         describe('setSvg', () => {