mirror of https://github.com/grafana/grafana
Table Panel: use react as the default table panel (#23543)
Ryan McKinley
6 years ago
committed by
GitHub
parent
9f2af718dc
commit
8b48a1c806
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
@ -1,10 +1,12 @@ |
||||
{ |
||||
"type": "panel", |
||||
"name": "React Table", |
||||
"id": "table2", |
||||
"state": "alpha", |
||||
"name": "Table (old)", |
||||
"id": "table-old", |
||||
|
||||
"state": "deprecated", |
||||
|
||||
"info": { |
||||
"description": "Table Panel for Grafana", |
||||
"author": { |
||||
"name": "Grafana Project", |
||||
"url": "https://grafana.com" |
||||
@ -0,0 +1,42 @@ |
||||
import TableModel from 'app/core/table_model'; |
||||
import { Column } from '@grafana/data'; |
||||
|
||||
export interface TableTransform { |
||||
description: string; |
||||
getColumns(data?: any): any[]; |
||||
transform(data: any, panel: any, model: TableModel): void; |
||||
} |
||||
|
||||
export interface ColumnRender extends Column { |
||||
title: string; |
||||
style: ColumnStyle; |
||||
hidden: boolean; |
||||
} |
||||
|
||||
export interface TableRenderModel { |
||||
columns: ColumnRender[]; |
||||
rows: any[][]; |
||||
} |
||||
|
||||
export interface ColumnStyle { |
||||
pattern: string; |
||||
|
||||
alias?: string; |
||||
colorMode?: 'cell' | 'value'; |
||||
colors?: any[]; |
||||
decimals?: number; |
||||
thresholds?: any[]; |
||||
type?: 'date' | 'number' | 'string' | 'hidden'; |
||||
unit?: string; |
||||
dateFormat?: string; |
||||
sanitize?: boolean; // not used in react
|
||||
mappingType?: any; |
||||
valueMaps?: any; |
||||
rangeMaps?: any; |
||||
align?: 'auto' | 'left' | 'center' | 'right'; |
||||
link?: any; |
||||
linkUrl?: any; |
||||
linkTooltip?: any; |
||||
linkTargetBlank?: boolean; |
||||
preserveFormat?: boolean; |
||||
} |
||||
@ -0,0 +1,32 @@ |
||||
import { PanelModel } from '@grafana/data'; |
||||
import { Options } from './types'; |
||||
|
||||
/** |
||||
* At 7.0, the `table` panel was swapped from an angular implementation to a react one. |
||||
* The models do not match, so this process will delegate to the old implementation when |
||||
* a saved table configuration exists. |
||||
*/ |
||||
export const tableMigrationHandler = (panel: PanelModel<Options>): Partial<Options> => { |
||||
// Table was saved as an angular table, lets just swap to the 'table-old' panel
|
||||
if (!panel.pluginVersion && (panel as any).columns) { |
||||
console.log('Was angular table', panel); |
||||
} |
||||
|
||||
// Nothing changed
|
||||
return panel.options; |
||||
}; |
||||
|
||||
/** |
||||
* This is called when the panel changes from another panel |
||||
*/ |
||||
export const tablePanelChangedHandler = ( |
||||
panel: PanelModel<Partial<Options>> | any, |
||||
prevPluginId: string, |
||||
prevOptions: any |
||||
) => { |
||||
// Changing from angular singlestat
|
||||
if (prevPluginId === 'table-old' && prevOptions.angular) { |
||||
console.log('Migrating from angular table', panel); |
||||
} |
||||
return prevOptions; |
||||
}; |
||||
@ -1,8 +1,11 @@ |
||||
import { PanelPlugin } from '@grafana/data'; |
||||
import { TablePanel } from './TablePanel'; |
||||
import { CustomFieldConfig, Options } from './types'; |
||||
import { tablePanelChangedHandler, tableMigrationHandler } from './migrations'; |
||||
|
||||
export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel) |
||||
.setPanelChangeHandler(tablePanelChangedHandler) |
||||
.setMigrationHandler(tableMigrationHandler) |
||||
.useFieldConfig({ |
||||
useCustomConfig: builder => { |
||||
builder |
||||
@ -1,42 +1,9 @@ |
||||
import TableModel from 'app/core/table_model'; |
||||
import { Column } from '@grafana/data'; |
||||
|
||||
export interface TableTransform { |
||||
description: string; |
||||
getColumns(data?: any): any[]; |
||||
transform(data: any, panel: any, model: TableModel): void; |
||||
} |
||||
|
||||
export interface ColumnRender extends Column { |
||||
title: string; |
||||
style: ColumnStyle; |
||||
hidden: boolean; |
||||
export interface Options { |
||||
showHeader: boolean; |
||||
resizable: boolean; |
||||
} |
||||
|
||||
export interface TableRenderModel { |
||||
columns: ColumnRender[]; |
||||
rows: any[][]; |
||||
} |
||||
|
||||
export interface ColumnStyle { |
||||
pattern: string; |
||||
|
||||
alias?: string; |
||||
colorMode?: 'cell' | 'value'; |
||||
colors?: any[]; |
||||
decimals?: number; |
||||
thresholds?: any[]; |
||||
type?: 'date' | 'number' | 'string' | 'hidden'; |
||||
unit?: string; |
||||
dateFormat?: string; |
||||
sanitize?: boolean; // not used in react
|
||||
mappingType?: any; |
||||
valueMaps?: any; |
||||
rangeMaps?: any; |
||||
align?: 'auto' | 'left' | 'center' | 'right'; |
||||
link?: any; |
||||
linkUrl?: any; |
||||
linkTooltip?: any; |
||||
linkTargetBlank?: boolean; |
||||
preserveFormat?: boolean; |
||||
export interface CustomFieldConfig { |
||||
width: number; |
||||
displayMode: string; |
||||
} |
||||
|
||||
@ -1,9 +0,0 @@ |
||||
export interface Options { |
||||
showHeader: boolean; |
||||
resizable: boolean; |
||||
} |
||||
|
||||
export interface CustomFieldConfig { |
||||
width: number; |
||||
displayMode: string; |
||||
} |
||||
Loading…
Reference in new issue