Merge branch...

Merge branch '195670-save-full-dashboard-to-vue-store-so-it-can-be-edited-and-saved-back-to-the-backend' into 'master'

Move entire metrics dashboard to Vuex state

See merge request gitlab-org/gitlab!22722

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

@@ -39,7 +39,7 @@ export const requestMetricsDashboard = ({ commit }) => {
 };
 export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response, params }) => {
   commit(types.SET_ALL_DASHBOARDS, response.all_dashboards);
-  commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard.panel_groups);
+  commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard);
   return dispatch('fetchPrometheusMetrics', params);
 };
 export const receiveMetricsDashboardFailure = ({ commit }, error) => {

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

@@ -84,8 +84,10 @@ export default {
     state.emptyState = 'loading';
     state.showEmptyState = true;
   },
-  [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
-    state.dashboard.panel_groups = groupData.map((group, i) => {
+  [types.RECEIVE_METRICS_DATA_SUCCESS](state, dashboard) {
+    state.dashboard = {
+      ...dashboard,
+      panel_groups: dashboard.panel_groups.map((group, i) => {
         const key = `${slugify(group.group || 'default')}-${i}`;
         let { panels = [] } = group;
 
@@ -100,7 +102,8 @@ export default {
           panels,
           key,
         };
-    });
+      }),
+    };
 
     if (!state.dashboard.panel_groups.length) {
       state.emptyState = 'noData';

spec/frontend/monitoring/components/dashboard_spec.js

@@ -345,7 +345,7 @@ describe('Dashboard', () => {
 
         it('metrics can be swapped', done => {
           const firstDraggable = findDraggables().at(0);
-          const mockMetrics = [...metricsGroupsAPIResponse[1].panels];
+          const mockMetrics = [...metricsGroupsAPIResponse.panel_groups[1].panels];
 
           const firstTitle = mockMetrics[0].title;
           const secondTitle = mockMetrics[1].title;

spec/frontend/monitoring/mock_data.js

@@ -331,7 +331,9 @@ export const mockedQueryResultPayloadCoresTotal = {
   ],
 };
 
-export const metricsGroupsAPIResponse = [
+export const metricsGroupsAPIResponse = {
+  dashboard: 'Environment metrics',
+  panel_groups: [
     {
       group: 'Response metrics (NGINX Ingress VTS)',
       priority: 10,
@@ -401,7 +403,8 @@ export const metricsGroupsAPIResponse = [
         },
       ],
     },
-];
+  ],
+};
 
 export const environmentData = [
   {

spec/frontend/monitoring/store/actions_spec.js

@@ -298,7 +298,7 @@ describe('Monitoring store actions', () => {
       );
       expect(commit).toHaveBeenCalledWith(
         types.RECEIVE_METRICS_DATA_SUCCESS,
-        metricsDashboardResponse.dashboard.panel_groups,
+        metricsDashboardResponse.dashboard,
       );
       expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetrics', params);
     });
@@ -441,7 +441,7 @@ describe('Monitoring store actions', () => {
     beforeEach(() => {
       state = storeState();
       [metric] = metricsDashboardResponse.dashboard.panel_groups[0].panels[0].metrics;
-      [data] = metricsGroupsAPIResponse[0].panels[0].metrics;
+      [data] = metricsGroupsAPIResponse.panel_groups[0].panels[0].metrics;
     });
 
     it('commits result', done => {

spec/frontend/monitoring/store/mutations_spec.js

@@ -100,12 +100,12 @@ describe('Monitoring mutations', () => {
         values: [[0, 1], [1, 1], [1, 3]],
       },
     ];
-    const dashboardGroups = metricsDashboardResponse.dashboard.panel_groups;
+    const { dashboard } = metricsDashboardResponse;
     const getMetric = () => stateCopy.dashboard.panel_groups[0].panels[0].metrics[0];
 
     describe('REQUEST_METRIC_RESULT', () => {
       beforeEach(() => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
+        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard);
       });
       it('stores a loading state on a metric', () => {
         expect(stateCopy.showEmptyState).toBe(true);
@@ -128,7 +128,7 @@ describe('Monitoring mutations', () => {
 
     describe('RECEIVE_METRIC_RESULT_SUCCESS', () => {
       beforeEach(() => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
+        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard);
       });
       it('clears empty state', () => {
         expect(stateCopy.showEmptyState).toBe(true);
@@ -161,7 +161,7 @@ describe('Monitoring mutations', () => {
 
     describe('RECEIVE_METRIC_RESULT_FAILURE', () => {
       beforeEach(() => {
-        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
+        mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard);
       });
       it('maintains the loading state when a metric fails', () => {
         expect(stateCopy.showEmptyState).toBe(true);