Query Editor: Display error even if error field is empty (#79943)

This commit is contained in:
Ida Štambuk 2024-01-03 11:31:59 +01:00 committed by GitHub
parent ed5c90a8b1
commit a255058ccf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 5 deletions

View File

@ -1,8 +1,31 @@
import { render, screen } from '@testing-library/react';
import { render, screen, waitFor } from '@testing-library/react';
import React, { PropsWithChildren } from 'react';
import { DataQueryRequest, dateTime, LoadingState, PanelData, toDataFrame } from '@grafana/data';
import { DataQuery } from '@grafana/schema';
import { mockDataSource } from 'app/features/alerting/unified/mocks';
import { filterPanelDataToQuery, QueryEditorRow } from './QueryEditorRow';
import { DataSourceType } from '../../alerting/unified/utils/datasource';
import { filterPanelDataToQuery, Props, QueryEditorRow } from './QueryEditorRow';
const mockDS = mockDataSource({
name: 'test',
type: DataSourceType.Alertmanager,
});
jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => {
return {
getDataSourceSrv: () => ({
get: () => Promise.resolve(mockDS),
getList: () => {},
getInstanceSettings: () => mockDS,
}),
};
});
// Draggable fails to render in tests, so we mock it out
jest.mock('app/core/components/QueryOperationRow/QueryOperationRow', () => ({
QueryOperationRow: (props: PropsWithChildren) => <div>{props.children}</div>,
}));
function makePretendRequest(requestId: string, subRequests?: DataQueryRequest[]): DataQueryRequest {
return {
@ -219,3 +242,50 @@ describe('frame results with warnings', () => {
expect(warningsComponent).toBe(null);
});
});
describe('QueryEditorRow', () => {
const props = (data: PanelData): Props<DataQuery> => ({
dataSource: mockDS,
query: { refId: 'B' },
data,
queries: [{ refId: 'B' }],
id: 'test',
onAddQuery: jest.fn(),
onRunQuery: jest.fn(),
onChange: jest.fn(),
onRemoveQuery: jest.fn(),
index: 0,
});
it('should display error message in corresponding panel', async () => {
const data = {
state: LoadingState.Error,
series: [],
errors: [{ message: 'Error!!', refId: 'B' }],
timeRange: { from: dateTime(), to: dateTime(), raw: { from: 'now-1d', to: 'now' } },
};
render(<QueryEditorRow {...props(data)} />);
expect(await screen.findByText('Error!!')).toBeInTheDocument();
});
it('should display error message in corresponding panel if only error field is provided', async () => {
const data = {
state: LoadingState.Error,
series: [],
error: { message: 'Error!!', refId: 'B' },
errors: [],
timeRange: { from: dateTime(), to: dateTime(), raw: { from: 'now-1d', to: 'now' } },
};
render(<QueryEditorRow {...props(data)} />);
expect(await screen.findByText('Error!!')).toBeInTheDocument();
});
it('should not display error message if error.refId doesnt match', async () => {
const data = {
state: LoadingState.Error,
series: [],
errors: [{ message: 'Error!!', refId: 'A' }],
timeRange: { from: dateTime(), to: dateTime(), raw: { from: 'now-1d', to: 'now' } },
};
render(<QueryEditorRow {...props(data)} />);
await waitFor(() => {
expect(screen.queryByText('Error!!')).not.toBeInTheDocument();
});
});
});

View File

@ -42,7 +42,7 @@ import { RowActionComponents } from './QueryActionComponent';
import { QueryEditorRowHeader } from './QueryEditorRowHeader';
import { QueryErrorAlert } from './QueryErrorAlert';
interface Props<TQuery extends DataQuery> {
export interface Props<TQuery extends DataQuery> {
data: PanelData;
query: TQuery;
queries: TQuery[];
@ -510,7 +510,8 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
const { query, index, visualization, collapsable } = this.props;
const { datasource, showingHelp, data } = this.state;
const isDisabled = query.hide;
const error =
data?.error && data.error.refId === query.refId ? data.error : data?.errors?.find((e) => e.refId === query.refId);
const rowClasses = classNames('query-editor-row', {
'query-editor-row--disabled': isDisabled,
'gf-form-disabled': isDisabled,
@ -547,7 +548,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
)}
{editor}
</ErrorBoundaryAlert>
{data?.error && data.error.refId === query.refId && <QueryErrorAlert error={data.error} />}
{error && <QueryErrorAlert error={error} />}
{visualization}
</div>
</QueryOperationRow>