Refactor monitoring store to define refresh action

Refactor in order to enable the refresh button of the dashboard
to only refresh the data of the dashboard.

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/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,
   );