small fixes to code and specs
This commit is contained in:
parent
75b8f64ac3
commit
93ba3fdd1e
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
@ -6346,7 +6346,13 @@ export const singleRowMetricsMultipleSeries = [
|
|||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
],
|
||||
'series': [
|
||||
{
|
||||
'value': 'hundred(s)',
|
||||
'color': 'green',
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue