Add error states to the dashboard metrics object

In order to have each individual error displayed in the dashboard, the
error status of the metrics should be stored.

The error store is added to the metrics, so each panel can display it's
own individual error state if needed.

Specifics:

- Add error states as constants
- Add mutations to capture loading and error states in each metric
- Capture each of the conditions that can create a given error
- Add specs for specific error cases
- Add new error cases to be tested under different server responses.
- Refactor to use the testAction util.

app/assets/javascripts/lib/utils/common_utils.js

@@ -490,6 +490,8 @@ export const historyPushState = newUrl => {
  */
 export const parseBoolean = value => (value && value.toString()) === 'true';
 
+export const BACKOFF_TIMEOUT = 'BACKOFF_TIMEOUT';
+
 /**
  * @callback backOffCallback
  * @param {Function} next
@@ -541,7 +543,7 @@ export const backOff = (fn, timeout = 60000) => {
         timeElapsed += nextInterval;
         nextInterval = Math.min(nextInterval + nextInterval, maxInterval);
       } else {
-        reject(new Error('BACKOFF_TIMEOUT'));
+        reject(new Error(BACKOFF_TIMEOUT));
       }
     };
 

app/assets/javascripts/lib/utils/http_status.js

@@ -21,6 +21,7 @@ const httpStatusCodes = {
   NOT_FOUND: 404,
   GONE: 410,
   UNPROCESSABLE_ENTITY: 422,
+  SERVICE_UNAVAILABLE: 503,
 };
 
 export const successCodes = [

app/assets/javascripts/monitoring/constants.js

 import { __ } from '~/locale';
 
+export const PROMETHEUS_TIMEOUT = 120000; // TWO_MINUTES
+
+/**
+ * Errors in Prometheus Queries (PromQL) for metrics
+ */
+export const metricsErrors = {
+  /**
+   * Connection timed out to prometheus server
+   * the timeout is set to PROMETHEUS_TIMEOUT
+   *
+   */
+  TIMEOUT: 'TIMEOUT',
+
+  /**
+   * The prometheus server replies with an empty data set
+   */
+  NO_DATA: 'NO_DATA',
+
+  /**
+   * The prometheus server cannot be reached
+   */
+  CONNECTION_FAILED: 'CONNECTION_FAILED',
+
+  /**
+   * The prometheus server was reach but it cannot process
+   * the query. This can happen for several reasons:
+   * - PromQL syntax is incorrect
+   * - An operator is not supported
+   */
+  BAD_DATA: 'BAD_DATA',
+
+  /**
+   * No specific reason found for error
+   */
+  UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+};
+
 export const sidebarAnimationDuration = 300; // milliseconds.
 
 export const chartHeight = 300;

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

@@ -6,7 +6,7 @@ import statusCodes from '../../lib/utils/http_status';
 import { backOff } from '../../lib/utils/common_utils';
 import { s__, sprintf } from '../../locale';
 
-const TWO_MINUTES = 120000;
+import { PROMETHEUS_TIMEOUT } from '../constants';
 
 function backOffRequest(makeRequestCallback) {
   return backOff((next, stop) => {
@@ -19,7 +19,7 @@ function backOffRequest(makeRequestCallback) {
         }
       })
       .catch(stop);
-  }, TWO_MINUTES);
+  }, PROMETHEUS_TIMEOUT);
 }
 
 export const setGettingStartedEmptyState = ({ commit }) => {
@@ -125,9 +125,17 @@ export const fetchPrometheusMetric = ({ commit }, { metric, params }) => {
     step,
   };
 
-  return fetchPrometheusResult(metric.prometheus_endpoint_path, queryParams).then(result => {
-    commit(types.SET_QUERY_RESULT, { metricId: metric.metric_id, result });
-  });
+  commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metric_id });
+
+  return fetchPrometheusResult(metric.prometheus_endpoint_path, queryParams)
+    .then(result => {
+      commit(types.RECEIVE_METRIC_RESULT_SUCCESS, { metricId: metric.metric_id, result });
+    })
+    .catch(error => {
+      commit(types.RECEIVE_METRIC_RESULT_ERROR, { metricId: metric.metric_id, error });
+      // Continue to throw error so the dashboard can notify using createFlash
+      throw error;
+    });
 };
 
 export const fetchPrometheusMetrics = ({ state, commit, dispatch, getters }, params) => {
@@ -159,7 +167,8 @@ export const fetchDeploymentsData = ({ state, dispatch }) => {
   if (!state.deploymentsEndpoint) {
     return Promise.resolve([]);
   }
-  return backOffRequest(() => axios.get(state.deploymentsEndpoint))
+  return axios
+    .get(state.deploymentsEndpoint)
     .then(resp => resp.data)
     .then(response => {
       if (!response || !response.deployments) {

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';
+
 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';
+
 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';
-export const SET_QUERY_RESULT = 'SET_QUERY_RESULT';
+
+export const REQUEST_METRIC_RESULT = 'REQUEST_METRIC_RESULT';
+export const RECEIVE_METRIC_RESULT_SUCCESS = 'RECEIVE_METRIC_RESULT_SUCCESS';
+export const RECEIVE_METRIC_RESULT_ERROR = 'RECEIVE_METRIC_RESULT_ERROR';
+
 export const SET_TIME_WINDOW = 'SET_TIME_WINDOW';
 export const SET_ALL_DASHBOARDS = 'SET_ALL_DASHBOARDS';
 export const SET_ENDPOINTS = 'SET_ENDPOINTS';

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

@@ -2,6 +2,9 @@ import Vue from 'vue';
 import { slugify } from '~/lib/utils/text_utility';
 import * as types from './mutation_types';
 import { normalizeMetric, normalizeQueryResult } from './utils';
+import { BACKOFF_TIMEOUT } from '../../lib/utils/common_utils';
+import { metricsErrors } from '../constants';
+import httpStatusCodes from '~/lib/utils/http_status';
 
 const normalizePanelMetrics = (metrics, defaultLabel) =>
   metrics.map(metric => ({
@@ -9,7 +12,70 @@ const normalizePanelMetrics = (metrics, defaultLabel) =>
     label: metric.label || defaultLabel,
   }));
 
+/**
+ * Locate and return a metric in the dashboard by its id
+ * as generated by `uniqMetricsId()`.
+ * @param {String} metricId Unique id in the dashboard
+ * @param {Object} dashboard Full dashboard object
+ */
+const findMetricInDashboard = (metricId, dashboard) => {
+  let res = null;
+  dashboard.panel_groups.forEach(group => {
+    group.panels.forEach(panel => {
+      panel.metrics.forEach(metric => {
+        if (metric.metric_id === metricId) {
+          res = metric;
+        }
+      });
+    });
+  });
+  return res;
+};
+
+/**
+ * Set a new state for a metric
+ * @param {Object} metric - Metric object as defined in the dashboard
+ * @param {Object} state - New state
+ * @param {Array|null} state.result - Array of results
+ * @param {String} state.error - Error code from metricsErrors
+ * @param {Boolean} state.loading - True if the metric is loading
+ */
+const setMetricState = (metric, { result = null, error = null, loading = false }) => {
+  Vue.set(metric, 'result', result);
+  Vue.set(metric, 'error', error);
+  Vue.set(metric, 'loading', loading);
+};
+
+/**
+ * Maps a backened error state to a `metricsErrors` constant
+ * @param {Object} error - Error from backend response
+ */
+const getMetricError = error => {
+  if (!error) {
+    return metricsErrors.UNKNOWN_ERROR;
+  }
+
+  // Special error responses
+  if (error.message === BACKOFF_TIMEOUT) {
+    return metricsErrors.TIMEOUT;
+  }
+
+  // Axios error responses
+  const { response } = error;
+  if (response && response.status === httpStatusCodes.SERVICE_UNAVAILABLE) {
+    return metricsErrors.CONNECTION_FAILED;
+  } else if (response && response.status === httpStatusCodes.BAD_REQUEST) {
+    // Note: "error.response.data.error" may contain Prometheus error information
+    return metricsErrors.BAD_DATA;
+  }
+
+  return metricsErrors.UNKNOWN_ERROR;
+};
+
 export default {
+  /**
+   * Dashboard panels structure and global state
+   */
   [types.REQUEST_METRICS_DATA](state) {
     state.emptyState = 'loading';
     state.showEmptyState = true;
@@ -40,6 +106,10 @@ export default {
     state.emptyState = error ? 'unableToConnect' : 'noData';
     state.showEmptyState = true;
   },
+
+  /**
+   * Deployments and environments
+   */
   [types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS](state, deployments) {
     state.deploymentData = deployments;
   },
@@ -53,28 +123,46 @@ export default {
     state.environments = [];
   },
 
-  [types.SET_QUERY_RESULT](state, { metricId, result }) {
-    if (!metricId || !result || result.length === 0) {
+  /**
+   * Individual panel/metric results
+   */
+  [types.REQUEST_METRIC_RESULT](state, { metricId }) {
+    const metric = findMetricInDashboard(metricId, state.dashboard);
+
+    setMetricState(metric, {
+      loading: true,
+    });
+  },
+  [types.RECEIVE_METRIC_RESULT_SUCCESS](state, { metricId, result }) {
+    if (!metricId) {
       return;
     }
 
     state.showEmptyState = false;
 
-    /**
-     * Search the dashboard state for a matching id
-     */
-    state.dashboard.panel_groups.forEach(group => {
-      group.panels.forEach(panel => {
-        panel.metrics.forEach(metric => {
-          if (metric.metric_id === metricId) {
-            // ensure dates/numbers are correctly formatted for charts
-            const normalizedResults = result.map(normalizeQueryResult);
-            Vue.set(metric, 'result', Object.freeze(normalizedResults));
-          }
-        });
+    const metric = findMetricInDashboard(metricId, state.dashboard);
+    if (!result || result.length === 0) {
+      // If no data is return we still consider it an error and set it to undefined
+      setMetricState(metric, {
+        error: metricsErrors.NO_DATA,
+      });
+    } else {
+      const normalizedResults = result.map(normalizeQueryResult);
+      setMetricState(metric, {
+        result: Object.freeze(normalizedResults),
       });
+    }
+  },
+  [types.RECEIVE_METRIC_RESULT_ERROR](state, { metricId, error }) {
+    if (!metricId) {
+      return;
+    }
+    const metric = findMetricInDashboard(metricId, state.dashboard);
+    setMetricState(metric, {
+      error: getMetricError(error),
     });
   },
+
   [types.SET_ENDPOINTS](state, endpoints) {
     state.metricsEndpoint = endpoints.metricsEndpoint;
     state.environmentsEndpoint = endpoints.environmentsEndpoint;

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

@@ -8,9 +8,11 @@ export default () => ({
   emptyState: 'gettingStarted',
   showEmptyState: true,
   showErrorBanner: true,
+
   dashboard: {
     panel_groups: [],
   },
+
   deploymentData: [],
   environments: [],
   allDashboards: [],

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

@@ -67,7 +67,7 @@ describe('Dashboard', () => {
       metricsGroupsAPIResponse,
     );
     component.vm.$store.commit(
-      `monitoringDashboard/${types.SET_QUERY_RESULT}`,
+      `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
       mockedQueryResultPayload,
     );
     component.vm.$store.commit(

spec/frontend/monitoring/charts/time_series_spec.js

@@ -46,7 +46,10 @@ describe('Time series component', () => {
     store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
 
     // Mock data contains 2 panel groups, with 1 and 2 panels respectively
-    store.commit(`monitoringDashboard/${types.SET_QUERY_RESULT}`, mockedQueryResultPayload);
+    store.commit(
+      `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+      mockedQueryResultPayload,
+    );
 
     // Pick the second panel group and the first panel in it
     [mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;

spec/frontend/monitoring/store/actions_spec.js

@@ -434,13 +434,11 @@ describe('Monitoring store actions', () => {
       start: '2019-08-06T12:40:02.184Z',
       end: '2019-08-06T20:40:02.184Z',
     };
-    let commit;
     let metric;
     let state;
     let data;
 
     beforeEach(() => {
-      commit = jest.fn();
       state = storeState();
       [metric] = metricsDashboardResponse.dashboard.panel_groups[0].panels[0].metrics;
       [data] = metricsGroupsAPIResponse[0].panels[0].metrics;
@@ -449,17 +447,31 @@ describe('Monitoring store actions', () => {
     it('commits result', done => {
       mock.onGet('http://test').reply(200, { data }); // One attempt
 
-      fetchPrometheusMetric({ state, commit }, { metric, params })
-        .then(() => {
-          expect(commit).toHaveBeenCalledWith(types.SET_QUERY_RESULT, {
-            metricId: metric.metric_id,
-            result: data.result,
-          });
-
+      testAction(
+        fetchPrometheusMetric,
+        { metric, params },
+        state,
+        [
+          {
+            type: types.REQUEST_METRIC_RESULT,
+            payload: {
+              metricId: metric.metric_id,
+            },
+          },
+          {
+            type: types.RECEIVE_METRIC_RESULT_SUCCESS,
+            payload: {
+              metricId: metric.metric_id,
+              result: data.result,
+            },
+          },
+        ],
+        [],
+        () => {
           expect(mock.history.get).toHaveLength(1);
           done();
-        })
-        .catch(done.fail);
+        },
+      ).catch(done.fail);
     });
 
     it('commits result, when waiting for results', done => {
@@ -469,18 +481,31 @@ describe('Monitoring store actions', () => {
       mock.onGet('http://test').replyOnce(statusCodes.NO_CONTENT);
       mock.onGet('http://test').reply(200, { data }); // 4th attempt
 
-      const fetch = fetchPrometheusMetric({ state, commit }, { metric, params });
-
-      fetch
-        .then(() => {
-          expect(commit).toHaveBeenCalledWith(types.SET_QUERY_RESULT, {
-            metricId: metric.metric_id,
-            result: data.result,
-          });
+      testAction(
+        fetchPrometheusMetric,
+        { metric, params },
+        state,
+        [
+          {
+            type: types.REQUEST_METRIC_RESULT,
+            payload: {
+              metricId: metric.metric_id,
+            },
+          },
+          {
+            type: types.RECEIVE_METRIC_RESULT_SUCCESS,
+            payload: {
+              metricId: metric.metric_id,
+              result: data.result,
+            },
+          },
+        ],
+        [],
+        () => {
           expect(mock.history.get).toHaveLength(4);
           done();
-        })
-        .catch(done.fail);
+        },
+      ).catch(done.fail);
     });
 
     it('commits failure, when waiting for results and getting a server error', done => {
@@ -490,15 +515,33 @@ describe('Monitoring store actions', () => {
       mock.onGet('http://test').replyOnce(statusCodes.NO_CONTENT);
       mock.onGet('http://test').reply(500); // 4th attempt
 
-      fetchPrometheusMetric({ state, commit }, { metric, params })
-        .then(() => {
-          done.fail();
-        })
-        .catch(() => {
-          expect(commit).not.toHaveBeenCalled();
-          expect(mock.history.get).toHaveLength(4);
-          done();
-        });
+      const error = new Error('Request failed with status code 500');
+
+      testAction(
+        fetchPrometheusMetric,
+        { metric, params },
+        state,
+        [
+          {
+            type: types.REQUEST_METRIC_RESULT,
+            payload: {
+              metricId: metric.metric_id,
+            },
+          },
+          {
+            type: types.RECEIVE_METRIC_RESULT_ERROR,
+            payload: {
+              metricId: metric.metric_id,
+              error,
+            },
+          },
+        ],
+        [],
+      ).catch(e => {
+        expect(mock.history.get).toHaveLength(4);
+        expect(e).toEqual(error);
+        done();
+      });
     });
   });
 });

spec/frontend/monitoring/store/getters_spec.js

@@ -57,22 +57,22 @@ describe('Monitoring store Getters', () => {
 
       it('an empty metric, returns empty', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsGroupsAPIResponse);
-        mutations[types.SET_QUERY_RESULT](state, mockedEmptyResult);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyResult);
 
         expect(metricsWithData()).toEqual([]);
       });
 
       it('a metric with results, it returns a metric', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsGroupsAPIResponse);
-        mutations[types.SET_QUERY_RESULT](state, mockedQueryResultPayload);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
 
         expect(metricsWithData()).toEqual([mockedQueryResultPayload.metricId]);
       });
 
       it('multiple metrics with results, it return multiple metrics', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsGroupsAPIResponse);
-        mutations[types.SET_QUERY_RESULT](state, mockedQueryResultPayload);
-        mutations[types.SET_QUERY_RESULT](state, mockedQueryResultPayloadCoresTotal);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayloadCoresTotal);
 
         expect(metricsWithData()).toEqual([
           mockedQueryResultPayload.metricId,
@@ -82,8 +82,8 @@ describe('Monitoring store Getters', () => {
 
       it('multiple metrics with results, it returns metrics filtered by group', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsGroupsAPIResponse);
-        mutations[types.SET_QUERY_RESULT](state, mockedQueryResultPayload);
-        mutations[types.SET_QUERY_RESULT](state, mockedQueryResultPayloadCoresTotal);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayloadCoresTotal);
 
         // First group has no metrics
         expect(metricsWithData(state.dashboard.panel_groups[0].key)).toEqual([]);

spec/frontend/monitoring/store/mutations_spec.js

+import httpStatusCodes from '~/lib/utils/http_status';
+
 import mutations from '~/monitoring/stores/mutations';
 import * as types from '~/monitoring/stores/mutation_types';
 import state from '~/monitoring/stores/state';
+import { metricsErrors } from '~/monitoring/constants';
 import {
   metricsGroupsAPIResponse,
   deploymentData,
@@ -90,7 +93,7 @@ describe('Monitoring mutations', () => {
       expect(stateCopy.projectPath).toEqual('/gitlab-org/gitlab-foss');
     });
   });
-  describe('SET_QUERY_RESULT', () => {
+  describe('Individual panel/metric results', () => {
     const metricId = '12_system_metrics_kubernetes_container_memory_total';
     const result = [
       {
@@ -98,31 +101,145 @@ describe('Monitoring mutations', () => {
       },
     ];
     const dashboardGroups = metricsDashboardResponse.dashboard.panel_groups;
-    const getMetrics = () => stateCopy.dashboard.panel_groups[0].panels[0].metrics;
+    const getMetric = () => stateCopy.dashboard.panel_groups[0].panels[0].metrics[0];
 
-    beforeEach(() => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
+    describe('REQUEST_METRIC_RESULT', () => {
+      beforeEach(() => {
+        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
+      });
+      it('stores a loading state on a metric', () => {
+        expect(stateCopy.showEmptyState).toBe(true);
+
+        mutations[types.REQUEST_METRIC_RESULT](stateCopy, {
+          metricId,
+          result,
+        });
+
+        expect(stateCopy.showEmptyState).toBe(true);
+        expect(getMetric()).toEqual(
+          expect.objectContaining({
+            loading: true,
+            result: null,
+            error: null,
+          }),
+        );
+      });
     });
-    it('clears empty state', () => {
-      expect(stateCopy.showEmptyState).toBe(true);
 
-      mutations[types.SET_QUERY_RESULT](stateCopy, {
-        metricId,
-        result,
+    describe('RECEIVE_METRIC_RESULT_SUCCESS', () => {
+      beforeEach(() => {
+        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
       });
+      it('clears empty state', () => {
+        expect(stateCopy.showEmptyState).toBe(true);
 
-      expect(stateCopy.showEmptyState).toBe(false);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](stateCopy, {
+          metricId,
+          result,
+        });
+
+        expect(stateCopy.showEmptyState).toBe(false);
+      });
+
+      it('adds results to the store', () => {
+        expect(getMetric().result).toBe(undefined);
+
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](stateCopy, {
+          metricId,
+          result,
+        });
+
+        expect(getMetric().result).toHaveLength(result.length);
+        expect(getMetric()).toEqual(
+          expect.objectContaining({
+            loading: false,
+            error: null,
+          }),
+        );
+      });
     });
 
-    it('adds results to the store', () => {
-      expect(getMetrics()[0].result).toBe(undefined);
+    describe('RECEIVE_METRIC_RESULT_ERROR', () => {
+      beforeEach(() => {
+        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
+      });
+      it('maintains the loading state when a metric fails', () => {
+        expect(stateCopy.showEmptyState).toBe(true);
+
+        mutations[types.RECEIVE_METRIC_RESULT_ERROR](stateCopy, {
+          metricId,
+          error: 'an error',
+        });
+
+        expect(stateCopy.showEmptyState).toBe(true);
+      });
+
+      it('stores a timeout error in a metric', () => {
+        mutations[types.RECEIVE_METRIC_RESULT_ERROR](stateCopy, {
+          metricId,
+          error: { message: 'BACKOFF_TIMEOUT' },
+        });
+
+        expect(getMetric()).toEqual(
+          expect.objectContaining({
+            loading: false,
+            result: null,
+            error: metricsErrors.TIMEOUT,
+          }),
+        );
+      });
+
+      it('stores a connection failed error in a metric', () => {
+        mutations[types.RECEIVE_METRIC_RESULT_ERROR](stateCopy, {
+          metricId,
+          error: {
+            response: {
+              status: httpStatusCodes.SERVICE_UNAVAILABLE,
+            },
+          },
+        });
+        expect(getMetric()).toEqual(
+          expect.objectContaining({
+            loading: false,
+            result: null,
+            error: metricsErrors.CONNECTION_FAILED,
+          }),
+        );
+      });
 
-      mutations[types.SET_QUERY_RESULT](stateCopy, {
-        metricId,
-        result,
+      it('stores a bad data error in a metric', () => {
+        mutations[types.RECEIVE_METRIC_RESULT_ERROR](stateCopy, {
+          metricId,
+          error: {
+            response: {
+              status: httpStatusCodes.BAD_REQUEST,
+            },
+          },
+        });
+
+        expect(getMetric()).toEqual(
+          expect.objectContaining({
+            loading: false,
+            result: null,
+            error: metricsErrors.BAD_DATA,
+          }),
+        );
       });
 
-      expect(getMetrics()[0].result).toHaveLength(result.length);
+      it('stores an unknown error in a metric', () => {
+        mutations[types.RECEIVE_METRIC_RESULT_ERROR](stateCopy, {
+          metricId,
+          error: null, // no reason in response
+        });
+
+        expect(getMetric()).toEqual(
+          expect.objectContaining({
+            loading: false,
+            result: null,
+            error: metricsErrors.UNKNOWN_ERROR,
+          }),
+        );
+      });
     });
   });
   describe('SET_ALL_DASHBOARDS', () => {

spec/javascripts/monitoring/components/dashboard_spec.js

@@ -56,13 +56,16 @@ function setupComponentStore(component) {
   );
 
   // Load 3 panels to the dashboard, one with an empty result
-  component.$store.commit(`monitoringDashboard/${types.SET_QUERY_RESULT}`, mockedEmptyResult);
   component.$store.commit(
-    `monitoringDashboard/${types.SET_QUERY_RESULT}`,
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+    mockedEmptyResult,
+  );
+  component.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
     mockedQueryResultPayload,
   );
   component.$store.commit(
-    `monitoringDashboard/${types.SET_QUERY_RESULT}`,
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
     mockedQueryResultPayloadCoresTotal,
   );
 
@@ -269,7 +272,7 @@ describe('Dashboard', () => {
         metricsGroupsAPIResponse,
       );
       component.$store.commit(
-        `monitoringDashboard/${types.SET_QUERY_RESULT}`,
+        `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
         mockedQueryResultPayload,
       );