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`
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -191,7 +191,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -285,7 +285,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -410,7 +410,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -523,7 +523,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -617,7 +617,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -717,7 +717,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"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`] = `
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -477,7 +477,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -719,7 +719,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......@@ -961,7 +961,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 23,
"schemaVersion": 24,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
......
public/app/features/dashboard/state/DashboardMigrator.test.ts
......@@ -111,6 +111,10 @@ describe('DashboardModel', () => {
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', () => {
expect(graph.yaxes[0].min).toBe(1);
expect(graph.yaxes[0].max).toBe(10);
......@@ -128,7 +132,7 @@ describe('DashboardModel', () => {
});
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', () => {
......
public/app/features/dashboard/state/DashboardMigrator.ts
......@@ -32,7 +32,7 @@ export class DashboardMigrator {
let i, j, k, n;
const oldVersion = this.dashboard.schemaVersion;
const panelUpgrades = [];
this.dashboard.schemaVersion = 23;
this.dashboard.schemaVersion = 24;
if (oldVersion === this.dashboard.schemaVersion) {
return;
......@@ -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) {
return;
}
......
public/app/features/plugins/built_in_plugins.ts
......@@ -44,7 +44,7 @@ import * as alertListPanel from 'app/plugins/panel/alertlist/module';
import * as annoListPanel from 'app/plugins/panel/annolist/module';
import * as heatmapPanel from 'app/plugins/panel/heatmap/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 singlestatPanel2 from 'app/plugins/panel/stat/module';
import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module';
......@@ -84,7 +84,7 @@ const builtInPlugins: any = {
'app/plugins/panel/annolist/module': annoListPanel,
'app/plugins/panel/heatmap/module': heatmapPanel,
'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/singlestat/module': singlestatPanel,
'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
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",
"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"
......
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 { 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
......
public/app/plugins/panel/table/types.ts
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;
}
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