From e80ca8706975f73b26ce9e289cd507baaefb717f Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 5 May 2021 17:30:24 +0200
Subject: [PATCH] Explore: Add error tab and rename query tab in inspector
 (#33412)

* Unify naming of Query tab in Explore with Panel inspect

* Add Error tab

* Add test

* Create Error tab only if query returns error
---
 .../explore/ExploreQueryInspector.test.tsx    | 16 ++++++++++------
 .../explore/ExploreQueryInspector.tsx         | 19 +++++++++++++++----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/public/app/features/explore/ExploreQueryInspector.test.tsx b/public/app/features/explore/ExploreQueryInspector.test.tsx
index 1ef51b26c08..acceab4a13e 100644
--- a/public/app/features/explore/ExploreQueryInspector.test.tsx
+++ b/public/app/features/explore/ExploreQueryInspector.test.tsx
@@ -27,7 +27,7 @@ jest.mock('app/core/services/context_srv', () => ({
   },
 }));
 
-const setup = () => {
+const setup = (propOverrides = {}) => {
   const props: ExploreQueryInspectorProps = {
     loading: false,
     width: 100,
@@ -39,6 +39,7 @@ const setup = () => {
       timeRange: {} as TimeRange,
     },
     runQueries: jest.fn(),
+    ...propOverrides,
   };
 
   return render(<ExploreQueryInspector {...props} />);
@@ -49,14 +50,17 @@ describe('ExploreQueryInspector', () => {
     setup();
     expect(screen.getByTitle(/close query inspector/i)).toBeInTheDocument();
   });
-  it('should render 2 Tabs', () => {
+  it('should render 4 Tabs if queryResponse has no error', () => {
     setup();
-    expect(screen.getByLabelText(/tab stats/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/tab query inspector/i)).toBeInTheDocument();
+    expect(screen.getAllByLabelText(/tab/i)).toHaveLength(4);
   });
-  it('should display query data', () => {
+  it('should render 5 Tabs if queryResponse has error', () => {
+    setup({ queryResponse: { error: 'Bad gateway' } });
+    expect(screen.getAllByLabelText(/tab/i)).toHaveLength(5);
+  });
+  it('should display query data when click on expanding', () => {
     setup();
-    fireEvent.click(screen.getByLabelText(/tab query inspector/i));
+    fireEvent.click(screen.getByLabelText(/tab query/i));
     fireEvent.click(screen.getByText(/expand all/i));
     expect(screen.getByText(/very unique test value/i)).toBeInTheDocument();
   });
diff --git a/public/app/features/explore/ExploreQueryInspector.tsx b/public/app/features/explore/ExploreQueryInspector.tsx
index c9412a4f07c..ef5da940131 100644
--- a/public/app/features/explore/ExploreQueryInspector.tsx
+++ b/public/app/features/explore/ExploreQueryInspector.tsx
@@ -10,6 +10,7 @@ import { InspectJSONTab } from 'app/features/inspector/InspectJSONTab';
 import { QueryInspector } from 'app/features/inspector/QueryInspector';
 import { InspectStatsTab } from 'app/features/inspector/InspectStatsTab';
 import { InspectDataTab } from 'app/features/inspector/InspectDataTab';
+import { InspectErrorTab } from 'app/features/inspector/InspectErrorTab';
 
 interface DispatchProps {
   runQueries: typeof runQueries;
@@ -25,6 +26,7 @@ interface Props extends DispatchProps {
 export function ExploreQueryInspector(props: Props) {
   const { loading, width, onClose, queryResponse } = props;
   const dataFrames = queryResponse?.series || [];
+  const error = queryResponse?.error;
 
   const statsTab: TabConfig = {
     label: 'Stats',
@@ -53,14 +55,23 @@ export function ExploreQueryInspector(props: Props) {
     ),
   };
 
-  const queryInspectorTab: TabConfig = {
-    label: 'Query Inspector',
-    value: 'query_inspector',
+  const queryTab: TabConfig = {
+    label: 'Query',
+    value: 'query',
     icon: 'info-circle',
     content: <QueryInspector data={dataFrames} onRefreshQuery={() => props.runQueries(props.exploreId)} />,
   };
 
-  const tabs = [statsTab, queryInspectorTab, jsonTab, dataTab];
+  const tabs = [statsTab, queryTab, jsonTab, dataTab];
+  if (error) {
+    const errorTab: TabConfig = {
+      label: 'Error',
+      value: 'error',
+      icon: 'exclamation-triangle',
+      content: <InspectErrorTab error={error} />,
+    };
+    tabs.push(errorTab);
+  }
   return (
     <ExploreDrawer width={width} onResize={() => {}}>
       <TabbedContainer tabs={tabs} onClose={onClose} closeIconTooltip="Close query inspector" />