diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2017-11-07 07:18:13 +0000 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2017-11-07 07:18:13 +0000 |
commit | d7224c81601638dae1dab6fbf72942a19a44074b (patch) | |
tree | cbffbf64adcc9667ef64489157d886f9011f1e50 | |
parent | 435fd9d073fec75e987a367f0eb9379948f2bbc3 (diff) | |
parent | 2b9230af48372dbf7e80d773c772555ec91a5e8b (diff) | |
download | gitlab-ce-d7224c81601638dae1dab6fbf72942a19a44074b.tar.gz |
Merge branch 'multiple-query-prometheus-graphs' into 'master'
Enable multiple queries per Prometheus graph
See merge request gitlab-org/gitlab-ce!15201
9 files changed, 79 insertions, 35 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 5aa3865f96a..f8782fde927 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -138,7 +138,7 @@ renderAxesPaths() { this.timeSeries = createTimeSeries( - this.graphData.queries[0], + this.graphData.queries, this.graphWidth, this.graphHeight, this.graphHeightOffset, @@ -153,8 +153,9 @@ const axisYScale = d3.scale.linear() .range([this.graphHeight - this.graphHeightOffset, 0]); - axisXScale.domain(d3.extent(this.timeSeries[0].values, d => d.time)); - axisYScale.domain([0, d3.max(this.timeSeries[0].values.map(d => d.value))]); + 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))]); const xAxis = d3.svg.axis() .scale(axisXScale) @@ -246,6 +247,7 @@ :key="index" :generated-line-path="path.linePath" :generated-area-path="path.areaPath" + :line-style="path.lineStyle" :line-color="path.lineColor" :area-color="path.areaColor" /> diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index 85b6d7f4cbe..440b1b12631 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -79,7 +79,8 @@ }, formatMetricUsage(series) { - const value = series.values[this.currentDataIndex].value; + const value = series.values[this.currentDataIndex] && + series.values[this.currentDataIndex].value; if (isNaN(value)) { return '-'; } @@ -92,6 +93,12 @@ } return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`; }, + + strokeDashArray(type) { + if (type === 'dashed') return '6, 3'; + if (type === 'dotted') return '3, 3'; + return null; + }, }, mounted() { this.$nextTick(() => { @@ -162,13 +169,15 @@ v-for="(series, index) in timeSeries" :key="index" :transform="translateLegendGroup(index)"> - <rect - :fill="series.areaColor" - :width="measurements.legends.width" - :height="measurements.legends.height" - x="20" - :y="graphHeight - measurements.legendOffset"> - </rect> + <line + :stroke="series.lineColor" + :stroke-width="measurements.legends.height" + :stroke-dasharray="strokeDashArray(series.lineStyle)" + :x1="measurements.legends.offsetX" + :x2="measurements.legends.offsetX + measurements.legends.width" + :y1="graphHeight - measurements.legends.offsetY" + :y2="graphHeight - measurements.legends.offsetY"> + </line> <text v-if="timeSeries.length > 1" class="legend-metric-title" diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue index 043f1bf66bb..5e6d409033a 100644 --- a/app/assets/javascripts/monitoring/components/graph/path.vue +++ b/app/assets/javascripts/monitoring/components/graph/path.vue @@ -9,6 +9,10 @@ type: String, required: true, }, + lineStyle: { + type: String, + required: false, + }, lineColor: { type: String, required: true, @@ -18,6 +22,13 @@ required: true, }, }, + computed: { + strokeDashArray() { + if (this.lineStyle === 'dashed') return '3, 1'; + if (this.lineStyle === 'dotted') return '1, 1'; + return null; + }, + }, }; </script> <template> @@ -34,6 +45,7 @@ :stroke="lineColor" fill="none" stroke-width="1" + :stroke-dasharray="strokeDashArray" transform="translate(-5, 20)"> </path> </g> diff --git a/app/assets/javascripts/monitoring/utils/measurements.js b/app/assets/javascripts/monitoring/utils/measurements.js index ee3c45efacc..ee866850e13 100644 --- a/app/assets/javascripts/monitoring/utils/measurements.js +++ b/app/assets/javascripts/monitoring/utils/measurements.js @@ -7,15 +7,16 @@ export default { left: 40, }, legends: { - width: 10, + width: 15, height: 3, + offsetX: 20, + offsetY: 32, }, backgroundLegend: { width: 30, height: 50, }, axisLabelLineOffset: -20, - legendOffset: 33, }, large: { // This covers both md and lg screen sizes margin: { @@ -27,13 +28,14 @@ export default { legends: { width: 15, height: 3, + offsetX: 20, + offsetY: 34, }, backgroundLegend: { width: 30, height: 150, }, axisLabelLineOffset: 20, - legendOffset: 36, }, xTicks: 8, yTicks: 3, diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index 65eec0d8d02..d21a265bd43 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js @@ -11,7 +11,9 @@ const defaultColorPalette = { const defaultColorOrder = ['blue', 'orange', 'red', 'green', 'purple']; -export default function createTimeSeries(queryData, graphWidth, graphHeight, graphHeightOffset) { +const defaultStyleOrder = ['solid', 'dashed', 'dotted']; + +function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle) { let usedColors = []; function pickColor(name) { @@ -31,17 +33,7 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra return defaultColorPalette[pick]; } - const maxValues = queryData.result.map((timeSeries, index) => { - const maxValue = d3.max(timeSeries.values.map(d => d.value)); - return { - maxValue, - index, - }; - }); - - const maxValueFromSeries = _.max(maxValues, val => val.maxValue); - - return queryData.result.map((timeSeries, timeSeriesNumber) => { + return query.result.map((timeSeries, timeSeriesNumber) => { let metricTag = ''; let lineColor = ''; let areaColor = ''; @@ -52,9 +44,9 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra const timeSeriesScaleY = d3.scale.linear() .range([graphHeight - graphHeightOffset, 0]); - timeSeriesScaleX.domain(d3.extent(timeSeries.values, d => d.time)); + timeSeriesScaleX.domain(xDom); timeSeriesScaleX.ticks(d3.time.minute, 60); - timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]); + timeSeriesScaleY.domain(yDom); const defined = d => !isNaN(d.value) && d.value != null; @@ -72,10 +64,10 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra .y1(d => timeSeriesScaleY(d.value)); const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]]; - const seriesCustomizationData = queryData.series != null && - _.findWhere(queryData.series[0].when, - { value: timeSeriesMetricLabel }); - if (seriesCustomizationData != null) { + const seriesCustomizationData = query.series != null && + _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel }); + + if (seriesCustomizationData) { metricTag = seriesCustomizationData.value || timeSeriesMetricLabel; [lineColor, areaColor] = pickColor(seriesCustomizationData.color); } else { @@ -83,14 +75,35 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra [lineColor, areaColor] = pickColor(); } + if (query.track) { + metricTag += ` - ${query.track}`; + } + return { linePath: lineFunction(timeSeries.values), areaPath: areaFunction(timeSeries.values), timeSeriesScaleX, values: timeSeries.values, + lineStyle, lineColor, areaColor, metricTag, }; }); } + +export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) { + const allValues = queries.reduce((allQueryResults, query) => allQueryResults.concat( + 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))]; + + return queries.reduce((series, query, index) => { + const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length]; + return series.concat( + queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle), + ); + }, []); +} diff --git a/changelogs/unreleased/multiple-query-prometheus-graphs.yml b/changelogs/unreleased/multiple-query-prometheus-graphs.yml new file mode 100644 index 00000000000..9d09166845e --- /dev/null +++ b/changelogs/unreleased/multiple-query-prometheus-graphs.yml @@ -0,0 +1,6 @@ +--- +title: Allow multiple queries in a single Prometheus graph to support additional environments + (Canary, Staging, et al.) +merge_request: 15201 +author: +type: added diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js index 2571b7ef869..145c8db28d5 100644 --- a/spec/javascripts/monitoring/graph/legend_spec.js +++ b/spec/javascripts/monitoring/graph/legend_spec.js @@ -28,7 +28,7 @@ const defaultValuesComponent = { currentDataIndex: 0, }; -const timeSeries = createTimeSeries(convertedMetrics[0].queries[0], +const timeSeries = createTimeSeries(convertedMetrics[0].queries, defaultValuesComponent.graphWidth, defaultValuesComponent.graphHeight, defaultValuesComponent.graphHeightOffset); diff --git a/spec/javascripts/monitoring/graph_path_spec.js b/spec/javascripts/monitoring/graph_path_spec.js index 81825a3ae87..8ece913ada8 100644 --- a/spec/javascripts/monitoring/graph_path_spec.js +++ b/spec/javascripts/monitoring/graph_path_spec.js @@ -13,7 +13,7 @@ const createComponent = (propsData) => { const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); -const timeSeries = createTimeSeries(convertedMetrics[0].queries[0], 428, 272, 120); +const timeSeries = createTimeSeries(convertedMetrics[0].queries, 428, 272, 120); const firstTimeSeries = timeSeries[0]; describe('Monitoring Paths', () => { diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js index 7e44a9ade9e..99584c75287 100644 --- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js +++ b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js @@ -2,7 +2,7 @@ import createTimeSeries from '~/monitoring/utils/multiple_time_series'; import { convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from '../mock_data'; const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); -const timeSeries = createTimeSeries(convertedMetrics[0].queries[0], 428, 272, 120); +const timeSeries = createTimeSeries(convertedMetrics[0].queries, 428, 272, 120); const firstTimeSeries = timeSeries[0]; describe('Multiple time series', () => { |