Actions: Fix interpolation (#96161)

packages/grafana-ui/src/components/Table/RowsList.tsx

@@ -13,6 +13,7 @@ import {
   FieldType,
   TimeRange,
   hasTimeField,
+  InterpolateFunction,
 } from '@grafana/data';
 import { TableCellDisplayMode, TableCellHeight } from '@grafana/schema';
 
@@ -55,6 +56,7 @@ interface RowsListProps {
   longestField?: Field;
   textWrapField?: Field;
   getActions?: GetActionsFunction;
+  replaceVariables?: InterpolateFunction;
 }
 
 export const RowsList = (props: RowsListProps) => {
@@ -82,6 +84,7 @@ export const RowsList = (props: RowsListProps) => {
     longestField,
     textWrapField,
     getActions,
+    replaceVariables,
   } = props;
 
   const [rowHighlightIndex, setRowHighlightIndex] = useState<number | undefined>(initialRowIndex);
@@ -337,6 +340,7 @@ export const RowsList = (props: RowsListProps) => {
               textWrapped={textWrapFinal !== undefined}
               height={Number(style.height)}
               getActions={getActions}
+              replaceVariables={replaceVariables}
             />
           ))}
         </div>
@@ -364,6 +368,7 @@ export const RowsList = (props: RowsListProps) => {
       onCellFilterAdded,
       timeRange,
       getActions,
+      replaceVariables,
     ]
   );
 

packages/grafana-ui/src/components/Table/Table.tsx

@@ -61,6 +61,7 @@ export const Table = memo((props: Props) => {
     initialRowIndex = undefined,
     fieldConfig,
     getActions,
+    replaceVariables,
   } = props;
 
   const listRef = useRef<VariableSizeList>(null);
@@ -362,6 +363,7 @@ export const Table = memo((props: Props) => {
                 longestField={longestField}
                 textWrapField={textWrapField}
                 getActions={getActions}
+                replaceVariables={replaceVariables}
               />
             </div>
           ) : (

packages/grafana-ui/src/components/Table/TableCell.tsx

@@ -1,6 +1,6 @@
 import { Cell } from 'react-table';
 
-import { TimeRange, DataFrame } from '@grafana/data';
+import { TimeRange, DataFrame, InterpolateFunction } from '@grafana/data';
 
 import { TableStyles } from './styles';
 import { GetActionsFunction, GrafanaTableColumn, TableFilterActionCallback } from './types';
@@ -19,6 +19,7 @@ export interface Props {
   textWrapped?: boolean;
   height?: number;
   getActions?: GetActionsFunction;
+  replaceVariables?: InterpolateFunction;
 }
 
 export const TableCell = ({
@@ -33,6 +34,7 @@ export const TableCell = ({
   textWrapped,
   height,
   getActions,
+  replaceVariables,
 }: Props) => {
   const cellProps = cell.getCellProps();
   const field = (cell.column as unknown as GrafanaTableColumn).field;
@@ -58,7 +60,7 @@ export const TableCell = ({
 
   let innerWidth = (typeof cell.column.width === 'number' ? cell.column.width : 24) - tableStyles.cellPadding * 2;
 
-  const actions = getActions ? getActions(frame, field) : [];
+  const actions = getActions ? getActions(frame, field, cell.row.index, replaceVariables) : [];
 
   return (
     <>

packages/grafana-ui/src/components/Table/types.ts

@@ -2,7 +2,16 @@ import { Property } from 'csstype';
 import { FC } from 'react';
 import { CellProps, Column, Row, TableState, UseExpandedRowProps } from 'react-table';
 
-import { DataFrame, Field, KeyValue, SelectableValue, TimeRange, FieldConfigSource, ActionModel } from '@grafana/data';
+import {
+  DataFrame,
+  Field,
+  KeyValue,
+  SelectableValue,
+  TimeRange,
+  FieldConfigSource,
+  ActionModel,
+  InterpolateFunction,
+} from '@grafana/data';
 import * as schema from '@grafana/schema';
 
 import { TableStyles } from './styles';
@@ -108,6 +117,7 @@ export interface Props {
   initialRowIndex?: number;
   fieldConfig?: FieldConfigSource;
   getActions?: GetActionsFunction;
+  replaceVariables?: InterpolateFunction;
 }
 
 /**
@@ -157,5 +167,9 @@ export interface CellColors {
   bgHoverColor?: string;
 }
 
-// export type GetActionsFunction = (frame: DataFrame, field: Field, fieldScopedVars: any, replaceVariables: any, actions: Action[], config: any) => ActionModel[];
+export type GetActionsFunction = (
-export type GetActionsFunction = (frame: DataFrame, field: Field) => ActionModel[];
+  frame: DataFrame,
+  field: Field,
+  rowIndex: number,
+  replaceVariables?: InterpolateFunction
+) => ActionModel[];

public/app/plugins/panel/heatmap/HeatmapTooltip.tsx

@@ -307,7 +307,7 @@ const HeatmapHoverCell = ({
         links = getDataLinks(linksField, xValueIdx);
       }
 
-      actions = getFieldActions(data.series!, linksField, replaceVariables);
+      actions = getFieldActions(data.series!, linksField, replaceVariables, xValueIdx);
     }
 
     footer = <VizTooltipFooter dataLinks={links} annotate={annotate} actions={actions} />;

public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx

@@ -71,7 +71,7 @@ export const StateTimelineTooltip2 = ({
     const field = series.fields[seriesIdx];
     const dataIdx = dataIdxs[seriesIdx]!;
     const links = getDataLinks(field, dataIdx);
-    const actions = getFieldActions(series, field, replaceVariables!);
+    const actions = getFieldActions(series, field, replaceVariables!, dataIdx);
 
     footer = <VizTooltipFooter dataLinks={links} annotate={annotate} actions={actions} />;
   }

public/app/plugins/panel/status-history/utils.ts

@@ -24,7 +24,12 @@ export const getDataLinks = (field: Field, rowIdx: number) => {
   return links;
 };
 
-export const getFieldActions = (dataFrame: DataFrame, field: Field, replaceVars: InterpolateFunction) => {
+export const getFieldActions = (
+  dataFrame: DataFrame,
+  field: Field,
+  replaceVars: InterpolateFunction,
+  rowIndex: number
+) => {
   if (!config.featureToggles?.vizActions) {
     return [];
   }
@@ -32,14 +37,9 @@ export const getFieldActions = (dataFrame: DataFrame, field: Field, replaceVars:
   const actions: Array<ActionModel<Field>> = [];
   const actionLookup = new Set<string>();
 
-  const actionsModel = getActions(
+  const actionsModel = getActions(dataFrame, field, field.state!.scopedVars!, replaceVars, field.config.actions ?? [], {
-    dataFrame,
+    valueRowIndex: rowIndex,
-    field,
+  });
-    field.state!.scopedVars!,
-    replaceVars,
-    field.config.actions ?? [],
-    {}
-  );
 
   actionsModel.forEach((action) => {
     const key = `${action.title}`;

public/app/plugins/panel/table/TablePanel.tsx

@@ -23,7 +23,7 @@ import { Options } from './panelcfg.gen';
 interface Props extends PanelProps<Options> {}
 
 export function TablePanel(props: Props) {
-  const { data, height, width, options, fieldConfig, id, timeRange } = props;
+  const { data, height, width, options, fieldConfig, id, timeRange, replaceVariables } = props;
 
   const theme = useTheme2();
   const panelContext = usePanelContext();
@@ -69,6 +69,7 @@ export function TablePanel(props: Props) {
       enableSharedCrosshair={config.featureToggles.tableSharedCrosshair && enableSharedCrosshair}
       fieldConfig={fieldConfig}
       getActions={getCellActions}
+      replaceVariables={replaceVariables}
     />
   );
 
@@ -145,7 +146,12 @@ function onChangeTableSelection(val: SelectableValue<number>, props: Props) {
 // placeholder function; assuming the values are already interpolated
 const replaceVars: InterpolateFunction = (value: string) => value;
 
-const getCellActions = (dataFrame: DataFrame, field: Field) => {
+const getCellActions = (
+  dataFrame: DataFrame,
+  field: Field,
+  rowIndex: number,
+  replaceVariables: InterpolateFunction | undefined
+) => {
   if (!config.featureToggles?.vizActions) {
     return [];
   }
@@ -157,9 +163,9 @@ const getCellActions = (dataFrame: DataFrame, field: Field) => {
     dataFrame,
     field,
     field.state!.scopedVars!,
-    replaceVars,
+    replaceVariables ?? replaceVars,
     field.config.actions ?? [],
-    {}
+    { valueRowIndex: rowIndex }
   );
 
   actionsModel.forEach((action) => {

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

@@ -79,7 +79,7 @@ export const TimeSeriesTooltip = ({
     const field = series.fields[seriesIdx];
     const dataIdx = dataIdxs[seriesIdx]!;
     const links = getDataLinks(field, dataIdx);
-    const actions = getFieldActions(series, field, replaceVariables!);
+    const actions = getFieldActions(series, field, replaceVariables!, dataIdx);
 
     footer = <VizTooltipFooter dataLinks={links} actions={actions} annotate={annotate} />;
   }

public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx

@@ -96,7 +96,7 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, xySeries, dismiss, i
   if (isPinned && seriesIdx != null) {
     const links = getDataLinks(yField, rowIndex);
     const yFieldFrame = data.find((frame) => frame.fields.includes(yField))!;
-    const actions = getFieldActions(yFieldFrame, yField, replaceVariables);
+    const actions = getFieldActions(yFieldFrame, yField, replaceVariables, rowIndex);
 
     footer = <VizTooltipFooter dataLinks={links} actions={actions} />;
   }