diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx index 62e3c0cb171..94a6e4bf195 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx +++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.test.tsx @@ -1,6 +1,7 @@ import { render, screen, getAllByRole, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; +import { getSelectParent } from 'test/helpers/selectOptionInTest'; import { DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data'; @@ -46,11 +47,28 @@ describe('LokiQueryBuilder', () => { render(); await userEvent.click(screen.getByLabelText('Add')); const labels = screen.getByText(/Label filters/); - const selects = getAllByRole(labels.parentElement!.parentElement!.parentElement!, 'combobox'); + const selects = getAllByRole(getSelectParent(labels)!, 'combobox'); await userEvent.click(selects[3]); await waitFor(() => expect(screen.getByText('job')).toBeInTheDocument()); }); + 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.fetchSeriesLabels = jest + .fn() + .mockReturnValue({ job: ['a'], instance: ['b'], baz: ['bar'] }); + + 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(); diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx index af584675408..8017a2cf588 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx +++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx @@ -54,7 +54,14 @@ export const LokiQueryBuilder = React.memo(({ datasource, query, onChange const expr = lokiQueryModeller.renderLabels(labelsToConsider); const series = await datasource.languageProvider.fetchSeriesLabels(expr); - return Object.keys(series).sort(); + const labelsNamesToConsider = labelsToConsider.map((l) => l.label); + + const labelNames = Object.keys(series) + // Filter out label names that are already selected + .filter((name) => !labelsNamesToConsider.includes(name)) + .sort(); + + return labelNames; }; const onGetLabelValues = async (forLabel: Partial) => {