Prometheus: fix labels infinite loading state in aggregations (#103005)

* fix labels in aggregation

* use timerange from props

* fix tests and lint

* fix lint

packages/grafana-prometheus/src/querybuilder/components/LabelParamEditor.tsx

@@ -1,7 +1,7 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/LabelParamEditor.tsx
 import { useState } from 'react';
 
-import { DataSourceApi, SelectableValue, toOption } from '@grafana/data';
+import { DataSourceApi, SelectableValue, TimeRange, toOption } from '@grafana/data';
 import { Select } from '@grafana/ui';
 
 import { promQueryModeller } from '../PromQueryModeller';
@@ -16,6 +16,7 @@ export function LabelParamEditor({
   value,
   query,
   datasource,
+  timeRange,
 }: QueryBuilderOperationParamEditorProps) {
   const [state, setState] = useState<{
     options?: SelectableValue[];
@@ -29,7 +30,7 @@ export function LabelParamEditor({
       openMenuOnFocus
       onOpenMenu={async () => {
         setState({ isLoading: true });
-        const options = await loadGroupByLabels(query, datasource);
+        const options = await loadGroupByLabels(timeRange, query, datasource);
         setState({ options, isLoading: undefined });
       }}
       isLoading={state.isLoading}
@@ -43,7 +44,11 @@ export function LabelParamEditor({
   );
 }
 
-async function loadGroupByLabels(query: PromVisualQuery, datasource: DataSourceApi): Promise<SelectableValue[]> {
+async function loadGroupByLabels(
+  timeRange: TimeRange,
+  query: PromVisualQuery,
+  datasource: DataSourceApi
+): Promise<SelectableValue[]> {
   let labels: QueryBuilderLabelFilter[] = query.labels;
 
   // This function is used by both Prometheus and Loki and this the only difference.
@@ -52,7 +57,7 @@ async function loadGroupByLabels(query: PromVisualQuery, datasource: DataSourceA
   }
 
   const expr = promQueryModeller.renderLabels(labels);
-  const result = await datasource.languageProvider.fetchLabelsWithMatch(expr);
+  const result = await datasource.languageProvider.fetchLabelsWithMatch(timeRange, expr);
 
   return Object.keys(result).map((x) => ({
     label: x,

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx

@@ -84,6 +84,7 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
           onChange={onChange}
           onRunQuery={onRunQuery}
           highlightedOp={highlightedOp}
+          timeRange={data?.timeRange ?? getDefaultTimeRange()}
         />
         <div data-testid={selectors.components.DataSource.Prometheus.queryEditor.builder.hints}>
           <QueryBuilderHints<PromVisualQuery>

packages/grafana-prometheus/src/querybuilder/shared/OperationEditor.tsx

@@ -30,7 +30,7 @@ export interface Props {
   onRunQuery: () => void;
   flash?: boolean;
   highlight?: boolean;
-  timeRange?: TimeRange;
+  timeRange: TimeRange;
 }
 
 export function OperationEditor({

packages/grafana-prometheus/src/querybuilder/shared/OperationList.test.tsx

@@ -7,6 +7,7 @@ import { DataSourceApi, DataSourceInstanceSettings } from '@grafana/data';
 import { PrometheusDatasource } from '../../datasource';
 import PromQlLanguageProvider from '../../language_provider';
 import { EmptyLanguageProviderMock } from '../../language_provider.mock';
+import { getMockTimeRange } from '../../test/__mocks__/datasource';
 import { PromOptions } from '../../types';
 import { promQueryModeller } from '../PromQueryModeller';
 import { addOperationInQueryBuilder } from '../testUtils';
@@ -78,6 +79,7 @@ function setup(query: PromVisualQuery = defaultQuery) {
     onRunQuery: () => {},
     onChange: jest.fn(),
     queryModeller: promQueryModeller,
+    timeRange: getMockTimeRange(),
   };
 
   render(<OperationList {...props} query={query} />);

packages/grafana-prometheus/src/querybuilder/shared/OperationList.tsx

@@ -18,7 +18,7 @@ export interface Props<T extends QueryWithOperations> {
   queryModeller: VisualQueryModeller;
   explainMode?: boolean;
   highlightedOp?: QueryBuilderOperation;
-  timeRange?: TimeRange;
+  timeRange: TimeRange;
 }
 
 export function OperationList<T extends QueryWithOperations>({

packages/grafana-prometheus/src/querybuilder/shared/types.ts

@@ -92,7 +92,7 @@ export interface QueryBuilderOperationParamEditorProps {
   operationId: string;
   query: any;
   datasource: DataSourceApi;
-  timeRange?: TimeRange;
+  timeRange: TimeRange;
   onChange: (index: number, value: QueryBuilderOperationParamValue) => void;
   onRunQuery: () => void;
 }