Fixed up some code

Improved the design
Pulls the endpoint from the HAML

app/assets/javascripts/monitoring/deployments.js

 import d3 from 'd3';
 
 export default class Deployments {
-  constructor(width) {
+  constructor(width, height) {
     this.width = width;
+    this.height = height;
     this.timeFormat = d3.time.format('%b %d, %Y, %H:%M%p');
+
+    this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
   }
 
   init(chartData) {
@@ -12,12 +15,14 @@ export default class Deployments {
     this.x = d3.time.scale().range([0, this.width]);
     this.x.domain(d3.extent(this.chartData, d => d.time));
 
+    this.charts = d3.selectAll('.prometheus-graph .graph-container');
+
     this.getData();
   }
 
   getData() {
     $.ajax({
-      url: 'http://192.168.0.2:3000/root/hello-world/environments/21/deployments',
+      url: this.endpoint,
       dataType: 'JSON',
     })
     .done((data) => {
@@ -31,6 +36,8 @@ export default class Deployments {
             id: deployment.id,
             time: new Date(deployment.created_at),
             sha: deployment.sha,
+            tag: deployment.tag,
+            ref: deployment.ref.name,
           });
         }
       });
@@ -40,15 +47,12 @@ export default class Deployments {
   }
 
   plotData() {
-    const charts = d3.selectAll('.prometheus-graph .graph-container');
-
-    charts
-      .each((d, i) => {
-        const chart = d3.select(charts[0][i]);
+    this.charts.each((d, i) => {
+      const chart = d3.select(this.charts[0][i]);
 
-        this.createLine(chart);
-        this.createDeployInfoBox(chart);
-      });
+      this.createLine(chart);
+      this.createDeployInfoBox(chart);
+    });
   }
 
   createLine(chart) {
@@ -59,16 +63,14 @@ export default class Deployments {
       .enter()
       .append('g')
       .attr('class', d => `deploy-info-${d.id}`)
-      .attr('transform', d => `translate(${Math.floor(this.x(d.time)) + 1}, -1)`)
+      .attr('transform', d => `translate(${Math.floor(this.x(d.time)) + 1}, 0)`)
       .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,
+        y2: this.height,
       });
   }
 
@@ -76,29 +78,31 @@ export default class Deployments {
     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('x', 3)
         .attr('y', 0)
-        .attr('rx', 3)
-        .attr('width', '100%')
-        .attr('height', '100%')
+        .attr('height', 38);
+
+      const rect = group.append('rect')
+        .attr('class', 'rect-text-metric deploy-info-rect rect-metric')
+        .attr('x', 1)
+        .attr('y', 1)
+        .attr('rx', 2)
+        .attr('height', 35);
 
       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)}`;
+          const isTag = d.tag;
+          const refText = isTag ? d.ref : d.sha.slice(0, 6);
+
+          return `${refText} - ${this.timeFormat(d.time)}`;
         });
 
-      group.attr('width', Math.floor(text.node().getBoundingClientRect().width) + 10);
+      group.attr('width', Math.floor(text.node().getBoundingClientRect().width) + 14);
+
+      rect.attr('width', Math.floor(text.node().getBoundingClientRect().width) + 10);
     });
   }
 }

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -26,7 +26,7 @@ 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.deployments = new Deployments(this.width, this.height);
 
     this.configureGraph();
     this.init();
@@ -89,6 +89,7 @@ class PrometheusGraph {
         .scale(y)
         .ticks(this.commonGraphProperties.axis_no_ticks)
         .tickSize(-this.width)
+        .outerTickSize(0)
         .orient('left');
 
     this.createAxisLabelContainers(axisLabelContainer, key);
@@ -237,7 +238,7 @@ class PrometheusGraph {
     const rectTextMetric = chart.append('svg')
     .attr('class', 'rect-text-metric')
     .attr('x', currentTimeCoordinate)
-    .attr('y', -1);
+    .attr('y', 0);
 
     rectTextMetric.append('rect')
     .attr('class', 'rect-metric')

app/assets/stylesheets/pages/environments.scss

@@ -213,6 +213,11 @@
 }
 
 .selected-metric-line {
-  stroke: $black;
+  stroke: #8c8c8c;
   stroke-width: 1;
 }
+
+.deployment-line {
+  stroke: #000;
+  stroke-width: 2;
+}

app/views/projects/environments/metrics.html.haml

@@ -5,7 +5,7 @@
   = page_specific_javascript_bundle_tag('monitoring')
 = render "projects/pipelines/head"
 
-%div{ class: container_class }
+#js-metrics{ class: container_class, data: { deployment_endpoint: namespace_project_environment_deployments_path(@project.namespace, @project, @environment, format: :json) } }
   .top-area
     .row
       .col-sm-6

spec/javascripts/fixtures/environments/metrics.html.haml

 %div
+  %svg.graph-line-shadow
   .top-area
     .row
       .col-sm-6
@@ -9,4 +10,4 @@
       %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
   .row
     .col-sm-12
-      %svg.prometheus-graph{ 'graph-type' => 'memory_values' }
\ No newline at end of file
+      %svg.prometheus-graph{ 'graph-type' => 'memory_values' }