diff --git a/docs/sources/developers/kinds/composable/table/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/table/panelcfg/schema-reference.md index 0fbc39fba01..802497a6021 100644 --- a/docs/sources/developers/kinds/composable/table/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/table/panelcfg/schema-reference.md @@ -25,26 +25,26 @@ title: TablePanelCfg kind ### FieldConfig -| Property | Type | Required | Default | Description | -|---------------|---------------------------------------|----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `align` | string | **Yes** | | TODO -- should not be table specific!
TODO docs
Possible values are: `auto`, `left`, `right`, `center`. | -| `cellOptions` | [TableCellOptions](#tablecelloptions) | **Yes** | | Table cell options. Each cell has a display mode
and other potential options for that display. | -| `inspect` | boolean | **Yes** | `false` | | -| `displayMode` | string | No | | Internally, this is the "type" of cell that's being displayed
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
Possible values are: `auto`, `color-text`, `color-background`, `color-background-solid`, `gradient-gauge`, `lcd-gauge`, `json-view`, `basic`, `image`, `gauge`, `sparkline`, `custom`. | -| `filterable` | boolean | No | | | -| `hidden` | boolean | No | | | -| `hideHeader` | boolean | No | | Hides any header for a column, useful for columns that show some static content or buttons. | -| `minWidth` | number | No | | | -| `width` | number | No | | | +| Property | Type | Required | Default | Description | +|---------------|---------------------------------------|----------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `align` | string | **Yes** | | TODO -- should not be table specific!
TODO docs
Possible values are: `auto`, `left`, `right`, `center`. | +| `cellOptions` | [TableCellOptions](#tablecelloptions) | **Yes** | | Table cell options. Each cell has a display mode
and other potential options for that display. | +| `inspect` | boolean | **Yes** | `false` | | +| `displayMode` | string | No | | Internally, this is the "type" of cell that's being displayed
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
Possible values are: `auto`, `color-text`, `color-background`, `color-background-solid`, `gradient-gauge`, `lcd-gauge`, `json-view`, `basic`, `image`, `gauge`, `sparkline`, `data-links`, `custom`. | +| `filterable` | boolean | No | | | +| `hidden` | boolean | No | | | +| `hideHeader` | boolean | No | | Hides any header for a column, useful for columns that show some static content or buttons. | +| `minWidth` | number | No | | | +| `width` | number | No | | | ### TableCellOptions Table cell options. Each cell has a display mode and other potential options for that display. -| Property | Type | Required | Default | Description | -|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------|-------------| -| `object` | Possible types are: [TableAutoCellOptions](#tableautocelloptions), [TableSparklineCellOptions](#tablesparklinecelloptions), [TableBarGaugeCellOptions](#tablebargaugecelloptions), [TableColoredBackgroundCellOptions](#tablecoloredbackgroundcelloptions), [TableColorTextCellOptions](#tablecolortextcelloptions), [TableImageCellOptions](#tableimagecelloptions), [TableJsonViewCellOptions](#tablejsonviewcelloptions). | | | +| Property | Type | Required | Default | Description | +|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------|-------------| +| `object` | Possible types are: [TableAutoCellOptions](#tableautocelloptions), [TableSparklineCellOptions](#tablesparklinecelloptions), [TableBarGaugeCellOptions](#tablebargaugecelloptions), [TableColoredBackgroundCellOptions](#tablecoloredbackgroundcelloptions), [TableColorTextCellOptions](#tablecolortextcelloptions), [TableImageCellOptions](#tableimagecelloptions), [TableDataLinksCellOptions](#tabledatalinkscelloptions), [TableJsonViewCellOptions](#tablejsonviewcelloptions). | | | ### GraphThresholdsStyleConfig @@ -127,6 +127,14 @@ Colored background cell options | `type` | string | **Yes** | | | | `mode` | string | No | | Display mode to the "Colored Background" display
mode for table cells. Either displays a solid color (basic mode)
or a gradient.
Possible values are: `basic`, `gradient`. | +### TableDataLinksCellOptions + +Show data links in the cell + +| Property | Type | Required | Default | Description | +|----------|--------|----------|---------|-------------| +| `type` | string | **Yes** | | | + ### TableImageCellOptions Json view cell options diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts index 79219a0d6ba..0288674ce6d 100644 --- a/packages/grafana-schema/src/common/common.gen.ts +++ b/packages/grafana-schema/src/common/common.gen.ts @@ -685,6 +685,7 @@ export enum TableCellDisplayMode { ColorBackgroundSolid = 'color-background-solid', ColorText = 'color-text', Custom = 'custom', + DataLinks = 'data-links', Gauge = 'gauge', GradientGauge = 'gradient-gauge', Image = 'image', @@ -761,6 +762,13 @@ export interface TableImageCellOptions { type: TableCellDisplayMode.Image; } +/** + * Show data links in the cell + */ +export interface TableDataLinksCellOptions { + type: TableCellDisplayMode.DataLinks; +} + /** * Gauge cell options */ @@ -799,7 +807,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 | TableJsonViewCellOptions); +export type TableCellOptions = (TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableDataLinksCellOptions | TableJsonViewCellOptions); /** * Use UTC/GMT timezone diff --git a/packages/grafana-schema/src/common/table.cue b/packages/grafana-schema/src/common/table.cue index 27026f6d79b..c6aa05df53e 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"| "custom" @cuetsy(kind="enum",memberNames="Auto|ColorText|ColorBackground|ColorBackgroundSolid|GradientGauge|LcdGauge|JSONView|BasicGauge|Image|Gauge|Sparkline|Custom") +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") // Display mode to the "Colored Background" display // mode for table cells. Either displays a solid color (basic mode) @@ -48,6 +48,11 @@ TableImageCellOptions: { type: TableCellDisplayMode & "image" } @cuetsy(kind="interface") +// Show data links in the cell +TableDataLinksCellOptions: { + type: TableCellDisplayMode & "data-links" +} @cuetsy(kind="interface") + // Gauge cell options TableBarGaugeCellOptions: { type: TableCellDisplayMode & "gauge" @@ -73,7 +78,7 @@ TableCellHeight: "sm" | "md" | "lg" @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 | TableJsonViewCellOptions @cuetsy(kind="type") +TableCellOptions: TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableDataLinksCellOptions | 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/DataLinksCell.tsx b/packages/grafana-ui/src/components/Table/DataLinksCell.tsx new file mode 100644 index 00000000000..45d8d3eb093 --- /dev/null +++ b/packages/grafana-ui/src/components/Table/DataLinksCell.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { getCellLinks } from '../../utils'; + +import { TableCellProps } from './types'; + +export const DataLinksCell = (props: TableCellProps) => { + const { field, row, cellProps, tableStyles } = props; + + const links = getCellLinks(field, row); + + return ( +
+ {links && + links.map((link, idx) => { + return ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions + + + {link.title} + + + ); + })} +
+ ); +}; diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index 13632af7ff0..af30a8fdc4e 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -179,6 +179,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell whiteSpace: 'nowrap', color: theme.colors.text.link, fontWeight: theme.typography.fontWeightMedium, + paddingRight: theme.spacing(1.5), '&:hover': { textDecoration: 'underline', color: theme.colors.text.link, diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts index efece819ba6..4871f5a5475 100644 --- a/packages/grafana-ui/src/components/Table/utils.ts +++ b/packages/grafana-ui/src/components/Table/utils.ts @@ -28,6 +28,7 @@ import { } from '@grafana/schema'; import { BarGaugeCell } from './BarGaugeCell'; +import { DataLinksCell } from './DataLinksCell'; import { DefaultCell } from './DefaultCell'; import { getFooterValue } from './FooterRow'; import { GeoCell } from './GeoCell'; @@ -183,6 +184,8 @@ export function getCellComponent(displayMode: TableCellDisplayMode, field: Field return SparklineCell; case TableCellDisplayMode.JSONView: return JSONViewCell; + case TableCellDisplayMode.DataLinks: + return DataLinksCell; } if (field.type === FieldType.geo) { diff --git a/public/app/plugins/panel/table/TableCellOptionEditor.tsx b/public/app/plugins/panel/table/TableCellOptionEditor.tsx index f03957ff0a8..1374b5ee64c 100644 --- a/public/app/plugins/panel/table/TableCellOptionEditor.tsx +++ b/public/app/plugins/panel/table/TableCellOptionEditor.tsx @@ -79,6 +79,7 @@ const cellDisplayModeOptions: Array> = [ { value: { type: TableCellDisplayMode.ColorText }, label: 'Colored text' }, { value: { type: TableCellDisplayMode.ColorBackground }, label: 'Colored background' }, { value: { type: TableCellDisplayMode.Gauge }, label: 'Gauge' }, + { value: { type: TableCellDisplayMode.DataLinks }, label: 'Data links' }, { value: { type: TableCellDisplayMode.JSONView }, label: 'JSON View' }, { value: { type: TableCellDisplayMode.Image }, label: 'Image' }, ];