Logs: Store queries that were run to get log results (#33971)

* Store queries that were run to get log results

* Fix typing

* Update public/app/features/explore/Logs.tsx

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>

* Add changes based on feedback

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>

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

@@ -2,6 +2,7 @@ import { Labels } from './data';
 import { GraphSeriesXY } from './graph';
 import { DataFrame } from './dataFrame';
 import { AbsoluteTimeRange } from './time';
+import { DataQuery } from './datasource';
 
 /**
  * Mapping of log level abbreviation to canonical log level.
@@ -85,6 +86,7 @@ export interface LogsModel {
   rows: LogRowModel[];
   series?: GraphSeriesXY[];
   visibleRange?: AbsoluteTimeRange;
+  queries?: DataQuery[];
 }
 
 export interface LogSearchMatch {

public/app/core/logs_model.ts

@@ -30,6 +30,7 @@ import {
   AbsoluteTimeRange,
   sortInAscendingOrder,
   rangeUtil,
+  DataQuery,
 } from '@grafana/data';
 import { getThemeColor } from 'app/core/utils/colors';
 import { config } from '@grafana/runtime';
@@ -202,7 +203,8 @@ export function dataFrameToLogsModel(
   dataFrame: DataFrame[],
   intervalMs: number | undefined,
   timeZone: TimeZone,
-  absoluteRange?: AbsoluteTimeRange
+  absoluteRange?: AbsoluteTimeRange,
+  queries?: DataQuery[]
 ): LogsModel {
   const { logSeries } = separateLogsAndMetrics(dataFrame);
   const logsModel = logSeriesToLogsModel(logSeries);
@@ -225,6 +227,7 @@ export function dataFrameToLogsModel(
     } else {
       logsModel.series = [];
     }
+    logsModel.queries = queries;
     return logsModel;
   }
 
@@ -233,6 +236,7 @@ export function dataFrameToLogsModel(
     rows: [],
     meta: [],
     series: [],
+    queries,
   };
 }
 

public/app/features/explore/Logs.tsx

@@ -47,6 +47,7 @@ interface Props {
   logRows: LogRowModel[];
   logsMeta?: LogsMetaItem[];
   logsSeries?: GraphSeriesXY[];
+  logsQueries?: DataQuery[];
   visibleRange?: AbsoluteTimeRange;
   width: number;
   theme: GrafanaTheme;
@@ -56,7 +57,6 @@ interface Props {
   timeZone: TimeZone;
   scanning?: boolean;
   scanRange?: RawTimeRange;
-  queries: DataQuery[];
   showContextToggle?: (row?: LogRowModel) => boolean;
   onChangeTime: (range: AbsoluteTimeRange) => void;
   onClickFilterLabel?: (key: string, value: string) => void;
@@ -243,7 +243,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
       onChangeTime,
       getFieldLinks,
       theme,
-      queries,
+      logsQueries,
     } = this.props;
 
     const {
@@ -353,12 +353,12 @@ export class UnthemedLogs extends PureComponent<Props, State> {
           </div>
           <LogsNavigation
             logsSortOrder={logsSortOrder}
-            visibleRange={visibleRange}
+            visibleRange={visibleRange ?? absoluteRange}
             absoluteRange={absoluteRange}
             timeZone={timeZone}
             onChangeTime={onChangeTime}
             loading={loading}
-            queries={queries}
+            queries={logsQueries ?? []}
             scrollToTopLogs={this.scrollToTopLogs}
           />
         </div>

public/app/features/explore/LogsContainer.tsx

@@ -64,6 +64,7 @@ export class LogsContainer extends PureComponent<PropsFromRedux & LogsContainerP
       logRows,
       logsMeta,
       logsSeries,
+      logsQueries,
       onClickFilterLabel,
       onClickFilterOutLabel,
       onStartScanning,
@@ -76,7 +77,6 @@ export class LogsContainer extends PureComponent<PropsFromRedux & LogsContainerP
       width,
       isLive,
       exploreId,
-      queries,
     } = this.props;
 
     if (!logRows) {
@@ -117,6 +117,7 @@ export class LogsContainer extends PureComponent<PropsFromRedux & LogsContainerP
               logRows={logRows}
               logsMeta={logsMeta}
               logsSeries={logsSeries}
+              logsQueries={logsQueries}
               highlighterExpressions={logsHighlighterExpressions}
               loading={loading}
               onChangeTime={this.onChangeTime}
@@ -133,7 +134,6 @@ export class LogsContainer extends PureComponent<PropsFromRedux & LogsContainerP
               width={width}
               getRowContext={this.getLogRowContext}
               getFieldLinks={this.getFieldLinks}
-              queries={queries}
             />
           </Collapse>
         </LogsCrossFadeTransition>
@@ -156,7 +156,6 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
     isPaused,
     range,
     absoluteRange,
-    queries,
   } = item;
   const timeZone = getTimeZone(state.user);
 
@@ -166,6 +165,7 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
     logRows: logsResult?.rows,
     logsMeta: logsResult?.meta,
     logsSeries: logsResult?.series,
+    logsQueries: logsResult?.queries,
     visibleRange: logsResult?.visibleRange,
     scanning,
     timeZone,
@@ -174,7 +174,6 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
     isPaused,
     range,
     absoluteRange,
-    queries,
   };
 }
 

public/app/features/explore/LogsNavigation.tsx

@@ -10,7 +10,7 @@ type Props = {
   timeZone: TimeZone;
   queries: DataQuery[];
   loading: boolean;
-  visibleRange?: AbsoluteTimeRange;
+  visibleRange: AbsoluteTimeRange;
   logsSortOrder?: LogsSortOrder | null;
   onChangeTime: (range: AbsoluteTimeRange) => void;
   scrollToTopLogs: () => void;
@@ -28,8 +28,8 @@ function LogsNavigation({
   loading,
   onChangeTime,
   scrollToTopLogs,
-  visibleRange = absoluteRange,
+  visibleRange,
-  queries = [],
+  queries,
 }: Props) {
   const [pages, setPages] = useState<LogsPage[]>([]);
   const [currentPageIndex, setCurrentPageIndex] = useState(0);

public/app/features/explore/state/query.ts

@@ -357,7 +357,7 @@ export const runQueries = (exploreId: ExploreId, options?: { replaceUrl?: boolea
         map((data: PanelData) => preProcessPanelData(data, queryResponse)),
         map(decorateWithFrameTypeMetadata),
         map(decorateWithGraphResult),
-        map(decorateWithLogsResult({ absoluteRange, refreshInterval })),
+        map(decorateWithLogsResult({ absoluteRange, refreshInterval, queries })),
         mergeMap(decorateWithTableResult)
       )
       .subscribe(

public/app/features/explore/utils/decorators.ts

@@ -6,6 +6,7 @@ import {
   PanelData,
   sortLogsResult,
   standardTransformers,
+  DataQuery,
 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { groupBy } from 'lodash';
@@ -129,7 +130,7 @@ export const decorateWithTableResult = (data: ExplorePanelData): Observable<Expl
 };
 
 export const decorateWithLogsResult = (
-  options: { absoluteRange?: AbsoluteTimeRange; refreshInterval?: string } = {}
+  options: { absoluteRange?: AbsoluteTimeRange; refreshInterval?: string; queries?: DataQuery[] } = {}
 ) => (data: ExplorePanelData): ExplorePanelData => {
   if (data.logsFrames.length === 0) {
     return { ...data, logsResult: null };
@@ -137,7 +138,13 @@ export const decorateWithLogsResult = (
 
   const timeZone = data.request?.timezone ?? 'browser';
   const intervalMs = data.request?.intervalMs;
-  const newResults = dataFrameToLogsModel(data.logsFrames, intervalMs, timeZone, options.absoluteRange);
+  const newResults = dataFrameToLogsModel(
+    data.logsFrames,
+    intervalMs,
+    timeZone,
+    options.absoluteRange,
+    options.queries
+  );
   const sortOrder = refreshIntervalToSortOrder(options.refreshInterval);
   const sortedNewResults = sortLogsResult(newResults, sortOrder);
   const rows = sortedNewResults.rows;