Add latest changes from gitlab-org/gitlab@master

3 files changed, 107 insertions, 43 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/annotations.js b/app/assets/javascripts/monitoring/components/charts/annotations.js
index cc2b2bd0900..b0c89d5e374 100644
--- a/app/assets/javascripts/monitoring/components/charts/annotations.js
+++ b/app/assets/javascripts/monitoring/components/charts/annotations.js
@@ -1,4 +1,4 @@
-import { graphTypes, symbolSizes } from '../../constants';
+import { graphTypes, symbolSizes, colorValues } from '../../constants';
 
 /**
  * Annotations and deployments are decoration layers on
@@ -40,33 +40,50 @@ export const annotationsYAxis = {
     formatter: () => {},
   },
 };
+
 /**
- * This util method check if a particular series data point
- * is of annotation type. Annotations are generally scatter
- * plot charts
+ * Fetched list of annotations are parsed into a
+ * format the eCharts accepts to draw markLines
+ *
+ * If Annotation is a single line, the `from` property
+ * has a value and the `to` is null. Because annotations
+ * only supports lines the from value does not exist yet.
+ *
  *
- * @param {String} type series component type
- * @returns {Boolean}
+ * @param {Object} annotation object
+ * @returns {Object} markLine object
  */
-export const isAnnotation = type => type === graphTypes.annotationsData;
+export const parseAnnotations = ({
+  from: annotationFrom = '',
+  color = colorValues.primaryColor,
+}) => ({
+  xAxis: annotationFrom,
+  lineStyle: {
+    color,
+  },
+});
 
 /**
- * This method currently supports only deployments. After
- * https://gitlab.com/gitlab-org/gitlab/-/issues/211418 annotations
- * support will be added in this method.
+ * This method currently generates deployments and annotations
+ * but are not used in the chart. The method calling
+ * generateAnnotationsSeries will not pass annotations until
+ * https://gitlab.com/gitlab-org/gitlab/-/issues/211330 is
+ * implemented.
  *
  * This method is extracted out of the charts so that
  * annotation lines can be easily supported in
  * the future.
  *
+ * In order to make hover work, hidden annotation data points
+ * are created along with the markLines. These data points have
+ * the necessart metadata that is used to display in the tooltip.
+ *
  * @param {Array} deployments deployments data
  * @returns {Object} annotation series object
  */
-export const generateAnnotationsSeries = (deployments = []) => {
-  if (!deployments.length) {
-    return [];
-  }
-  const data = deployments.map(deployment => {
+export const generateAnnotationsSeries = ({ deployments = [], annotations = [] } = {}) => {
+  // deployment data points
+  const deploymentsData = deployments.map(deployment => {
     return {
       name: 'deployments',
       value: [deployment.createdAt, annotationsYAxisCoords.pos],
@@ -78,9 +95,27 @@ export const generateAnnotationsSeries = (deployments = []) => {
     };
   });
 
+  // annotation data points
+  const annotationsData = annotations.map(annotation => {
+    return {
+      name: 'annotations',
+      value: [annotation.from, annotationsYAxisCoords.pos],
+      symbol: 'none',
+      description: annotation.description,
+    };
+  });
+
+  // annotation markLine option
+  const markLine = {
+    symbol: 'none',
+    silent: true,
+    data: annotations.map(parseAnnotations),
+  };
+
   return {
     type: graphTypes.annotationsData,
     yAxisIndex: 1, // annotationsYAxis index
-    data,
+    data: [...deploymentsData, ...annotationsData],
+    markLine,
   };
 };
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 73c63a0580f..e43a0131528 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -6,9 +6,9 @@ import dateFormat from 'dateformat';
 import { s__, __ } from '~/locale';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
-import { chartHeight, lineTypes, lineWidths, dateFormats } from '../../constants';
+import { chartHeight, lineTypes, lineWidths, dateFormats, tooltipTypes } from '../../constants';
 import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options';
-import { annotationsYAxis, generateAnnotationsSeries, isAnnotation } from './annotations';
+import { annotationsYAxis, generateAnnotationsSeries } from './annotations';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
 
@@ -20,6 +20,7 @@ const events = {
 };
 
 export default {
+  tooltipTypes,
   components: {
     GlAreaChart,
     GlLineChart,
@@ -88,10 +89,10 @@ export default {
   data() {
     return {
       tooltip: {
+        type: '',
         title: '',
         content: [],
         commitUrl: '',
-        isDeployment: false,
         sha: '',
       },
       width: 0,
@@ -137,7 +138,13 @@ export default {
       }, []);
     },
     chartOptionSeries() {
-      return (this.option.series || []).concat(generateAnnotationsSeries(this.recentDeployments));
+      // After https://gitlab.com/gitlab-org/gitlab/-/issues/211330 is implemented,
+      // this method will have access to annotations data
+      return (this.option.series || []).concat(
+        generateAnnotationsSeries({
+          deployments: this.recentDeployments,
+        }),
+      );
     },
     chartOptions() {
       const { yAxis, xAxis } = this.option;
@@ -246,6 +253,9 @@ export default {
     formatLegendLabel(query) {
       return `${query.label}`;
     },
+    isTooltipOfType(tooltipType, defaultType) {
+      return tooltipType === defaultType;
+    },
     formatTooltipText(params) {
       this.tooltip.title = dateFormat(params.value, dateFormats.default);
       this.tooltip.content = [];
@@ -253,13 +263,18 @@ export default {
       params.seriesData.forEach(dataPoint => {
         if (dataPoint.value) {
           const [xVal, yVal] = dataPoint.value;
-          this.tooltip.isDeployment = isAnnotation(dataPoint.componentSubType);
-          if (this.tooltip.isDeployment) {
+          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;
+          } else if (
+            this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.annotations)
+          ) {
+            const { data } = dataPoint;
+            this.tooltip.content.push(data?.description);
           } else {
             const { seriesName, color, dataIndex } = dataPoint;
 
@@ -288,7 +303,6 @@ export default {
     onChartUpdated(eChart) {
       [this.primaryColor] = eChart.getOption().color;
     },
-
     onChartCreated(eChart) {
       // Emit a datazoom event that corresponds to the eChart
       // `datazoom` event.
@@ -346,7 +360,7 @@ export default {
       @created="onChartCreated"
       @updated="onChartUpdated"
     >
-      <template v-if="tooltip.isDeployment">
+      <template v-if="isTooltipOfType(tooltip.type, this.$options.tooltipTypes.deployments)">
         <template slot="tooltipTitle">
           {{ __('Deployed') }}
         </template>
@@ -355,29 +369,35 @@ export default {
           <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
         </div>
       </template>
+      <template v-else-if="isTooltipOfType(tooltip.type, this.$options.tooltipTypes.annotations)">
+        <template slot="tooltipTitle">
+          <div class="text-nowrap">
+            {{ tooltip.title }}
+          </div>
+        </template>
+        <div slot="tooltipContent" class="d-flex align-items-center">
+          {{ tooltip.content.join('\n') }}
+        </div>
+      </template>
       <template v-else>
         <template slot="tooltipTitle">
-          <slot name="tooltipTitle">
-            <div class="text-nowrap">
-              {{ tooltip.title }}
-            </div>
-          </slot>
+          <div class="text-nowrap">
+            {{ tooltip.title }}
+          </div>
         </template>
-        <template slot="tooltipContent">
-          <slot name="tooltipContent" :tooltip="tooltip">
-            <div
-              v-for="(content, key) in tooltip.content"
-              :key="key"
-              class="d-flex justify-content-between"
-            >
-              <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
-                {{ content.name }}
-              </gl-chart-series-label>
-              <div class="prepend-left-32">
-                {{ content.value }}
-              </div>
+        <template slot="tooltipContent" :tooltip="tooltip">
+          <div
+            v-for="(content, key) in tooltip.content"
+            :key="key"
+            class="d-flex justify-content-between"
+          >
+            <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
+              {{ content.name }}
+            </gl-chart-series-label>
+            <div class="prepend-left-32">
+              {{ content.value }}
             </div>
-          </slot>
+          </div>
         </template>
       </template>
     </component>
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index e092c0ccae0..6af1d399cfc 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -115,3 +115,12 @@ export const NOT_IN_DB_PREFIX = 'NO_DB';
  * Used as a value for the 'states' query filter
  */
 export const ENVIRONMENT_AVAILABLE_STATE = 'available';
+
+/**
+ * Time series charts have different types of
+ * tooltip based on the hovered data point.
+ */
+export const tooltipTypes = {
+  deployments: 'deployments',
+  annotations: 'annotations',
+};