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();
@@ -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: 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: ,
+ };
+ tabs.push(errorTab);
+ }
return (
{}}>