Style improvements

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

2 files changed, 51 insertions, 8 deletions

diff --git a/app/assets/javascripts/monitoring/deployments.js b/app/assets/javascripts/monitoring/deployments.js
index a6d7a1fbd7c..aa75cdcaeaf 100644
--- a/app/assets/javascripts/monitoring/deployments.js
+++ b/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 {
diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
index 03d47c052c8..212fbce91ba 100644
--- a/app/assets/javascripts/monitoring/prometheus_graph.js
+++ b/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')