Loki: Send current time range when fetching labels and values (#26622)

* Send current time range when fetching labels and values in Explore

* Pass range to Editors, in the same way as it was in Angular editors

* Remove unused imports

* Remove unused imports, props

* Update

* Update

* Update refresh condition

* Add comment

packages/grafana-data/src/types/datasource.ts

@@ -5,7 +5,7 @@ import { PanelData } from './panel';
 import { LogRowModel } from './logs';
 import { AnnotationEvent, KeyValue, LoadingState, TableData, TimeSeries } from './data';
 import { DataFrame, DataFrameDTO } from './dataFrame';
-import { RawTimeRange, TimeRange, AbsoluteTimeRange } from './time';
+import { RawTimeRange, TimeRange } from './time';
 import { ScopedVars } from './ScopedVars';
 import { CoreApp } from './app';
 
@@ -300,6 +300,7 @@ export interface QueryEditorProps<
    * Contains query response filtered by refId of QueryResultBase and possible query error
    */
   data?: PanelData;
+  range?: TimeRange;
   exploreId?: any;
   history?: HistoryItem[];
 }
@@ -322,7 +323,6 @@ export interface ExploreQueryFieldProps<
 > extends QueryEditorProps<DSType, TQuery, TOptions> {
   history: any[];
   onBlur?: () => void;
-  absoluteRange?: AbsoluteTimeRange;
   exploreId?: any;
 }
 

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -178,6 +178,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
           onChange={onChange}
           onRunQuery={this.onRunQuery}
           data={data}
+          range={getTimeSrv().timeRange()}
         />
       );
     }

public/app/features/explore/QueryRow.tsx

@@ -113,16 +113,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
   };
 
   renderQueryEditor = () => {
-    const {
-      datasourceInstance,
-      history,
-      query,
-      exploreEvents,
-      range,
-      absoluteRange,
-      queryResponse,
-      exploreId,
-    } = this.props;
+    const { datasourceInstance, history, query, exploreEvents, range, queryResponse, exploreId } = this.props;
 
     const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : [];
 
@@ -138,7 +129,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
           onBlur={noopOnBlur}
           onChange={this.onChange}
           data={queryResponse}
-          absoluteRange={absoluteRange}
+          range={range}
           exploreId={exploreId}
         />
       );

public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.test.tsx

@@ -5,7 +5,7 @@ import LokiExploreQueryEditor from './LokiExploreQueryEditor';
 import { LokiExploreExtraField } from './LokiExploreExtraField';
 import { LokiDatasource } from '../datasource';
 import { LokiQuery } from '../types';
-import { ExploreMode, LoadingState, PanelData, toUtc } from '@grafana/data';
+import { ExploreMode, LoadingState, PanelData, toUtc, TimeRange } from '@grafana/data';
 import { makeMockLokiDatasource } from '../mocks';
 import LokiLanguageProvider from '../language_provider';
 
@@ -15,6 +15,14 @@ const setup = (renderMethod: any, propOverrides?: object) => {
   const onRunQuery = jest.fn();
   const onChange = jest.fn();
   const query: LokiQuery = { expr: '', refId: 'A', maxLines: 0 };
+  const range: TimeRange = {
+    from: toUtc('2020-01-01', 'YYYY-MM-DD'),
+    to: toUtc('2020-01-02', 'YYYY-MM-DD'),
+    raw: {
+      from: toUtc('2020-01-01', 'YYYY-MM-DD'),
+      to: toUtc('2020-01-02', 'YYYY-MM-DD'),
+    },
+  };
   const data: PanelData = {
     state: LoadingState.NotStarted,
     series: [],
@@ -53,6 +61,7 @@ const setup = (renderMethod: any, propOverrides?: object) => {
   const props: any = {
     query,
     data,
+    range,
     datasource,
     exploreMode,
     history,

public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx

@@ -3,7 +3,7 @@ import React, { memo } from 'react';
 import _ from 'lodash';
 
 // Types
-import { AbsoluteTimeRange, ExploreQueryFieldProps } from '@grafana/data';
+import { ExploreQueryFieldProps } from '@grafana/data';
 import { LokiDatasource } from '../datasource';
 import { LokiQuery, LokiOptions } from '../types';
 import { LokiQueryField } from './LokiQueryField';
@@ -12,22 +12,7 @@ import LokiExploreExtraField from './LokiExploreExtraField';
 type Props = ExploreQueryFieldProps<LokiDatasource, LokiQuery, LokiOptions>;
 
 export function LokiExploreQueryEditor(props: Props) {
-  const { query, data, datasource, history, onChange, onRunQuery } = props;
-
-  let absolute: AbsoluteTimeRange;
-  if (data && data.request) {
-    const { range } = data.request;
-
-    absolute = {
-      from: range.from.valueOf(),
-      to: range.to.valueOf(),
-    };
-  } else {
-    absolute = {
-      from: Date.now() - 10000,
-      to: Date.now(),
-    };
-  }
+  const { range, query, data, datasource, history, onChange, onRunQuery } = props;
 
   function onChangeQueryLimit(value: string) {
     const { query, onChange } = props;
@@ -70,7 +55,7 @@ export function LokiExploreQueryEditor(props: Props) {
       onRunQuery={onRunQuery}
       history={history}
       data={data}
-      absoluteRange={absolute}
+      range={range}
       ExtraFieldElement={
         <LokiExploreExtraField
           label={'Line limit'}

public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx

@@ -8,12 +8,8 @@ import { LokiQuery } from '../types';
 
 const createMockRequestRange = (from: string, to: string) => {
   return {
-    request: {
-      range: {
-        from: toUtc(from, 'YYYY-MM-DD'),
-        to: toUtc(to, 'YYYY-MM-DD'),
-      },
-    },
+    from: toUtc(from, 'YYYY-MM-DD'),
+    to: toUtc(to, 'YYYY-MM-DD'),
   };
 };
 
@@ -29,14 +25,14 @@ const setup = (propOverrides?: object) => {
     legendFormat: 'My Legend',
   };
 
-  const data = createMockRequestRange('2020-01-01', '2020-01-02');
+  const range = createMockRequestRange('2020-01-01', '2020-01-02');
 
   const props: any = {
     datasource,
     onChange,
     onRunQuery,
     query,
-    data,
+    range,
   };
 
   Object.assign(props, propOverrides);
@@ -56,10 +52,10 @@ describe('Render LokiQueryEditor with legend', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should update absolute timerange', () => {
+  it('should update timerange', () => {
     const { wrapper } = setup();
     wrapper.setProps({
-      data: createMockRequestRange('2019-01-01', '2020-01-02'),
+      range: createMockRequestRange('2019-01-01', '2020-01-02'),
     });
     expect(wrapper).toMatchSnapshot();
   });

public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Types
-import { AbsoluteTimeRange, QueryEditorProps, PanelData } from '@grafana/data';
+import { QueryEditorProps } from '@grafana/data';
 import { InlineFormLabel } from '@grafana/ui';
 import { LokiDatasource } from '../datasource';
 import { LokiQuery } from '../types';
@@ -31,21 +31,6 @@ export class LokiQueryEditor extends PureComponent<Props, State> {
     };
   }
 
-  calcAbsoluteRange = (data: PanelData | undefined): AbsoluteTimeRange => {
-    if (data && data.request) {
-      const { range } = data.request;
-      return {
-        from: range.from.valueOf(),
-        to: range.to.valueOf(),
-      };
-    }
-
-    return {
-      from: Date.now() - 10000,
-      to: Date.now(),
-    };
-  };
-
   onFieldChange = (query: LokiQuery, override?: any) => {
     this.query.expr = query.expr;
   };
@@ -63,7 +48,7 @@ export class LokiQueryEditor extends PureComponent<Props, State> {
   };
 
   render() {
-    const { datasource, query, data } = this.props;
+    const { datasource, query, data, range } = this.props;
     const { legendFormat } = this.state;
 
     return (
@@ -75,7 +60,7 @@ export class LokiQueryEditor extends PureComponent<Props, State> {
           onRunQuery={this.onRunQuery}
           history={[]}
           data={data}
-          absoluteRange={this.calcAbsoluteRange(data)}
+          range={range}
         />
 
         <div className="gf-form-inline">

public/app/plugins/datasource/loki/components/LokiQueryField.tsx

@@ -5,14 +5,16 @@ import LokiLanguageProvider from '../language_provider';
 
 type LokiQueryFieldProps = Omit<
   LokiQueryFieldFormProps,
-  'syntax' | 'syntaxLoaded' | 'onLoadOptions' | 'onLabelsRefresh' | 'logLabelOptions'
+  'syntax' | 'syntaxLoaded' | 'onLoadOptions' | 'onLabelsRefresh' | 'logLabelOptions' | 'absoluteRange'
 >;
 
 export const LokiQueryField: FunctionComponent<LokiQueryFieldProps> = props => {
-  const { datasource, absoluteRange, ...otherProps } = props;
+  const { datasource, range, ...otherProps } = props;
+  const absoluteTimeRange = { from: range!.from!.valueOf(), to: range!.to!.valueOf() }; // Range here is never optional
+
   const { isSyntaxReady, setActiveOption, refreshLabels, syntax, logLabelOptions } = useLokiSyntaxAndLabels(
     datasource.languageProvider as LokiLanguageProvider,
-    absoluteRange
+    absoluteTimeRange
   );
 
   return (
@@ -26,7 +28,7 @@ export const LokiQueryField: FunctionComponent<LokiQueryFieldProps> = props => {
        */
       onLoadOptions={setActiveOption}
       onLabelsRefresh={refreshLabels}
-      absoluteRange={absoluteRange}
+      absoluteRange={absoluteTimeRange}
       syntax={syntax}
       syntaxLoaded={isSyntaxReady}
       logLabelOptions={logLabelOptions}

public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx

@@ -128,9 +128,6 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
       { text, value, prefix, wrapperClasses, labelKey },
       { history, absoluteRange }
     );
-
-    //console.log('handleTypeahead', wrapperClasses, text, prefix, nextChar, labelKey, result.context);
-
     return result;
   };
 

public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreQueryEditor.test.tsx.snap

@@ -12,12 +12,6 @@ exports[`LokiExploreQueryEditor should render component 1`] = `
       value="0"
     />
   }
-  absoluteRange={
-    Object {
-      "from": 1577836800000,
-      "to": 1577923200000,
-    }
-  }
   data={
     Object {
       "request": Object {
@@ -112,5 +106,15 @@ exports[`LokiExploreQueryEditor should render component 1`] = `
       "refId": "A",
     }
   }
+  range={
+    Object {
+      "from": "2020-01-01T00:00:00.000Z",
+      "raw": Object {
+        "from": "2020-01-01T00:00:00.000Z",
+        "to": "2020-01-02T00:00:00.000Z",
+      },
+      "to": "2020-01-02T00:00:00.000Z",
+    }
+  }
 />
 `;

public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap

@@ -3,22 +3,6 @@
 exports[`Render LokiQueryEditor with legend should render 1`] = `
 <div>
   <Component
-    absoluteRange={
-      Object {
-        "from": 1577836800000,
-        "to": 1577923200000,
-      }
-    }
-    data={
-      Object {
-        "request": Object {
-          "range": Object {
-            "from": "2020-01-01T00:00:00.000Z",
-            "to": "2020-01-02T00:00:00.000Z",
-          },
-        },
-      }
-    }
     datasource={Object {}}
     history={Array []}
     onChange={[Function]}
@@ -30,6 +14,12 @@ exports[`Render LokiQueryEditor with legend should render 1`] = `
         "refId": "A",
       }
     }
+    range={
+      Object {
+        "from": "2020-01-01T00:00:00.000Z",
+        "to": "2020-01-02T00:00:00.000Z",
+      }
+    }
   />
   <div
     className="gf-form-inline"
@@ -57,25 +47,9 @@ exports[`Render LokiQueryEditor with legend should render 1`] = `
 </div>
 `;
 
-exports[`Render LokiQueryEditor with legend should update absolute timerange 1`] = `
+exports[`Render LokiQueryEditor with legend should update timerange 1`] = `
 <div>
   <Component
-    absoluteRange={
-      Object {
-        "from": 1546300800000,
-        "to": 1577923200000,
-      }
-    }
-    data={
-      Object {
-        "request": Object {
-          "range": Object {
-            "from": "2019-01-01T00:00:00.000Z",
-            "to": "2020-01-02T00:00:00.000Z",
-          },
-        },
-      }
-    }
     datasource={Object {}}
     history={Array []}
     onChange={[Function]}
@@ -87,6 +61,12 @@ exports[`Render LokiQueryEditor with legend should update absolute timerange 1`]
         "refId": "A",
       }
     }
+    range={
+      Object {
+        "from": "2019-01-01T00:00:00.000Z",
+        "to": "2020-01-02T00:00:00.000Z",
+      }
+    }
   />
   <div
     className="gf-form-inline"

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

 import { useState, useEffect } from 'react';
+import { isEqual } from 'lodash';
 import { AbsoluteTimeRange } from '@grafana/data';
 import { CascaderOption } from '@grafana/ui';
 
@@ -23,6 +24,7 @@ export const useLokiLabels = (
   // State
   const [logLabelOptions, setLogLabelOptions] = useState<any>([]);
   const [shouldTryRefreshLabels, setRefreshLabels] = useState(false);
+  const [prevAbsoluteRange, setPrevAbsoluteRange] = useState<AbsoluteTimeRange | null>(null);
   /**
    * Holds information about currently selected option from rc-cascader to perform effect
    * that loads option values not fetched yet. Based on that useLokiLabels hook decides whether or not
@@ -39,7 +41,8 @@ export const useLokiLabels = (
   };
 
   const tryLabelsRefresh = async () => {
-    await languageProvider.refreshLogLabels(absoluteRange);
+    await languageProvider.refreshLogLabels(absoluteRange, !isEqual(absoluteRange, prevAbsoluteRange));
+    setPrevAbsoluteRange(absoluteRange);
 
     if (mounted.current) {
       setRefreshLabels(false);

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

@@ -269,7 +269,7 @@ export default class LokiLanguageProvider extends LanguageProvider {
     // Query labels for selector
     if (selector) {
       if (selector === EMPTY_SELECTOR && labelKey) {
-        const labelValuesForKey = await this.getLabelValues(labelKey);
+        const labelValuesForKey = await this.getLabelValues(labelKey, absoluteRange);
         labelValues = { [labelKey]: labelValuesForKey };
       } else {
         labelValues = await this.getSeriesLabels(selector, absoluteRange);
@@ -444,8 +444,8 @@ export default class LokiLanguageProvider extends LanguageProvider {
     return nanos ? Math.floor(nanos / NS_IN_MS / 1000 / 60 / 5) : 0;
   }
 
-  async getLabelValues(key: string): Promise<string[]> {
-    return await this.fetchLabelValues(key, this.initialRange);
+  async getLabelValues(key: string, absoluteRange = this.initialRange): Promise<string[]> {
+    return await this.fetchLabelValues(key, absoluteRange);
   }
 
   async fetchLabelValues(key: string, absoluteRange: AbsoluteTimeRange): Promise<string[]> {