opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-20 02:18:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Table: Support showing data links inline. (#80691)

Browse Source
This commit is contained in:
Ryan McKinley
2024-01-17 13:05:25 -08:00
committed by GitHub
parent 87c3d3b029
commit f434467ef8
7 changed files with 70 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/sources/developers/kinds/composable/table/panelcfg/schema-reference.md
View File

@ -25,26 +25,26 @@ title: TablePanelCfg kind
### FieldConfig ### FieldConfig
| Property | Type | Required | Default | Description | | Property | Type | Required | Default | Description |
|---------------|---------------------------------------|----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |---------------|---------------------------------------|----------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `align` | string | **Yes** | | TODO -- should not be table specific!<br/>TODO docs<br/>Possible values are: `auto`, `left`, `right`, `center`. | | `align` | string | **Yes** | | TODO -- should not be table specific!<br/>TODO docs<br/>Possible values are: `auto`, `left`, `right`, `center`. |
| `cellOptions` | [TableCellOptions](#tablecelloptions) | **Yes** | | Table cell options. Each cell has a display mode<br/>and other potential options for that display. | | `cellOptions` | [TableCellOptions](#tablecelloptions) | **Yes** | | Table cell options. Each cell has a display mode<br/>and other potential options for that display. |
| `inspect` | boolean | **Yes** | `false` | | | `inspect` | boolean | **Yes** | `false` | |
| `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`. | | `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`. |
| `filterable` | boolean | No | | | | `filterable` | boolean | No | | |
| `hidden` | boolean | No | | | | `hidden` | boolean | No | | |
| `hideHeader` | boolean | No | | Hides any header for a column, useful for columns that show some static content or buttons. | | `hideHeader` | boolean | No | | Hides any header for a column, useful for columns that show some static content or buttons. |
| `minWidth` | number | No | | | | `minWidth` | number | No | | |
| `width` | number | No | | | | `width` | number | No | | |
### TableCellOptions ### TableCellOptions
Table cell options. Each cell has a display mode Table cell options. Each cell has a display mode
and other potential options for that display. and other potential options for that display.
| Property | Type | Required | Default | Description | | Property | Type | Required | Default | Description |
|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------|-------------| |----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------|-------------|
| `object` | Possible types are: [TableAutoCellOptions](#tableautocelloptions), [TableSparklineCellOptions](#tablesparklinecelloptions), [TableBarGaugeCellOptions](#tablebargaugecelloptions), [TableColoredBackgroundCellOptions](#tablecoloredbackgroundcelloptions), [TableColorTextCellOptions](#tablecolortextcelloptions), [TableImageCellOptions](#tableimagecelloptions), [TableJsonViewCellOptions](#tablejsonviewcelloptions). | | | | `object` | Possible types are: [TableAutoCellOptions](#tableautocelloptions), [TableSparklineCellOptions](#tablesparklinecelloptions), [TableBarGaugeCellOptions](#tablebargaugecelloptions), [TableColoredBackgroundCellOptions](#tablecoloredbackgroundcelloptions), [TableColorTextCellOptions](#tablecolortextcelloptions), [TableImageCellOptions](#tableimagecelloptions), [TableDataLinksCellOptions](#tabledatalinkscelloptions), [TableJsonViewCellOptions](#tablejsonviewcelloptions). | | |
### GraphThresholdsStyleConfig ### GraphThresholdsStyleConfig
@ -127,6 +127,14 @@ Colored background cell options
| `type` | string | **Yes** | | | | `type` | string | **Yes** | | |
| `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`. | | `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`. |
### TableDataLinksCellOptions
Show data links in the cell
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|-------------|
| `type` | string | **Yes** | | |
### TableImageCellOptions ### TableImageCellOptions
Json view cell options Json view cell options

10
packages/grafana-schema/src/common/common.gen.ts
View File

@ -685,6 +685,7 @@ export enum TableCellDisplayMode {
ColorBackgroundSolid = 'color-background-solid', ColorBackgroundSolid = 'color-background-solid',
ColorText = 'color-text', ColorText = 'color-text',
Custom = 'custom', Custom = 'custom',
DataLinks = 'data-links',
Gauge = 'gauge', Gauge = 'gauge',
GradientGauge = 'gradient-gauge', GradientGauge = 'gradient-gauge',
Image = 'image', Image = 'image',
@ -761,6 +762,13 @@ export interface TableImageCellOptions {
type: TableCellDisplayMode.Image; type: TableCellDisplayMode.Image;
} }
/**
* Show data links in the cell
*/
export interface TableDataLinksCellOptions {
type: TableCellDisplayMode.DataLinks;
}
/** /**
* Gauge cell options * Gauge cell options
*/ */
@ -799,7 +807,7 @@ export enum TableCellHeight {
* Table cell options. Each cell has a display mode * Table cell options. Each cell has a display mode
* and other potential options for that display. * 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 * Use UTC/GMT timezone

9
packages/grafana-schema/src/common/table.cue
View File

@ -4,7 +4,7 @@ package common
// in the table such as colored text, JSON, gauge, etc. // in the table such as colored text, JSON, gauge, etc.
// The color-background-solid, gradient-gauge, and lcd-gauge // The color-background-solid, gradient-gauge, and lcd-gauge
// modes are deprecated in favor of new cell subOptions // 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 // Display mode to the "Colored Background" display
// mode for table cells. Either displays a solid color (basic mode) // mode for table cells. Either displays a solid color (basic mode)
@ -48,6 +48,11 @@ TableImageCellOptions: {
type: TableCellDisplayMode & "image" type: TableCellDisplayMode & "image"
} @cuetsy(kind="interface") } @cuetsy(kind="interface")
// Show data links in the cell
TableDataLinksCellOptions: {
type: TableCellDisplayMode & "data-links"
} @cuetsy(kind="interface")
// Gauge cell options // Gauge cell options
TableBarGaugeCellOptions: { TableBarGaugeCellOptions: {
type: TableCellDisplayMode & "gauge" type: TableCellDisplayMode & "gauge"
@ -73,7 +78,7 @@ TableCellHeight: "sm" | "md" | "lg" @cuetsy(kind="enum")
// Table cell options. Each cell has a display mode // Table cell options. Each cell has a display mode
// and other potential options for that display. // 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.) // Field options for each field within a table (e.g 10, "The String", 64.20, etc.)
// Generally defines alignment, filtering capabilties, display options, etc. // Generally defines alignment, filtering capabilties, display options, etc.

27
packages/grafana-ui/src/components/Table/DataLinksCell.tsx Normal file
View File

@ -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 (
<div {...cellProps} className={tableStyles.cellContainerText}>
{links &&
links.map((link, idx) => {
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<span key={idx} className={tableStyles.cellLink} onClick={link.onClick}>
<a href={link.href} target={link.target}>
{link.title}
</a>
</span>
);
})}
</div>
);
};

1
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -179,6 +179,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
color: theme.colors.text.link, color: theme.colors.text.link,
fontWeight: theme.typography.fontWeightMedium, fontWeight: theme.typography.fontWeightMedium,
paddingRight: theme.spacing(1.5),
'&:hover': { '&:hover': {
textDecoration: 'underline', textDecoration: 'underline',
color: theme.colors.text.link, color: theme.colors.text.link,

3
packages/grafana-ui/src/components/Table/utils.ts
View File

@ -28,6 +28,7 @@ import {
} from '@grafana/schema'; } from '@grafana/schema';
import { BarGaugeCell } from './BarGaugeCell'; import { BarGaugeCell } from './BarGaugeCell';
import { DataLinksCell } from './DataLinksCell';
import { DefaultCell } from './DefaultCell'; import { DefaultCell } from './DefaultCell';
import { getFooterValue } from './FooterRow'; import { getFooterValue } from './FooterRow';
import { GeoCell } from './GeoCell'; import { GeoCell } from './GeoCell';
@ -183,6 +184,8 @@ export function getCellComponent(displayMode: TableCellDisplayMode, field: Field
return SparklineCell; return SparklineCell;
case TableCellDisplayMode.JSONView: case TableCellDisplayMode.JSONView:
return JSONViewCell; return JSONViewCell;
case TableCellDisplayMode.DataLinks:
return DataLinksCell;
} }
if (field.type === FieldType.geo) { if (field.type === FieldType.geo) {

1
public/app/plugins/panel/table/TableCellOptionEditor.tsx
View File

@ -79,6 +79,7 @@ const cellDisplayModeOptions: Array<SelectableValue<TableCellOptions>> = [
{ value: { type: TableCellDisplayMode.ColorText }, label: 'Colored text' }, { value: { type: TableCellDisplayMode.ColorText }, label: 'Colored text' },
{ value: { type: TableCellDisplayMode.ColorBackground }, label: 'Colored background' }, { value: { type: TableCellDisplayMode.ColorBackground }, label: 'Colored background' },
{ value: { type: TableCellDisplayMode.Gauge }, label: 'Gauge' }, { value: { type: TableCellDisplayMode.Gauge }, label: 'Gauge' },
{ value: { type: TableCellDisplayMode.DataLinks }, label: 'Data links' },
{ value: { type: TableCellDisplayMode.JSONView }, label: 'JSON View' }, { value: { type: TableCellDisplayMode.JSONView }, label: 'JSON View' },
{ value: { type: TableCellDisplayMode.Image }, label: 'Image' }, { value: { type: TableCellDisplayMode.Image }, label: 'Image' },
]; ];