diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts index 4b1ba194812..ad1169b3c96 100644 --- a/packages/grafana-schema/src/common/common.gen.ts +++ b/packages/grafana-schema/src/common/common.gen.ts @@ -690,6 +690,7 @@ export interface Labels {} * modes are deprecated in favor of new cell subOptions */ export enum TableCellDisplayMode { + Actions = 'actions', Auto = 'auto', BasicGauge = 'basic', ColorBackground = 'color-background', @@ -784,6 +785,13 @@ export interface TableDataLinksCellOptions { type: TableCellDisplayMode.DataLinks; } +/** + * Show actions in the cell + */ +export interface TableActionsCellOptions { + type: TableCellDisplayMode.Actions; +} + /** * Gauge cell options */ @@ -825,7 +833,7 @@ export enum TableCellHeight { * Table cell options. Each cell has a display mode * and other potential options for that display. */ -export type TableCellOptions = (TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableDataLinksCellOptions | TableJsonViewCellOptions); +export type TableCellOptions = (TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableDataLinksCellOptions | TableActionsCellOptions | TableJsonViewCellOptions); /** * Use UTC/GMT timezone diff --git a/packages/grafana-schema/src/common/table.cue b/packages/grafana-schema/src/common/table.cue index 9dc54fe5ec4..7548275ada7 100644 --- a/packages/grafana-schema/src/common/table.cue +++ b/packages/grafana-schema/src/common/table.cue @@ -4,7 +4,7 @@ package common // in the table such as colored text, JSON, gauge, etc. // The color-background-solid, gradient-gauge, and lcd-gauge // modes are deprecated in favor of new cell subOptions -TableCellDisplayMode: "auto" | "color-text" | "color-background" | "color-background-solid" | "gradient-gauge" | "lcd-gauge" | "json-view" | "basic" | "image" | "gauge" | "sparkline" | "data-links" | "custom" @cuetsy(kind="enum",memberNames="Auto|ColorText|ColorBackground|ColorBackgroundSolid|GradientGauge|LcdGauge|JSONView|BasicGauge|Image|Gauge|Sparkline|DataLinks|Custom") +TableCellDisplayMode: "auto" | "color-text" | "color-background" | "color-background-solid" | "gradient-gauge" | "lcd-gauge" | "json-view" | "basic" | "image" | "gauge" | "sparkline" | "data-links" | "custom" | "actions" @cuetsy(kind="enum",memberNames="Auto|ColorText|ColorBackground|ColorBackgroundSolid|GradientGauge|LcdGauge|JSONView|BasicGauge|Image|Gauge|Sparkline|DataLinks|Custom|Actions") // Display mode to the "Colored Background" display // mode for table cells. Either displays a solid color (basic mode) @@ -57,6 +57,11 @@ TableDataLinksCellOptions: { type: TableCellDisplayMode & "data-links" } @cuetsy(kind="interface") +// Show actions in the cell +TableActionsCellOptions: { + type: TableCellDisplayMode & "actions" +} @cuetsy(kind="interface") + // Gauge cell options TableBarGaugeCellOptions: { type: TableCellDisplayMode & "gauge" @@ -84,7 +89,7 @@ TableCellHeight: "sm" | "md" | "lg" | "auto" @cuetsy(kind="enum") // Table cell options. Each cell has a display mode // and other potential options for that display. -TableCellOptions: TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableDataLinksCellOptions | TableJsonViewCellOptions @cuetsy(kind="type") +TableCellOptions: TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableDataLinksCellOptions | TableActionsCellOptions | TableJsonViewCellOptions @cuetsy(kind="type") // Field options for each field within a table (e.g 10, "The String", 64.20, etc.) // Generally defines alignment, filtering capabilties, display options, etc. diff --git a/packages/grafana-ui/src/components/Table/ActionsCell.tsx b/packages/grafana-ui/src/components/Table/ActionsCell.tsx new file mode 100644 index 00000000000..00a62567ada --- /dev/null +++ b/packages/grafana-ui/src/components/Table/ActionsCell.tsx @@ -0,0 +1,26 @@ +import { css, cx } from '@emotion/css'; + +import { GrafanaTheme2 } from '@grafana/data'; + +import { useStyles2 } from '../../themes'; +import { ActionButton } from '../Actions/ActionButton'; + +import { TableCellProps } from './types'; + +export const ActionsCell = (props: TableCellProps) => { + const { cellProps, tableStyles, actions } = props; + + const styles = useStyles2(getStyles); + + return ( +