Refactored backOff Promise to reject the promise when there's not enough datametrics-graph-error-fix

2 files changed, 30 insertions, 25 deletions

diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
index 950ede9f0fe..d030fff8269 100644
--- a/app/assets/javascripts/monitoring/prometheus_graph.js
+++ b/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,30 +55,26 @@ class PrometheusGraph {
   }
 
   init() {
-    this.getData().then((metricsResponse) => {
+    return this.getData().then((metricsResponse) => {
       let enoughData = true;
-      if (Object.keys(metricsResponse).length === 0) {
+      if (typeof metricsResponse === 'undefined') {
         enoughData = false;
       } else {
         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) {
+            const currentData = (metricsResponse.metrics[key])[0];
+            if (currentData.values.length <= 2) {
               enoughData = false;
             }
           }
         });
       }
-      if (!enoughData) {
-        this.state = '.js-loading';
-        this.updateState();
-      } else {
+      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.');
     });
   }
 
@@ -346,6 +344,8 @@ class PrometheusGraph {
 
   getData() {
     const maxNumberOfRequests = 3;
+    this.state = '.js-loading';
+    this.updateState('');
     return gl.utils.backOff((next, stop) => {
       $.ajax({
         url: metricsEndpoint,
@@ -356,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,
@@ -377,8 +376,9 @@ class PrometheusGraph {
       return resp.metrics;
     })
     .catch(() => {
+      const prevState = this.state;
       this.state = '.js-unable-to-connect';
-      this.updateState();
+      this.updateState(prevState);
     });
   }
 
@@ -386,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();
   }
diff --git a/changelogs/unreleased/metrics-graph-error-fix.yml b/changelogs/unreleased/metrics-graph-error-fix.yml
new file mode 100644
index 00000000000..2698b92e1f1
--- /dev/null
+++ b/changelogs/unreleased/metrics-graph-error-fix.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed Prometheus monitoring graphs not showing empty states in certain scenarios
+merge_request:
+author: