Skip to content

Commit f434467

Browse files
ryantxuryantxu
authored
Table: Support showing data links inline. (grafana#80691)
1 parent 87c3d3b commit f434467

File tree

7 files changed

+70
-17
lines changed

7 files changed

+70
-17
lines changed

‎docs/sources/developers/kinds/composable/table/panelcfg/schema-reference.md

+22-14
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,26 @@ title: TablePanelCfg kind
2525

2626
### FieldConfig
2727

28-
| Property | Type | Required | Default | Description |
29-
|---------------|---------------------------------------|----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
30-
| `align` | string | **Yes** | | TODO -- should not be table specific!<br/>TODO docs<br/>Possible values are: `auto`, `left`, `right`, `center`. |
31-
| `cellOptions` | [TableCellOptions](#tablecelloptions) | **Yes** | | Table cell options. Each cell has a display mode<br/>and other potential options for that display. |
32-
| `inspect` | boolean | **Yes** | `false` | |
33-
| `displayMode` | string | No | | Internally, this is the "type" of cell that's being displayed<br/>in the table such as colored text, JSON, gauge, etc.<br/>The color-background-solid, gradient-gauge, and lcd-gauge<br/>modes are deprecated in favor of new cell subOptions<br/>Possible values are: `auto`, `color-text`, `color-background`, `color-background-solid`, `gradient-gauge`, `lcd-gauge`, `json-view`, `basic`, `image`, `gauge`, `sparkline`, `custom`. |
34-
| `filterable` | boolean | No | | |
35-
| `hidden` | boolean | No | | |
36-
| `hideHeader` | boolean | No | | Hides any header for a column, useful for columns that show some static content or buttons. |
37-
| `minWidth` | number | No | | |
38-
| `width` | number | No | | |
28+
| Property | Type | Required | Default | Description |
29+
|---------------|---------------------------------------|----------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
30+
| `align` | string | **Yes** | | TODO -- should not be table specific!<br/>TODO docs<br/>Possible values are: `auto`, `left`, `right`, `center`. |
31+
| `cellOptions` | [TableCellOptions](#tablecelloptions) | **Yes** | | Table cell options. Each cell has a display mode<br/>and other potential options for that display. |
32+
| `inspect` | boolean | **Yes** | `false` | |
33+
| `displayMode` | string | No | | Internally, this is the "type" of cell that's being displayed<br/>in the table such as colored text, JSON, gauge, etc.<br/>The color-background-solid, gradient-gauge, and lcd-gauge<br/>modes are deprecated in favor of new cell subOptions<br/>Possible values are: `auto`, `color-text`, `color-background`, `color-background-solid`, `gradient-gauge`, `lcd-gauge`, `json-view`, `basic`, `image`, `gauge`, `sparkline`, `data-links`, `custom`. |
34+
| `filterable` | boolean | No | | |
35+
| `hidden` | boolean | No | | |
36+
| `hideHeader` | boolean | No | | Hides any header for a column, useful for columns that show some static content or buttons. |
37+
| `minWidth` | number | No | | |
38+
| `width` | number | No | | |
3939

4040
### TableCellOptions
4141

4242
Table cell options. Each cell has a display mode
4343
and other potential options for that display.
4444

45-
| Property | Type | Required | Default | Description |
46-
|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------|-------------|
47-
| `object` | Possible types are: [TableAutoCellOptions](#tableautocelloptions), [TableSparklineCellOptions](#tablesparklinecelloptions), [TableBarGaugeCellOptions](#tablebargaugecelloptions), [TableColoredBackgroundCellOptions](#tablecoloredbackgroundcelloptions), [TableColorTextCellOptions](#tablecolortextcelloptions), [TableImageCellOptions](#tableimagecelloptions), [TableJsonViewCellOptions](#tablejsonviewcelloptions). | | |
45+
| Property | Type | Required | Default | Description |
46+
|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------|-------------|
47+
| `object` | Possible types are: [TableAutoCellOptions](#tableautocelloptions), [TableSparklineCellOptions](#tablesparklinecelloptions), [TableBarGaugeCellOptions](#tablebargaugecelloptions), [TableColoredBackgroundCellOptions](#tablecoloredbackgroundcelloptions), [TableColorTextCellOptions](#tablecolortextcelloptions), [TableImageCellOptions](#tableimagecelloptions), [TableDataLinksCellOptions](#tabledatalinkscelloptions), [TableJsonViewCellOptions](#tablejsonviewcelloptions). | | |
4848

4949
### GraphThresholdsStyleConfig
5050

@@ -127,6 +127,14 @@ Colored background cell options
127127
| `type` | string | **Yes** | | |
128128
| `mode` | string | No | | Display mode to the "Colored Background" display<br/>mode for table cells. Either displays a solid color (basic mode)<br/>or a gradient.<br/>Possible values are: `basic`, `gradient`. |
129129

130+
### TableDataLinksCellOptions
131+
132+
Show data links in the cell
133+
134+
| Property | Type | Required | Default | Description |
135+
|----------|--------|----------|---------|-------------|
136+
| `type` | string | **Yes** | | |
137+
130138
### TableImageCellOptions
131139

132140
Json view cell options

‎packages/grafana-schema/src/common/common.gen.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -685,6 +685,7 @@ export enum TableCellDisplayMode {
685685
ColorBackgroundSolid = 'color-background-solid',
686686
ColorText = 'color-text',
687687
Custom = 'custom',
688+
DataLinks = 'data-links',
688689
Gauge = 'gauge',
689690
GradientGauge = 'gradient-gauge',
690691
Image = 'image',
@@ -761,6 +762,13 @@ export interface TableImageCellOptions {
761762
type: TableCellDisplayMode.Image;
762763
}
763764

765+
/**
766+
* Show data links in the cell
767+
*/
768+
export interface TableDataLinksCellOptions {
769+
type: TableCellDisplayMode.DataLinks;
770+
}
771+
764772
/**
765773
* Gauge cell options
766774
*/
@@ -799,7 +807,7 @@ export enum TableCellHeight {
799807
* Table cell options. Each cell has a display mode
800808
* and other potential options for that display.
801809
*/
802-
export type TableCellOptions = (TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableJsonViewCellOptions);
810+
export type TableCellOptions = (TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableDataLinksCellOptions | TableJsonViewCellOptions);
803811

804812
/**
805813
* Use UTC/GMT timezone

‎packages/grafana-schema/src/common/table.cue

+7-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ package common
44
// in the table such as colored text, JSON, gauge, etc.
55
// The color-background-solid, gradient-gauge, and lcd-gauge
66
// modes are deprecated in favor of new cell subOptions
7-
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")
7+
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")
88

99
// Display mode to the "Colored Background" display
1010
// mode for table cells. Either displays a solid color (basic mode)
@@ -48,6 +48,11 @@ TableImageCellOptions: {
4848
type: TableCellDisplayMode & "image"
4949
} @cuetsy(kind="interface")
5050

51+
// Show data links in the cell
52+
TableDataLinksCellOptions: {
53+
type: TableCellDisplayMode & "data-links"
54+
} @cuetsy(kind="interface")
55+
5156
// Gauge cell options
5257
TableBarGaugeCellOptions: {
5358
type: TableCellDisplayMode & "gauge"
@@ -73,7 +78,7 @@ TableCellHeight: "sm" | "md" | "lg" @cuetsy(kind="enum")
7378

7479
// Table cell options. Each cell has a display mode
7580
// and other potential options for that display.
76-
TableCellOptions: TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableJsonViewCellOptions @cuetsy(kind="type")
81+
TableCellOptions: TableAutoCellOptions | TableSparklineCellOptions | TableBarGaugeCellOptions | TableColoredBackgroundCellOptions | TableColorTextCellOptions | TableImageCellOptions | TableDataLinksCellOptions | TableJsonViewCellOptions @cuetsy(kind="type")
7782

7883
// Field options for each field within a table (e.g 10, "The String", 64.20, etc.)
7984
// Generally defines alignment, filtering capabilties, display options, etc.

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

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
3+
import { getCellLinks } from '../../utils';
4+
5+
import { TableCellProps } from './types';
6+
7+
export const DataLinksCell = (props: TableCellProps) => {
8+
const { field, row, cellProps, tableStyles } = props;
9+
10+
const links = getCellLinks(field, row);
11+
12+
return (
13+
<div {...cellProps} className={tableStyles.cellContainerText}>
14+
{links &&
15+
links.map((link, idx) => {
16+
return (
17+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
18+
<span key={idx} className={tableStyles.cellLink} onClick={link.onClick}>
19+
<a href={link.href} target={link.target}>
20+
{link.title}
21+
</a>
22+
</span>
23+
);
24+
})}
25+
</div>
26+
);
27+
};

‎packages/grafana-ui/src/components/Table/styles.ts

+1
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
179179
whiteSpace: 'nowrap',
180180
color: theme.colors.text.link,
181181
fontWeight: theme.typography.fontWeightMedium,
182+
paddingRight: theme.spacing(1.5),
182183
'&:hover': {
183184
textDecoration: 'underline',
184185
color: theme.colors.text.link,

0 commit comments

Comments
 (0)