IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 08:56:43 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 10 deletions
Show Stats 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 = {
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();
});

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 { 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" />