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) => {