Style improvements

Fixed an issue where the line wouldnt move when hovering over deployment

app/assets/javascripts/monitoring/deployments.js

@@ -8,6 +8,8 @@ export default class Deployments {
     this.timeFormat = d3.time.format('%H:%M%p');
 
     this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
+
+    Deployments.createGradientDef();
   }
 
   init(chartData) {
@@ -61,6 +63,36 @@ export default class Deployments {
     });
   }
 
+  static createGradientDef() {
+    const defs = d3.select('body')
+      .append('svg')
+      .attr({
+        height: 0,
+        width: 0,
+      })
+      .append('defs');
+
+    defs.append('linearGradient')
+      .attr({
+        id: 'shadow-gradient',
+      })
+      .append('stop')
+      .attr({
+        offset: '0%',
+        'stop-color': '#000',
+        'stop-opacity': 0.4,
+      })
+      .select(function selectParentNode() {
+        return this.parentNode;
+      })
+      .append('stop')
+      .attr({
+        offset: '100%',
+        'stop-color': '#000',
+        'stop-opacity': 0,
+      });
+  }
+
   createLine(chart) {
     chart.append('g')
       .attr({
@@ -74,6 +106,17 @@ export default class Deployments {
         class: d => `deploy-info-${d.id}`,
         transform: d => `translate(${Math.floor(d.xPos) + 1}, 0)`,
       })
+      .append('rect')
+      .attr({
+        x: 1,
+        y: 0,
+        height: this.height,
+        width: 3,
+        fill: 'url(#shadow-gradient)',
+      })
+      .select(function selectParentNode() {
+        return this.parentNode;
+      })
       .append('line')
       .attr({
         class: 'deployment-line',
@@ -110,7 +153,7 @@ export default class Deployments {
 
       textGroup.append('text')
         .attr({
-          style: 'dominant-baseline: text-before-edge;',
+          class: 'deploy-info-text deploy-info-text-bold',
         })
         .text(() => {
           const isTag = d.tag;
@@ -121,14 +164,14 @@ export default class Deployments {
 
       textGroup.append('text')
         .attr({
-          style: 'dominant-baseline: text-before-edge;',
+          class: 'deploy-info-text',
           y: 18,
         })
         .text(() => this.dateFormat(d.time));
 
       textGroup.append('text')
         .attr({
-          style: 'dominant-baseline: text-before-edge;',
+          class: 'deploy-info-text',
           y: 36,
         })
         .text(() => this.timeFormat(d.time));
@@ -153,7 +196,7 @@ export default class Deployments {
 
     this.data.forEach((d) => {
       if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
-        dataFound = true;
+        dataFound = d.xPos + 1;
 
         Deployments.toggleDeployTextbox(d, true);
       } else {

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -214,17 +214,17 @@ class PrometheusGraph {
     const maxValueMetric = Math.floor(
       y(d3.max(valuesToPlot.map(metricValue => metricValue.value))),
     );
+    const currentDeployXPos = this.deployments.mouseOverDeployInfo(mouse);
     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('line')
-    .attr('class', 'selected-metric-line')
     .attr({
+      class: `${currentDeployXPos ? 'hidden' : ''} selected-metric-line`,
       x1: currentTimeCoordinate,
       y1: y(0),
       x2: currentTimeCoordinate,
@@ -234,11 +234,11 @@ class PrometheusGraph {
     chart.append('circle')
     .attr('class', 'circle-metric')
     .attr('fill', graphSpecifics.line_color)
-    .attr('cx', currentTimeCoordinate)
+    .attr('cx', currentDeployXPos || currentTimeCoordinate)
     .attr('cy', y(currentData.value))
     .attr('r', this.commonGraphProperties.circle_radius_metric);
 
-    if (shouldHideTextMetric) return;
+    if (currentDeployXPos) return;
 
     // The little box with text
     const rectTextMetric = chart.append('svg')

app/assets/stylesheets/pages/environments.scss

@@ -157,7 +157,7 @@
 
 .prometheus-graph {
   text {
-    fill: #525252;
+    fill: $gl-text-color;
     stroke-width: 0;
   }
 }
@@ -201,7 +201,7 @@
 .rect-text-metric {
   fill: $white-light;
   stroke-width: 1;
-  stroke: #e1e1e1;
+  stroke: $gray-darkest;
 }
 
 .rect-axis-text {
@@ -213,11 +213,19 @@
 }
 
 .selected-metric-line {
-  stroke: #8c8c8c;
+  stroke: $gl-gray-dark;
   stroke-width: 1;
 }
 
 .deployment-line {
-  stroke: #000;
+  stroke: $black;
   stroke-width: 2;
 }
+
+.deploy-info-text {
+  dominant-baseline: text-before-edge;
+}
+
+.deploy-info-text-bold {
+  font-weight: 600;
+}

spec/javascripts/monitoring/deployments_spec.js

@@ -3,33 +3,11 @@ import PrometheusGraph from '~/monitoring/prometheus_graph';
 import Deployments from '~/monitoring/deployments';
 import { prometheusMockData } from './prometheus_mock_data';
 
-fdescribe('Metrics deployments', () => {
+describe('Metrics deployments', () => {
   const fixtureName = 'static/environments/metrics.html.raw';
   let deployment;
   let prometheusGraph;
 
-  const createDeploymentMockData = (done) => {
-    return {
-      deployments: [{
-        id: 1,
-        created_at: deployment.chartData[10].time,
-        sha: 'testing',
-        tag: false,
-        ref: {
-          name: 'testing',
-        },
-      }, {
-        id: 2,
-        created_at: deployment.chartData[15].time,
-        sha: '',
-        tag: true,
-        ref: {
-          name: 'tag',
-        },
-      }],
-    };
-  };
-
   const graphElement = () => document.querySelector('.prometheus-graph');
 
   preloadFixtures(fixtureName);
@@ -48,7 +26,25 @@ fdescribe('Metrics deployments', () => {
     spyOn(prometheusGraph, 'init');
     spyOn($, 'ajax').and.callFake(() => {
       const d = $.Deferred();
-      d.resolve(createDeploymentMockData());
+      d.resolve({
+        deployments: [{
+          id: 1,
+          created_at: deployment.chartData[10].time,
+          sha: 'testing',
+          tag: false,
+          ref: {
+            name: 'testing',
+          },
+        }, {
+          id: 2,
+          created_at: deployment.chartData[15].time,
+          sha: '',
+          tag: true,
+          ref: {
+            name: 'tag',
+          },
+        }],
+      });
 
       setTimeout(done);