Moved entire dashboard to Vuex state

Currently only the panel groups are kept in the store
and other dashboard information is discarted.

In order for the information to be preserved by the client
it must be saved to the store.

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,23 +84,26 @@ export default {
     state.emptyState = 'loading';
     state.showEmptyState = true;
   },
-  [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
-    state.dashboard.panel_groups = groupData.map((group, i) => {
-      const key = `${slugify(group.group || 'default')}-${i}`;
-      let { panels = [] } = group;
-
-      // each panel has metric information that needs to be normalized
-      panels = panels.map(panel => ({
-        ...panel,
-        metrics: normalizePanelMetrics(panel.metrics, panel.y_label),
-      }));
-
-      return {
-        ...group,
-        panels,
-        key,
-      };
-    });
+  [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;
+
+        // each panel has metric information that needs to be normalized
+        panels = panels.map(panel => ({
+          ...panel,
+          metrics: normalizePanelMetrics(panel.metrics, panel.y_label),
+        }));
+
+        return {
+          ...group,
+          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,77 +331,80 @@ 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: [
-      {
-        title: 'Memory Usage (Pod average)',
-        type: 'area-chart',
-        y_label: 'Memory Used per Pod',
-        weight: 2,
-        metrics: [
-          {
-            id: 'system_metrics_kubernetes_container_memory_average',
-            query_range:
-              'avg(sum(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) by (job)) without (job) / count(avg(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) without (job)) /1024/1024',
-            label: 'Pod average',
-            unit: 'MB',
-            metric_id: 17,
-            prometheus_endpoint_path:
-              '/root/autodevops-deploy/environments/32/prometheus/api/v1/query_range?query=avg%28sum%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+by+%28job%29%29+without+%28job%29+%2F+count%28avg%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+without+%28job%29%29+%2F1024%2F1024',
-            appearance: {
-              line: {
-                width: 2,
+export const metricsGroupsAPIResponse = {
+  dashboard: 'Environment metrics',
+  panel_groups: [
+    {
+      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: [
+        {
+          title: 'Memory Usage (Pod average)',
+          type: 'area-chart',
+          y_label: 'Memory Used per Pod',
+          weight: 2,
+          metrics: [
+            {
+              id: 'system_metrics_kubernetes_container_memory_average',
+              query_range:
+                'avg(sum(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) by (job)) without (job) / count(avg(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) without (job)) /1024/1024',
+              label: 'Pod average',
+              unit: 'MB',
+              metric_id: 17,
+              prometheus_endpoint_path:
+                '/root/autodevops-deploy/environments/32/prometheus/api/v1/query_range?query=avg%28sum%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+by+%28job%29%29+without+%28job%29+%2F+count%28avg%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+without+%28job%29%29+%2F1024%2F1024',
+              appearance: {
+                line: {
+                  width: 2,
+                },
               },
             },
-          },
-        ],
-      },
-      {
-        title: 'Core Usage (Total)',
-        type: 'area-chart',
-        y_label: 'Total Cores',
-        weight: 3,
-        metrics: [
-          {
-            id: 'system_metrics_kubernetes_container_cores_total',
-            query_range:
-              'avg(sum(rate(container_cpu_usage_seconds_total{container_name!="POD",pod_name=~"^%{ci_environment_slug}-(.*)",namespace="%{kube_namespace}"}[15m])) by (job)) without (job)',
-            label: 'Total',
-            unit: 'cores',
-            metric_id: 13,
-          },
-        ],
-      },
-    ],
-  },
-];
+          ],
+        },
+        {
+          title: 'Core Usage (Total)',
+          type: 'area-chart',
+          y_label: 'Total Cores',
+          weight: 3,
+          metrics: [
+            {
+              id: 'system_metrics_kubernetes_container_cores_total',
+              query_range:
+                'avg(sum(rate(container_cpu_usage_seconds_total{container_name!="POD",pod_name=~"^%{ci_environment_slug}-(.*)",namespace="%{kube_namespace}"}[15m])) by (job)) without (job)',
+              label: 'Total',
+              unit: 'cores',
+              metric_id: 13,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
 
 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);