Add latest changes from gitlab-org/gitlab@master

10 files changed, 425 insertions, 92 deletions

diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index 6e47d2bd648..776ce589cff 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -6,8 +6,11 @@ import {
   GlLoadingIcon,
   GlTable,
   GlLink,
-  GlSearchBoxByClick,
+  GlFormInput,
+  GlDropdown,
+  GlDropdownItem,
 } from '@gitlab/ui';
+import createListState from '~/error_tracking/store/list/state';
 import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
 import errorsList from './list_mock.json';
 
@@ -51,12 +54,13 @@ describe('ErrorTrackingList', () => {
       getErrorList: () => {},
       startPolling: jest.fn(),
       restartPolling: jest.fn().mockName('restartPolling'),
+      addRecentSearch: jest.fn(),
+      loadRecentSearches: jest.fn(),
+      setIndexPath: jest.fn(),
+      clearRecentSearches: jest.fn(),
     };
 
-    const state = {
-      errors: errorsList,
-      loading: true,
-    };
+    const state = createListState();
 
     store = new Vuex.Store({
       modules: {
@@ -90,6 +94,7 @@ describe('ErrorTrackingList', () => {
   describe('results', () => {
     beforeEach(() => {
       store.state.list.loading = false;
+      store.state.list.errors = errorsList;
       mountComponent();
     });
 
@@ -114,7 +119,7 @@ describe('ErrorTrackingList', () => {
     });
 
     describe('filtering', () => {
-      const findSearchBox = () => wrapper.find(GlSearchBoxByClick);
+      const findSearchBox = () => wrapper.find(GlFormInput);
 
       it('shows search box', () => {
         expect(findSearchBox().exists()).toBe(true);
@@ -122,7 +127,9 @@ describe('ErrorTrackingList', () => {
 
       it('makes network request on submit', () => {
         expect(actions.startPolling).toHaveBeenCalledTimes(1);
-        findSearchBox().vm.$emit('submit');
+
+        findSearchBox().trigger('keyup.enter');
+
         expect(actions.startPolling).toHaveBeenCalledTimes(2);
       });
     });
@@ -185,4 +192,51 @@ describe('ErrorTrackingList', () => {
       );
     });
   });
+
+  describe('recent searches', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('shows empty message', () => {
+      store.state.list.recentSearches = [];
+
+      expect(wrapper.find(GlDropdown).text()).toBe("You don't have any recent searches");
+    });
+
+    it('shows items', () => {
+      store.state.list.recentSearches = ['great', 'search'];
+
+      const dropdownItems = wrapper.findAll(GlDropdownItem);
+
+      expect(dropdownItems.length).toBe(3);
+      expect(dropdownItems.at(0).text()).toBe('great');
+      expect(dropdownItems.at(1).text()).toBe('search');
+    });
+
+    describe('clear', () => {
+      const clearRecentButton = () => wrapper.find({ ref: 'clearRecentSearches' });
+
+      it('is hidden when list empty', () => {
+        store.state.list.recentSearches = [];
+
+        expect(clearRecentButton().exists()).toBe(false);
+      });
+
+      it('is visible when list has items', () => {
+        store.state.list.recentSearches = ['some', 'searches'];
+
+        expect(clearRecentButton().exists()).toBe(true);
+        expect(clearRecentButton().text()).toBe('Clear recent searches');
+      });
+
+      it('clears items on click', () => {
+        store.state.list.recentSearches = ['some', 'searches'];
+
+        clearRecentButton().vm.$emit('click');
+
+        expect(actions.clearRecentSearches).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/error_tracking/store/list/mutation_spec.js b/spec/frontend/error_tracking/store/list/mutation_spec.js
index 6e021185b4d..5e6505e13cd 100644
--- a/spec/frontend/error_tracking/store/list/mutation_spec.js
+++ b/spec/frontend/error_tracking/store/list/mutation_spec.js
@@ -1,5 +1,10 @@
 import mutations from '~/error_tracking/store/list/mutations';
 import * as types from '~/error_tracking/store/list/mutation_types';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+
+const ADD_RECENT_SEARCH = mutations[types.ADD_RECENT_SEARCH];
+const CLEAR_RECENT_SEARCHES = mutations[types.CLEAR_RECENT_SEARCHES];
+const LOAD_RECENT_SEARCHES = mutations[types.LOAD_RECENT_SEARCHES];
 
 describe('Error tracking mutations', () => {
   describe('SET_ERRORS', () => {
@@ -33,4 +38,81 @@ describe('Error tracking mutations', () => {
       });
     });
   });
+
+  describe('recent searches', () => {
+    useLocalStorageSpy();
+    let state;
+
+    beforeEach(() => {
+      state = {
+        indexPath: '/project/errors.json',
+        recentSearches: [],
+      };
+    });
+
+    describe('ADD_RECENT_SEARCH', () => {
+      it('adds search queries to recentSearches and localStorage', () => {
+        ADD_RECENT_SEARCH(state, 'my issue');
+
+        expect(state.recentSearches).toEqual(['my issue']);
+        expect(localStorage.setItem).toHaveBeenCalledWith(
+          'recent-searches/project/errors.json',
+          '["my issue"]',
+        );
+      });
+
+      it('does not add empty searches', () => {
+        ADD_RECENT_SEARCH(state, '');
+
+        expect(state.recentSearches).toEqual([]);
+        expect(localStorage.setItem).not.toHaveBeenCalled();
+      });
+
+      it('adds new queries to start of the list', () => {
+        state.recentSearches = ['previous', 'searches'];
+
+        ADD_RECENT_SEARCH(state, 'new search');
+
+        expect(state.recentSearches).toEqual(['new search', 'previous', 'searches']);
+      });
+
+      it('limits recentSearches to 5 items', () => {
+        state.recentSearches = [1, 2, 3, 4, 5];
+
+        ADD_RECENT_SEARCH(state, 'new search');
+
+        expect(state.recentSearches).toEqual(['new search', 1, 2, 3, 4]);
+      });
+
+      it('does not add same search query twice', () => {
+        state.recentSearches = ['already', 'searched'];
+
+        ADD_RECENT_SEARCH(state, 'searched');
+
+        expect(state.recentSearches).toEqual(['searched', 'already']);
+      });
+    });
+
+    describe('CLEAR_RECENT_SEARCHES', () => {
+      it('clears recentSearches and localStorage', () => {
+        state.recentSearches = ['first', 'second'];
+
+        CLEAR_RECENT_SEARCHES(state);
+
+        expect(state.recentSearches).toEqual([]);
+        expect(localStorage.removeItem).toHaveBeenCalledWith('recent-searches/project/errors.json');
+      });
+    });
+
+    describe('LOAD_RECENT_SEARCHES', () => {
+      it('loads recent searches from localStorage', () => {
+        jest.spyOn(window.localStorage, 'getItem').mockReturnValue('["first", "second"]');
+
+        LOAD_RECENT_SEARCHES(state);
+
+        expect(state.recentSearches).toEqual(['first', 'second']);
+        expect(localStorage.getItem).toHaveBeenCalledWith('recent-searches/project/errors.json');
+      });
+    });
+  });
 });
diff --git a/spec/frontend/monitoring/charts/time_series_spec.js b/spec/frontend/monitoring/charts/time_series_spec.js
index efc2da40a52..15967992374 100644
--- a/spec/frontend/monitoring/charts/time_series_spec.js
+++ b/spec/frontend/monitoring/charts/time_series_spec.js
@@ -45,10 +45,11 @@ describe('Time series component', () => {
 
     store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
 
-    // Mock data contains 2 panels, pick the first one
+    // Mock data contains 2 panel groups, with 1 and 2 panels respectively
     store.commit(`monitoringDashboard/${types.SET_QUERY_RESULT}`, mockedQueryResultPayload);
 
-    [mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[0].panels;
+    // Pick the second panel group and the first panel in it
+    [mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;
 
     makeTimeSeriesChart = (graphData, type) =>
       shallowMount(TimeSeries, {
diff --git a/spec/frontend/monitoring/dashboard_state_spec.js b/spec/frontend/monitoring/dashboard_state_spec.js
index 950422911eb..e985e5fb443 100644
--- a/spec/frontend/monitoring/dashboard_state_spec.js
+++ b/spec/frontend/monitoring/dashboard_state_spec.js
@@ -11,6 +11,7 @@ function createComponent(props) {
       emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
       emptyLoadingSvgPath: '/path/to/loading.svg',
       emptyNoDataSvgPath: '/path/to/no-data.svg',
+      emptyNoDataSmallSvgPath: '/path/to/no-data-small.svg',
       emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
     },
   });
diff --git a/spec/frontend/monitoring/embed/embed_spec.js b/spec/frontend/monitoring/embed/embed_spec.js
index 15ea7c63875..831ab1ed157 100644
--- a/spec/frontend/monitoring/embed/embed_spec.js
+++ b/spec/frontend/monitoring/embed/embed_spec.js
@@ -12,6 +12,7 @@ describe('Embed', () => {
   let wrapper;
   let store;
   let actions;
+  let metricsWithDataGetter;
 
   function mountComponent() {
     wrapper = shallowMount(Embed, {
@@ -31,11 +32,16 @@ describe('Embed', () => {
       fetchMetricsData: () => {},
     };
 
+    metricsWithDataGetter = jest.fn();
+
     store = new Vuex.Store({
       modules: {
         monitoringDashboard: {
           namespaced: true,
           actions,
+          getters: {
+            metricsWithData: () => metricsWithDataGetter,
+          },
           state: initialState,
         },
       },
@@ -43,6 +49,7 @@ describe('Embed', () => {
   });
 
   afterEach(() => {
+    metricsWithDataGetter.mockClear();
     if (wrapper) {
       wrapper.destroy();
     }
@@ -63,13 +70,13 @@ describe('Embed', () => {
     beforeEach(() => {
       store.state.monitoringDashboard.dashboard.panel_groups = groups;
       store.state.monitoringDashboard.dashboard.panel_groups[0].panels = metricsData;
-      store.state.monitoringDashboard.metricsWithData = metricsWithData;
+
+      metricsWithDataGetter.mockReturnValue(metricsWithData);
 
       mountComponent();
     });
 
     it('shows a chart when metrics are present', () => {
-      wrapper.setProps({});
       expect(wrapper.find('.metrics-embed').exists()).toBe(true);
       expect(wrapper.find(PanelType).exists()).toBe(true);
       expect(wrapper.findAll(PanelType).length).toBe(2);
diff --git a/spec/frontend/monitoring/embed/mock_data.js b/spec/frontend/monitoring/embed/mock_data.js
index 8941c183807..1dc31846034 100644
--- a/spec/frontend/monitoring/embed/mock_data.js
+++ b/spec/frontend/monitoring/embed/mock_data.js
@@ -75,11 +75,9 @@ export const metricsData = [
   },
 ];
 
-export const initialState = {
-  monitoringDashboard: {},
+export const initialState = () => ({
   dashboard: {
     panel_groups: [],
   },
-  metricsWithData: [],
   useDashboardEndpoint: true,
-};
+});
diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js
index a184892773b..6ded22b4a3f 100644
--- a/spec/frontend/monitoring/mock_data.js
+++ b/spec/frontend/monitoring/mock_data.js
@@ -240,6 +240,11 @@ export const metricsNewGroupsAPIResponse = [
   },
 ];
 
+export const mockedEmptyResult = {
+  metricId: '1_response_metrics_nginx_ingress_throughput_status_code',
+  result: [],
+};
+
 export const mockedQueryResultPayload = {
   metricId: '17_system_metrics_kubernetes_container_memory_average',
   result: [
@@ -328,6 +333,30 @@ export const mockedQueryResultPayloadCoresTotal = {
 
 export const metricsGroupsAPIResponse = [
   {
+    group: 'Response metrics (NGINX Ingress VTS)',
+    priority: 10,
+    panels: [
+      {
+        metrics: [
+          {
+            id: 'response_metrics_nginx_ingress_throughput_status_code',
+            label: 'Status Code',
+            metric_id: 1,
+            prometheus_endpoint_path:
+              '/root/autodevops-deploy/environments/32/prometheus/api/v1/query_range?query=sum%28rate%28nginx_upstream_responses_total%7Bupstream%3D~%22%25%7Bkube_namespace%7D-%25%7Bci_environment_slug%7D-.%2A%22%7D%5B2m%5D%29%29+by+%28status_code%29',
+            query_range:
+              'sum(rate(nginx_upstream_responses_total{upstream=~"%{kube_namespace}-%{ci_environment_slug}-.*"}[2m])) by (status_code)',
+            unit: 'req / sec',
+          },
+        ],
+        title: 'Throughput',
+        type: 'area-chart',
+        weight: 1,
+        y_label: 'Requests / Sec',
+      },
+    ],
+  },
+  {
     group: 'System metrics (Kubernetes)',
     priority: 5,
     panels: [
diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index 9ee8e4e9144..e41158eb4b0 100644
--- a/spec/frontend/monitoring/store/actions_spec.js
+++ b/spec/frontend/monitoring/store/actions_spec.js
@@ -191,12 +191,11 @@ describe('Monitoring store actions', () => {
     let state;
     const response = metricsDashboardResponse;
     beforeEach(() => {
-      jest.spyOn(Tracking, 'event');
       dispatch = jest.fn();
       state = storeState();
       state.dashboardEndpoint = '/dashboard';
     });
-    it('dispatches receive and success actions', done => {
+    it('on success, dispatches receive and success actions', done => {
       const params = {};
       document.body.dataset.page = 'projects:environments:metrics';
       mock.onGet(state.dashboardEndpoint).reply(200, response);
@@ -213,39 +212,65 @@ describe('Monitoring store actions', () => {
             response,
             params,
           });
-        })
-        .then(() => {
-          expect(Tracking.event).toHaveBeenCalledWith(
-            document.body.dataset.page,
-            'dashboard_fetch',
-            {
-              label: 'custom_metrics_dashboard',
-              property: 'count',
-              value: 0,
-            },
-          );
           done();
         })
         .catch(done.fail);
     });
-    it('dispatches failure action', done => {
-      const params = {};
-      mock.onGet(state.dashboardEndpoint).reply(500);
-      fetchDashboard(
-        {
-          state,
-          dispatch,
-        },
-        params,
-      )
-        .then(() => {
-          expect(dispatch).toHaveBeenCalledWith(
-            'receiveMetricsDashboardFailure',
-            new Error('Request failed with status code 500'),
-          );
-          done();
-        })
-        .catch(done.fail);
+
+    describe('on failure', () => {
+      let result;
+      let errorResponse;
+      beforeEach(() => {
+        const params = {};
+        result = () => {
+          mock.onGet(state.dashboardEndpoint).replyOnce(500, errorResponse);
+          return fetchDashboard({ state, dispatch }, params);
+        };
+      });
+
+      it('dispatches a failure action', done => {
+        errorResponse = {};
+        result()
+          .then(() => {
+            expect(dispatch).toHaveBeenCalledWith(
+              'receiveMetricsDashboardFailure',
+              new Error('Request failed with status code 500'),
+            );
+            expect(createFlash).toHaveBeenCalled();
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('dispatches a failure action when a message is returned', done => {
+        const message = 'Something went wrong with Prometheus!';
+        errorResponse = { message };
+        result()
+          .then(() => {
+            expect(dispatch).toHaveBeenCalledWith(
+              'receiveMetricsDashboardFailure',
+              new Error('Request failed with status code 500'),
+            );
+            expect(createFlash).toHaveBeenCalledWith(expect.stringContaining(message));
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('does not show a flash error when showErrorBanner is disabled', done => {
+        state.showErrorBanner = false;
+
+        result()
+          .then(() => {
+            expect(dispatch).toHaveBeenCalledWith(
+              'receiveMetricsDashboardFailure',
+              new Error('Request failed with status code 500'),
+            );
+            expect(createFlash).not.toHaveBeenCalled();
+            done();
+          })
+          .catch(done.fail);
+      });
     });
   });
   describe('receiveMetricsDashboardSuccess', () => {
@@ -317,18 +342,33 @@ describe('Monitoring store actions', () => {
     });
   });
   describe('fetchPrometheusMetrics', () => {
+    const params = {};
     let commit;
     let dispatch;
+    let state;
+
     beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
       commit = jest.fn();
       dispatch = jest.fn();
+      state = storeState();
     });
+
     it('commits empty state when state.groups is empty', done => {
-      const state = storeState();
-      const params = {};
-      fetchPrometheusMetrics({ state, commit, dispatch }, params)
+      const getters = {
+        metricsWithData: () => [],
+      };
+      fetchPrometheusMetrics({ state, commit, dispatch, getters }, params)
         .then(() => {
-          expect(commit).toHaveBeenCalledWith(types.SET_NO_DATA_EMPTY_STATE);
+          expect(Tracking.event).toHaveBeenCalledWith(
+            document.body.dataset.page,
+            'dashboard_fetch',
+            {
+              label: 'custom_metrics_dashboard',
+              property: 'count',
+              value: 0,
+            },
+          );
           expect(dispatch).not.toHaveBeenCalled();
           expect(createFlash).not.toHaveBeenCalled();
           done();
@@ -336,19 +376,28 @@ describe('Monitoring store actions', () => {
         .catch(done.fail);
     });
     it('dispatches fetchPrometheusMetric for each panel query', done => {
-      const params = {};
-      const state = storeState();
       state.dashboard.panel_groups = metricsDashboardResponse.dashboard.panel_groups;
-      const metric = state.dashboard.panel_groups[0].panels[0].metrics[0];
-      fetchPrometheusMetrics({ state, commit, dispatch }, params)
+      const [metric] = state.dashboard.panel_groups[0].panels[0].metrics;
+      const getters = {
+        metricsWithData: () => [metric.id],
+      };
+
+      fetchPrometheusMetrics({ state, commit, dispatch, getters }, params)
         .then(() => {
-          expect(dispatch).toHaveBeenCalledTimes(3);
           expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetric', {
             metric,
             params,
           });
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(Tracking.event).toHaveBeenCalledWith(
+            document.body.dataset.page,
+            'dashboard_fetch',
+            {
+              label: 'custom_metrics_dashboard',
+              property: 'count',
+              value: 1,
+            },
+          );
 
           done();
         })
@@ -357,8 +406,6 @@ describe('Monitoring store actions', () => {
     });
 
     it('dispatches fetchPrometheusMetric for each panel query, handles an error', done => {
-      const params = {};
-      const state = storeState();
       state.dashboard.panel_groups = metricsDashboardResponse.dashboard.panel_groups;
       const metric = state.dashboard.panel_groups[0].panels[0].metrics[0];
 
diff --git a/spec/frontend/monitoring/store/getters_spec.js b/spec/frontend/monitoring/store/getters_spec.js
new file mode 100644
index 00000000000..066f927dce7
--- /dev/null
+++ b/spec/frontend/monitoring/store/getters_spec.js
@@ -0,0 +1,99 @@
+import * as getters from '~/monitoring/stores/getters';
+
+import mutations from '~/monitoring/stores/mutations';
+import * as types from '~/monitoring/stores/mutation_types';
+import {
+  metricsGroupsAPIResponse,
+  mockedEmptyResult,
+  mockedQueryResultPayload,
+  mockedQueryResultPayloadCoresTotal,
+} from '../mock_data';
+
+describe('Monitoring store Getters', () => {
+  describe('metricsWithData', () => {
+    let metricsWithData;
+    let setupState;
+    let state;
+
+    beforeEach(() => {
+      setupState = (initState = {}) => {
+        state = initState;
+        metricsWithData = getters.metricsWithData(state);
+      };
+    });
+
+    afterEach(() => {
+      state = null;
+    });
+
+    it('has method-style access', () => {
+      setupState();
+
+      expect(metricsWithData).toEqual(expect.any(Function));
+    });
+
+    it('when dashboard has no panel groups, returns empty', () => {
+      setupState({
+        dashboard: {
+          panel_groups: [],
+        },
+      });
+
+      expect(metricsWithData()).toEqual([]);
+    });
+
+    describe('when the dashboard is set', () => {
+      beforeEach(() => {
+        setupState({
+          dashboard: { panel_groups: [] },
+        });
+      });
+
+      it('no loaded metric returns empty', () => {
+        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsGroupsAPIResponse);
+
+        expect(metricsWithData()).toEqual([]);
+      });
+
+      it('an empty metric, returns empty', () => {
+        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsGroupsAPIResponse);
+        mutations[types.SET_QUERY_RESULT](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);
+
+        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);
+
+        expect(metricsWithData()).toEqual([
+          mockedQueryResultPayload.metricId,
+          mockedQueryResultPayloadCoresTotal.metricId,
+        ]);
+      });
+
+      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);
+
+        // First group has no metrics
+        expect(metricsWithData(state.dashboard.panel_groups[0].key)).toEqual([]);
+
+        // Second group has metrics
+        expect(metricsWithData(state.dashboard.panel_groups[1].key)).toEqual([
+          mockedQueryResultPayload.metricId,
+          mockedQueryResultPayloadCoresTotal.metricId,
+        ]);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js
index 42031e01878..47177180aa1 100644
--- a/spec/frontend/monitoring/store/mutations_spec.js
+++ b/spec/frontend/monitoring/store/mutations_spec.js
@@ -7,41 +7,59 @@ import {
   metricsDashboardResponse,
   dashboardGitResponse,
 } from '../mock_data';
-import { uniqMetricsId } from '~/monitoring/stores/utils';
 
 describe('Monitoring mutations', () => {
   let stateCopy;
+
   beforeEach(() => {
     stateCopy = state();
   });
   describe('RECEIVE_METRICS_DATA_SUCCESS', () => {
-    let groups;
+    let payload;
+    const getGroups = () => stateCopy.dashboard.panel_groups;
+
     beforeEach(() => {
       stateCopy.dashboard.panel_groups = [];
-      groups = metricsGroupsAPIResponse;
+      payload = metricsGroupsAPIResponse;
     });
     it('adds a key to the group', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, groups);
-      expect(stateCopy.dashboard.panel_groups[0].key).toBe('system-metrics-kubernetes--0');
+      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
+      const groups = getGroups();
+
+      expect(groups[0].key).toBe('response-metrics-nginx-ingress-vts--0');
+      expect(groups[1].key).toBe('system-metrics-kubernetes--1');
     });
     it('normalizes values', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, groups);
+      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
       const expectedLabel = 'Pod average';
-      const { label, query_range } = stateCopy.dashboard.panel_groups[0].panels[0].metrics[0];
+      const { label, query_range } = getGroups()[1].panels[0].metrics[0];
       expect(label).toEqual(expectedLabel);
       expect(query_range.length).toBeGreaterThan(0);
     });
-    it('contains one group, which it has two panels and one metrics property', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, groups);
-      expect(stateCopy.dashboard.panel_groups).toBeDefined();
-      expect(stateCopy.dashboard.panel_groups.length).toEqual(1);
-      expect(stateCopy.dashboard.panel_groups[0].panels.length).toEqual(2);
-      expect(stateCopy.dashboard.panel_groups[0].panels[0].metrics.length).toEqual(1);
-      expect(stateCopy.dashboard.panel_groups[0].panels[1].metrics.length).toEqual(1);
+    it('contains two groups, with panels with a metric each', () => {
+      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
+
+      const groups = getGroups();
+
+      expect(groups).toBeDefined();
+      expect(groups).toHaveLength(2);
+
+      expect(groups[0].panels).toHaveLength(1);
+      expect(groups[0].panels[0].metrics).toHaveLength(1);
+
+      expect(groups[1].panels).toHaveLength(2);
+      expect(groups[1].panels[0].metrics).toHaveLength(1);
+      expect(groups[1].panels[1].metrics).toHaveLength(1);
     });
     it('assigns metrics a metric id', () => {
-      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, groups);
-      expect(stateCopy.dashboard.panel_groups[0].panels[0].metrics[0].metricId).toEqual(
+      mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
+
+      const groups = getGroups();
+
+      expect(groups[0].panels[0].metrics[0].metricId).toEqual(
+        '1_response_metrics_nginx_ingress_throughput_status_code',
+      );
+      expect(groups[1].panels[0].metrics[0].metricId).toEqual(
         '17_system_metrics_kubernetes_container_memory_average',
       );
     });
@@ -52,7 +70,7 @@ describe('Monitoring mutations', () => {
       stateCopy.deploymentData = [];
       mutations[types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS](stateCopy, deploymentData);
       expect(stateCopy.deploymentData).toBeDefined();
-      expect(stateCopy.deploymentData.length).toEqual(3);
+      expect(stateCopy.deploymentData).toHaveLength(3);
       expect(typeof stateCopy.deploymentData[0]).toEqual('object');
     });
   });
@@ -73,41 +91,38 @@ describe('Monitoring mutations', () => {
     });
   });
   describe('SET_QUERY_RESULT', () => {
-    const metricId = 12;
-    const id = 'system_metrics_kubernetes_container_memory_total';
+    const metricId = '12_system_metrics_kubernetes_container_memory_total';
     const result = [
       {
         values: [[0, 1], [1, 1], [1, 3]],
       },
     ];
+    const dashboardGroups = metricsDashboardResponse.dashboard.panel_groups;
+    const getMetrics = () => stateCopy.dashboard.panel_groups[0].panels[0].metrics;
+
     beforeEach(() => {
-      const dashboardGroups = metricsDashboardResponse.dashboard.panel_groups;
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
     });
     it('clears empty state', () => {
+      expect(stateCopy.showEmptyState).toBe(true);
+
       mutations[types.SET_QUERY_RESULT](stateCopy, {
         metricId,
         result,
       });
+
       expect(stateCopy.showEmptyState).toBe(false);
     });
-    it('sets metricsWithData value', () => {
-      const uniqId = uniqMetricsId({
-        metric_id: metricId,
-        id,
-      });
-      mutations[types.SET_QUERY_RESULT](stateCopy, {
-        metricId: uniqId,
-        result,
-      });
-      expect(stateCopy.metricsWithData).toEqual([uniqId]);
-    });
-    it('does not store empty results', () => {
+
+    it('adds results to the store', () => {
+      expect(getMetrics()[0].result).toBe(undefined);
+
       mutations[types.SET_QUERY_RESULT](stateCopy, {
         metricId,
-        result: [],
+        result,
       });
-      expect(stateCopy.metricsWithData).toEqual([]);
+
+      expect(getMetrics()[0].result).toHaveLength(result.length);
     });
   });
   describe('SET_ALL_DASHBOARDS', () => {