Use Prometheus API for dashboard metrics

Make API request for each chart

3 files changed, 117 insertions, 1 deletions

diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 9b429be69f7..82e42fe9ade 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -880,6 +880,7 @@ export const metricsDashboardResponse = {
                 label: 'Total',
                 unit: 'GB',
                 metric_id: 12,
+                prometheus_endpoint_path: 'http://test',
               },
             ],
           },
diff --git a/spec/javascripts/monitoring/store/actions_spec.js b/spec/javascripts/monitoring/store/actions_spec.js
index 31f156b0785..8c02e21eda2 100644
--- a/spec/javascripts/monitoring/store/actions_spec.js
+++ b/spec/javascripts/monitoring/store/actions_spec.js
@@ -8,6 +8,8 @@ import {
   receiveMetricsDashboardFailure,
   fetchDeploymentsData,
   fetchEnvironmentsData,
+  fetchPrometheusMetrics,
+  fetchPrometheusMetric,
   requestMetricsData,
   setEndpoints,
   setGettingStartedEmptyState,
@@ -15,7 +17,12 @@ import {
 import storeState from '~/monitoring/stores/state';
 import testAction from 'spec/helpers/vuex_action_helper';
 import { resetStore } from '../helpers';
-import { deploymentData, environmentData, metricsDashboardResponse } from '../mock_data';
+import {
+  deploymentData,
+  environmentData,
+  metricsDashboardResponse,
+  metricsGroupsAPIResponse,
+} from '../mock_data';
 
 describe('Monitoring store actions', () => {
   let mock;
@@ -179,6 +186,7 @@ describe('Monitoring store actions', () => {
           expect(dispatch).toHaveBeenCalledWith('requestMetricsDashboard');
           expect(dispatch).toHaveBeenCalledWith('receiveMetricsDashboardSuccess', {
             response,
+            params,
           });
           done();
         })
@@ -220,6 +228,8 @@ describe('Monitoring store actions', () => {
         types.RECEIVE_METRICS_DATA_SUCCESS,
         metricsDashboardResponse.dashboard.panel_groups,
       );
+
+      expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetrics', params);
     });
   });
 
@@ -242,4 +252,71 @@ describe('Monitoring store actions', () => {
       expect(commit).toHaveBeenCalledWith(types.RECEIVE_METRICS_DATA_FAILURE, 'uh-oh');
     });
   });
+
+  describe('fetchPrometheusMetrics', () => {
+    let commit;
+    let dispatch;
+
+    beforeEach(() => {
+      commit = jasmine.createSpy();
+      dispatch = jasmine.createSpy();
+    });
+
+    it('commits empty state when state.groups is empty', done => {
+      const state = storeState();
+      const params = {};
+
+      fetchPrometheusMetrics({ state, commit, dispatch }, params)
+        .then(() => {
+          expect(commit).toHaveBeenCalledWith(types.SET_NO_DATA_EMPTY_STATE);
+          expect(dispatch).not.toHaveBeenCalled();
+          done();
+        })
+        .catch(done.fail);
+    });
+
+    it('dispatches fetchPrometheusMetric for each panel query', done => {
+      const params = {};
+      const state = storeState();
+      state.groups = metricsDashboardResponse.dashboard.panel_groups;
+
+      const metric = state.groups[0].panels[0].metrics[0];
+
+      fetchPrometheusMetrics({ state, commit, dispatch }, params)
+        .then(() => {
+          expect(dispatch.calls.count()).toEqual(3);
+          expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetric', { metric, params });
+          done();
+        })
+        .catch(done.fail);
+
+      done();
+    });
+  });
+
+  describe('fetchPrometheusMetric', () => {
+    it('commits prometheus query result', done => {
+      const commit = jasmine.createSpy();
+      const params = {
+        start: '1557216349.469',
+        end: '1557218149.469',
+      };
+      const metric = metricsDashboardResponse.dashboard.panel_groups[0].panels[0].metrics[0];
+      const state = storeState();
+
+      const data = metricsGroupsAPIResponse.data[0].metrics[0].queries[0];
+      const response = { data };
+      mock.onGet('http://test').reply(200, response);
+
+      fetchPrometheusMetric({ state, commit }, { metric, params });
+
+      setTimeout(() => {
+        expect(commit).toHaveBeenCalledWith(types.SET_QUERY_RESULT, {
+          metricId: metric.metric_id,
+          result: data.result,
+        });
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/monitoring/store/mutations_spec.js b/spec/javascripts/monitoring/store/mutations_spec.js
index bce399ece74..02ff5847b34 100644
--- a/spec/javascripts/monitoring/store/mutations_spec.js
+++ b/spec/javascripts/monitoring/store/mutations_spec.js
@@ -118,4 +118,42 @@ describe('Monitoring mutations', () => {
       expect(stateCopy.dashboardEndpoint).toEqual('dashboard.json');
     });
   });
+
+  describe('SET_QUERY_RESULT', () => {
+    const metricId = 12;
+    const result = [{ values: [[0, 1], [1, 1], [1, 3]] }];
+
+    beforeEach(() => {
+      stateCopy.useDashboardEndpoint = true;
+      const dashboardGroups = metricsDashboardResponse.dashboard.panel_groups;
+      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
+    });
+
+    it('clears empty state', () => {
+      mutations[types.SET_QUERY_RESULT](stateCopy, {
+        metricId,
+        result,
+      });
+
+      expect(stateCopy.showEmptyState).toBe(false);
+    });
+
+    it('sets metricsWithData value', () => {
+      mutations[types.SET_QUERY_RESULT](stateCopy, {
+        metricId,
+        result,
+      });
+
+      expect(stateCopy.metricsWithData).toEqual([12]);
+    });
+
+    it('does not store empty results', () => {
+      mutations[types.SET_QUERY_RESULT](stateCopy, {
+        metricId,
+        result: [],
+      });
+
+      expect(stateCopy.metricsWithData).toEqual([]);
+    });
+  });
 });