From b997bc4200229d3c59f1106863eaa728b3cac079 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 19 Oct 2022 11:32:01 +0200
Subject: [PATCH] Loki: Remove already selected options from next label filter
 options in builder (#57187)

* Loki: Filter out duplicated options in loki query builder label name options

* Update test
---
 .../components/LokiQueryBuilder.test.tsx      | 20 ++++++++++++++++++-
 .../components/LokiQueryBuilder.tsx           |  9 ++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

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(<LokiQueryBuilder {...props} query={defaultQuery} />);
     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(<LokiQueryBuilder {...props} query={defaultQuery} />);
+    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(<LokiQueryBuilder {...createDefaultProps()} query={query} />);
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<Props>(({ 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<QueryBuilderLabelFilter>) => {