diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-09-05 18:30:08 -0500 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-09-07 09:19:13 -0500 |
commit | 93ba3fdd1e756168ba9ca12e60a53a98969ccdec (patch) | |
tree | c0d7b333cd89c1cd5f0c36d24e9121d4d3495a16 | |
parent | 75b8f64ac331ac344dd0b4afa49ca4ad9e3de977 (diff) | |
download | gitlab-ce-93ba3fdd1e756168ba9ca12e60a53a98969ccdec.tar.gz |
small fixes to code and specs
-rw-r--r-- | app/assets/javascripts/monitoring/utils/multiple_time_series.js | 34 | ||||
-rw-r--r-- | config/prometheus/additional_metrics.yml | 17 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph/legend_spec.js | 7 | ||||
-rw-r--r-- | spec/javascripts/monitoring/mock_data.js | 8 |
4 files changed, 25 insertions, 41 deletions
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index 164157a72b7..eca79587a49 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js @@ -2,8 +2,8 @@ import d3 from 'd3'; import _ from 'underscore'; function pickColorFromNameNumber(colorName, colorNumber) { - let lineColor = '#1f78d1'; - let areaColor = '#8fbce8'; + let lineColor = ''; + let areaColor = ''; const color = colorName != null ? colorName : colorNumber; switch (color) { case 'blue': @@ -55,13 +55,9 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra const maxValueFromSeries = _.max(maxValues, val => val.maxValue); let timeSeriesNumber = 1; - let lineColor = '#1f78d1'; - let areaColor = '#8fbce8'; - const lineColors = ['#1f78d1', '#fc9403', '#db3b21', '#1aaa55', '#6666c4']; - const areaColors = ['#8fbce8', '#feca81', '#ed9d90', '#8dd5aa', '#d1d1f0']; return queryData.result.map((timeSeries, index) => { - let metricTag = 'series'; + let metricTag = ''; let pathColors = null; const timeSeriesScaleX = d3.time.scale() .range([0, graphWidth - 70]); @@ -84,29 +80,27 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra .y0(graphHeight - graphHeightOffset) .y1(d => timeSeriesScaleY(d.value)); - lineColor = lineColors[timeSeriesNumber - 1]; - areaColor = areaColors[timeSeriesNumber - 1]; - if (queryData.series != null) { const seriesCustomizationData = queryData.series[index]; - metricTag = timeSeries.metric[Object.keys(timeSeries.metric)[0]] || ''; + const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]]; if (seriesCustomizationData != null) { - if ( - seriesCustomizationData.value === metricTag && - seriesCustomizationData.color != null - ) { + metricTag = seriesCustomizationData.value || timeSeriesMetricLabel; + if (seriesCustomizationData.color != null) { pathColors = pickColorFromNameNumber(seriesCustomizationData.color.toLowerCase(), null); } + } else { + metricTag = timeSeriesMetricLabel || `series ${timeSeriesNumber}`; } } if (pathColors == null) { pathColors = pickColorFromNameNumber(null, timeSeriesNumber); - if (timeSeriesNumber <= 5) { - timeSeriesNumber = timeSeriesNumber += 1; - } else { - timeSeriesNumber = 1; - } + } + + if (timeSeriesNumber <= 5) { + timeSeriesNumber = timeSeriesNumber += 1; + } else { + timeSeriesNumber = 1; } return { diff --git a/config/prometheus/additional_metrics.yml b/config/prometheus/additional_metrics.yml index 202bd9f0ab1..0642a0b2fe9 100644 --- a/config/prometheus/additional_metrics.yml +++ b/config/prometheus/additional_metrics.yml @@ -131,20 +131,3 @@ - query_range: 'sum(rate(container_cpu_usage_seconds_total{container_name!="POD",%{environment_filter}}[2m])) / count(container_cpu_usage_seconds_total{container_name!="POD",%{environment_filter}}) * 100' label: Average unit: "%" - - title: "CPU usage by CPU" - required_metrics: - - container_cpu_usage_seconds_total - weight: 1 - queries: - - query_range: 'avg(rate(container_cpu_usage_seconds_total{%{environment_filter}}[2m])) by (cpu) * 100' - unit: Average (%) - label: cpu - series: - - value: cpu00 - color: red - - value: cpu01 - color: blue - - value: cpu02 - color: purple - - value: cpu03 - color: orange diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js index 2eda0fc4ab6..969b5bad730 100644 --- a/spec/javascripts/monitoring/graph/legend_spec.js +++ b/spec/javascripts/monitoring/graph/legend_spec.js @@ -38,7 +38,7 @@ function getTextFromNode(component, selector) { return component.$el.querySelector(selector).firstChild.nodeValue.trim(); } -fdescribe('GraphLegend', () => { +describe('GraphLegend', () => { describe('Computed props', () => { it('textTransform', () => { const component = createComponent(defaultValuesComponent); @@ -89,11 +89,12 @@ fdescribe('GraphLegend', () => { expect(component.$el.querySelectorAll('.rect-axis-text').length).toEqual(2); }); - it('contains text to signal the usage, title and time', () => { + it('contains text to signal the usage, title and time with multiple time series', () => { const component = createComponent(defaultValuesComponent); const titles = component.$el.querySelectorAll('.legend-metric-title'); - expect(titles[1].textContent.indexOf('series')).not.toEqual(-1); + expect(titles[0].textContent.indexOf('hundred(s)')).not.toEqual(-1); + expect(titles[1].textContent.indexOf('2xx')).not.toEqual(-1); expect(getTextFromNode(component, '.y-label-text')).toEqual(component.yAxisLabel); }); diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js index 3d399f2bb95..4d0d565cf26 100644 --- a/spec/javascripts/monitoring/mock_data.js +++ b/spec/javascripts/monitoring/mock_data.js @@ -6346,7 +6346,13 @@ export const singleRowMetricsMultipleSeries = [ } ] }, - ] + ], + 'series': [ + { + 'value': 'hundred(s)', + 'color': 'green', + }, + ], } ] }, |