1 files changed, 51 insertions, 46 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/annotations.js b/app/assets/javascripts/monitoring/components/charts/annotations.js
index 947750b3721..418107c4126 100644
--- a/app/assets/javascripts/monitoring/components/charts/annotations.js
+++ b/app/assets/javascripts/monitoring/components/charts/annotations.js
@@ -1,20 +1,20 @@
-import { graphTypes, symbolSizes, colorValues } from '../../constants';
+import { graphTypes, symbolSizes, colorValues, annotationsSymbolIcon } from '../../constants';
 
 /**
  * Annotations and deployments are decoration layers on
  * top of the actual chart data. We use a scatter plot to
  * display this information. Each chart has its coordinate
- * system based on data and irresptive of the data, these
+ * system based on data and irrespective of the data, these
  * decorations have to be placed in specific locations.
  * For this reason, annotations have their own coordinate system,
  *
  * As of %12.9, only deployment icons, a type of annotations, need
  * to be displayed on the chart.
  *
- * After https://gitlab.com/gitlab-org/gitlab/-/issues/211418,
- * annotations and deployments will co-exist in the same
- * series as they logically belong together. Annotations will be
- * passed as markLine objects.
+ * Annotations and deployments co-exist in the same series as
+ * they logically belong together. Annotations are passed as
+ * markLines and markPoints while deployments are passed as
+ * data points with custom icons.
  */
 
 /**
@@ -45,42 +45,49 @@ export const annotationsYAxis = {
  * Fetched list of annotations are parsed into a
  * format the eCharts accepts to draw markLines
  *
- * If Annotation is a single line, the `starting_at` property
- * has a value and the `ending_at` is null. Because annotations
- * only supports lines the `ending_at` value does not exist yet.
- *
+ * If Annotation is a single line, the `startingAt` property
+ * has a value and the `endingAt` is null. Because annotations
+ * only supports lines the `endingAt` value does not exist yet.
  *
  * @param {Object} annotation object
  * @returns {Object} markLine object
  */
-export const parseAnnotations = ({ starting_at = '', color = colorValues.primaryColor }) => ({
-  xAxis: starting_at,
-  lineStyle: {
-    color,
-  },
-});
+export const parseAnnotations = annotations =>
+  annotations.reduce(
+    (acc, annotation) => {
+      acc.lines.push({
+        xAxis: annotation.startingAt,
+        lineStyle: {
+          color: colorValues.primaryColor,
+        },
+      });
+
+      acc.points.push({
+        name: 'annotations',
+        xAxis: annotation.startingAt,
+        yAxis: annotationsYAxisCoords.min,
+        tooltipData: {
+          title: annotation.startingAt,
+          content: annotation.description,
+        },
+      });
+
+      return acc;
+    },
+    { lines: [], points: [] },
+  );
 
 /**
- * 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.
+ * This method generates a decorative series that has
+ * deployments as data points with custom icons and
+ * annotations as markLines and markPoints
  *
  * @param {Array} deployments deployments data
  * @returns {Object} annotation series object
  */
 export const generateAnnotationsSeries = ({ deployments = [], annotations = [] } = {}) => {
   // deployment data points
-  const deploymentsData = deployments.map(deployment => {
+  const data = deployments.map(deployment => {
     return {
       name: 'deployments',
       value: [deployment.createdAt, annotationsYAxisCoords.pos],
@@ -98,31 +105,29 @@ export const generateAnnotationsSeries = ({ deployments = [], annotations = [] }
     };
   });
 
-  // annotation data points
-  const annotationsData = annotations.map(annotation => {
-    return {
-      name: 'annotations',
-      value: [annotation.starting_at, annotationsYAxisCoords.pos],
-      // style options
-      symbol: 'none',
-      // metadata that are accessible in `formatTooltipText` method
-      tooltipData: {
-        description: annotation.description,
-      },
-    };
-  });
+  const parsedAnnotations = parseAnnotations(annotations);
 
-  // annotation markLine option
+  // markLine option draws the annotations dotted line
   const markLine = {
     symbol: 'none',
     silent: true,
-    data: annotations.map(parseAnnotations),
+    data: parsedAnnotations.lines,
+  };
+
+  // markPoints are the arrows under the annotations lines
+  const markPoint = {
+    symbol: annotationsSymbolIcon,
+    symbolSize: '8',
+    symbolOffset: [0, ' 60%'],
+    data: parsedAnnotations.points,
   };
 
   return {
+    name: 'annotations',
     type: graphTypes.annotationsData,
     yAxisIndex: 1, // annotationsYAxis index
-    data: [...deploymentsData, ...annotationsData],
+    data,
     markLine,
+    markPoint,
   };
 };