summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/monitoring
diff options
context:
space:
mode:
authorJose Ivan Vargas <jvargas@gitlab.com>2017-11-23 12:56:36 -0600
committerJose Ivan Vargas <jvargas@gitlab.com>2017-12-18 16:08:11 -0600
commit36ba5f8272b11e02eda8110eb8e88b5dd4521928 (patch)
tree6d38879cad7e26bd4b57641450b5555ed4050098 /app/assets/javascripts/monitoring
parentf7a9ced235be7ef13f90b561d23ffe602e11e9a3 (diff)
downloadgitlab-ce-36ba5f8272b11e02eda8110eb8e88b5dd4521928.tar.gz
Update d3 to v4 and migrated the prometheus dashboard
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r--app/assets/javascripts/monitoring/components/graph.vue38
-rw-r--r--app/assets/javascripts/monitoring/utils/date_time_formatters.js23
-rw-r--r--app/assets/javascripts/monitoring/utils/multiple_time_series.js29
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];