Metrics graph error fix

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -22,6 +22,7 @@ class PrometheusGraph {
     const hasMetrics = $prometheusContainer.data('has-metrics');
     this.docLink = $prometheusContainer.data('doc-link');
     this.integrationLink = $prometheusContainer.data('prometheus-integration');
+    this.state = '';
 
     $(document).ajaxError(() => {});
 
@@ -38,8 +39,9 @@ class PrometheusGraph {
       this.configureGraph();
       this.init();
     } else {
+      const prevState = this.state;
       this.state = '.js-getting-started';
-      this.updateState();
+      this.updateState(prevState);
     }
   }
 
@@ -53,26 +55,26 @@ class PrometheusGraph {
   }
 
   init() {
-    this.getData().then((metricsResponse) => {
+    return this.getData().then((metricsResponse) => {
       let enoughData = true;
-      Object.keys(metricsResponse.metrics).forEach((key) => {
-        let currentKey;
-        if (key === 'cpu_values' || key === 'memory_values') {
-          currentKey = metricsResponse.metrics[key];
-          if (Object.keys(currentKey).length === 0) {
-            enoughData = false;
-          }
-        }
-      });
-      if (!enoughData) {
-        this.state = '.js-loading';
-        this.updateState();
+      if (typeof metricsResponse === 'undefined') {
+        enoughData = false;
       } else {
+        Object.keys(metricsResponse.metrics).forEach((key) => {
+          if (key === 'cpu_values' || key === 'memory_values') {
+            const currentData = (metricsResponse.metrics[key])[0];
+            if (currentData.values.length <= 2) {
+              enoughData = false;
+            }
+          }
+        });
+      }
+      if (enoughData) {
+        $(prometheusStatesContainer).hide();
+        $(prometheusParentGraphContainer).show();
         this.transformData(metricsResponse);
         this.createGraph();
       }
-    }).catch(() => {
-      new Flash('An error occurred when trying to load metrics. Please try again.');
     });
   }
 
@@ -342,6 +344,8 @@ class PrometheusGraph {
 
   getData() {
     const maxNumberOfRequests = 3;
+    this.state = '.js-loading';
+    this.updateState();
     return gl.utils.backOff((next, stop) => {
       $.ajax({
         url: metricsEndpoint,
@@ -352,12 +356,11 @@ class PrometheusGraph {
           this.backOffRequestCounter = this.backOffRequestCounter += 1;
           if (this.backOffRequestCounter < maxNumberOfRequests) {
             next();
-          } else {
-            stop({
-              status: resp.status,
-              metrics: data,
-            });
+          } else if (this.backOffRequestCounter >= maxNumberOfRequests) {
+            stop(new Error('loading'));
           }
+        } else if (!data.success) {
+          stop(new Error('loading'));
         } else {
           stop({
             status: resp.status,
@@ -373,8 +376,9 @@ class PrometheusGraph {
       return resp.metrics;
     })
     .catch(() => {
+      const prevState = this.state;
       this.state = '.js-unable-to-connect';
-      this.updateState();
+      this.updateState(prevState);
     });
   }
 
@@ -382,19 +386,20 @@ class PrometheusGraph {
     Object.keys(metricsResponse.metrics).forEach((key) => {
       if (key === 'cpu_values' || key === 'memory_values') {
         const metricValues = (metricsResponse.metrics[key])[0];
-        if (metricValues !== undefined) {
-          this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({
-            time: new Date(metric[0] * 1000),
-            value: metric[1],
-          }));
-        }
+        this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({
+          time: new Date(metric[0] * 1000),
+          value: metric[1],
+        }));
       }
     });
   }
 
-  updateState() {
+  updateState(prevState) {
     const $statesContainer = $(prometheusStatesContainer);
     $(prometheusParentGraphContainer).hide();
+    if (prevState) {
+      $(`${prevState}`, $statesContainer).addClass('hidden');
+    }
     $(`${this.state}`, $statesContainer).removeClass('hidden');
     $(prometheusStatesContainer).show();
   }

changelogs/unreleased/metrics-graph-error-fix.yml

+---
+title: Fixed Prometheus monitoring graphs not showing empty states in certain scenarios
+merge_request:
+author: