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

public/app/features/inspector/InspectErrorTab.test.tsx

@@ -16,7 +16,7 @@ describe('InspectErrorTab', () => {
         error: 'my error',
       },
     };
-    render(<InspectErrorTab error={error} />);
+    render(<InspectErrorTab errors={[error]} />);
     expect(screen.getByText('This is an error')).toBeInTheDocument();
     expect(screen.getByText('error:')).toBeInTheDocument();
     expect(screen.getByText('"my error"')).toBeInTheDocument();
@@ -27,7 +27,7 @@ describe('InspectErrorTab', () => {
       message:
         '{ "error": { "code": "BadRequest", "message": "Please provide below info when asking for support.", "details": [] } }',
     };
-    const { container } = render(<InspectErrorTab error={error} />);
+    const { container } = render(<InspectErrorTab errors={[error]} />);
     expect(container.childElementCount).toEqual(1);
     expect(screen.getByText('code:')).toBeInTheDocument();
     expect(screen.getByText('"BadRequest"')).toBeInTheDocument();
@@ -39,7 +39,7 @@ describe('InspectErrorTab', () => {
       message:
         '400 BadRequest, Error from Azure: { "error": { "code": "BadRequest", "message": "Please provide below info when asking for support.", "details": [] } }',
     };
-    const { container } = render(<InspectErrorTab error={error} />);
+    const { container } = render(<InspectErrorTab errors={[error]} />);
     expect(container.childElementCount).toEqual(2);
     expect(screen.getByRole('heading', { name: '400 BadRequest, Error from Azure:' })).toBeInTheDocument();
     expect(screen.getByText('code:')).toBeInTheDocument();
@@ -55,7 +55,7 @@ describe('InspectErrorTab', () => {
       const error = {
         message: errMsg,
       };
-      render(<InspectErrorTab error={error} />);
+      render(<InspectErrorTab errors={[error]} />);
       expect(screen.queryByRole('heading')).toBeNull();
       expect(screen.getByText(errMsg)).toBeInTheDocument();
     });
@@ -65,9 +65,48 @@ describe('InspectErrorTab', () => {
     const error = {
       status: 400,
     };
-    const { container } = render(<InspectErrorTab error={error} />);
+    const { container } = render(<InspectErrorTab errors={[error]} />);
     expect(container.childElementCount).toEqual(1);
     expect(screen.getByText('status:')).toBeInTheDocument();
     expect(screen.getByText('400')).toBeInTheDocument();
   });
+
+  it('should return a message along with a status', () => {
+    const error = {
+      status: 400,
+      message: 'This is an error',
+    };
+    render(<InspectErrorTab errors={[error]} />);
+    expect(screen.getByText(/This is an error/)).toBeInTheDocument();
+    expect(screen.getByText(/Status: 400/)).toBeInTheDocument();
+  });
+
+  it('should return a JSON encoded object along with a status', () => {
+    const error = {
+      status: 400,
+      message:
+        '{ "error": { "code": "BadRequest", "message": "Please provide below info when asking for support.", "details": [] } }',
+    };
+    render(<InspectErrorTab errors={[error]} />);
+    expect(screen.getByText('"BadRequest"')).toBeInTheDocument();
+    expect(screen.getByText(/Status: 400/)).toBeInTheDocument();
+  });
+
+  it('should return multiple errors', () => {
+    const errors = [
+      {
+        status: 400,
+        message: 'This is one error',
+      },
+      {
+        status: 401,
+        message: 'This is another error',
+      },
+    ];
+    render(<InspectErrorTab errors={errors} />);
+    expect(screen.getByText(/This is one error/)).toBeInTheDocument();
+    expect(screen.getByText(/Status: 400/)).toBeInTheDocument();
+    expect(screen.getByText(/This is another error/)).toBeInTheDocument();
+    expect(screen.getByText(/Status: 401/)).toBeInTheDocument();
+  });
 });

public/app/features/inspector/InspectErrorTab.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { DataQueryError } from '@grafana/data';
-import { JSONFormatter } from '@grafana/ui';
+import { Alert, JSONFormatter } from '@grafana/ui';
 
 interface InspectErrorTabProps {
-  error?: DataQueryError;
+  errors?: DataQueryError[];
 }
 
 const parseErrorMessage = (message: string): { msg: string; json?: any } => {
@@ -20,10 +20,7 @@ const parseErrorMessage = (message: string): { msg: string; json?: any } => {
   }
 };
 
-export const InspectErrorTab = ({ error }: InspectErrorTabProps) => {
-  if (!error) {
-    return null;
-  }
+function renderError(error: DataQueryError) {
   if (error.data) {
     return (
       <>
@@ -35,15 +32,39 @@ export const InspectErrorTab = ({ error }: InspectErrorTabProps) => {
   if (error.message) {
     const { msg, json } = parseErrorMessage(error.message);
     if (!json) {
-      return <div>{msg}</div>;
+      return (
+        <>
+          {error.status && <>Status: {error.status}. Message: </>}
+          {msg}
+        </>
+      );
     } else {
       return (
         <>
           {msg !== '' && <h3>{msg}</h3>}
+          {error.status && <>Status: {error.status}</>}
           <JSONFormatter json={json} open={5} />
         </>
       );
     }
   }
   return <JSONFormatter json={error} open={2} />;
+}
+
+export const InspectErrorTab = ({ errors }: InspectErrorTabProps) => {
+  if (!errors?.length) {
+    return null;
+  }
+  if (errors.length === 1) {
+    return renderError(errors[0]);
+  }
+  return (
+    <>
+      {errors.map((error, index) => (
+        <Alert title={error.refId || `Query ${index + 1}`} severity="error" key={index}>
+          {renderError(error)}
+        </Alert>
+      ))}
+    </>
+  );
 };