From dde6fd664583ca12044f9d013a55edf4c7c9efc8 Mon Sep 17 00:00:00 2001 From: Ivana Huckova Date: Wed, 6 Jul 2022 12:38:06 +0200 Subject: [PATCH] Refactor --- .../app/plugins/datasource/loki/datasource.ts | 6 ++++- .../components/LokiQueryBuilder.tsx | 22 ++++++++++++---- .../components/LokiQueryBuilderContainer.tsx | 4 +-- .../components/LokiQueryBuilderHints.tsx | 26 +++++-------------- .../components/LokiQueryEditorSelector.tsx | 1 - 5 files changed, 30 insertions(+), 29 deletions(-) diff --git a/public/app/plugins/datasource/loki/datasource.ts b/public/app/plugins/datasource/loki/datasource.ts index a13380d0b72..fab8bbc34d1 100644 --- a/public/app/plugins/datasource/loki/datasource.ts +++ b/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)))); } diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx index 09e6d50fe82..bc4c568441c 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx +++ b/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(({ datasource, query, onChange, onRunQuery, data }) => { +export const LokiQueryBuilder = React.memo(({ datasource, query, onChange, onRunQuery }) => { + const [sampleData, setSampleData] = useState(); + const onChangeLabels = (labels: QueryBuilderLabelFilter[]) => { onChange({ ...query, labels }); }; @@ -76,6 +77,17 @@ export const LokiQueryBuilder = React.memo(({ 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 ( <> @@ -99,7 +111,7 @@ export const LokiQueryBuilder = React.memo(({ datasource, query, onChange onRunQuery={onRunQuery} datasource={datasource as DataSourceApi} /> - + {query.binaryQueries && query.binaryQueries.length > 0 && ( diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderContainer.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderContainer.tsx index 810ba935528..9c4f019c15d 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderContainer.tsx +++ b/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 && } diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderHints.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderHints.tsx index 92ed2bc14ee..6ae72a34f92 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderHints.tsx +++ b/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(({ datasource, query, onChange, data }) => { const [hints, setHints] = useState([]); 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 ( <> diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx index e9b46b8beb7..45a3d2b5fbe 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx +++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx @@ -126,7 +126,6 @@ export const LokiQueryEditorSelector = React.memo((props) onChange={onChangeInternal} onRunQuery={props.onRunQuery} showRawQuery={rawQuery} - data={data} /> )} {editorMode === QueryEditorMode.Explain && }