Added minor details to specs

changelogs/unreleased/additional-time-series-charts.yml

 ---
-title: Added support for multiple time series
+title: Added support the multiple time series for prometheus monitoring
 merge_request: !36893
 author:
 type: changed

config/prometheus/additional_metrics.yml

@@ -131,3 +131,20 @@
     - 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_path_spec.js

@@ -21,15 +21,15 @@ describe('Monitoring Paths', () => {
     const component = createComponent({
       generatedLinePath: firstTimeSeries.linePath,
       generatedAreaPath: firstTimeSeries.areaPath,
-      lineColor: '#ccc',
-      areaColor: '#fff',
+      lineColor: firstTimeSeries.lineColor,
+      areaColor: firstTimeSeries.areaColor,
     });
     const metricArea = component.$el.querySelector('.metric-area');
     const metricLine = component.$el.querySelector('.metric-line');
 
-    expect(metricArea.getAttribute('fill')).toBe('#fff');
+    expect(metricArea.getAttribute('fill')).toBe('#8dd5aa');
     expect(metricArea.getAttribute('d')).toBe(firstTimeSeries.areaPath);
-    expect(metricLine.getAttribute('stroke')).toBe('#ccc');
+    expect(metricLine.getAttribute('stroke')).toBe('#1aaa55');
     expect(metricLine.getAttribute('d')).toBe(firstTimeSeries.linePath);
   });
 });