mirror of
https://github.com/grafana/grafana.git
synced 2025-02-12 00:25:46 -06:00
Table: Support showing data links inline. (#80691)
This commit is contained in:
Ryan McKinley
GitHub
parent
87c3d3b029
commit
f434467ef8
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
Normal file
27
packages/grafana-ui/src/components/Table/DataLinksCell.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@ -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,
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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' },
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user