Loki: Improve the display of loki query stats (#63623)

* fix: refresh query stats on timerange change

* partial fix: request stats update on type in code mode

* complete fix: request stats update on type in code mode

* fix: update failing tests and props

* refactor: pass only essential query string to getQueryStats

* refactor: remove unused variables

* test: fix datasource.getTimeRange is not a function

* refactor: use lodash debounce instead of setTimeout

* refactor: add suggestions from code review

* test: shouldUpdateStats and makeStatsRequest

* refactor: use more appropriate variable names

* refactor: make setQueryStats required instead of optional

* refactor: move setQueryStats into LokiQueryEditor

* fix: add missing props to LokiQueryField

* revert changes

* refactor: use inversion of control to request stats

* refactor: remove unnecessary code

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.test.tsx

@@ -49,6 +49,7 @@ function setup(queryOverrides: Partial<LokiQuery> = {}) {
     onChange: jest.fn(),
     maxLines: 20,
     datasource: createLokiDatasource(),
+    queryStats: { streams: 0, chunks: 0, bytes: 0, entries: 0 },
   };
 
   const { container } = render(<LokiQueryBuilderOptions {...props} />);

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

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import { usePrevious } from 'react-use';
+import React, { useState } from 'react';
 
 import { CoreApp, isValidDuration, SelectableValue } from '@grafana/data';
 import { EditorField, EditorRow } from '@grafana/experimental';
@@ -19,13 +18,12 @@ export interface Props {
   maxLines: number;
   app?: CoreApp;
   datasource: LokiDatasource;
+  queryStats: QueryStats | undefined;
 }
 
 export const LokiQueryBuilderOptions = React.memo<Props>(
-  ({ app, query, onChange, onRunQuery, maxLines, datasource }) => {
-    const [queryStats, setQueryStats] = useState<QueryStats>();
+  ({ app, query, onChange, onRunQuery, maxLines, datasource, queryStats }) => {
     const [chunkRangeValid, setChunkRangeValid] = useState(true);
-    const prevQuery = usePrevious(query);
 
     const onQueryTypeChange = (value: LokiQueryType) => {
       onChange({ ...query, queryType: value });
@@ -65,25 +63,6 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
       }
     }
 
-    useEffect(() => {
-      if (query.expr === prevQuery?.expr) {
-        return;
-      }
-
-      if (!query.expr) {
-        setQueryStats(undefined);
-        return;
-      }
-
-      const makeAsyncRequest = async () => {
-        const res = await datasource.getQueryStats(query);
-
-        // this filters out the case where the user has not configured loki to use tsdb, in that case all keys in the query stats will be 0
-        Object.values(res).every((v) => v === 0) ? setQueryStats(undefined) : setQueryStats(res);
-      };
-      makeAsyncRequest();
-    }, [query, prevQuery, datasource]);
-
     let queryType = query.queryType ?? (query.instant ? LokiQueryType.Instant : LokiQueryType.Range);
     let showMaxLines = isLogsQuery(query.expr);
 

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.test.tsx

@@ -20,6 +20,7 @@ const createDefaultProps = () => {
     onRunQuery: () => {},
     onChange: () => {},
     showExplain: false,
+    setQueryStats: () => {},
   };
 
   return props;

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

@@ -6,12 +6,15 @@ import { useStyles2 } from '@grafana/ui';
 
 import { testIds } from '../../components/LokiQueryEditor';
 import { LokiQueryField } from '../../components/LokiQueryField';
+import { getStats } from '../../components/stats';
 import { LokiQueryEditorProps } from '../../components/types';
+import { QueryStats } from '../../types';
 
 import { LokiQueryBuilderExplained } from './LokiQueryBuilderExplained';
 
 type Props = LokiQueryEditorProps & {
   showExplain: boolean;
+  setQueryStats: React.Dispatch<React.SetStateAction<QueryStats | undefined>>;
 };
 
 export function LokiQueryCodeEditor({
@@ -24,6 +27,7 @@ export function LokiQueryCodeEditor({
   app,
   showExplain,
   history,
+  setQueryStats,
 }: Props) {
   const styles = useStyles2(getStyles);
 
@@ -39,6 +43,10 @@ export function LokiQueryCodeEditor({
         data={data}
         app={app}
         data-testid={testIds.editor}
+        onQueryType={async (query: string) => {
+          const stats = await getStats(datasource, query);
+          setQueryStats(stats);
+        }}
       />
       {showExplain && <LokiQueryBuilderExplained query={query.expr} />}
     </div>