Skip to content

N
nexpie-grafana-theme
Commit 8b48a1c8 by Ryan McKinley Committed by GitHub
Options

Table Panel: use react as the default table panel (#23543)

parent 9f2af718
Showing with 124 additions and 67 deletions
public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
...@@ -78,7 +78,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1` ...@@ -78,7 +78,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -191,7 +191,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1` ...@@ -191,7 +191,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -285,7 +285,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1` ...@@ -285,7 +285,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -410,7 +410,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti ...@@ -410,7 +410,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -523,7 +523,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti ...@@ -523,7 +523,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -617,7 +617,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti ...@@ -617,7 +617,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -717,7 +717,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti ...@@ -717,7 +717,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
......
public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap
...@@ -235,7 +235,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = ` ...@@ -235,7 +235,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -477,7 +477,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = ` ...@@ -477,7 +477,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -719,7 +719,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = ` ...@@ -719,7 +719,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
...@@ -961,7 +961,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = ` ...@@ -961,7 +961,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
], ],
"refresh": undefined, "refresh": undefined,
"revision": undefined, "revision": undefined,
"schemaVersion": 23, "schemaVersion": 24,
"snapshot": undefined, "snapshot": undefined,
"style": "dark", "style": "dark",
"tags": Array [], "tags": Array [],
......
public/app/features/dashboard/state/DashboardMigrator.test.ts
...@@ -111,6 +111,10 @@ describe('DashboardModel', () => { ...@@ -111,6 +111,10 @@ describe('DashboardModel', () => {
expect(table.styles[1].thresholds[1]).toBe('300'); expect(table.styles[1].thresholds[1]).toBe('300');
}); });
it('table type should be deprecated', () => {
expect(table.type).toBe('table-old');
});
it('graph grid to yaxes options', () => { it('graph grid to yaxes options', () => {
expect(graph.yaxes[0].min).toBe(1); expect(graph.yaxes[0].min).toBe(1);
expect(graph.yaxes[0].max).toBe(10); expect(graph.yaxes[0].max).toBe(10);
...@@ -128,7 +132,7 @@ describe('DashboardModel', () => { ...@@ -128,7 +132,7 @@ describe('DashboardModel', () => {
}); });
it('dashboard schema version should be set to latest', () => { it('dashboard schema version should be set to latest', () => {
expect(model.schemaVersion).toBe(23); expect(model.schemaVersion).toBe(24);
}); });
it('graph thresholds should be migrated', () => { it('graph thresholds should be migrated', () => {
......
public/app/features/dashboard/state/DashboardMigrator.ts
...@@ -32,7 +32,7 @@ export class DashboardMigrator { ...@@ -32,7 +32,7 @@ export class DashboardMigrator {
let i, j, k, n; let i, j, k, n;
const oldVersion = this.dashboard.schemaVersion; const oldVersion = this.dashboard.schemaVersion;
const panelUpgrades = []; const panelUpgrades = [];
this.dashboard.schemaVersion = 23; this.dashboard.schemaVersion = 24;
if (oldVersion === this.dashboard.schemaVersion) { if (oldVersion === this.dashboard.schemaVersion) {
return; return;
...@@ -508,6 +508,22 @@ export class DashboardMigrator { ...@@ -508,6 +508,22 @@ export class DashboardMigrator {
} }
} }
if (oldVersion < 24) {
// 7.0
// - migrate existing tables to 'table-old'
panelUpgrades.push((panel: any) => {
const wasAngularTable = panel.type === 'table';
if (wasAngularTable && !panel.styles) {
return; // styles are missing so assumes default settings
}
const wasReactTable = panel.table === 'table2';
if (!wasAngularTable || wasReactTable) {
return;
}
panel.type = wasAngularTable ? 'table-old' : 'table';
});
}
if (panelUpgrades.length === 0) { if (panelUpgrades.length === 0) {
return; return;
} }
......
public/app/features/plugins/built_in_plugins.ts
...@@ -44,7 +44,7 @@ import * as alertListPanel from 'app/plugins/panel/alertlist/module'; ...@@ -44,7 +44,7 @@ import * as alertListPanel from 'app/plugins/panel/alertlist/module';
import * as annoListPanel from 'app/plugins/panel/annolist/module'; import * as annoListPanel from 'app/plugins/panel/annolist/module';
import * as heatmapPanel from 'app/plugins/panel/heatmap/module'; import * as heatmapPanel from 'app/plugins/panel/heatmap/module';
import * as tablePanel from 'app/plugins/panel/table/module'; import * as tablePanel from 'app/plugins/panel/table/module';
import * as table2Panel from 'app/plugins/panel/table2/module'; import * as oldTablePanel from 'app/plugins/panel/table-old/module';
import * as singlestatPanel from 'app/plugins/panel/singlestat/module'; import * as singlestatPanel from 'app/plugins/panel/singlestat/module';
import * as singlestatPanel2 from 'app/plugins/panel/stat/module'; import * as singlestatPanel2 from 'app/plugins/panel/stat/module';
import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module'; import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module';
...@@ -84,7 +84,7 @@ const builtInPlugins: any = { ...@@ -84,7 +84,7 @@ const builtInPlugins: any = {
'app/plugins/panel/annolist/module': annoListPanel, 'app/plugins/panel/annolist/module': annoListPanel,
'app/plugins/panel/heatmap/module': heatmapPanel, 'app/plugins/panel/heatmap/module': heatmapPanel,
'app/plugins/panel/table/module': tablePanel, 'app/plugins/panel/table/module': tablePanel,
'app/plugins/panel/table2/module': table2Panel, 'app/plugins/panel/table-old/module': oldTablePanel,
'app/plugins/panel/news/module': newsPanel, 'app/plugins/panel/news/module': newsPanel,
'app/plugins/panel/singlestat/module': singlestatPanel, 'app/plugins/panel/singlestat/module': singlestatPanel,
'app/plugins/panel/stat/module': singlestatPanel2, 'app/plugins/panel/stat/module': singlestatPanel2,
......
public/app/plugins/panel/table2/README.md → public/app/plugins/panel/table-old/README.md
...@@ -6,4 +6,4 @@ The table panel is very flexible, supporting both multiple modes for time series ...@@ -6,4 +6,4 @@ The table panel is very flexible, supporting both multiple modes for time series
Check out the [Table Panel Showcase in the Grafana Playground](http://play.grafana.org/dashboard/db/table-panel-showcase) or read more about it here: Check out the [Table Panel Showcase in the Grafana Playground](http://play.grafana.org/dashboard/db/table-panel-showcase) or read more about it here:
[http://docs.grafana.org/reference/table_panel/](http://docs.grafana.org/reference/table_panel/) [https://grafana.com/docs/grafana/latest/features/panels/table_panel/](https://grafana.com/docs/grafana/latest/features/panels/table_panel/)
public/app/plugins/panel/table2/plugin.json → public/app/plugins/panel/table-old/plugin.json
{ {
"type": "panel", "type": "panel",
"name": "React Table", "name": "Table (old)",
"id": "table2", "id": "table-old",
"state": "alpha",
"state": "deprecated",
"info": { "info": {
"description": "Table Panel for Grafana",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/panel/table-old/types.ts 0 → 100644
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;
}
public/app/plugins/panel/table/migrations.ts 0 → 100644
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;
};
public/app/plugins/panel/table2/module.tsx → public/app/plugins/panel/table/module.tsx
import { PanelPlugin } from '@grafana/data'; import { PanelPlugin } from '@grafana/data';
import { TablePanel } from './TablePanel'; import { TablePanel } from './TablePanel';
import { CustomFieldConfig, Options } from './types'; import { CustomFieldConfig, Options } from './types';
import { tablePanelChangedHandler, tableMigrationHandler } from './migrations';
export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel) export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
.setPanelChangeHandler(tablePanelChangedHandler)
.setMigrationHandler(tableMigrationHandler)
.useFieldConfig({ .useFieldConfig({
useCustomConfig: builder => { useCustomConfig: builder => {
builder builder
......
public/app/plugins/panel/table/types.ts
import TableModel from 'app/core/table_model'; export interface Options {
import { Column } from '@grafana/data'; showHeader: boolean;
resizable: boolean;
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 { export interface CustomFieldConfig {
columns: ColumnRender[]; width: number;
rows: any[][]; displayMode: string;
}
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;
} }
public/app/plugins/panel/table2/types.ts deleted 100644 → 0
export interface Options {
showHeader: boolean;
resizable: boolean;
}
export interface CustomFieldConfig {
width: number;
displayMode: string;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment