apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/80774/head
Ryan McKinley 1 year ago committed by GitHub
parent 87c3d3b029
commit f434467ef8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 70 additions and 17 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 36
      docs/sources/developers/kinds/composable/table/panelcfg/schema-reference.md
  2. 10
      packages/grafana-schema/src/common/common.gen.ts
  3. 9
      packages/grafana-schema/src/common/table.cue
  4. 27
      packages/grafana-ui/src/components/Table/DataLinksCell.tsx
  5. 1
      packages/grafana-ui/src/components/Table/styles.ts
  6. 3
      packages/grafana-ui/src/components/Table/utils.ts
  7. 1
      public/app/plugins/panel/table/TableCellOptionEditor.tsx

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

@ -25,26 +25,26 @@ title: TablePanelCfg kind
### FieldConfig
| 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`. |
| `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` | |
| `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`. |
| `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!<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. |
| `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`, `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<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
Json view cell options

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

@ -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

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

@ -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.

27
packages/grafana-ui/src/components/Table/DataLinksCell.tsx
Unescape 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
Unescape View File

@ -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,

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

@ -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) {

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

@ -79,6 +79,7 @@ const cellDisplayModeOptions: Array<SelectableValue<TableCellOptions>> = [
{ 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' },
];

Write Preview
Loading…
Cancel
Save