Shows deployment box on hover

app/assets/javascripts/monitoring/deployments.js

@@ -4,7 +4,8 @@ export default class Deployments {
   constructor(width, height) {
     this.width = width;
     this.height = height;
-    this.timeFormat = d3.time.format('%b %d, %Y, %H:%M%p');
+    this.dateFormat = d3.time.format('%b %d, %Y');
+    this.timeFormat = d3.time.format('%H:%M%p');
 
     this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
   }
@@ -29,15 +30,20 @@ export default class Deployments {
       this.data = [];
 
       data.deployments.forEach((deployment) => {
-        const date = new Date(deployment.created_at);
+        const coeff = 1000 * 60;
+        let time = new Date(deployment.created_at);
+        time = new Date(Math.round(time.getTime() / coeff) * coeff);
+        time.setSeconds(this.chartData[0].time.getSeconds());
+        const xPos = Math.floor(this.x(time));
 
-        if (this.x(date) >= 0) {
+        if (xPos >= 0) {
           this.data.push({
             id: deployment.id,
-            time: new Date(deployment.created_at),
+            time,
             sha: deployment.sha,
             tag: deployment.tag,
             ref: deployment.ref.name,
+            xPos,
           });
         }
       });
@@ -66,7 +72,7 @@ export default class Deployments {
       .append('g')
       .attr({
         class: d => `deploy-info-${d.id}`,
-        transform: d => `translate(${Math.floor(this.x(d.time)) + 1}, 0)`,
+        transform: d => `translate(${Math.floor(d.xPos) + 1}, 0)`,
       })
       .append('line')
       .attr({
@@ -85,7 +91,7 @@ export default class Deployments {
         .attr({
           x: 3,
           y: 0,
-          height: 41,
+          height: 58,
         });
 
       const rect = group.append('rect')
@@ -115,14 +121,46 @@ export default class Deployments {
 
       textGroup.append('text')
         .attr({
-          style: 'dominant-baseline: text-before-edge; font-weight: 600;',
+          style: 'dominant-baseline: text-before-edge;',
           y: 18,
         })
+        .text(() => this.dateFormat(d.time));
+
+      textGroup.append('text')
+        .attr({
+          style: 'dominant-baseline: text-before-edge;',
+          y: 36,
+        })
         .text(() => this.timeFormat(d.time));
 
       group.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 14);
 
       rect.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 10);
+
+      group.attr('class', 'js-deploy-info-box hidden');
     });
   }
+
+  static toggleDeployTextbox(deploy, showInfoBox) {
+    d3.selectAll(`.deploy-info-${deploy.id} .js-deploy-info-box`)
+      .classed('hidden', !showInfoBox);
+  }
+
+  mouseOverDeployInfo(mouseXPos) {
+    if (!this.data) return false;
+
+    let dataFound = false;
+
+    this.data.forEach((d) => {
+      if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
+        dataFound = true;
+
+        Deployments.toggleDeployTextbox(d, true);
+      } else {
+        Deployments.toggleDeployTextbox(d, false);
+      }
+    });
+
+    return dataFound;
+  }
 }

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -9,8 +9,8 @@ import '../flash';
 
 const prometheusGraphsContainer = '.prometheus-graph';
 const metricsEndpoint = 'metrics.json';
-const timeFormat = d3.time.format('%H:%M');
-const dayFormat = d3.time.format('%b %e, %a');
+const timeFormat = d3.time.format('%H:%M%p');
+const dayFormat = d3.time.format('%b %d, %Y');
 const bisectDate = d3.bisector(d => d.time).left;
 const extraAddedWidthParent = 100;
 
@@ -205,7 +205,8 @@ class PrometheusGraph {
 
   handleMouseOverGraph(x, y, valuesToPlot, chart, prometheusGraphContainer, key) {
     const rectOverlay = document.querySelector(`${prometheusGraphContainer} .prometheus-graph-overlay`);
-    const timeValueFromOverlay = x.invert(d3.mouse(rectOverlay)[0]);
+    const mouse = d3.mouse(rectOverlay)[0];
+    const timeValueFromOverlay = x.invert(mouse);
     const timeValueIndex = bisectDate(valuesToPlot, timeValueFromOverlay, 1);
     const d0 = valuesToPlot[timeValueIndex - 1];
     const d1 = valuesToPlot[timeValueIndex];
@@ -215,11 +216,21 @@ class PrometheusGraph {
     );
     const currentTimeCoordinate = Math.floor(x(currentData.time));
     const graphSpecifics = this.graphSpecificProperties[key];
+    const shouldHideTextMetric = this.deployments.mouseOverDeployInfo(mouse);
     // Remove the current selectors
     d3.selectAll(`${prometheusGraphContainer} .selected-metric-line`).remove();
     d3.selectAll(`${prometheusGraphContainer} .circle-metric`).remove();
     d3.selectAll(`${prometheusGraphContainer} .rect-text-metric:not(.deploy-info-rect)`).remove();
 
+    chart.append('circle')
+    .attr('class', 'circle-metric')
+    .attr('fill', graphSpecifics.line_color)
+    .attr('cx', currentTimeCoordinate)
+    .attr('cy', y(currentData.value))
+    .attr('r', this.commonGraphProperties.circle_radius_metric);
+
+    if (shouldHideTextMetric) return;
+
     chart.append('line')
     .attr('class', 'selected-metric-line')
     .attr({
@@ -229,13 +240,6 @@ class PrometheusGraph {
       y2: maxValueMetric,
     });
 
-    chart.append('circle')
-    .attr('class', 'circle-metric')
-    .attr('fill', graphSpecifics.line_color)
-    .attr('cx', currentTimeCoordinate)
-    .attr('cy', y(currentData.value))
-    .attr('r', this.commonGraphProperties.circle_radius_metric);
-
     // The little box with text
     const rectTextMetric = chart.append('svg')
     .attr('class', 'rect-text-metric')
@@ -244,20 +248,20 @@ class PrometheusGraph {
 
     rectTextMetric.append('rect')
     .attr('class', 'rect-metric')
-    .attr('x', 10)
-    .attr('y', 0)
+    .attr('x', 4)
+    .attr('y', 1)
+    .attr('rx', 2)
     .attr('width', this.commonGraphProperties.rect_text_width)
     .attr('height', this.commonGraphProperties.rect_text_height);
 
     rectTextMetric.append('text')
-    .attr('class', 'text-metric')
-    .attr('x', 35)
+    .attr('x', 8)
     .attr('y', 35)
     .text(timeFormat(currentData.time));
 
     rectTextMetric.append('text')
     .attr('class', 'text-metric-date')
-    .attr('x', 15)
+    .attr('x', 8)
     .attr('y', 15)
     .text(dayFormat(currentData.time));