Panel: Show multiple errors info in the inspector (#64340)

public/app/features/dashboard/components/Inspector/InspectContent.tsx

@@ -50,7 +50,10 @@ export const InspectContent = ({
     return null;
   }
 
-  const error = data?.error;
+  let errors = data?.errors;
+  if (!errors?.length && data?.error) {
+    errors = [data.error];
+  }
 
   // Validate that the active tab is actually valid and allowed
   let activeTab = currentTab;
@@ -102,7 +105,7 @@ export const InspectContent = ({
       {activeTab === InspectTab.JSON && (
         <InspectJSONTab panel={panel} dashboard={dashboard} data={data} onClose={onClose} />
       )}
-      {activeTab === InspectTab.Error && <InspectErrorTab error={error} />}
+      {activeTab === InspectTab.Error && <InspectErrorTab errors={errors} />}
       {data && activeTab === InspectTab.Stats && <InspectStatsTab data={data} timeZone={dashboard.getTimezone()} />}
       {data && activeTab === InspectTab.Query && (
         <QueryInspector panel={panel} data={data.series} onRefreshQuery={() => panel.refresh()} />

public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import React, { FC } from 'react';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
@@ -15,6 +15,7 @@ import {
   PanelProps,
   TimeRange,
 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { getTimeSrv, TimeSrv, setTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 import { PanelQueryRunner } from '../../../query/state/PanelQueryRunner';
@@ -174,6 +175,64 @@ describe('PanelEditorTableView', () => {
       width: 100,
     });
   });
+
+  it('should render an error', async () => {
+    const { rerender, props, subject, store } = setupTestContext({});
+
+    // only render the panel when loading is done
+    act(() => {
+      subject.next({ state: LoadingState.Loading, series: [], timeRange: getDefaultTimeRange() });
+      subject.next({
+        state: LoadingState.Error,
+        series: [],
+        errors: [{ message: 'boom!' }],
+        timeRange: getDefaultTimeRange(),
+      });
+    });
+
+    const newProps = { ...props, isInView: true };
+    rerender(
+      <Provider store={store}>
+        <PanelEditorTableView {...newProps} />
+      </Provider>
+    );
+
+    const button = screen.getByRole('button', { name: selectors.components.Panels.Panel.headerCornerInfo('error') });
+    expect(button).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.focus(button);
+    });
+    expect(await screen.findByText('boom!')).toBeInTheDocument();
+  });
+
+  it('should render a description for multiple errors', async () => {
+    const { rerender, props, subject, store } = setupTestContext({});
+
+    // only render the panel when loading is done
+    act(() => {
+      subject.next({ state: LoadingState.Loading, series: [], timeRange: getDefaultTimeRange() });
+      subject.next({
+        state: LoadingState.Error,
+        series: [],
+        errors: [{ message: 'boom 1!' }, { message: 'boom 2!' }],
+        timeRange: getDefaultTimeRange(),
+      });
+    });
+
+    const newProps = { ...props, isInView: true };
+    rerender(
+      <Provider store={store}>
+        <PanelEditorTableView {...newProps} />
+      </Provider>
+    );
+
+    const button = screen.getByRole('button', { name: selectors.components.Panels.Panel.headerCornerInfo('error') });
+    expect(button).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.focus(button);
+    });
+    expect(await screen.findByText('Multiple errors found. Click for more details')).toBeInTheDocument();
+  });
 });
 
 const TestPanelComponent: FC<PanelProps> = () => <div>Plugin Panel to Render</div>;

public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.tsx

@@ -49,11 +49,17 @@ export function PanelEditorTableView({ width, height, panel, dashboard }: Props)
   if (!data) {
     return null;
   }
+
+  const errorMessage = data?.errors
+    ? data.errors.length > 1
+      ? 'Multiple errors found. Click for more details'
+      : data.errors[0].message
+    : data?.error?.message;
   return (
     <PanelChrome width={width} height={height} padding="none">
       {(innerWidth, innerHeight) => (
         <>
-          <PanelHeaderCorner panel={panel} error={data?.error?.message} />
+          <PanelHeaderCorner panel={panel} error={errorMessage} />
           <PanelRenderer
             title="Raw data"
             pluginId="table"