import { render, screen, getAllByRole, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { dateTime } from '@grafana/data'; import { config } from '@grafana/runtime'; import { createLokiDatasource } from '../../__mocks__/datasource'; import { LokiOperationId, LokiVisualQuery } from '../types'; import { LokiQueryBuilder, Props, TIME_SPAN_TO_TRIGGER_SAMPLES } from './LokiQueryBuilder'; import { EXPLAIN_LABEL_FILTER_CONTENT } from './LokiQueryBuilderExplained'; const MISSING_LABEL_FILTER_ERROR_MESSAGE = 'Select at least 1 label filter (label and value)'; const defaultQuery: LokiVisualQuery = { labels: [{ op: '=', label: 'baz', value: 'bar' }], operations: [], }; const mockTimeRange = { from: dateTime(1546372800000), to: dateTime(1546380000000), raw: { from: dateTime(1546372800000), to: dateTime(1546380000000), }, }; const createDefaultProps = () => { const datasource = createLokiDatasource(); const props = { datasource, onRunQuery: () => {}, onChange: () => {}, showExplain: false, timeRange: mockTimeRange, }; return props; }; describe('LokiQueryBuilder', () => { const originalLokiQueryHints = config.featureToggles.lokiQueryHints; beforeEach(() => { config.featureToggles.lokiQueryHints = true; }); afterEach(() => { config.featureToggles.lokiQueryHints = originalLokiQueryHints; }); it('tries to load label names', async () => { const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); props.datasource.languageProvider.fetchLabels = jest.fn().mockReturnValue(['job', 'instance']); render(); await userEvent.click(screen.getByLabelText('Add')); const labels = screen.getByText(/Label filters/); const selects = getAllByRole(getSelectParent(labels)!, 'combobox'); await userEvent.click(selects[3]); expect(props.datasource.languageProvider.fetchLabels).toHaveBeenCalledWith({ streamSelector: '{baz="bar"}', timeRange: mockTimeRange, }); await waitFor(() => expect(screen.getByText('job')).toBeInTheDocument()); }); it('uses fetchLabelValues if preselected labels have no equality matcher', async () => { const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); props.datasource.languageProvider.fetchLabelValues = jest.fn().mockReturnValue(['a', 'b']); const query: LokiVisualQuery = { labels: [ { op: '!=', label: 'cluster', value: 'cluster1' }, { op: '=', label: 'job', value: 'grafana' }, ], operations: [], }; render(); const labels = screen.getByText(/Label filters/); const selects = getAllByRole(getSelectParent(labels)!, 'combobox'); await userEvent.click(selects[5]); expect(props.datasource.languageProvider.fetchLabelValues).toHaveBeenCalledWith('job', { timeRange: mockTimeRange, }); }); it('no streamSelector in fetchLabelValues if preselected label have regex equality matcher with match everything value (.*)', async () => { const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); props.datasource.languageProvider.fetchLabelValues = jest.fn().mockReturnValue(['a', 'b']); const query: LokiVisualQuery = { labels: [ { op: '=~', label: 'cluster', value: '.*' }, { op: '=', label: 'job', value: 'grafana' }, ], operations: [], }; render(); const labels = screen.getByText(/Label filters/); const selects = getAllByRole(getSelectParent(labels)!, 'combobox'); await userEvent.click(selects[5]); expect(props.datasource.languageProvider.fetchLabelValues).toHaveBeenCalledWith('job', { timeRange: mockTimeRange, }); }); it('no streamSelector in fetchLabels if preselected label have regex equality matcher with match everything value (.*)', async () => { const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); props.datasource.languageProvider.fetchLabels = jest.fn().mockReturnValue(['a', 'b']); const query: LokiVisualQuery = { labels: [ { op: '=~', label: 'cluster', value: '.*' }, { op: '=', label: 'job', value: 'grafana' }, ], operations: [], }; render(); const labels = screen.getByText(/Label filters/); const selects = getAllByRole(getSelectParent(labels)!, 'combobox'); await userEvent.click(selects[3]); expect(props.datasource.languageProvider.fetchLabels).toHaveBeenCalledWith({ timeRange: mockTimeRange }); }); it('uses streamSelector in fetchLabelValues if preselected label have regex equality matcher', async () => { const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); props.datasource.languageProvider.fetchLabelValues = jest.fn().mockReturnValue(['a', 'b']); const query: LokiVisualQuery = { labels: [ { op: '=~', label: 'cluster', value: 'cluster1|cluster2' }, { op: '=', label: 'job', value: 'grafana' }, ], operations: [], }; render(); const labels = screen.getByText(/Label filters/); const selects = getAllByRole(getSelectParent(labels)!, 'combobox'); await userEvent.click(selects[5]); expect(props.datasource.languageProvider.fetchLabelValues).toHaveBeenCalledWith('job', { streamSelector: '{cluster=~"cluster1|cluster2"}', timeRange: mockTimeRange, }); }); it('does refetch label values with the correct time range', async () => { const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); props.datasource.languageProvider.fetchLabels = jest.fn().mockReturnValue(['job', 'instance', 'baz']); props.datasource.languageProvider.fetchLabelValues = jest.fn().mockReturnValue(['a', 'b', 'c']); render(); await userEvent.click(screen.getByLabelText('Add')); const labels = screen.getByText(/Label filters/); const selects = getAllByRole(getSelectParent(labels)!, 'combobox'); await userEvent.click(selects[3]); await waitFor(() => expect(screen.getByText('job')).toBeInTheDocument()); await userEvent.click(screen.getByText('job')); await userEvent.click(selects[5]); expect(props.datasource.languageProvider.fetchLabels).toHaveBeenCalledWith({ streamSelector: '{baz="bar"}', timeRange: mockTimeRange, }); expect(props.datasource.languageProvider.fetchLabelValues).toHaveBeenCalledWith('job', { streamSelector: '{baz="bar"}', timeRange: mockTimeRange, }); }); it('does not show already existing label names as option in label filter', async () => { const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); props.datasource.languageProvider.fetchLabels = jest.fn().mockReturnValue(['job', 'instance', 'baz']); render(); await userEvent.click(screen.getByLabelText('Add')); const labels = screen.getByText(/Label filters/); const selects = getAllByRole(getSelectParent(labels)!, 'combobox'); await userEvent.click(selects[3]); await waitFor(() => expect(screen.getByText('job')).toBeInTheDocument()); await waitFor(() => expect(screen.getByText('instance')).toBeInTheDocument()); await waitFor(() => expect(screen.getAllByText('baz')).toHaveLength(1)); }); it('shows error for query with operations and no stream selector', async () => { const query = { labels: [], operations: [{ id: LokiOperationId.Logfmt, params: [] }] }; render(); expect(await screen.findByText(MISSING_LABEL_FILTER_ERROR_MESSAGE)).toBeInTheDocument(); }); it('shows no error for query with empty __line_contains operation and no stream selector', async () => { const query = { labels: [], operations: [{ id: LokiOperationId.LineContains, params: [''] }] }; render(); await waitFor(() => { expect(screen.queryByText(MISSING_LABEL_FILTER_ERROR_MESSAGE)).not.toBeInTheDocument(); }); }); it('shows explain section when showExplain is true', async () => { const query = { labels: [{ label: 'foo', op: '=', value: 'bar' }], operations: [{ id: LokiOperationId.LineContains, params: ['error'] }], }; const props = createDefaultProps(); props.showExplain = true; props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); render(); expect(await screen.findByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument(); }); it('does not shows explain section when showExplain is false', async () => { const query = { labels: [{ label: 'foo', op: '=', value: 'bar' }], operations: [{ id: LokiOperationId.LineContains, params: ['error'] }], }; const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); render(); await waitFor(() => { expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument(); }); }); it('re-runs sample query when query changes', async () => { const query = { labels: [{ label: 'foo', op: '=', value: 'bar' }], operations: [{ id: LokiOperationId.LineContains, params: ['error'] }], }; const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); const { rerender } = render(); rerender( ); await waitFor(() => { expect(props.datasource.getDataSamples).toHaveBeenCalledTimes(2); }); }); it('does not re-run sample query when query does not change', async () => { const query = { labels: [{ label: 'foo', op: '=', value: 'bar' }], operations: [{ id: LokiOperationId.LineContains, params: ['error'] }], }; const props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); const { rerender } = render(); rerender(); await waitFor(() => { expect(props.datasource.getDataSamples).toHaveBeenCalledTimes(1); }); }); it('re-run sample query when time range changes over 5 minutes', async () => { const query = { labels: [{ label: 'foo', op: '=', value: 'bar' }], operations: [{ id: LokiOperationId.LineContains, params: ['error'] }], }; const props = createDefaultProps(); const updatedFrom = dateTime(props.timeRange.from.valueOf() + TIME_SPAN_TO_TRIGGER_SAMPLES + 1000); const updatedTo = dateTime(props.timeRange.to.valueOf() + TIME_SPAN_TO_TRIGGER_SAMPLES + 1000); const updatedTimeRange = { from: updatedFrom, to: updatedTo, raw: { from: updatedFrom, to: updatedTo, }, }; props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); const { rerender } = render(); rerender(); await waitFor(() => { expect(props.datasource.getDataSamples).toHaveBeenCalledTimes(2); }); }); it('does not re-run sample query when time range changes less than 5 minutes', async () => { const query = { labels: [{ label: 'foo', op: '=', value: 'bar' }], operations: [{ id: LokiOperationId.LineContains, params: ['error'] }], }; const props = createDefaultProps(); const updatedFrom = dateTime(props.timeRange.from.valueOf() + TIME_SPAN_TO_TRIGGER_SAMPLES - 1000); const updatedTo = dateTime(props.timeRange.to.valueOf() + TIME_SPAN_TO_TRIGGER_SAMPLES - 1000); const updatedTimeRange = { from: updatedFrom, to: updatedTo, raw: { from: updatedFrom, to: updatedTo, }, }; props.datasource.getDataSamples = jest.fn().mockResolvedValue([]); const { rerender } = render(); rerender(); await waitFor(() => { expect(props.datasource.getDataSamples).toHaveBeenCalledTimes(1); }); }); describe('Disabling operations', () => { let props: Omit; beforeEach(() => { props = createDefaultProps(); props.datasource.getDataSamples = jest.fn().mockReturnValue(new Promise(() => {})); props.datasource.languageProvider.fetchLabelValues = jest.fn().mockReturnValue(['a', 'b']); }); it('Allows to disable operations', async () => { const onChange = jest.fn(); const query: LokiVisualQuery = { labels: [{ op: '=', label: 'job', value: 'grafana' }], operations: [ { id: LokiOperationId.Logfmt, params: [], }, ], }; render(); expect(screen.getByText('Logfmt')).toBeInTheDocument(); await userEvent.click(screen.getByTitle('Disable operation')); expect(onChange).toHaveBeenCalledWith({ ...query, operations: [ { ...query.operations[0], disabled: true, }, ], }); }); it('Allows to enable operations', async () => { const onChange = jest.fn(); const query: LokiVisualQuery = { labels: [{ op: '=', label: 'job', value: 'grafana' }], operations: [ { id: LokiOperationId.Logfmt, params: [], disabled: true, }, ], }; render(); expect(screen.getByText('Logfmt')).toBeInTheDocument(); await userEvent.click(screen.getByTitle('Enable operation')); expect(onChange).toHaveBeenCalledWith({ ...query, operations: [ { ...query.operations[0], disabled: false, }, ], }); }); }); }); const getSelectParent = (input: HTMLElement) => input.parentElement?.parentElement?.parentElement?.parentElement?.parentElement;