Refactor MonitoringService class

app/assets/javascripts/monitoring/components/dashboard.vue

 <script>
   /* global Flash */
   import _ from 'underscore';
-  import statusCodes from '../../lib/utils/http_status';
   import MonitoringService from '../services/monitoring_service';
   import GraphGroup from './graph_group.vue';
   import Graph from './graph.vue';
@@ -21,10 +20,9 @@
         hasMetrics: gl.utils.convertPermissionToBoolean(metricsData.hasMetrics),
         documentationPath: metricsData.documentationPath,
         settingsPath: metricsData.settingsPath,
-        endpoint: metricsData.additionalMetrics,
+        metricsEndpoint: metricsData.additionalMetrics,
         deploymentEndpoint: metricsData.deploymentEndpoint,
         showEmptyState: true,
-        backOffRequestCounter: 0,
         updateAspectRatio: false,
         updatedAspectRatios: 0,
         resizeThrottled: {},
@@ -39,50 +37,16 @@
     methods: {
       getGraphsData() {
-        const maxNumberOfRequests = 3;
         this.state = 'loading';
-        gl.utils.backOff((next, stop) => {
-          this.service.get().then((resp) => {
-            if (resp.status === statusCodes.NO_CONTENT) {
-              this.backOffRequestCounter = this.backOffRequestCounter += 1;
-              if (this.backOffRequestCounter < maxNumberOfRequests) {
-                next();
-              } else {
-                stop(new Error('Failed to connect to the prometheus server'));
-              }
-            } else {
-              stop(resp);
-            }
-          }).catch(stop);
-        })
-        .then((resp) => {
-          if (resp.status === statusCodes.NO_CONTENT) {
-            this.state = 'unableToConnect';
-            return false;
-          }
-          return resp.json();
-        })
-        .then((metricGroupsData) => {
-          if (!metricGroupsData) return false;
-          this.store.storeMetrics(metricGroupsData.data);
-          return this.getDeploymentData();
-        })
-        .then((deploymentData) => {
-          if (deploymentData !== false) {
-            this.store.storeDeploymentData(deploymentData.deployments);
-            this.showEmptyState = false;
-          }
-          return {};
-        })
-        .catch(() => {
-          this.state = 'unableToConnect';
-        });
-      },
-
-      getDeploymentData() {
-        return this.service.getDeploymentData(this.deploymentEndpoint)
-          .then(resp => resp.json())
-          .catch(() => new Flash('Error getting deployment information.'));
+        Promise.all([
+          this.service.getGraphsData()
+            .then(data => this.store.storeMetrics(data)),
+          this.service.getDeploymentData()
+            .then(data => this.store.storeDeploymentData(data))
+            .catch(() => new Flash('Error getting deployment information.')),
+        ])
+          .then(() => { this.showEmptyState = false; })
+          .catch(() => { this.state = 'unableToConnect'; });
       },
       resize() {
@@ -99,7 +63,10 @@
     },
     created() {
-      this.service = new MonitoringService(this.endpoint);
+      this.service = new MonitoringService({
+        metricsEndpoint: this.metricsEndpoint,
+        deploymentEndpoint: this.deploymentEndpoint,
+      });
       eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
     },

app/assets/javascripts/monitoring/services/monitoring_service.js

 import Vue from 'vue';
 import VueResource from 'vue-resource';
+import statusCodes from '../../lib/utils/http_status';
 Vue.use(VueResource);
+const MAX_REQUESTS = 3;
+
+function backOffRequest(makeRequestCallback) {
+  let requestCounter = 0;
+  return gl.utils.backOff((next, stop) => {
+    makeRequestCallback().then((resp) => {
+      if (resp.status === statusCodes.NO_CONTENT) {
+        requestCounter += 1;
+        if (requestCounter < MAX_REQUESTS) {
+          next();
+        } else {
+          stop(new Error('Failed to connect to the prometheus server'));
+        }
+      } else {
+        stop(resp);
+      }
+    }).catch(stop);
+  });
+}
+
 export default class MonitoringService {
-  constructor(endpoint) {
-    this.graphs = Vue.resource(endpoint);
+  constructor({ metricsEndpoint, deploymentEndpoint }) {
+    this.metricsEndpoint = metricsEndpoint;
+    this.deploymentEndpoint = deploymentEndpoint;
   }
-  get() {
-    return this.graphs.get();
+  getGraphsData() {
+    return backOffRequest(() => Vue.http.get(this.metricsEndpoint))
+      .then(resp => resp.json())
+      .then((response) => {
+        if (!response || !response.data) {
+          throw new Error('Unexpected metrics data response from prometheus endpoint');
+        }
+        return response.data;
+      });
   }
-  // eslint-disable-next-line class-methods-use-this
-  getDeploymentData(endpoint) {
-    return Vue.http.get(endpoint);
+  getDeploymentData() {
+    return backOffRequest(() => Vue.http.get(this.deploymentEndpoint))
+      .then(resp => resp.json())
+      .then((response) => {
+        if (!response || !response.deployments) {
+          throw new Error('Unexpected deployment data response from prometheus endpoint');
+        }
+        return response.deployments;
+      });
   }
 }

changelogs/unreleased/refactor-monitoring-service.yml

+---
+title: Perform prometheus data endpoint requests in parallel
+merge_request: 14003
+author:
+type: fixed