Added deployment data to metrics graphs

Closes #26914

app/assets/javascripts/monitoring/deployments.js

+import d3 from 'd3';
+
+export default class Deployments {
+  constructor(width) {
+    this.width = width;
+    this.timeFormat = d3.time.format('%b %d, %Y, %H:%M%p');
+  }
+
+  init(chartData) {
+    this.chartData = chartData;
+
+    this.x = d3.time.scale().range([0, this.width]);
+    this.x.domain(d3.extent(this.chartData, d => d.time));
+
+    this.getData();
+  }
+
+  getData() {
+    $.ajax({
+      url: 'http://192.168.0.2:3000/root/hello-world/environments/21/deployments',
+      dataType: 'JSON',
+    })
+    .done((data) => {
+      this.data = [];
+
+      data.deployments.forEach((deployment) => {
+        const date = new Date(deployment.created_at);
+
+        if (this.x(date) >= 0) {
+          this.data.push({
+            id: deployment.id,
+            time: new Date(deployment.created_at),
+            sha: deployment.sha,
+          });
+        }
+      });
+
+      this.plotData();
+    });
+  }
+
+  plotData() {
+    const charts = d3.selectAll('.prometheus-graph .graph-container');
+
+    charts
+      .each((d, i) => {
+        const chart = d3.select(charts[0][i]);
+
+        this.createLine(chart);
+        this.createDeployInfoBox(chart);
+      });
+  }
+
+  createLine(chart) {
+    chart.append('g')
+      .attr('class', 'deploy-info')
+      .selectAll('.deploy-info')
+      .data(this.data)
+      .enter()
+      .append('g')
+      .attr('class', d => `deploy-info-${d.id}`)
+      .attr('transform', d => `translate(${Math.floor(this.x(d.time)) + 1}, -1)`)
+      .append('line')
+      .attr('class', 'deployment-line')
+      .attr('stroke', '#000000')
+      .attr('stroke-width', '2')
+      .attr({
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: chart.node().getBoundingClientRect().height - 22,
+      });
+  }
+
+  createDeployInfoBox(chart) {
+    this.data.forEach((d) => {
+      const group = chart.select(`.deploy-info-${d.id}`)
+        .append('svg')
+        .attr('class', 'rect-text-metric deploy-info-rect')
+        .attr('x', '5')
+        .attr('y', '0')
+        .attr('width', 100)
+        .attr('height', 35);
+
+      group.append('rect')
+        .attr('class', 'rect-metric')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('rx', 3)
+        .attr('width', '100%')
+        .attr('height', '100%')
+
+      const text = group.append('text')
+        .attr('x', 5)
+        .attr('y', '50%')
+        .attr('style', 'dominant-baseline: middle;')
+        .text((d) => {
+          return `${d.sha.slice(0, 6)} - ${this.timeFormat(d.time)}`;
+        });
+
+      group.attr('width', Math.floor(text.node().getBoundingClientRect().width) + 10);
+    });
+  }
+}

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -3,6 +3,7 @@
 
 import d3 from 'd3';
 import statusCodes from '~/lib/utils/http_status';
+import Deployments from './deployments';
 import '../lib/utils/common_utils';
 import '../flash';
 
@@ -25,6 +26,8 @@ class PrometheusGraph {
     this.width = parentContainerWidth - this.margin.left - this.margin.right;
     this.height = 400 - this.margin.top - this.margin.bottom;
     this.backOffRequestCounter = 0;
+    this.deployments = new Deployments(this.width);
+
     this.configureGraph();
     this.init();
   }
@@ -45,6 +48,7 @@ class PrometheusGraph {
       } else {
         this.transformData(metricsResponse);
         this.createGraph();
+        this.deployments.init(this.data[Object.keys(this.data)[0]]);
       }
     });
   }
@@ -64,6 +68,7 @@ class PrometheusGraph {
         .attr('width', this.width + this.margin.left + this.margin.right)
         .attr('height', this.height + this.margin.bottom + this.margin.top)
         .append('g')
+          .attr('class', 'graph-container')
           .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
 
     const axisLabelContainer = d3.select(prometheusGraphContainer)
@@ -204,14 +209,13 @@ class PrometheusGraph {
     const d0 = valuesToPlot[timeValueIndex - 1];
     const d1 = valuesToPlot[timeValueIndex];
     const currentData = timeValueFromOverlay - d0.time > d1.time - timeValueFromOverlay ? d1 : d0;
-    const maxValueMetric = y(d3.max(valuesToPlot.map(metricValue => metricValue.value)));
-    const currentTimeCoordinate = x(currentData.time);
+    const maxValueMetric = Math.floor(y(d3.max(valuesToPlot.map(metricValue => metricValue.value))));
+    const currentTimeCoordinate = Math.floor(x(currentData.time));
     const graphSpecifics = this.graphSpecificProperties[key];
     // Remove the current selectors
     d3.selectAll(`${prometheusGraphContainer} .selected-metric-line`).remove();
     d3.selectAll(`${prometheusGraphContainer} .circle-metric`).remove();
-    d3.selectAll(`${prometheusGraphContainer} .rect-text-metric`).remove();
-    d3.selectAll(`${prometheusGraphContainer} .text-metric`).remove();
+    d3.selectAll(`${prometheusGraphContainer} .rect-text-metric:not(.deploy-info-rect)`).remove();
 
     chart.append('line')
     .attr('class', 'selected-metric-line')
@@ -230,27 +234,28 @@ class PrometheusGraph {
     .attr('r', this.commonGraphProperties.circle_radius_metric);
 
     // The little box with text
-    const rectTextMetric = chart.append('g')
+    const rectTextMetric = chart.append('svg')
     .attr('class', 'rect-text-metric')
-    .attr('translate', `(${currentTimeCoordinate}, ${y(currentData.value)})`);
+    .attr('x', currentTimeCoordinate)
+    .attr('y', -1);
 
     rectTextMetric.append('rect')
     .attr('class', 'rect-metric')
-    .attr('x', currentTimeCoordinate + 10)
-    .attr('y', maxValueMetric)
+    .attr('x', 10)
+    .attr('y', 0)
     .attr('width', this.commonGraphProperties.rect_text_width)
     .attr('height', this.commonGraphProperties.rect_text_height);
 
     rectTextMetric.append('text')
     .attr('class', 'text-metric')
-    .attr('x', currentTimeCoordinate + 35)
-    .attr('y', maxValueMetric + 35)
+    .attr('x', 35)
+    .attr('y', 35)
     .text(timeFormat(currentData.time));
 
     rectTextMetric.append('text')
     .attr('class', 'text-metric-date')
-    .attr('x', currentTimeCoordinate + 15)
-    .attr('y', maxValueMetric + 15)
+    .attr('x', 15)
+    .attr('y', 15)
     .text(dayFormat(currentData.time));
 
     // Update the text

app/assets/stylesheets/pages/environments.scss

@@ -157,7 +157,8 @@
 
 .prometheus-graph {
   text {
-    fill: $stat-graph-axis-fill;
+    fill: #525252;
+    stroke-width: 0;
   }
 }
 
@@ -200,22 +201,15 @@
 .rect-text-metric {
   fill: $white-light;
   stroke-width: 1;
-  stroke: $black;
+  stroke: #e1e1e1;
 }
 
 .rect-axis-text {
   fill: $white-light;
 }
 
-.text-metric,
-.text-median-metric,
-.text-metric-usage,
-.text-metric-date {
-  fill: $black;
-}
-
-.text-metric-date {
-  font-weight: 200;
+.text-metric {
+  font-weight: 600;
 }
 
 .selected-metric-line {