Log Context: Add button to open the context query in a split view (#66777)

* add show context button

* improve type definition

* change to default `maxLines`

* remove context query

* add provider to tests

* add test for split view button

* improve documentation

* add tests for `getLogRowContextQuery`

* refactor LogsContainer functions

* fix spelling

* add `contextQuery` as state

* fix tests

* fix lint

* do not use callIfDefined

* make button secondary

public/app/features/explore/Logs.tsx

@@ -79,6 +79,7 @@ interface Props extends Themeable2 {
   onStartScanning?: () => void;
   onStopScanning?: () => void;
   getRowContext?: (row: LogRowModel, options?: LogRowContextOptions) => Promise<any>;
+  getRowContextQuery?: (row: LogRowModel, options?: LogRowContextOptions) => Promise<DataQuery | null>;
   getLogRowContextUi?: (row: LogRowModel, runContextQuery?: () => void) => React.ReactNode;
   getFieldLinks: (field: Field, rowIndex: number, dataFrame: DataFrame) => Array<LinkModel<Field>>;
   addResultsToCache: () => void;
@@ -377,6 +378,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
       exploreId,
       getRowContext,
       getLogRowContextUi,
+      getRowContextQuery,
     } = this.props;
 
     const {
@@ -412,6 +414,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
             row={contextRow}
             onClose={this.onCloseContext}
             getRowContext={getRowContext}
+            getRowContextQuery={getRowContextQuery}
             getLogRowContextUi={getLogRowContextUi}
             logsSortOrder={logsSortOrder}
             timeZone={timeZone}

public/app/features/explore/LogsContainer.tsx

@@ -14,7 +14,11 @@ import {
   DataFrame,
   SupplementaryQueryType,
   DataQueryResponse,
+  LogRowContextOptions,
+  DataSourceWithLogsContextSupport,
+  DataSourceApi,
 } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
 import { Collapse } from '@grafana/ui';
 import { StoreState } from 'app/types';
 import { ExploreId, ExploreItemState } from 'app/types/explore';
@@ -49,28 +53,45 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
     updateTimeRange({ exploreId, absoluteRange });
   };
 
-  getLogRowContext = async (row: LogRowModel, options?: any): Promise<DataQueryResponse | []> => {
+  private getQuery(
+    logsQueries: DataQuery[] | undefined,
+    row: LogRowModel,
+    datasourceInstance: DataSourceApi<DataQuery> & DataSourceWithLogsContextSupport<DataQuery>
+  ) {
+    // we need to find the query, and we need to be very sure that it's a query
+    // from this datasource
+    return (logsQueries ?? []).find(
+      (q) => q.refId === row.dataFrame.refId && q.datasource != null && q.datasource.type === datasourceInstance.type
+    );
+  }
+
+  getLogRowContext = async (row: LogRowModel, options?: LogRowContextOptions): Promise<DataQueryResponse | []> => {
     const { datasourceInstance, logsQueries } = this.props;
 
     if (hasLogsContextSupport(datasourceInstance)) {
-      // we need to find the query, and we need to be very sure that
-      // it's a query from this datasource
-      const query = (logsQueries ?? []).find(
-        (q) => q.refId === row.dataFrame.refId && q.datasource != null && q.datasource.type === datasourceInstance.type
-      );
+      const query = this.getQuery(logsQueries, row, datasourceInstance);
       return datasourceInstance.getLogRowContext(row, options, query);
     }
 
     return [];
   };
 
+  getLogRowContextQuery = async (row: LogRowModel, options?: LogRowContextOptions): Promise<DataQuery | null> => {
+    const { datasourceInstance, logsQueries } = this.props;
+
+    if (hasLogsContextSupport(datasourceInstance) && datasourceInstance.getLogRowContextQuery) {
+      const query = this.getQuery(logsQueries, row, datasourceInstance);
+      return datasourceInstance.getLogRowContextQuery(row, options, query);
+    }
+
+    return null;
+  };
+
   getLogRowContextUi = (row: LogRowModel, runContextQuery?: () => void): React.ReactNode => {
     const { datasourceInstance, logsQueries } = this.props;
 
     if (hasLogsContextUiSupport(datasourceInstance) && datasourceInstance.getLogRowContextUi) {
-      const query = (logsQueries ?? []).find(
-        (q) => q.refId === row.dataFrame.refId && q.datasource != null && q.datasource.type === datasourceInstance.type
-      );
+      const query = this.getQuery(logsQueries, row, datasourceInstance);
       return datasourceInstance.getLogRowContextUi(row, runContextQuery, query);
     }
 
@@ -174,6 +195,7 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
             scanRange={range.raw}
             showContextToggle={this.showContextToggle}
             getRowContext={this.getLogRowContext}
+            getRowContextQuery={this.getLogRowContextQuery}
             getLogRowContextUi={this.getLogRowContextUi}
             getFieldLinks={this.getFieldLinks}
             addResultsToCache={() => addResultsToCache(exploreId)}