Add latest changes from gitlab-org/gitlab@master

8 files changed, 273 insertions, 138 deletions

diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js
index 84b74ef659e..f2478a583dc 100644
--- a/spec/frontend/monitoring/components/charts/time_series_spec.js
+++ b/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,
       );
 
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index f2c3b199481..f0b510a01f4 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/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(
diff --git a/spec/frontend/monitoring/init_utils.js b/spec/frontend/monitoring/init_utils.js
index 36c654ba7b3..55b6199fdfc 100644
--- a/spec/frontend/monitoring/init_utils.js
+++ b/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,
   );
 
diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index 9f0b4d16fc1..7c559aed2c5 100644
--- a/spec/frontend/monitoring/store/actions_spec.js
+++ b/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,
         [
           {
diff --git a/spec/frontend/monitoring/store/getters_spec.js b/spec/frontend/monitoring/store/getters_spec.js
index bc62ada1034..40341d32cf5 100644
--- a/spec/frontend/monitoring/store/getters_spec.js
+++ b/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}`]);
diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js
index 6f1a81782f3..21a27a443af 100644
--- a/spec/frontend/monitoring/store/mutations_spec.js
+++ b/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);
diff --git a/spec/frontend/notes/components/sort_discussion_spec.js b/spec/frontend/notes/components/sort_discussion_spec.js
index 724c77eee3d..575f1057db2 100644
--- a/spec/frontend/notes/components/sort_discussion_spec.js
+++ b/spec/frontend/notes/components/sort_discussion_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import SortDiscussion from '~/notes/components/sort_discussion.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import createStore from '~/notes/stores';
 import { ASC, DESC } from '~/notes/constants';
 import Tracking from '~/tracking';
@@ -21,6 +22,8 @@ describe('Sort Discussion component', () => {
     });
   };
 
+  const findLocalStorageSync = () => wrapper.find(LocalStorageSync);
+
   beforeEach(() => {
     store = createStore();
     jest.spyOn(Tracking, 'event');
@@ -31,6 +34,22 @@ describe('Sort Discussion component', () => {
     wrapper = null;
   });
 
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('has local storage sync', () => {
+      expect(findLocalStorageSync().exists()).toBe(true);
+    });
+
+    it('calls setDiscussionSortDirection when update is emitted', () => {
+      findLocalStorageSync().vm.$emit('input', ASC);
+
+      expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', ASC);
+    });
+  });
+
   describe('when asc', () => {
     describe('when the dropdown is clicked', () => {
       it('calls the right actions', () => {
diff --git a/spec/frontend/vue_shared/components/local_storage_sync_spec.js b/spec/frontend/vue_shared/components/local_storage_sync_spec.js
new file mode 100644
index 00000000000..5470171a21e
--- /dev/null
+++ b/spec/frontend/vue_shared/components/local_storage_sync_spec.js
@@ -0,0 +1,128 @@
+import { shallowMount } from '@vue/test-utils';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+
+describe('Local Storage Sync', () => {
+  let wrapper;
+
+  const createComponent = ({ props = {}, slots = {} } = {}) => {
+    wrapper = shallowMount(LocalStorageSync, {
+      propsData: props,
+      slots,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    localStorage.clear();
+  });
+
+  it('is a renderless component', () => {
+    const html = '<div class="test-slot"></div>';
+    createComponent({
+      props: {
+        storageKey: 'key',
+      },
+      slots: {
+        default: html,
+      },
+    });
+
+    expect(wrapper.html()).toBe(html);
+  });
+
+  describe('localStorage empty', () => {
+    const storageKey = 'issue_list_order';
+
+    it('does not emit input event', () => {
+      createComponent({
+        props: {
+          storageKey,
+          value: 'ascending',
+        },
+      });
+
+      expect(wrapper.emitted('input')).toBeFalsy();
+    });
+
+    it('saves updated value to localStorage', () => {
+      createComponent({
+        props: {
+          storageKey,
+          value: 'ascending',
+        },
+      });
+
+      const newValue = 'descending';
+      wrapper.setProps({
+        value: newValue,
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(localStorage.getItem(storageKey)).toBe(newValue);
+      });
+    });
+
+    it('does not save default value', () => {
+      const value = 'ascending';
+
+      createComponent({
+        props: {
+          storageKey,
+          value,
+        },
+      });
+
+      expect(localStorage.getItem(storageKey)).toBe(null);
+    });
+  });
+
+  describe('localStorage has saved value', () => {
+    const storageKey = 'issue_list_order_by';
+    const savedValue = 'last_updated';
+
+    beforeEach(() => {
+      localStorage.setItem(storageKey, savedValue);
+    });
+
+    it('emits input event with saved value', () => {
+      createComponent({
+        props: {
+          storageKey,
+          value: 'ascending',
+        },
+      });
+
+      expect(wrapper.emitted('input')[0][0]).toBe(savedValue);
+    });
+
+    it('does not overwrite localStorage with prop value', () => {
+      createComponent({
+        props: {
+          storageKey,
+          value: 'created',
+        },
+      });
+
+      expect(localStorage.getItem(storageKey)).toBe(savedValue);
+    });
+
+    it('updating the value updates localStorage', () => {
+      createComponent({
+        props: {
+          storageKey,
+          value: 'created',
+        },
+      });
+
+      const newValue = 'last_updated';
+      wrapper.setProps({
+        value: newValue,
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(localStorage.getItem(storageKey)).toBe(newValue);
+      });
+    });
+  });
+});