Used reduce over forEach

Moved shared date & time formats into constants

3 files changed, 24 insertions, 16 deletions

diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
new file mode 100644
index 00000000000..c3a8da52404
--- /dev/null
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -0,0 +1,4 @@
+import d3 from 'd3';
+
+export const dateFormat = d3.time.format('%b %d, %Y');
+export const timeFormat = d3.time.format('%H:%M%p');
diff --git a/app/assets/javascripts/monitoring/deployments.js b/app/assets/javascripts/monitoring/deployments.js
index 93453771aca..fc92ab61b31 100644
--- a/app/assets/javascripts/monitoring/deployments.js
+++ b/app/assets/javascripts/monitoring/deployments.js
@@ -1,12 +1,14 @@
+/* global Flash */
 import d3 from 'd3';
+import {
+  dateFormat,
+  timeFormat,
+} from './constants';
 
 export default class Deployments {
   constructor(width, height) {
     this.width = width;
     this.height = height;
-    this.data = [];
-    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 +31,16 @@ export default class Deployments {
       url: this.endpoint,
       dataType: 'JSON',
     })
+    .fail(() => new Flash('Error getting deployment information.'))
     .done((data) => {
-      data.deployments.forEach((deployment) => {
+      this.data = data.deployments.reduce((deploymentDataArray, deployment) => {
         const time = new Date(deployment.created_at);
         const xPos = Math.floor(this.x(time));
 
         time.setSeconds(this.chartData[0].time.getSeconds());
 
         if (xPos >= 0) {
-          this.data.push({
+          deploymentDataArray.push({
             id: deployment.id,
             time,
             sha: deployment.sha,
@@ -46,7 +49,9 @@ export default class Deployments {
             xPos,
           });
         }
-      });
+
+        return deploymentDataArray;
+      }, []);
 
       this.plotData();
     });
@@ -162,14 +167,14 @@ export default class Deployments {
         class: 'deploy-info-text',
         y: 18,
       })
-      .text(d => this.dateFormat(d.time))
+      .text(d => dateFormat(d.time))
       .select(this.selectParentNode)
       .append('text')
       .attr({
         class: 'deploy-info-text text-metric-bold',
         y: 38,
       })
-      .text(d => this.timeFormat(d.time));
+      .text(d => timeFormat(d.time));
   }
 
   static toggleDeployTextbox(deploy, key, showInfoBox) {
@@ -201,9 +206,6 @@ export default class Deployments {
   }
 
   static refText(d) {
-    const isTag = d.tag;
-    const refText = isTag ? d.ref : d.sha.slice(0, 6);
-
-    return refText;
+    return d.tag ? d.ref : d.sha.slice(0, 6);
   }
 }
diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
index ef3211e9586..681111455d1 100644
--- a/app/assets/javascripts/monitoring/prometheus_graph.js
+++ b/app/assets/javascripts/monitoring/prometheus_graph.js
@@ -7,14 +7,16 @@ import Deployments from './deployments';
 import '../lib/utils/common_utils';
 import { formatRelevantDigits } from '../lib/utils/number_utils';
 import '../flash';
+import {
+  dateFormat,
+  timeFormat,
+} from './constants';
 
 const prometheusContainer = '.prometheus-container';
 const prometheusParentGraphContainer = '.prometheus-graphs';
 const prometheusGraphsContainer = '.prometheus-graph';
 const prometheusStatesContainer = '.prometheus-state';
 const metricsEndpoint = 'metrics.json';
-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;
 
@@ -256,7 +258,7 @@ class PrometheusGraph {
       const evalTime = timeValueOverlay - d0.time > d1.time - timeValueOverlay;
       const currentData = evalTime ? d1 : d0;
       const currentTimeCoordinate = Math.floor(currentGraphProps.xScale(currentData.time));
-      const currentDeployXPos = this.deployments.mouseOverDeployInfo(currentTimeCoordinate, key);
+      const currentDeployXPos = this.deployments.mouseOverDeployInfo(currentXCoordinate, key);
       const currentPrometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`;
       const maxValueFromData = d3.max(currentGraphProps.data.map(metricValue => metricValue.value));
       const maxMetricValue = currentGraphProps.yScale(maxValueFromData);
@@ -317,7 +319,7 @@ class PrometheusGraph {
           x: 8,
           y: 15,
         })
-        .text(dayFormat(currentData.time));
+        .text(dateFormat(currentData.time));
 
       let currentMetricValue = formatRelevantDigits(currentData.value);
       if (key === 'cpu_values') {