TimeseriesPanel: Fix variables in data links (#56729)

* TimeseriesPanel: Fix variables in data links

* Refactor variable fix for all Timeseries panels

* cr mods

packages/grafana-data/src/index.ts

@@ -26,3 +26,4 @@ export { PanelPlugin, type SetFieldConfigOptionsArgs, type StandardOptionConfig
 export { createFieldConfigRegistry } from './panel/registryFactories';
 export { type QueryRunner, type QueryRunnerOptions } from './types/queryRunner';
 export { type GroupingToMatrixTransformerOptions } from './transformations/transformers/groupingToMatrix';
+export { getLinksSupplier } from './field/fieldOverrides';

packages/grafana-data/src/vector/SortedVector.ts

@@ -16,6 +16,10 @@ export class SortedVector<T = any> implements Vector<T> {
     return this.source.get(this.order[index]);
   }
 
+  getOrderIndex(index: number): number {
+    return this.order[index];
+  }
+
   toArray(): T[] {
     return vectorToArray(this);
   }

public/app/plugins/panel/candlestick/CandlestickPanel.tsx

@@ -4,7 +4,7 @@
 import React, { useMemo } from 'react';
 import uPlot from 'uplot';
 
-import { Field, getDisplayProcessor, PanelProps } from '@grafana/data';
+import { Field, getDisplayProcessor, PanelProps, getLinksSupplier } from '@grafana/data';
 import { PanelDataErrorView } from '@grafana/runtime';
 import { TooltipDisplayMode } from '@grafana/schema';
 import { usePanelContext, TimeSeries, TooltipPlugin, ZoomPlugin, UPlotConfigBuilder, useTheme2 } from '@grafana/ui';
@@ -243,6 +243,16 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
       options={options}
     >
       {(config, alignedDataFrame) => {
+        alignedDataFrame.fields.forEach((field) => {
+          field.getLinks = getLinksSupplier(
+            alignedDataFrame,
+            field,
+            field.state!.scopedVars!,
+            replaceVariables,
+            timeZone
+          );
+        });
+
         return (
           <>
             <ZoomPlugin config={config} onZoom={onChangeTimeRange} />

public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { Field, PanelProps } from '@grafana/data';
+import { Field, PanelProps, getLinksSupplier } from '@grafana/data';
 import { PanelDataErrorView } from '@grafana/runtime';
 import { TooltipDisplayMode } from '@grafana/schema';
 import { usePanelContext, TimeSeries, TooltipPlugin, ZoomPlugin, KeyboardPlugin } from '@grafana/ui';
@@ -65,6 +65,16 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
       options={options}
     >
       {(config, alignedDataFrame) => {
+        alignedDataFrame.fields.forEach((field) => {
+          field.getLinks = getLinksSupplier(
+            alignedDataFrame,
+            field,
+            field.state!.scopedVars!,
+            replaceVariables,
+            timeZone
+          );
+        });
+
         return (
           <>
             <KeyboardPlugin config={config} />

public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx

@@ -2,7 +2,15 @@ import { css as cssCore, Global } from '@emotion/react';
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
 
-import { CartesianCoords2D, DataFrame, getFieldDisplayName, InterpolateFunction, TimeZone } from '@grafana/data';
+import {
+  CartesianCoords2D,
+  DataFrame,
+  getFieldDisplayName,
+  InterpolateFunction,
+  SortedVector,
+  TimeZone,
+  ValueLinkConfig,
+} from '@grafana/data';
 import {
   ContextMenu,
   GraphContextMenuHeader,
@@ -249,23 +257,27 @@ export const ContextMenuView: React.FC<ContextMenuViewProps> = ({
 
       const hasLinks = field.config.links && field.config.links.length > 0;
 
+      const valueLinkConfig: ValueLinkConfig = {};
+
+      if (field.values instanceof SortedVector) {
+        valueLinkConfig.valueRowIndex = field.values.getOrderIndex(dataIdx);
+      } else {
+        valueLinkConfig.valueRowIndex = dataIdx;
+      }
+
       if (hasLinks) {
         if (field.getLinks) {
           items.push({
-            items: field
+            items: field.getLinks(valueLinkConfig).map<MenuItemProps>((link) => {
-              .getLinks({
+              return {
-                valueRowIndex: dataIdx,
+                label: link.title,
-              })
+                ariaLabel: link.title,
-              .map<MenuItemProps>((link) => {
+                url: link.href,
-                return {
+                target: link.target,
-                  label: link.title,
+                icon: link.target === '_self' ? 'link' : 'external-link-alt',
-                  ariaLabel: link.title,
+                onClick: link.onClick,
-                  url: link.href,
+              };
-                  target: link.target,
+            }),
-                  icon: link.target === '_self' ? 'link' : 'external-link-alt',
-                  onClick: link.onClick,
-                };
-              }),
           });
         }
       }