Merge branch...

Merge branch '208524-error-in-custom-dashboard-yml-file-breaks-the-dashboards-dropdown' into 'master'

Error in custom dashboard yml file breaks the dashboards dropdown

See merge request gitlab-org/gitlab!26228

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

@@ -79,7 +79,7 @@ export const fetchData = ({ dispatch }) => {
   dispatch('fetchEnvironmentsData');
 };
 
-export const fetchDashboard = ({ state, dispatch }) => {
+export const fetchDashboard = ({ state, commit, dispatch }) => {
   dispatch('requestMetricsDashboard');
 
   const params = {};
@@ -100,6 +100,7 @@ export const fetchDashboard = ({ state, dispatch }) => {
     .catch(error => {
       Sentry.captureException(error);
 
+      commit(types.SET_ALL_DASHBOARDS, error.response?.data?.all_dashboards ?? []);
       dispatch('receiveMetricsDashboardFailure', error);
 
       if (state.showErrorBanner) {

changelogs/unreleased/208524-error-in-custom-dashboard-yml-file-breaks-the-dashboards-dropdown.yml

+---
+title: Fix dashboards dropdown if custom dashboard is broken
+merge_request: 26228
+author:
+type: fixed

spec/frontend/monitoring/mock_data.js

@@ -544,6 +544,12 @@ export const dashboardGitResponse = [
   ...customDashboardsData,
 ];
 
+export const mockDashboardsErrorResponse = {
+  all_dashboards: customDashboardsData,
+  message: "Each 'panel_group' must define an array :panels",
+  status: 'error',
+};
+
 export const graphDataPrometheusQuery = {
   title: 'Super Chart A2',
   type: 'single-stat',

spec/frontend/monitoring/store/actions_spec.js

@@ -30,6 +30,7 @@ import {
   metricsDashboardResponse,
   metricsDashboardViewModel,
   dashboardGitResponse,
+  mockDashboardsErrorResponse,
 } from '../mock_data';
 
 jest.mock('~/flash');
@@ -257,9 +258,11 @@ describe('Monitoring store actions', () => {
   describe('fetchDashboard', () => {
     let dispatch;
     let state;
+    let commit;
     const response = metricsDashboardResponse;
     beforeEach(() => {
       dispatch = jest.fn();
+      commit = jest.fn();
       state = storeState();
       state.dashboardEndpoint = '/dashboard';
     });
@@ -270,6 +273,7 @@ describe('Monitoring store actions', () => {
       fetchDashboard(
         {
           state,
+          commit,
           dispatch,
         },
         params,
@@ -287,19 +291,21 @@ describe('Monitoring store actions', () => {
 
     describe('on failure', () => {
       let result;
-      let errorResponse;
       beforeEach(() => {
         const params = {};
         result = () => {
-          mock.onGet(state.dashboardEndpoint).replyOnce(500, errorResponse);
-          return fetchDashboard({ state, dispatch }, params);
+          mock.onGet(state.dashboardEndpoint).replyOnce(500, mockDashboardsErrorResponse);
+          return fetchDashboard({ state, commit, dispatch }, params);
         };
       });
 
       it('dispatches a failure action', done => {
-        errorResponse = {};
         result()
           .then(() => {
+            expect(commit).toHaveBeenCalledWith(
+              types.SET_ALL_DASHBOARDS,
+              mockDashboardsErrorResponse.all_dashboards,
+            );
             expect(dispatch).toHaveBeenCalledWith(
               'receiveMetricsDashboardFailure',
               new Error('Request failed with status code 500'),
@@ -311,15 +317,15 @@ describe('Monitoring store actions', () => {
       });
 
       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));
+            expect(createFlash).toHaveBeenCalledWith(
+              expect.stringContaining(mockDashboardsErrorResponse.message),
+            );
             done();
           })
           .catch(done.fail);