Refactor

public/app/plugins/datasource/loki/datasource.ts

@@ -34,11 +34,13 @@ import {
   rangeUtil,
   toUtc,
   QueryHint,
+  getDefaultTimeRange,
 } from '@grafana/data';
 import { FetchError, config, DataSourceWithBackend } from '@grafana/runtime';
 import { RowContextOptions } from '@grafana/ui/src/components/Logs/LogRowContextProvider';
 import { queryLogsVolume } from 'app/core/logsModel';
 import { convertToWebSocketUrl } from 'app/core/utils/explore';
+import { defaultTimeRange } from 'app/extensions/reports/state/reducers';
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 
@@ -363,7 +365,9 @@ export class LokiDatasource
       maxLines: 10,
     };
 
-    const request = makeRequest(lokiLogsQuery, this.timeSrv.timeRange(), CoreApp.Explore, 'log-samples');
+    // For samples, we use defaultTimeRange (now-1h/now) so queries are small and fast
+    const timeRange = getDefaultTimeRange();
+    const request = makeRequest(lokiLogsQuery, timeRange, CoreApp.Explore, 'log-samples');
     return await lastValueFrom(this.query(request).pipe(switchMap((res) => of(res.data))));
   }
 

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
-import { DataSourceApi, PanelData, SelectableValue } from '@grafana/data';
+import { DataSourceApi, getDefaultTimeRange, LoadingState, PanelData, SelectableValue } from '@grafana/data';
 import { EditorRow } from '@grafana/experimental';
 import { LabelFilters } from 'app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters';
 import { OperationList } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationList';
@@ -20,10 +20,11 @@ export interface Props {
   datasource: LokiDatasource;
   onChange: (update: LokiVisualQuery) => void;
   onRunQuery: () => void;
-  data?: PanelData;
 }
 
-export const LokiQueryBuilder = React.memo<Props>(({ datasource, query, onChange, onRunQuery, data }) => {
+export const LokiQueryBuilder = React.memo<Props>(({ datasource, query, onChange, onRunQuery }) => {
+  const [sampleData, setSampleData] = useState<PanelData>();
+
   const onChangeLabels = (labels: QueryBuilderLabelFilter[]) => {
     onChange({ ...query, labels });
   };
@@ -76,6 +77,17 @@ export const LokiQueryBuilder = React.memo<Props>(({ datasource, query, onChange
     return undefined;
   }, [query]);
 
+  useEffect(() => {
+    const onGetSampleData = async () => {
+      const lokiQuery = { expr: lokiQueryModeller.renderQuery(query), refId: 'data-samples' };
+      const series = await datasource.getDataSamples(lokiQuery);
+      const sampleData = { series, state: LoadingState.Done, timeRange: getDefaultTimeRange() };
+      setSampleData(sampleData);
+    };
+
+    onGetSampleData().catch(console.error);
+  }, [datasource, query]);
+
   return (
     <>
       <EditorRow>
@@ -99,7 +111,7 @@ export const LokiQueryBuilder = React.memo<Props>(({ datasource, query, onChange
           onRunQuery={onRunQuery}
           datasource={datasource as DataSourceApi}
         />
-        <LokiQueryBuilderHints datasource={datasource} query={query} onChange={onChange} data={data} />
+        <LokiQueryBuilderHints datasource={datasource} query={query} onChange={onChange} data={sampleData} />
       </OperationsEditorRow>
       {query.binaryQueries && query.binaryQueries.length > 0 && (
         <NestedQueryList query={query} datasource={datasource} onChange={onChange} onRunQuery={onRunQuery} />

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderContainer.tsx

@@ -18,7 +18,6 @@ export interface Props {
   onChange: (update: LokiQuery) => void;
   onRunQuery: () => void;
   showRawQuery: boolean;
-  data?: PanelData;
 }
 
 export interface State {
@@ -30,7 +29,7 @@ export interface State {
  * This component is here just to contain the translation logic between string query and the visual query builder model.
  */
 export function LokiQueryBuilderContainer(props: Props) {
-  const { query, onChange, onRunQuery, datasource, showRawQuery, data } = props;
+  const { query, onChange, onRunQuery, datasource, showRawQuery } = props;
   const [state, dispatch] = useReducer(stateSlice.reducer, {
     expr: query.expr,
     // Use initial visual query only if query.expr is empty string
@@ -65,7 +64,6 @@ export function LokiQueryBuilderContainer(props: Props) {
         datasource={datasource}
         onChange={onVisQueryChange}
         onRunQuery={onRunQuery}
-        data={data}
       />
       {showRawQuery && <QueryPreview query={query.expr} />}
     </>

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderHints.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { GrafanaTheme2, PanelData, QueryHint } from '@grafana/data';
 import { Button, Tooltip, useStyles2 } from '@grafana/ui';
@@ -19,26 +19,14 @@ export interface Props {
 export const LokiQueryBuilderHints = React.memo<Props>(({ datasource, query, onChange, data }) => {
   const [hints, setHints] = useState<QueryHint[]>([]);
   const styles = useStyles2(getStyles);
-  const prevQuery = useRef('');
 
   useEffect(() => {
-    const expr = lokiQueryModeller.renderQuery(query);
-
-    const getHints = async () => {
-      // Run only if query changed
-      if (prevQuery.current === expr) {
-        return;
-      } else {
-        const lokiQuery = { expr, refId: 'data-samples' };
-        prevQuery.current = expr;
-        const sampleData = await datasource.getDataSamples(lokiQuery);
-        const hints = datasource.getQueryHints(lokiQuery, sampleData).filter((hint) => hint.fix?.action);
-        setHints(hints);
-      }
-    };
-
-    getHints().catch(console.error);
-  }, [datasource, query, onChange, data, styles.hint]);
+    const lokiQuery = { expr: lokiQueryModeller.renderQuery(query), refId: 'data-samples' };
+    if (data?.series.length) {
+      const hints = datasource.getQueryHints(lokiQuery, data?.series ?? []).filter((hint) => hint.fix?.action);
+      setHints(hints);
+    }
+  }, [datasource, query, data]);
 
   return (
     <>

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx

@@ -126,7 +126,6 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
             onChange={onChangeInternal}
             onRunQuery={props.onRunQuery}
             showRawQuery={rawQuery}
-            data={data}
           />
         )}
         {editorMode === QueryEditorMode.Explain && <LokiQueryBuilderExplained query={query.expr} />}