diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx new file mode 100644 index 00000000000..f931249082a --- /dev/null +++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { render, screen, getAllByRole, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { LokiQueryBuilder } from './LokiQueryBuilder'; +import { LokiDatasource } from '../../datasource'; +import { LokiVisualQuery } from '../types'; +import { PanelData } from '@grafana/data'; + +const defaultQuery: LokiVisualQuery = { + labels: [{ op: '=', label: 'baz', value: 'bar' }], + operations: [], +}; + +describe('LokiQueryBuilder', () => { + it('tries to load labels when no labels are selected', async () => { + const { datasource } = setup(); + datasource.languageProvider.fetchSeriesLabels = jest.fn().mockReturnValue({ job: ['a'], instance: ['b'] }); + userEvent.click(screen.getByLabelText('Add')); + const labels = screen.getByText(/Labels/); + const selects = getAllByRole(labels.parentElement!, 'combobox'); + userEvent.click(selects[3]); + await waitFor(() => expect(screen.getByText('job')).toBeInTheDocument()); + }); +}); + +function setup(query: LokiVisualQuery = defaultQuery, data?: PanelData) { + const datasource = new LokiDatasource( + { + url: '', + jsonData: {}, + meta: {} as any, + } as any, + undefined, + undefined + ); + const props = { + datasource, + onRunQuery: () => {}, + onChange: () => {}, + data, + }; + + const { container } = render(); + return { datasource, container }; +} diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx index 27f9b722ee8..54a3071adff 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx +++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx @@ -36,7 +36,8 @@ export const LokiQueryBuilder = React.memo(({ datasource, query, nested, } const expr = lokiQueryModeller.renderLabels(labelsToConsider); - return await datasource.languageProvider.fetchSeriesLabels(expr); + const series = await datasource.languageProvider.fetchSeriesLabels(expr); + return Object.keys(series).sort(); }; const onGetLabelValues = async (forLabel: Partial) => {