Update d3 to v4 and migrated the prometheus dashboard

3 files changed, 47 insertions, 43 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index cdae287658b..3e2c40a2546 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -1,5 +1,13 @@
 <script>
-  import d3 from 'd3';
+  import {
+    scaleLinear as d3ScaleLinear,
+    scaleTime as d3ScaleTime,
+    axisLeft as d3AxisLeft,
+    axisBottom as d3AxisBottom,
+    max as d3Max,
+    extent as d3Extent,
+    select as d3Select,
+    } from 'd3';
   import GraphLegend from './graph/legend.vue';
   import GraphFlag from './graph/flag.vue';
   import GraphDeployment from './graph/deployment.vue';
@@ -7,7 +15,7 @@
   import MonitoringMixin from '../mixins/monitoring_mixins';
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
-  import { timeScaleFormat, bisectDate } from '../utils/date_time_formatters';
+  import { bisectDate } from '../utils/date_time_formatters';
   import createTimeSeries from '../utils/multiple_time_series';
   import bp from '../../breakpoints';
 
@@ -156,34 +164,30 @@
           this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
         }
 
-        const axisXScale = d3.time.scale()
+        const axisXScale = d3ScaleTime()
           .range([0, this.graphWidth - 70]);
-        const axisYScale = d3.scale.linear()
+        const axisYScale = d3ScaleLinear()
           .range([this.graphHeight - this.graphHeightOffset, 0]);
 
         const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
-        axisXScale.domain(d3.extent(allValues, d => d.time));
-        axisYScale.domain([0, d3.max(allValues.map(d => d.value))]);
+        axisXScale.domain(d3Extent(allValues, d => d.time));
+        axisYScale.domain([0, d3Max(allValues.map(d => d.value))]);
 
-        const xAxis = d3.svg.axis()
-          .scale(axisXScale)
-          .ticks(d3.time.minute, 60)
-          .tickFormat(timeScaleFormat)
-          .orient('bottom');
+        const xAxis = d3AxisBottom()
+          .scale(axisXScale);
 
-        const yAxis = d3.svg.axis()
+        const yAxis = d3AxisLeft()
           .scale(axisYScale)
-          .ticks(measurements.yTicks)
-          .orient('left');
+          .ticks(measurements.yTicks);
 
-        d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
+        d3Select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
 
         const width = this.graphWidth;
-        d3.select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
+        d3Select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
           .selectAll('.tick')
           .each(function createTickLines(d, i) {
             if (i > 0) {
-              d3.select(this).select('line')
+              d3Select(this).select('line')
                 .attr('x2', width)
                 .attr('class', 'axis-tick');
             } // Avoid adding the class to the first tick, to prevent coloring
diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
index ad07a8465e2..111b5f3b6f1 100644
--- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js
+++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
@@ -1,17 +1,8 @@
-import d3 from 'd3';
+import {
+  timeFormat as d3TimeFormat,
+  bisector } from 'd3';
 
-export const dateFormat = d3.time.format('%b %-d, %Y');
-export const dateFormatWithName = d3.time.format('%a, %b %-d');
-export const timeFormat = d3.time.format('%-I:%M%p');
-export const bisectDate = d3.bisector(d => d.time).left;
-
-export const timeScaleFormat = d3.time.format.multi([
-  ['.%L', d => d.getMilliseconds()],
-  [':%S', d => d.getSeconds()],
-  ['%-I:%M', d => d.getMinutes()],
-  ['%-I %p', d => d.getHours()],
-  ['%a %-d', d => d.getDay() && d.getDate() !== 1],
-  ['%b %-d', d => d.getDate() !== 1],
-  ['%B', d => d.getMonth()],
-  ['%Y', () => true],
-]);
+export const dateFormat = d3TimeFormat('%b %-d, %Y');
+export const timeFormat = d3TimeFormat('%-I:%M%p');
+export const dateFormatWithName = d3TimeFormat('%a, %b %-d');
+export const bisectDate = bisector(d => d.time).left;
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index d21a265bd43..ab0e8d5f366 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -1,4 +1,13 @@
-import d3 from 'd3';
+import {
+  scaleLinear as d3ScaleLinear,
+  scaleTime as d3ScaleTime,
+  line as d3Line,
+  area as d3Area,
+  extent as d3Extent,
+  max as d3Max,
+  timeMinute as d3TimeMinute,
+  curveLinear as d3CurveLinear,
+} from 'd3';
 import _ from 'underscore';
 
 const defaultColorPalette = {
@@ -38,27 +47,27 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
     let lineColor = '';
     let areaColor = '';
 
-    const timeSeriesScaleX = d3.time.scale()
+    const timeSeriesScaleX = d3ScaleTime()
       .range([0, graphWidth - 70]);
 
-    const timeSeriesScaleY = d3.scale.linear()
+    const timeSeriesScaleY = d3ScaleLinear()
       .range([graphHeight - graphHeightOffset, 0]);
 
     timeSeriesScaleX.domain(xDom);
-    timeSeriesScaleX.ticks(d3.time.minute, 60);
+    timeSeriesScaleX.ticks(d3TimeMinute, 60);
     timeSeriesScaleY.domain(yDom);
 
     const defined = d => !isNaN(d.value) && d.value != null;
 
-    const lineFunction = d3.svg.line()
+    const lineFunction = d3Line()
       .defined(defined)
-      .interpolate('linear')
+      .curve(d3CurveLinear) // d3 v4 uses curbe instead of interpolate
       .x(d => timeSeriesScaleX(d.time))
       .y(d => timeSeriesScaleY(d.value));
 
-    const areaFunction = d3.svg.area()
+    const areaFunction = d3Area()
       .defined(defined)
-      .interpolate('linear')
+      .curve(d3CurveLinear)
       .x(d => timeSeriesScaleX(d.time))
       .y0(graphHeight - graphHeightOffset)
       .y1(d => timeSeriesScaleY(d.value));
@@ -97,8 +106,8 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
     query.result.reduce((allResults, result) => allResults.concat(result.values), []),
   ), []);
 
-  const xDom = d3.extent(allValues, d => d.time);
-  const yDom = [0, d3.max(allValues.map(d => d.value))];
+  const xDom = d3Extent(allValues, d => d.time);
+  const yDom = [0, d3Max(allValues.map(d => d.value))];
 
   return queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];