Add chart tooltips

Use tooltips for metrics graph data

2 files changed, 39 insertions, 3 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index a0d6b91ff02..ec0e33a1927 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -3,12 +3,14 @@ import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
+import Icon from '~/vue_shared/components/icon.vue';
 
 let debouncedResize;
 
 export default {
   components: {
     GlAreaChart,
+    Icon,
   },
   inheritAttrs: false,
   props: {
@@ -47,6 +49,12 @@ export default {
   },
   data() {
     return {
+      tooltip: {
+        title: '',
+        content: '',
+        isDeployment: false,
+        sha: '',
+      },
       width: 0,
       height: 0,
       scatterSymbol: undefined,
@@ -148,8 +156,17 @@ export default {
   },
   methods: {
     formatTooltipText(params) {
-      const [date, value] = params;
-      return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)];
+      const [seriesData] = params.seriesData;
+      this.tooltip.isDeployment = seriesData.componentSubType === 'scatter';
+      this.tooltip.title = dateFormat(params.value, 'dd mmm yyyy, h:MMTT');
+      if (this.tooltip.isDeployment) {
+        const [deploy] = this.recentDeployments.filter(
+          deployment => deployment.createdAt === seriesData.value[0],
+        );
+        this.tooltip.sha = deploy.sha.substring(0, 8);
+      } else {
+        this.tooltip.content = `${this.yAxisLabel} ${seriesData.value[1].toFixed(3)}`;
+      }
     },
     getScatterSymbol() {
       getSvgIconPathContent('rocket')
@@ -184,6 +201,22 @@ export default {
       :thresholds="alertData"
       :width="width"
       :height="height"
-    />
+    >
+      <template slot="tooltipTitle">
+        <div v-if="tooltip.isDeployment">
+          {{ __('Deployed') }}
+        </div>
+        {{ tooltip.title }}
+      </template>
+      <template slot="tooltipContent">
+        <div v-if="tooltip.isDeployment" class="d-flex align-items-center">
+          <icon name="commit" class="mr-2" />
+          {{ tooltip.sha }}
+        </div>
+        <template v-else>
+          {{ tooltip.content }}
+        </template>
+      </template>
+    </gl-area-chart>
   </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 24ca8744414..f426652ee4d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2623,6 +2623,9 @@ msgstr ""
 msgid "DeployTokens|Your new project deploy token has been created."
 msgstr ""
 
+msgid "Deployed"
+msgstr ""
+
 msgid "Deployed to"
 msgstr ""