IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Add error tab and rename query tab in inspector (#33412)

Browse Source 
* Unify naming of Query tab in Explore with Panel inspect

* Add Error tab

* Add test

* Create Error tab only if query returns error
This commit is contained in:
Ivana Huckova
2021-05-05 17:30:24 +02:00
committed by GitHub
parent 8c072d963b
commit e80ca87069
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/explore/ExploreQueryInspector.test.tsx
View File

@@ -27,7 +27,7 @@ jest.mock('app/core/services/context_srv', () => ({
}, },
})); }));
const setup = () => { const setup = (propOverrides = {}) => {
const props: ExploreQueryInspectorProps = { const props: ExploreQueryInspectorProps = {
loading: false, loading: false,
width: 100, width: 100,
@@ -39,6 +39,7 @@ const setup = () => {
timeRange: {} as TimeRange, timeRange: {} as TimeRange,
}, },
runQueries: jest.fn(), runQueries: jest.fn(),
...propOverrides,
}; };
return render(<ExploreQueryInspector {...props} />); return render(<ExploreQueryInspector {...props} />);
@@ -49,14 +50,17 @@ describe('ExploreQueryInspector', () => {
setup(); setup();
expect(screen.getByTitle(/close query inspector/i)).toBeInTheDocument(); expect(screen.getByTitle(/close query inspector/i)).toBeInTheDocument();
}); });
it('should render 2 Tabs', () => { it('should render 4 Tabs if queryResponse has no error', () => {
setup(); setup();
expect(screen.getByLabelText(/tab stats/i)).toBeInTheDocument(); expect(screen.getAllByLabelText(/tab/i)).toHaveLength(4);
expect(screen.getByLabelText(/tab query inspector/i)).toBeInTheDocument();
}); });
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(); setup();
fireEvent.click(screen.getByLabelText(/tab query inspector/i)); fireEvent.click(screen.getByLabelText(/tab query/i));
fireEvent.click(screen.getByText(/expand all/i)); fireEvent.click(screen.getByText(/expand all/i));
expect(screen.getByText(/very unique test value/i)).toBeInTheDocument(); expect(screen.getByText(/very unique test value/i)).toBeInTheDocument();
}); });

19
public/app/features/explore/ExploreQueryInspector.tsx
View File

@@ -10,6 +10,7 @@ import { InspectJSONTab } from 'app/features/inspector/InspectJSONTab';
import { QueryInspector } from 'app/features/inspector/QueryInspector'; import { QueryInspector } from 'app/features/inspector/QueryInspector';
import { InspectStatsTab } from 'app/features/inspector/InspectStatsTab'; import { InspectStatsTab } from 'app/features/inspector/InspectStatsTab';
import { InspectDataTab } from 'app/features/inspector/InspectDataTab'; import { InspectDataTab } from 'app/features/inspector/InspectDataTab';
import { InspectErrorTab } from 'app/features/inspector/InspectErrorTab';
interface DispatchProps { interface DispatchProps {
runQueries: typeof runQueries; runQueries: typeof runQueries;
@@ -25,6 +26,7 @@ interface Props extends DispatchProps {
export function ExploreQueryInspector(props: Props) { export function ExploreQueryInspector(props: Props) {
const { loading, width, onClose, queryResponse } = props; const { loading, width, onClose, queryResponse } = props;
const dataFrames = queryResponse?.series || []; const dataFrames = queryResponse?.series || [];
const error = queryResponse?.error;
const statsTab: TabConfig = { const statsTab: TabConfig = {
label: 'Stats', label: 'Stats',
@@ -53,14 +55,23 @@ export function ExploreQueryInspector(props: Props) {
), ),
}; };
const queryInspectorTab: TabConfig = { const queryTab: TabConfig = {
label: 'Query Inspector', label: 'Query',
value: 'query_inspector', value: 'query',
icon: 'info-circle', icon: 'info-circle',
content: <QueryInspector data={dataFrames} onRefreshQuery={() => props.runQueries(props.exploreId)} />, 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 ( return (
<ExploreDrawer width={width} onResize={() => {}}> <ExploreDrawer width={width} onResize={() => {}}>
<TabbedContainer tabs={tabs} onClose={onClose} closeIconTooltip="Close query inspector" /> <TabbedContainer tabs={tabs} onClose={onClose} closeIconTooltip="Close query inspector" />