small fixes to code and specs

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 {

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

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);
   });
 

spec/javascripts/monitoring/mock_data.js

@@ -6346,7 +6346,13 @@ export const singleRowMetricsMultipleSeries = [
                             }
                         ]
                     },
-                ]
+                ],
+                'series': [
+                  {
+                    'value': 'hundred(s)',
+                    'color': 'green',
+                  },
+                ],
             }
         ]
     },