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

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/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/table-old/plugin.json

@@ -1,10 +1,12 @@
 {
   "type": "panel",
-  "name": "React Table",
+  "name": "Table (old)",
-  "id": "table2",
+  "id": "table-old",
-  "state": "alpha",
+
+  "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,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;
+}

public/app/plugins/panel/table/migrations.ts

@@ -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;
+};

public/app/plugins/panel/table/module.tsx

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

public/app/plugins/panel/table/types.ts

@@ -1,42 +1,9 @@
-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

@@ -1,9 +0,0 @@
-export interface Options {
-  showHeader: boolean;
-  resizable: boolean;
-}
-
-export interface CustomFieldConfig {
-  width: number;
-  displayMode: string;
-}