diff --git a/app/assets/javascripts/lib/utils/number_utils.js b/app/assets/javascripts/lib/utils/number_utils.js index 57394097944..917a45eb06b 100644 --- a/app/assets/javascripts/lib/utils/number_utils.js +++ b/app/assets/javascripts/lib/utils/number_utils.js @@ -13,7 +13,7 @@ export function formatRelevantDigits(number) { let relevantDigits = 0; let formattedNumber = ''; if (!isNaN(Number(number))) { - digitsLeft = number.split('.')[0]; + digitsLeft = number.toString().split('.')[0]; switch (digitsLeft.length) { case 1: relevantDigits = 3; diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 11bbeb9392b..6b3e341f936 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -40,8 +40,6 @@ graphHeightOffset: 120, margin: {}, unitOfDisplay: '', - areaColorRgb: '#8fbce8', - lineColorRgb: '#1f78d1', yAxisLabel: '', legendTitle: '', reducedDeploymentData: [], @@ -143,7 +141,7 @@ }, renderAxesPaths() { - this.timeSeries = createTimeSeries(this.graphData.queries[0].result, + this.timeSeries = createTimeSeries(this.graphData.queries[0], this.graphWidth, this.graphHeight, this.graphHeightOffset); @@ -162,7 +160,7 @@ const xAxis = d3.svg.axis() .scale(axisXScale) - .ticks(measurements.xTicks) + .ticks(d3.time.minute, 60) .tickFormat(timeScaleFormat) .orient('bottom'); diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index a43dad8e601..27a9ddbc568 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -81,6 +81,13 @@ formatMetricUsage(series) { return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`; }, + + createSeriesString(index, series) { + if (series.metricTag) { + return `${series.metricTag} ${this.formatMetricUsage(series)}`; + } + return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`; + }, }, mounted() { this.$nextTick(() => { @@ -164,7 +171,7 @@ ref="legendTitleSvg" x="38" :y="graphHeight - 30"> - {{legendTitle}} Series {{index + 1}} {{formatMetricUsage(series)}} + {{createSeriesString(index, series)}} { +function pickColorFromNameNumber(colorName, colorNumber) { + let lineColor = '#1f78d1'; + let areaColor = '#8fbce8'; + const color = colorName != null ? colorName : colorNumber; + switch (color) { + case 'blue': + case 1: + lineColor = '#1f78d1'; + areaColor = '#8fbce8'; + break; + case 'orange': + case 2: + lineColor = '#fc9403'; + areaColor = '#feca81'; + break; + case 'red': + case 3: + lineColor = '#db3b21'; + areaColor = '#ed9d90'; + break; + case 'green': + case 4: + lineColor = '#1aaa55'; + areaColor = '#8dd5aa'; + break; + case 'purple': + case 5: + lineColor = '#6666c4'; + areaColor = '#d1d1f0'; + break; + default: + lineColor = '#1f78d1'; + areaColor = '#8fbce8'; + break; + } + + return { + lineColor, + areaColor, + }; +} + +export default function createTimeSeries(queryData, graphWidth, graphHeight, graphHeightOffset) { + const maxValues = queryData.result.map((timeSeries, index) => { const maxValue = d3.max(timeSeries.values.map(d => d.value)); return { maxValue, @@ -18,7 +60,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr const lineColors = ['#1f78d1', '#fc9403', '#db3b21', '#1aaa55', '#6666c4']; const areaColors = ['#8fbce8', '#feca81', '#ed9d90', '#8dd5aa', '#d1d1f0']; - return seriesData.map((timeSeries) => { + return queryData.result.map((timeSeries, index) => { + let metricTag = 'series'; + let pathColors = null; const timeSeriesScaleX = d3.time.scale() .range([0, graphWidth - 70]); @@ -26,25 +70,43 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr .range([graphHeight - graphHeightOffset, 0]); timeSeriesScaleX.domain(d3.extent(timeSeries.values, d => d.time)); + timeSeriesScaleX.ticks(d3.time.minute, 60); timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]); const lineFunction = d3.svg.line() + .interpolate('step-before') .x(d => timeSeriesScaleX(d.time)) .y(d => timeSeriesScaleY(d.value)); const areaFunction = d3.svg.area() + .interpolate('step-before') .x(d => timeSeriesScaleX(d.time)) .y0(graphHeight - graphHeightOffset) - .y1(d => timeSeriesScaleY(d.value)) - .interpolate('linear'); + .y1(d => timeSeriesScaleY(d.value)); lineColor = lineColors[timeSeriesNumber - 1]; areaColor = areaColors[timeSeriesNumber - 1]; - if (timeSeriesNumber <= 5) { - timeSeriesNumber = timeSeriesNumber += 1; - } else { - timeSeriesNumber = 1; + if (queryData.series != null) { + const seriesCustomizationData = queryData.series[index]; + metricTag = timeSeries.metric[Object.keys(timeSeries.metric)[0]] || ''; + if (seriesCustomizationData != null) { + if ( + seriesCustomizationData.value === metricTag && + seriesCustomizationData.color != null + ) { + pathColors = pickColorFromNameNumber(seriesCustomizationData.color.toLowerCase(), null); + } + } + } + + if (pathColors == null) { + pathColors = pickColorFromNameNumber(null, timeSeriesNumber); + if (timeSeriesNumber <= 5) { + timeSeriesNumber = timeSeriesNumber += 1; + } else { + timeSeriesNumber = 1; + } } return { @@ -52,8 +114,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr areaPath: areaFunction(timeSeries.values), timeSeriesScaleX, values: timeSeries.values, - lineColor, - areaColor, + ...pathColors, + metricTag, }; }); } +