Add requested resources to cluster health - frontend

Reorders the chart queries
Adds line thickness

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',
 };

config/prometheus/cluster_metrics.yml

@@ -9,12 +9,26 @@
     - query_range: 'avg(sum(rate(container_cpu_usage_seconds_total{id="/"}[15m])) by (job)) without (job)'
       label: Usage
       unit: "cores"
+      appearance:
+        line:
+          width: 2
+        area:
+          opacity: 0
+    - query_range: 'sum(kube_pod_container_resource_requests_cpu_cores{kubernetes_namespace="gitlab-managed-apps"})'
+      label: Requested
+      unit: "cores"
+      appearance:
+        line:
+          width: 2
+        area:
+          opacity: 0
     - query_range: 'sum(kube_node_status_capacity_cpu_cores{kubernetes_namespace="gitlab-managed-apps"})'
       label: Capacity
       unit: "cores"
       appearance:
         line:
           type: 'dashed'
+          width: 2
         area:
           opacity: 0
   - title: "Memory usage"
@@ -25,11 +39,25 @@
     - query_range: 'avg(sum(container_memory_usage_bytes{id="/"}) by (job)) without (job) / 2^30'
       label: Usage
       unit: "GiB"
+      appearance:
+        line:
+          width: 2
+        area:
+          opacity: 0
+    - query_range: 'sum(kube_pod_container_resource_requests_memory_bytes{kubernetes_namespace="gitlab-managed-apps"})/2^30'
+      label: Requested
+      unit: "GiB"
+      appearance:
+        line:
+          width: 2
+        area:
+          opacity: 0
     - query_range: 'sum(kube_node_status_capacity_memory_bytes{kubernetes_namespace="gitlab-managed-apps"})/2^30'
       label: Capacity
       unit: "GiB"
       appearance:
         line:
           type: 'dashed'
+          width: 2
         area:
           opacity: 0

ee/changelogs/unreleased/tr-add-requested-resource-metric.yml

+---
+title: Add requested resources to cluster health metrics
+merge_request: 10135
+author:
+type: changed

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',