Add requested resources to cluster health - ce port

app/assets/javascripts/monitoring/components/charts/area.vue

@@ -69,17 +69,17 @@ export default {
           appearance && appearance.line && appearance.line.type
             ? appearance.line.type
             : lineTypes.default;
-        const lineColor = lineType === lineTypes.threshold ? this.primaryColor : undefined;
+        const lineWidth =
+          appearance && appearance.line && appearance.line.width
+            ? appearance.line.width
+            : undefined;
 
         return {
           name: this.formatLegendLabel(query),
           data: this.concatenateResults(query.result),
           lineStyle: {
             type: lineType,
-            color: lineColor,
-          },
-          itemStyle: {
-            color: lineColor,
+            width: lineWidth,
           },
           areaStyle: {
             opacity:

app/assets/javascripts/monitoring/constants.js

@@ -6,5 +6,4 @@ export const graphTypes = {
 
 export const lineTypes = {
   default: 'solid',
-  threshold: 'dashed',
 };

spec/javascripts/monitoring/charts/area_spec.js

@@ -203,6 +203,10 @@ describe('Area component', () => {
             .length,
         ).toBe(data.length);
       });
+
+      it('formats line width correctly', () => {
+        expect(chartData[0].lineStyle.width).toBe(2);
+      });
     });
 
     describe('scatterSeries', () => {

spec/javascripts/monitoring/mock_data.js

@@ -330,6 +330,11 @@ export const metricsGroupsAPIResponse = {
           weight: 1,
           queries: [
             {
+              appearance: {
+                line: {
+                  width: 2,
+                },
+              },
               query_range:
                 'avg(rate(container_cpu_usage_seconds_total{%{environment_filter}}[2m])) * 100',
               label: 'Core Usage',