diff --git a/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.test.tsx index 7d0af5aa56d..683c4be7185 100644 --- a/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.test.tsx +++ b/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.test.tsx @@ -3,6 +3,8 @@ import userEvent from '@testing-library/user-event'; import React from 'react'; import { selectOptionInTest } from 'test/helpers/selectOptionInTest'; +import { dateTime, TimeRange } from '@grafana/data'; + import { PrometheusDatasource } from '../datasource'; import PrometheusLanguageProvider from '../language_provider'; import { migrateVariableEditorBackToVariableSupport } from '../migrations/variableMigration'; @@ -368,4 +370,24 @@ describe('PromVariableQueryEditor', () => { qryType: 5, }); }); + + test('Calls language provider with the time range received in props', async () => { + const now = dateTime('2023-09-16T21:26:00Z'); + const range: TimeRange = { + from: dateTime(now).subtract(2, 'days'), + to: now, + raw: { + from: 'now-2d', + to: 'now', + }, + }; + props.range = range; + + const languageProviderStartMock = jest.fn(); + props.datasource.languageProvider.start = languageProviderStartMock; + + render(); + + expect(languageProviderStartMock).toHaveBeenCalledWith(range); + }); }); diff --git a/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx index 43f4badad79..f5875f050eb 100644 --- a/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx +++ b/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx @@ -33,7 +33,7 @@ export type Props = QueryEditorProps { +export const PromVariableQueryEditor = ({ onChange, query, datasource, range }: Props) => { // to select the query type, i.e. label_names, label_values, etc. const [qryType, setQryType] = useState(undefined); // list of variables for each function @@ -59,6 +59,10 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource }: Props) // label filters have been added as a filter for metrics in label values query type const [labelFilters, setLabelFilters] = useState([]); + useEffect(() => { + datasource.languageProvider.start(range); + }, [datasource.languageProvider, range]); + useEffect(() => { if (!query) { return;