Explore: Make getFieldLinksForExplore more reusable (#30134)

* Change signature of getFieldLinksForExplore

* Add comment

* Update public/app/features/explore/utils/links.ts

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

public/app/features/explore/LogsContainer.tsx

@@ -102,7 +102,7 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
   };
 
   getFieldLinks = (field: Field, rowIndex: number) => {
-    return getFieldLinksForExplore(field, rowIndex, this.props.splitOpen, this.props.range);
+    return getFieldLinksForExplore({ field, rowIndex, splitOpenFn: this.props.splitOpen, range: this.props.range });
   };
 
   render() {

public/app/features/explore/TableContainer.tsx

@@ -48,7 +48,7 @@ export class TableContainer extends PureComponent<TableContainerProps> {
       // differently and sidestep this getLinks API on a dataframe
       for (const field of tableResult.fields) {
         field.getLinks = (config: ValueLinkConfig) => {
-          return getFieldLinksForExplore(field, config.valueRowIndex!, splitOpen, range);
+          return getFieldLinksForExplore({ field, rowIndex: config.valueRowIndex!, splitOpenFn: splitOpen, range });
         };
       }
     }

public/app/features/explore/utils/links.test.ts

@@ -17,7 +17,7 @@ describe('getFieldLinksForExplore', () => {
       title: 'external',
       url: 'http://regionalhost',
     });
-    const links = getFieldLinksForExplore(field, 0, jest.fn(), range);
+    const links = getFieldLinksForExplore({ field, rowIndex: 0, splitOpenFn: jest.fn(), range });
 
     expect(links[0].href).toBe('http://regionalhost');
     expect(links[0].title).toBe('external');
@@ -28,7 +28,7 @@ describe('getFieldLinksForExplore', () => {
       title: '',
       url: 'http://regionalhost',
     });
-    const links = getFieldLinksForExplore(field, 0, jest.fn(), range);
+    const links = getFieldLinksForExplore({ field, rowIndex: 0, splitOpenFn: jest.fn(), range });
 
     expect(links[0].href).toBe('http://regionalhost');
     expect(links[0].title).toBe('regionalhost');
@@ -45,7 +45,7 @@ describe('getFieldLinksForExplore', () => {
       },
     });
     const splitfn = jest.fn();
-    const links = getFieldLinksForExplore(field, 0, splitfn, range);
+    const links = getFieldLinksForExplore({ field, rowIndex: 0, splitOpenFn: splitfn, range });
 
     expect(links[0].href).toBe(
       '/explore?left={"range":{"from":"now-1h","to":"now"},"datasource":"test_ds","queries":[{"query":"query_1"}]}'

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

@@ -1,6 +1,15 @@
-import { Field, LinkModel, TimeRange, mapInternalLinkToExplore, InterpolateFunction } from '@grafana/data';
+import {
+  Field,
+  LinkModel,
+  TimeRange,
+  mapInternalLinkToExplore,
+  InterpolateFunction,
+  ScopedVars,
+  DataFrame,
+  getFieldDisplayValuesProxy,
+} from '@grafana/data';
 import { getLinkSrv } from '../../panel/panellinks/link_srv';
-import { getTemplateSrv } from '@grafana/runtime';
+import { config, getTemplateSrv } from '@grafana/runtime';
 import { splitOpen } from '../state/main';
 
 /**
@@ -10,13 +19,16 @@ import { splitOpen } from '../state/main';
  * appropriately. This is for example used for transition from log with traceId to trace datasource to show that
  * trace.
  */
-export const getFieldLinksForExplore = (
+export const getFieldLinksForExplore = (options: {
-  field: Field,
+  field: Field;
-  rowIndex: number,
+  rowIndex: number;
-  splitOpenFn: typeof splitOpen,
+  splitOpenFn?: typeof splitOpen;
-  range: TimeRange
+  range: TimeRange;
-): Array<LinkModel<Field>> => {
+  vars?: ScopedVars;
-  const scopedVars: any = {};
+  dataFrame?: DataFrame;
+}): Array<LinkModel<Field>> => {
+  const { field, vars, splitOpenFn, range, rowIndex, dataFrame } = options;
+  const scopedVars: any = { ...(vars || {}) };
   scopedVars['__value'] = {
     value: {
       raw: field.values.get(rowIndex),
@@ -24,6 +36,20 @@ export const getFieldLinksForExplore = (
     text: 'Raw value',
   };
 
+  // If we have a dataFrame we can allow referencing other columns and their values in the interpolation.
+  if (dataFrame) {
+    scopedVars['__data'] = {
+      value: {
+        name: dataFrame.name,
+        refId: dataFrame.refId,
+        fields: getFieldDisplayValuesProxy(dataFrame, rowIndex, {
+          theme: config.theme,
+        }),
+      },
+      text: 'Data',
+    };
+  }
+
   return field.config.links
     ? field.config.links.map(link => {
         if (!link.internal) {

public/app/plugins/datasource/loki/configuration/DebugSection.tsx

@@ -95,8 +95,8 @@ function makeDebugFields(derivedFields: DerivedFieldConfig[], debugText: string)
         let link: LinkModel<Field> | null = null;
 
         if (field.url && value) {
-          link = getFieldLinksForExplore(
+          link = getFieldLinksForExplore({
-            {
+            field: {
               name: '',
               type: FieldType.string,
               values: new ArrayVector([value]),
@@ -104,10 +104,9 @@ function makeDebugFields(derivedFields: DerivedFieldConfig[], debugText: string)
                 links: [{ title: '', url: field.url }],
               },
             },
-            0,
+            rowIndex: 0,
-            (() => {}) as any,
+            range: {} as any,
-            {} as any
+          })[0];
-          )[0];
         }
 
         return {