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;