Merge branch '207549-refresh-dashboard-dynamically' into 'master'

Refactor monitoring dashboard to allow dashboard data refresh

See merge request gitlab-org/gitlab!28514

app/assets/javascripts/monitoring/stores/actions.js

@@ -12,6 +12,20 @@ import { s__, sprintf } from '../../locale';
 
 import { PROMETHEUS_TIMEOUT } from '../constants';
 
+function prometheusMetricQueryParams(timeRange) {
+  const { start, end } = convertToFixedRange(timeRange);
+
+  const timeDiff = (new Date(end) - new Date(start)) / 1000;
+  const minStep = 60;
+  const queryDataPoints = 600;
+
+  return {
+    start_time: start,
+    end_time: end,
+    step: Math.max(minStep, Math.ceil(timeDiff / queryDataPoints)),
+  };
+}
+
 function backOffRequest(makeRequestCallback) {
   return backOff((next, stop) => {
     makeRequestCallback()
@@ -26,6 +40,20 @@ function backOffRequest(makeRequestCallback) {
   }, PROMETHEUS_TIMEOUT);
 }
 
+function getPrometheusMetricResult(prometheusEndpoint, params) {
+  return backOffRequest(() => axios.get(prometheusEndpoint, { params }))
+    .then(res => res.data)
+    .then(response => {
+      if (response.status === 'error') {
+        throw new Error(response.error);
+      }
+
+      return response.data.result;
+    });
+}
+
+// Setup
+
 export const setGettingStartedEmptyState = ({ commit }) => {
   commit(types.SET_GETTING_STARTED_EMPTY_STATE);
 };
@@ -47,56 +75,26 @@ export const setShowErrorBanner = ({ commit }, enabled) => {
   commit(types.SET_SHOW_ERROR_BANNER, enabled);
 };
 
-export const requestMetricsDashboard = ({ commit }) => {
-  commit(types.REQUEST_METRICS_DATA);
-};
-export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response, params }) => {
-  const { all_dashboards, dashboard, metrics_data } = response;
-
-  commit(types.SET_ALL_DASHBOARDS, all_dashboards);
-  commit(types.RECEIVE_METRICS_DATA_SUCCESS, dashboard);
-  commit(types.SET_ENDPOINTS, convertObjectPropsToCamelCase(metrics_data));
-
-  return dispatch('fetchPrometheusMetrics', params);
-};
-export const receiveMetricsDashboardFailure = ({ commit }, error) => {
-  commit(types.RECEIVE_METRICS_DATA_FAILURE, error);
-};
-
-export const receiveDeploymentsDataSuccess = ({ commit }, data) =>
-  commit(types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS, data);
-export const receiveDeploymentsDataFailure = ({ commit }) =>
-  commit(types.RECEIVE_DEPLOYMENTS_DATA_FAILURE);
-export const requestEnvironmentsData = ({ commit }) => commit(types.REQUEST_ENVIRONMENTS_DATA);
-export const receiveEnvironmentsDataSuccess = ({ commit }, data) =>
-  commit(types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, data);
-export const receiveEnvironmentsDataFailure = ({ commit }) =>
-  commit(types.RECEIVE_ENVIRONMENTS_DATA_FAILURE);
+// All Data
 
 export const fetchData = ({ dispatch }) => {
-  dispatch('fetchDashboard');
-  dispatch('fetchDeploymentsData');
   dispatch('fetchEnvironmentsData');
+  dispatch('fetchDashboard');
 };
 
+// Metrics dashboard
+
 export const fetchDashboard = ({ state, commit, dispatch }) => {
   dispatch('requestMetricsDashboard');
 
   const params = {};
-
-  if (state.timeRange) {
-    const { start, end } = convertToFixedRange(state.timeRange);
-    params.start_time = start;
-    params.end_time = end;
-  }
-
   if (state.currentDashboard) {
     params.dashboard = state.currentDashboard;
   }
 
   return backOffRequest(() => axios.get(state.dashboardEndpoint, { params }))
     .then(resp => resp.data)
-    .then(response => dispatch('receiveMetricsDashboardSuccess', { response, params }))
+    .then(response => dispatch('receiveMetricsDashboardSuccess', { response }))
     .catch(error => {
       Sentry.captureException(error);
 
@@ -120,61 +118,43 @@ export const fetchDashboard = ({ state, commit, dispatch }) => {
     });
 };
 
-function fetchPrometheusResult(prometheusEndpoint, params) {
-  return backOffRequest(() => axios.get(prometheusEndpoint, { params }))
-    .then(res => res.data)
-    .then(response => {
-      if (response.status === 'error') {
-        throw new Error(response.error);
-      }
-
-      return response.data.result;
-    });
-}
-
-/**
- * Returns list of metrics in data.result
- * {"status":"success", "data":{"resultType":"matrix","result":[]}}
- *
- * @param {metric} metric
- */
-export const fetchPrometheusMetric = ({ commit }, { metric, params }) => {
-  const { start_time, end_time } = params;
-  const timeDiff = (new Date(end_time) - new Date(start_time)) / 1000;
+export const requestMetricsDashboard = ({ commit }) => {
+  commit(types.REQUEST_METRICS_DASHBOARD);
+};
+export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response }) => {
+  const { all_dashboards, dashboard, metrics_data } = response;
 
-  const minStep = 60;
-  const queryDataPoints = 600;
-  const step = metric.step ? metric.step : Math.max(minStep, Math.ceil(timeDiff / queryDataPoints));
+  commit(types.SET_ALL_DASHBOARDS, all_dashboards);
+  commit(types.RECEIVE_METRICS_DASHBOARD_SUCCESS, dashboard);
+  commit(types.SET_ENDPOINTS, convertObjectPropsToCamelCase(metrics_data));
 
-  const queryParams = {
-    start_time,
-    end_time,
-    step,
-  };
+  return dispatch('fetchPrometheusMetrics');
+};
+export const receiveMetricsDashboardFailure = ({ commit }, error) => {
+  commit(types.RECEIVE_METRICS_DASHBOARD_FAILURE, error);
+};
 
-  commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metricId });
+// Metrics
 
-  return fetchPrometheusResult(metric.prometheusEndpointPath, queryParams)
-    .then(result => {
-      commit(types.RECEIVE_METRIC_RESULT_SUCCESS, { metricId: metric.metricId, result });
-    })
-    .catch(error => {
-      Sentry.captureException(error);
+/**
+ * Loads timeseries data: Prometheus data points and deployment data from the project
+ * @param {Object} Vuex store
+ */
+export const fetchPrometheusMetrics = ({ state, dispatch, getters }) => {
+  dispatch('fetchDeploymentsData');
 
-      commit(types.RECEIVE_METRIC_RESULT_FAILURE, { metricId: metric.metricId, error });
-      // Continue to throw error so the dashboard can notify using createFlash
-      throw error;
-    });
-};
+  if (!state.timeRange) {
+    createFlash(s__(`Metrics|Invalid time range, please verify.`), 'warning');
+    return Promise.reject();
+  }
 
-export const fetchPrometheusMetrics = ({ state, commit, dispatch, getters }, params) => {
-  commit(types.REQUEST_METRICS_DATA);
+  const defaultQueryParams = prometheusMetricQueryParams(state.timeRange);
 
   const promises = [];
   state.dashboard.panelGroups.forEach(group => {
     group.panels.forEach(panel => {
       panel.metrics.forEach(metric => {
-        promises.push(dispatch('fetchPrometheusMetric', { metric, params }));
+        promises.push(dispatch('fetchPrometheusMetric', { metric, defaultQueryParams }));
       });
     });
   });
@@ -192,6 +172,35 @@ export const fetchPrometheusMetrics = ({ state, commit, dispatch, getters }, par
     });
 };
 
+/**
+ * Returns list of metrics in data.result
+ * {"status":"success", "data":{"resultType":"matrix","result":[]}}
+ *
+ * @param {metric} metric
+ */
+export const fetchPrometheusMetric = ({ commit }, { metric, defaultQueryParams }) => {
+  const queryParams = { ...defaultQueryParams };
+  if (metric.step) {
+    queryParams.step = metric.step;
+  }
+
+  commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metricId });
+
+  return getPrometheusMetricResult(metric.prometheusEndpointPath, queryParams)
+    .then(result => {
+      commit(types.RECEIVE_METRIC_RESULT_SUCCESS, { metricId: metric.metricId, result });
+    })
+    .catch(error => {
+      Sentry.captureException(error);
+
+      commit(types.RECEIVE_METRIC_RESULT_FAILURE, { metricId: metric.metricId, error });
+      // Continue to throw error so the dashboard can notify using createFlash
+      throw error;
+    });
+};
+
+// Deployments
+
 export const fetchDeploymentsData = ({ state, dispatch }) => {
   if (!state.deploymentsEndpoint) {
     return Promise.resolve([]);
@@ -212,6 +221,14 @@ export const fetchDeploymentsData = ({ state, dispatch }) => {
       createFlash(s__('Metrics|There was an error getting deployment information.'));
     });
 };
+export const receiveDeploymentsDataSuccess = ({ commit }, data) => {
+  commit(types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS, data);
+};
+export const receiveDeploymentsDataFailure = ({ commit }) => {
+  commit(types.RECEIVE_DEPLOYMENTS_DATA_FAILURE);
+};
+
+// Environments
 
 export const fetchEnvironmentsData = ({ state, dispatch }) => {
   dispatch('requestEnvironmentsData');
@@ -241,6 +258,17 @@ export const fetchEnvironmentsData = ({ state, dispatch }) => {
       createFlash(s__('Metrics|There was an error getting environments information.'));
     });
 };
+export const requestEnvironmentsData = ({ commit }) => {
+  commit(types.REQUEST_ENVIRONMENTS_DATA);
+};
+export const receiveEnvironmentsDataSuccess = ({ commit }, data) => {
+  commit(types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, data);
+};
+export const receiveEnvironmentsDataFailure = ({ commit }) => {
+  commit(types.RECEIVE_ENVIRONMENTS_DATA_FAILURE);
+};
+
+// Dashboard manipulation
 
 /**
  * Set a new array of metrics to a panel group

app/assets/javascripts/monitoring/stores/mutation_types.js

-export const REQUEST_METRICS_DATA = 'REQUEST_METRICS_DATA';
-export const RECEIVE_METRICS_DATA_SUCCESS = 'RECEIVE_METRICS_DATA_SUCCESS';
-export const RECEIVE_METRICS_DATA_FAILURE = 'RECEIVE_METRICS_DATA_FAILURE';
+// Dashboard "skeleton", groups, panels and metrics
+export const REQUEST_METRICS_DASHBOARD = 'REQUEST_METRICS_DASHBOARD';
+export const RECEIVE_METRICS_DASHBOARD_SUCCESS = 'RECEIVE_METRICS_DASHBOARD_SUCCESS';
+export const RECEIVE_METRICS_DASHBOARD_FAILURE = 'RECEIVE_METRICS_DASHBOARD_FAILURE';
 
+// Git project deployments
 export const REQUEST_DEPLOYMENTS_DATA = 'REQUEST_DEPLOYMENTS_DATA';
 export const RECEIVE_DEPLOYMENTS_DATA_SUCCESS = 'RECEIVE_DEPLOYMENTS_DATA_SUCCESS';
 export const RECEIVE_DEPLOYMENTS_DATA_FAILURE = 'RECEIVE_DEPLOYMENTS_DATA_FAILURE';
 
+// Environments
 export const REQUEST_ENVIRONMENTS_DATA = 'REQUEST_ENVIRONMENTS_DATA';
 export const RECEIVE_ENVIRONMENTS_DATA_SUCCESS = 'RECEIVE_ENVIRONMENTS_DATA_SUCCESS';
 export const RECEIVE_ENVIRONMENTS_DATA_FAILURE = 'RECEIVE_ENVIRONMENTS_DATA_FAILURE';
 
+// Metric data points
 export const REQUEST_METRIC_RESULT = 'REQUEST_METRIC_RESULT';
 export const RECEIVE_METRIC_RESULT_SUCCESS = 'RECEIVE_METRIC_RESULT_SUCCESS';
 export const RECEIVE_METRIC_RESULT_FAILURE = 'RECEIVE_METRIC_RESULT_FAILURE';
 
+// Parameters and other information
 export const SET_TIME_RANGE = 'SET_TIME_RANGE';
 export const SET_ALL_DASHBOARDS = 'SET_ALL_DASHBOARDS';
 export const SET_ENDPOINTS = 'SET_ENDPOINTS';

app/assets/javascripts/monitoring/stores/mutations.js

@@ -74,18 +74,18 @@ export default {
   /**
    * Dashboard panels structure and global state
    */
-  [types.REQUEST_METRICS_DATA](state) {
+  [types.REQUEST_METRICS_DASHBOARD](state) {
     state.emptyState = 'loading';
     state.showEmptyState = true;
   },
-  [types.RECEIVE_METRICS_DATA_SUCCESS](state, dashboard) {
+  [types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, dashboard) {
     state.dashboard = mapToDashboardViewModel(dashboard);
 
     if (!state.dashboard.panelGroups.length) {
       state.emptyState = 'noData';
     }
   },
-  [types.RECEIVE_METRICS_DATA_FAILURE](state, error) {
+  [types.RECEIVE_METRICS_DASHBOARD_FAILURE](state, error) {
     state.emptyState = error ? 'unableToConnect' : 'noData';
     state.showEmptyState = true;
   },

ee/spec/frontend/monitoring/components/dashboard_spec.js

@@ -58,7 +58,7 @@ describe('Dashboard', () => {
 
   function setupComponentStore(component) {
     component.vm.$store.commit(
-      `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+      `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
       metricsDashboardPayload,
     );
 

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -65,7 +65,7 @@ describe('Time series component', () => {
       store = createStore();
 
       store.commit(
-        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+        `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
         metricsDashboardPayload,
       );
 

spec/frontend/monitoring/components/dashboard_spec.js

@@ -202,7 +202,7 @@ describe('Dashboard', () => {
     createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
 
     wrapper.vm.$store.commit(
-      `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+      `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
       metricsDashboardPayload,
     );
     wrapper.vm.$store.commit(

spec/frontend/monitoring/init_utils.js

@@ -32,7 +32,7 @@ export const propsData = {
 
 export const setupComponentStore = wrapper => {
   wrapper.vm.$store.commit(
-    `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+    `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
     metricsDashboardPayload,
   );
 

spec/frontend/monitoring/store/actions_spec.js

@@ -5,13 +5,13 @@ import axios from '~/lib/utils/axios_utils';
 import statusCodes from '~/lib/utils/http_status';
 import * as commonUtils from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
+import { defaultTimeRange } from '~/vue_shared/constants';
 
 import store from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import {
   fetchDashboard,
   receiveMetricsDashboardSuccess,
-  receiveMetricsDashboardFailure,
   fetchDeploymentsData,
   fetchEnvironmentsData,
   fetchPrometheusMetrics,
@@ -77,42 +77,40 @@ describe('Monitoring store actions', () => {
   });
 
   describe('fetchDeploymentsData', () => {
-    it('commits RECEIVE_DEPLOYMENTS_DATA_SUCCESS on error', done => {
-      const dispatch = jest.fn();
+    it('dispatches receiveDeploymentsDataSuccess on success', () => {
       const { state } = store;
       state.deploymentsEndpoint = '/success';
       mock.onGet(state.deploymentsEndpoint).reply(200, {
         deployments: deploymentData,
       });
-      fetchDeploymentsData({
+
+      return testAction(
+        fetchDeploymentsData,
+        null,
         state,
-        dispatch,
-      })
-        .then(() => {
-          expect(dispatch).toHaveBeenCalledWith('receiveDeploymentsDataSuccess', deploymentData);
-          done();
-        })
-        .catch(done.fail);
+        [],
+        [{ type: 'receiveDeploymentsDataSuccess', payload: deploymentData }],
+      );
     });
-    it('commits RECEIVE_DEPLOYMENTS_DATA_FAILURE on error', done => {
-      const dispatch = jest.fn();
+    it('dispatches receiveDeploymentsDataFailure on error', () => {
       const { state } = store;
       state.deploymentsEndpoint = '/error';
       mock.onGet(state.deploymentsEndpoint).reply(500);
-      fetchDeploymentsData({
+
+      return testAction(
+        fetchDeploymentsData,
+        null,
         state,
-        dispatch,
-      })
-        .then(() => {
-          expect(dispatch).toHaveBeenCalledWith('receiveDeploymentsDataFailure');
-          done();
-        })
-        .catch(done.fail);
+        [],
+        [{ type: 'receiveDeploymentsDataFailure' }],
+        () => {
+          expect(createFlash).toHaveBeenCalled();
+        },
+      );
     });
   });
 
   describe('fetchEnvironmentsData', () => {
-    const dispatch = jest.fn();
     const { state } = store;
     state.projectPath = 'gitlab-org/gitlab-test';
 
@@ -164,15 +162,19 @@ describe('Monitoring store actions', () => {
       state.environmentsSearchTerm = searchTerm;
       mockMutate.mockReturnValue(Promise.resolve());
 
-      return fetchEnvironmentsData({
+      return testAction(
+        fetchEnvironmentsData,
+        null,
         state,
-        dispatch,
-      }).then(() => {
-        expect(mockMutate).toHaveBeenCalledWith(mutationVariables);
-      });
+        [],
+        [{ type: 'requestEnvironmentsData' }, { type: 'receiveEnvironmentsDataFailure' }],
+        () => {
+          expect(mockMutate).toHaveBeenCalledWith(mutationVariables);
+        },
+      );
     });
 
-    it('commits RECEIVE_ENVIRONMENTS_DATA_SUCCESS on success', () => {
+    it('dispatches receiveEnvironmentsDataSuccess on success', () => {
       jest.spyOn(gqClient, 'mutate').mockReturnValue(
         Promise.resolve({
           data: {
@@ -185,26 +187,31 @@ describe('Monitoring store actions', () => {
         }),
       );
 
-      return fetchEnvironmentsData({
+      return testAction(
+        fetchEnvironmentsData,
+        null,
         state,
-        dispatch,
-      }).then(() => {
-        expect(dispatch).toHaveBeenCalledWith(
-          'receiveEnvironmentsDataSuccess',
-          parseEnvironmentsResponse(environmentData, state.projectPath),
-        );
-      });
+        [],
+        [
+          { type: 'requestEnvironmentsData' },
+          {
+            type: 'receiveEnvironmentsDataSuccess',
+            payload: parseEnvironmentsResponse(environmentData, state.projectPath),
+          },
+        ],
+      );
     });
 
-    it('commits RECEIVE_ENVIRONMENTS_DATA_FAILURE on error', () => {
+    it('dispatches receiveEnvironmentsDataFailure on error', () => {
       jest.spyOn(gqClient, 'mutate').mockReturnValue(Promise.reject());
 
-      return fetchEnvironmentsData({
+      return testAction(
+        fetchEnvironmentsData,
+        null,
         state,
-        dispatch,
-      }).then(() => {
-        expect(dispatch).toHaveBeenCalledWith('receiveEnvironmentsDataFailure');
-      });
+        [],
+        [{ type: 'requestEnvironmentsData' }, { type: 'receiveEnvironmentsDataFailure' }],
+      );
     });
   });
 
@@ -266,27 +273,24 @@ describe('Monitoring store actions', () => {
       state = storeState();
       state.dashboardEndpoint = '/dashboard';
     });
-    it('on success, dispatches receive and success actions', done => {
-      const params = {};
+
+    it('on success, dispatches receive and success actions', () => {
       document.body.dataset.page = 'projects:environments:metrics';
       mock.onGet(state.dashboardEndpoint).reply(200, response);
-      fetchDashboard(
-        {
-          state,
-          commit,
-          dispatch,
-        },
-        params,
-      )
-        .then(() => {
-          expect(dispatch).toHaveBeenCalledWith('requestMetricsDashboard');
-          expect(dispatch).toHaveBeenCalledWith('receiveMetricsDashboardSuccess', {
-            response,
-            params,
-          });
-          done();
-        })
-        .catch(done.fail);
+
+      return testAction(
+        fetchDashboard,
+        null,
+        state,
+        [],
+        [
+          { type: 'requestMetricsDashboard' },
+          {
+            type: 'receiveMetricsDashboardSuccess',
+            payload: { response },
+          },
+        ],
+      );
     });
 
     describe('on failure', () => {
@@ -299,7 +303,7 @@ describe('Monitoring store actions', () => {
         };
       });
 
-      it('dispatches a failure action', done => {
+      it('dispatches a failure', done => {
         result()
           .then(() => {
             expect(commit).toHaveBeenCalledWith(
@@ -351,31 +355,22 @@ describe('Monitoring store actions', () => {
     let commit;
     let dispatch;
     let state;
+
     beforeEach(() => {
       commit = jest.fn();
       dispatch = jest.fn();
       state = storeState();
     });
-    it('stores groups ', () => {
-      const params = {};
+
+    it('stores groups', () => {
       const response = metricsDashboardResponse;
-      receiveMetricsDashboardSuccess(
-        {
-          state,
-          commit,
-          dispatch,
-        },
-        {
-          response,
-          params,
-        },
-      );
+      receiveMetricsDashboardSuccess({ state, commit, dispatch }, { response });
       expect(commit).toHaveBeenCalledWith(
-        types.RECEIVE_METRICS_DATA_SUCCESS,
+        types.RECEIVE_METRICS_DASHBOARD_SUCCESS,
 
         metricsDashboardResponse.dashboard,
       );
-      expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetrics', params);
+      expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetrics');
     });
     it('sets the dashboards loaded from the repository', () => {
       const params = {};
@@ -395,29 +390,7 @@ describe('Monitoring store actions', () => {
       expect(commit).toHaveBeenCalledWith(types.SET_ALL_DASHBOARDS, dashboardGitResponse);
     });
   });
-  describe('receiveMetricsDashboardFailure', () => {
-    let commit;
-    beforeEach(() => {
-      commit = jest.fn();
-    });
-    it('commits failure action', () => {
-      receiveMetricsDashboardFailure({
-        commit,
-      });
-      expect(commit).toHaveBeenCalledWith(types.RECEIVE_METRICS_DATA_FAILURE, undefined);
-    });
-    it('commits failure action with error', () => {
-      receiveMetricsDashboardFailure(
-        {
-          commit,
-        },
-        'uh-oh',
-      );
-      expect(commit).toHaveBeenCalledWith(types.RECEIVE_METRICS_DATA_FAILURE, 'uh-oh');
-    });
-  });
   describe('fetchPrometheusMetrics', () => {
-    const params = {};
     let commit;
     let dispatch;
     let state;
@@ -427,13 +400,15 @@ describe('Monitoring store actions', () => {
       commit = jest.fn();
       dispatch = jest.fn();
       state = storeState();
+
+      state.timeRange = defaultTimeRange;
     });
 
     it('commits empty state when state.groups is empty', done => {
       const getters = {
         metricsWithData: () => [],
       };
-      fetchPrometheusMetrics({ state, commit, dispatch, getters }, params)
+      fetchPrometheusMetrics({ state, commit, dispatch, getters })
         .then(() => {
           expect(Tracking.event).toHaveBeenCalledWith(
             document.body.dataset.page,
@@ -444,7 +419,9 @@ describe('Monitoring store actions', () => {
               value: 0,
             },
           );
-          expect(dispatch).not.toHaveBeenCalled();
+          expect(dispatch).toHaveBeenCalledTimes(1);
+          expect(dispatch).toHaveBeenCalledWith('fetchDeploymentsData');
+
           expect(createFlash).not.toHaveBeenCalled();
           done();
         })
@@ -460,11 +437,15 @@ describe('Monitoring store actions', () => {
         metricsWithData: () => [metric.id],
       };
 
-      fetchPrometheusMetrics({ state, commit, dispatch, getters }, params)
+      fetchPrometheusMetrics({ state, commit, dispatch, getters })
         .then(() => {
           expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetric', {
             metric,
-            params,
+            defaultQueryParams: {
+              start_time: expect.any(String),
+              end_time: expect.any(String),
+              step: expect.any(Number),
+            },
           });
 
           expect(Tracking.event).toHaveBeenCalledWith(
@@ -487,16 +468,22 @@ describe('Monitoring store actions', () => {
       state.dashboard.panelGroups = metricsDashboardViewModel.panelGroups;
       const metric = state.dashboard.panelGroups[0].panels[0].metrics[0];
 
+      dispatch.mockResolvedValueOnce(); // fetchDeploymentsData
       // Mock having one out of four metrics failing
       dispatch.mockRejectedValueOnce(new Error('Error fetching this metric'));
       dispatch.mockResolvedValue();
 
-      fetchPrometheusMetrics({ state, commit, dispatch }, params)
+      fetchPrometheusMetrics({ state, commit, dispatch })
         .then(() => {
-          expect(dispatch).toHaveBeenCalledTimes(9); // one per metric
+          expect(dispatch).toHaveBeenCalledTimes(10); // one per metric plus 1 for deployments
+          expect(dispatch).toHaveBeenCalledWith('fetchDeploymentsData');
           expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetric', {
             metric,
-            params,
+            defaultQueryParams: {
+              start_time: expect.any(String),
+              end_time: expect.any(String),
+              step: expect.any(Number),
+            },
           });
 
           expect(createFlash).toHaveBeenCalledTimes(1);
@@ -508,9 +495,10 @@ describe('Monitoring store actions', () => {
     });
   });
   describe('fetchPrometheusMetric', () => {
-    const params = {
+    const defaultQueryParams = {
       start_time: '2019-08-06T12:40:02.184Z',
       end_time: '2019-08-06T20:40:02.184Z',
+      step: 60,
     };
     let metric;
     let state;
@@ -532,7 +520,7 @@ describe('Monitoring store actions', () => {
 
       testAction(
         fetchPrometheusMetric,
-        { metric, params },
+        { metric, defaultQueryParams },
         state,
         [
           {
@@ -569,7 +557,7 @@ describe('Monitoring store actions', () => {
 
         testAction(
           fetchPrometheusMetric,
-          { metric, params },
+          { metric, defaultQueryParams },
           state,
           [
             {
@@ -611,7 +599,7 @@ describe('Monitoring store actions', () => {
 
         testAction(
           fetchPrometheusMetric,
-          { metric, params },
+          { metric, defaultQueryParams },
           state,
           [
             {
@@ -646,7 +634,7 @@ describe('Monitoring store actions', () => {
 
       testAction(
         fetchPrometheusMetric,
-        { metric, params },
+        { metric, defaultQueryParams },
         state,
         [
           {
@@ -682,7 +670,7 @@ describe('Monitoring store actions', () => {
 
       testAction(
         fetchPrometheusMetric,
-        { metric, params },
+        { metric, defaultQueryParams },
         state,
         [
           {

spec/frontend/monitoring/store/getters_spec.js

@@ -51,7 +51,7 @@ describe('Monitoring store Getters', () => {
         setupState({
           dashboard: { panelGroups: [] },
         });
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         groups = state.dashboard.panelGroups;
       });
 
@@ -60,21 +60,21 @@ describe('Monitoring store Getters', () => {
       });
 
       it('on an empty metric with no result, returns NO_DATA', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyThroughputResult);
 
         expect(getMetricStates()).toEqual([metricStates.NO_DATA]);
       });
 
       it('on a metric with a result, returns OK', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
 
         expect(getMetricStates()).toEqual([metricStates.OK]);
       });
 
       it('on a metric with an error, returns an error', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, {
           metricId: groups[0].panels[0].metrics[0].metricId,
         });
@@ -83,7 +83,7 @@ describe('Monitoring store Getters', () => {
       });
 
       it('on multiple metrics with results, returns OK', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode);
 
@@ -94,7 +94,7 @@ describe('Monitoring store Getters', () => {
         expect(getMetricStates(state.dashboard.panelGroups[2].key)).toEqual([]);
       });
       it('on multiple metrics errors', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
 
         mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, {
           metricId: groups[0].panels[0].metrics[0].metricId,
@@ -113,7 +113,7 @@ describe('Monitoring store Getters', () => {
       });
 
       it('on multiple metrics with errors', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
 
         // An success in 1 group
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
@@ -175,27 +175,27 @@ describe('Monitoring store Getters', () => {
       });
 
       it('no loaded metric returns empty', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
 
         expect(metricsWithData()).toEqual([]);
       });
 
       it('an empty metric, returns empty', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyThroughputResult);
 
         expect(metricsWithData()).toEqual([]);
       });
 
       it('a metric with results, it returns a metric', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
 
         expect(metricsWithData()).toEqual([mockedQueryResultFixture.metricId]);
       });
 
       it('multiple metrics with results, it return multiple metrics', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode);
 
@@ -206,7 +206,7 @@ describe('Monitoring store Getters', () => {
       });
 
       it('multiple metrics with results, it returns metrics filtered by group', () => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode);
 
@@ -291,7 +291,7 @@ describe('Monitoring store Getters', () => {
     });
 
     it('return no metrics when dashboard is not persisted', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, mockData);
+      mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, mockData);
       metricsSavedToDb = getters.metricsSavedToDb(state);
 
       expect(metricsSavedToDb).toEqual([]);
@@ -304,7 +304,7 @@ describe('Monitoring store Getters', () => {
 
       metric.metric_id = id;
 
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, mockData);
+      mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, mockData);
       metricsSavedToDb = getters.metricsSavedToDb(state);
 
       expect(metricsSavedToDb).toEqual([`${id}_${metric.id}`]);
@@ -321,7 +321,7 @@ describe('Monitoring store Getters', () => {
       metric1.metric_id = id1;
       metric2.metric_id = id2;
 
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, mockData);
+      mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, mockData);
       metricsSavedToDb = getters.metricsSavedToDb(state);
 
       expect(metricsSavedToDb).toEqual([`${id1}_${metric1.id}`, `${id2}_${metric2.id}`]);

spec/frontend/monitoring/store/mutations_spec.js

@@ -20,7 +20,7 @@ describe('Monitoring mutations', () => {
     stateCopy = state();
   });
 
-  describe('RECEIVE_METRICS_DATA_SUCCESS', () => {
+  describe('RECEIVE_METRICS_DASHBOARD_SUCCESS', () => {
     let payload;
     const getGroups = () => stateCopy.dashboard.panelGroups;
 
@@ -29,7 +29,7 @@ describe('Monitoring mutations', () => {
       payload = metricsDashboardPayload;
     });
     it('adds a key to the group', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
+      mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, payload);
       const groups = getGroups();
 
       expect(groups[0].key).toBe('system-metrics-kubernetes-0');
@@ -37,7 +37,7 @@ describe('Monitoring mutations', () => {
       expect(groups[2].key).toBe('response-metrics-nginx-ingress-2');
     });
     it('normalizes values', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
+      mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, payload);
       const expectedLabel = 'Pod average (MB)';
 
       const { label, queryRange } = getGroups()[0].panels[2].metrics[0];
@@ -45,7 +45,7 @@ describe('Monitoring mutations', () => {
       expect(queryRange.length).toBeGreaterThan(0);
     });
     it('contains six groups, with panels with a metric each', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
+      mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, payload);
 
       const groups = getGroups();
 
@@ -61,7 +61,7 @@ describe('Monitoring mutations', () => {
       expect(groups[1].panels[0].metrics).toHaveLength(1);
     });
     it('assigns metrics a metric id', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
+      mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, payload);
 
       const groups = getGroups();
 
@@ -195,7 +195,7 @@ describe('Monitoring mutations', () => {
 
     describe('REQUEST_METRIC_RESULT', () => {
       beforeEach(() => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, dashboard);
       });
       it('stores a loading state on a metric', () => {
         expect(stateCopy.showEmptyState).toBe(true);
@@ -218,7 +218,7 @@ describe('Monitoring mutations', () => {
 
     describe('RECEIVE_METRIC_RESULT_SUCCESS', () => {
       beforeEach(() => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, dashboard);
       });
       it('clears empty state', () => {
         expect(stateCopy.showEmptyState).toBe(true);
@@ -251,7 +251,7 @@ describe('Monitoring mutations', () => {
 
     describe('RECEIVE_METRIC_RESULT_FAILURE', () => {
       beforeEach(() => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard);
+        mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, dashboard);
       });
       it('maintains the loading state when a metric fails', () => {
         expect(stateCopy.showEmptyState).toBe(true);

spec/javascripts/monitoring/components/dashboard_resize_spec.js

@@ -39,7 +39,7 @@ const propsData = {
 function setupComponentStore(component) {
   // Load 2 panel groups
   component.$store.commit(
-    `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+    `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
     metricsDashboardPayload,
   );