Merge branch '36262-monitor-cluster-health-charts-does-not-load' into 'master'

Fix broken cluster health dashboard

Closes #36262

See merge request gitlab-org/gitlab!20120

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

@@ -84,7 +84,10 @@ export const fetchDashboard = ({ state, dispatch }, params) => {
   return backOffRequest(() => axios.get(state.dashboardEndpoint, { params }))
     .then(resp => resp.data)
     .then(response => {
-      dispatch('receiveMetricsDashboardSuccess', { response, params });
+      dispatch('receiveMetricsDashboardSuccess', {
+        response,
+        params,
+      });
     })
     .catch(error => {
       dispatch('receiveMetricsDashboardFailure', error);

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

@@ -94,7 +94,7 @@ export default {
     state.emptyState = 'noData';
   },
   [types.SET_ALL_DASHBOARDS](state, dashboards) {
-    state.allDashboards = dashboards;
+    state.allDashboards = dashboards || [];
   },
   [types.SET_SHOW_ERROR_BANNER](state, enabled) {
     state.showErrorBanner = enabled;

changelogs/unreleased/36262-monitor-cluster-health-charts-does-not-load.yml

+---
+title: Fix broken monitor cluster health dashboard
+merge_request: 20120
+author:
+type: fixed

spec/javascripts/monitoring/components/dashboard_spec.js

@@ -122,6 +122,32 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('cluster health', () => {
+    let wrapper;
+
+    beforeEach(done => {
+      wrapper = shallowMount(DashboardComponent, {
+        localVue,
+        sync: false,
+        propsData: { ...propsData, hasMetrics: true },
+        store,
+      });
+
+      // all_dashboards is not defined in health dashboards
+      wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined);
+      wrapper.vm.$nextTick(done);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('renders correctly', () => {
+      expect(wrapper.isVueInstance()).toBe(true);
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+
   describe('requests information to the server', () => {
     let spy;
     beforeEach(() => {

spec/javascripts/monitoring/store/mutations_spec.js

@@ -144,7 +144,19 @@ describe('Monitoring mutations', () => {
   });
 
   describe('SET_ALL_DASHBOARDS', () => {
-    it('stores the dashboards loaded from the git repository', () => {
+    it('stores `undefined` dashboards as an empty array', () => {
+      mutations[types.SET_ALL_DASHBOARDS](stateCopy, undefined);
+
+      expect(stateCopy.allDashboards).toEqual([]);
+    });
+
+    it('stores `null` dashboards as an empty array', () => {
+      mutations[types.SET_ALL_DASHBOARDS](stateCopy, null);
+
+      expect(stateCopy.allDashboards).toEqual([]);
+    });
+
+    it('stores dashboards loaded from the git repository', () => {
       mutations[types.SET_ALL_DASHBOARDS](stateCopy, dashboardGitResponse);
 
       expect(stateCopy.allDashboards).toEqual(dashboardGitResponse);