From bf5d52c5c7b1fff2546c74b0570d47c349355ea7 Mon Sep 17 00:00:00 2001 From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> Date: Thu, 30 Jul 2020 18:04:20 +0200 Subject: [PATCH] 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 | 4 +- .../dashboard/panel_editor/QueryEditorRow.tsx | 1 + public/app/features/explore/QueryRow.tsx | 13 +----- .../LokiExploreQueryEditor.test.tsx | 11 ++++- .../components/LokiExploreQueryEditor.tsx | 21 ++------- .../loki/components/LokiQueryEditor.test.tsx | 16 +++---- .../loki/components/LokiQueryEditor.tsx | 21 ++------- .../loki/components/LokiQueryField.tsx | 10 ++-- .../loki/components/LokiQueryFieldForm.tsx | 3 -- .../LokiExploreQueryEditor.test.tsx.snap | 16 ++++--- .../LokiQueryEditor.test.tsx.snap | 46 ++++++------------- .../loki/components/useLokiLabels.ts | 5 +- .../datasource/loki/language_provider.ts | 6 +-- 13 files changed, 63 insertions(+), 110 deletions(-) diff --git a/packages/grafana-data/src/types/datasource.ts b/packages/grafana-data/src/types/datasource.ts index ed06a37f314..e01ef0653e5 100644 --- a/packages/grafana-data/src/types/datasource.ts +++ b/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 { history: any[]; onBlur?: () => void; - absoluteRange?: AbsoluteTimeRange; exploreId?: any; } diff --git a/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx b/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx index 775a1d4c5a4..563f103df94 100644 --- a/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx +++ b/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx @@ -178,6 +178,7 @@ export class QueryEditorRow extends PureComponent { onChange={onChange} onRunQuery={this.onRunQuery} data={data} + range={getTimeSrv().timeRange()} /> ); } diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx index 5c28aea5cad..c19cbb5c72d 100644 --- a/public/app/features/explore/QueryRow.tsx +++ b/public/app/features/explore/QueryRow.tsx @@ -113,16 +113,7 @@ export class QueryRow extends PureComponent { }; 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 { onBlur={noopOnBlur} onChange={this.onChange} data={queryResponse} - absoluteRange={absoluteRange} + range={range} exploreId={exploreId} /> ); diff --git a/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.test.tsx b/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.test.tsx index 0da84ca0e7e..5e3f00df210 100644 --- a/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.test.tsx +++ b/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, diff --git a/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx b/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx index 88c3b791411..ebca0ae0afa 100644 --- a/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx +++ b/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; 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={ { 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(); }); diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx index d46425b520b..2db38ea19e9 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx +++ b/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 { }; } - 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 { }; 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 { onRunQuery={this.onRunQuery} history={[]} data={data} - absoluteRange={this.calcAbsoluteRange(data)} + range={range} />
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx index 45f29fe8c58..90ce1b0657f 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx +++ b/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 = 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 = props => { */ onLoadOptions={setActiveOption} onLabelsRefresh={refreshLabels} - absoluteRange={absoluteRange} + absoluteRange={absoluteTimeRange} syntax={syntax} syntaxLoaded={isSyntaxReady} logLabelOptions={logLabelOptions} diff --git a/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx b/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx index dfcfd1d00ca..c40f4f9aa3d 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx +++ b/public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx @@ -128,9 +128,6 @@ export class LokiQueryFieldForm extends React.PureComponent } - 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", + } + } /> `; diff --git a/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap b/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap index d7d39fcb240..b08d1b16b88 100644 --- a/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap +++ b/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap @@ -3,22 +3,6 @@ exports[`Render LokiQueryEditor with legend should render 1`] = `
`; -exports[`Render LokiQueryEditor with legend should update absolute timerange 1`] = ` +exports[`Render LokiQueryEditor with legend should update timerange 1`] = `
([]); const [shouldTryRefreshLabels, setRefreshLabels] = useState(false); + const [prevAbsoluteRange, setPrevAbsoluteRange] = useState(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); diff --git a/public/app/plugins/datasource/loki/language_provider.ts b/public/app/plugins/datasource/loki/language_provider.ts index bd1b95bed6e..6d671a62773 100644 --- a/public/app/plugins/datasource/loki/language_provider.ts +++ b/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 { - return await this.fetchLabelValues(key, this.initialRange); + async getLabelValues(key: string, absoluteRange = this.initialRange): Promise { + return await this.fetchLabelValues(key, absoluteRange); } async fetchLabelValues(key: string, absoluteRange: AbsoluteTimeRange): Promise {