From 754351273b6c770e2425cc8a8364b77e06497891 Mon Sep 17 00:00:00 2001 From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com> Date: Mon, 11 Nov 2024 11:08:15 -0600 Subject: [PATCH] Actions: Fix interpolation (#96161) --- .../src/components/Table/RowsList.tsx | 5 +++++ .../grafana-ui/src/components/Table/Table.tsx | 2 ++ .../src/components/Table/TableCell.tsx | 6 ++++-- .../grafana-ui/src/components/Table/types.ts | 20 ++++++++++++++++--- .../plugins/panel/heatmap/HeatmapTooltip.tsx | 2 +- .../state-timeline/StateTimelineTooltip2.tsx | 2 +- .../app/plugins/panel/status-history/utils.ts | 18 ++++++++--------- public/app/plugins/panel/table/TablePanel.tsx | 14 +++++++++---- .../panel/timeseries/TimeSeriesTooltip.tsx | 2 +- .../panel/xychart/v2/XYChartTooltip.tsx | 2 +- 10 files changed, 51 insertions(+), 22 deletions(-) diff --git a/packages/grafana-ui/src/components/Table/RowsList.tsx b/packages/grafana-ui/src/components/Table/RowsList.tsx index 47bd3b0efcd..39479e91874 100644 --- a/packages/grafana-ui/src/components/Table/RowsList.tsx +++ b/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(initialRowIndex); @@ -337,6 +340,7 @@ export const RowsList = (props: RowsListProps) => { textWrapped={textWrapFinal !== undefined} height={Number(style.height)} getActions={getActions} + replaceVariables={replaceVariables} /> ))} @@ -364,6 +368,7 @@ export const RowsList = (props: RowsListProps) => { onCellFilterAdded, timeRange, getActions, + replaceVariables, ] ); diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index 13b1385ace9..54d61990463 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/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(null); @@ -362,6 +363,7 @@ export const Table = memo((props: Props) => { longestField={longestField} textWrapField={textWrapField} getActions={getActions} + replaceVariables={replaceVariables} /> ) : ( diff --git a/packages/grafana-ui/src/components/Table/TableCell.tsx b/packages/grafana-ui/src/components/Table/TableCell.tsx index af7b9716408..8fa154d519e 100644 --- a/packages/grafana-ui/src/components/Table/TableCell.tsx +++ b/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 ( <> diff --git a/packages/grafana-ui/src/components/Table/types.ts b/packages/grafana-ui/src/components/Table/types.ts index 58c5079508d..94d0c1183a2 100644 --- a/packages/grafana-ui/src/components/Table/types.ts +++ b/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 = (frame: DataFrame, field: Field) => ActionModel[]; +export type GetActionsFunction = ( + frame: DataFrame, + field: Field, + rowIndex: number, + replaceVariables?: InterpolateFunction +) => ActionModel[]; diff --git a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx b/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx index 010fbdfa09c..896dbeb1feb 100644 --- a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx +++ b/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 = ; diff --git a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx index b4ff1a07c21..d4df7d88187 100644 --- a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx +++ b/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 = ; } diff --git a/public/app/plugins/panel/status-history/utils.ts b/public/app/plugins/panel/status-history/utils.ts index b5807d0b2cb..9be0a4fefc5 100644 --- a/public/app/plugins/panel/status-history/utils.ts +++ b/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> = []; const actionLookup = new Set(); - const actionsModel = getActions( - dataFrame, - field, - field.state!.scopedVars!, - replaceVars, - field.config.actions ?? [], - {} - ); + const actionsModel = getActions(dataFrame, field, field.state!.scopedVars!, replaceVars, field.config.actions ?? [], { + valueRowIndex: rowIndex, + }); actionsModel.forEach((action) => { const key = `${action.title}`; diff --git a/public/app/plugins/panel/table/TablePanel.tsx b/public/app/plugins/panel/table/TablePanel.tsx index 546ee64c4c9..3945829809b 100644 --- a/public/app/plugins/panel/table/TablePanel.tsx +++ b/public/app/plugins/panel/table/TablePanel.tsx @@ -23,7 +23,7 @@ import { Options } from './panelcfg.gen'; interface Props extends PanelProps {} 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, 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) => { diff --git a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx index 2c30eb643c8..5ea7e95fe31 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx +++ b/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 = ; } diff --git a/public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx b/public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx index 4a6f590c2f9..8976c807278 100644 --- a/public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx +++ b/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 = ; }