Merge branch 'drop-panel-plugin-setters' of https://github.com/ryantxu/grafana into ryantxu-drop-panel-plugin-setters

packages/grafana-ui/src/types/panel.ts

@@ -24,7 +24,7 @@ export interface PanelEditorProps<T = any> {
 /**
  * Called when a panel is first loaded with existing options
  */
-export type PanelMigrationHook<TOptions = any> = (options: Partial<TOptions>) => Partial<TOptions>;
+export type PanelMigrationHook<TOptions = any> = (exiting: any, oldVersion?: string) => Partial<TOptions>;
 
 /**
  * Called before a panel is initalized
@@ -40,34 +40,23 @@ export class ReactPanelPlugin<TOptions = any> {
   editor?: ComponentClass<PanelEditorProps<TOptions>>;
   defaults?: TOptions;
 
-  panelMigrationHook?: PanelMigrationHook<TOptions>;
-  panelTypeChangedHook?: PanelTypeChangedHook<TOptions>;
-
-  constructor(panel: ComponentClass<PanelProps<TOptions>>) {
-    this.panel = panel;
-  }
-
-  setEditor(editor: ComponentClass<PanelEditorProps<TOptions>>) {
-    this.editor = editor;
-  }
-
-  setDefaults(defaults: TOptions) {
-    this.defaults = defaults;
-  }
-
   /**
-   * Called when the panel first loaded with
+   * This function is called before the panel first loads if
+   * the current version is different than the version that was saved.
+   *
+   * This is a good place to support any changes to the options model
    */
-  setPanelMigrationHook(v: PanelMigrationHook<TOptions>) {
-    this.panelMigrationHook = v;
-  }
+  onPanelMigration?: PanelMigrationHook<TOptions>;
 
   /**
-   * Called when the visualization changes.
-   * Lets you keep whatever settings made sense in the previous panel
+   * This function is called when the visualization was changed.  This
+   * passes in the options that were used in the previous visualization
    */
-  setPanelTypeChangedHook(v: PanelTypeChangedHook<TOptions>) {
-    this.panelTypeChangedHook = v;
+  onPanelTypeChanged?: PanelTypeChangedHook<TOptions>;
+
+  constructor(panel: ComponentClass<PanelProps<TOptions>>, defaults?: TOptions) {
+    this.panel = panel;
+    this.defaults = defaults;
   }
 }
 

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import config from 'app/core/config';
 import classNames from 'classnames';
+import get from 'lodash/get';
 
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
@@ -94,17 +95,18 @@ export class DashboardPanel extends PureComponent<Props, State> {
         } else {
           let hook: PanelTypeChangedHook | null = null;
           if (plugin.exports.reactPanel) {
-            hook = plugin.exports.reactPanel.panelTypeChangedHook;
+            hook = plugin.exports.reactPanel.onPanelTypeChanged;
           }
           panel.changeType(pluginId, hook);
         }
       } else if (plugin.exports && plugin.exports.reactPanel && panel.options) {
-        const hook = plugin.exports.reactPanel.panelMigrationHook;
-        if (hook) {
-          panel.options = hook(panel.options);
+        const pluginVersion = get(plugin, 'info.version') || config.buildInfo.version;
+        const hook = plugin.exports.reactPanel.onPanelMigration;
+        if (hook && panel.pluginVersion !== pluginVersion) {
+          panel.options = hook(panel.options, panel.pluginVersion);
+          panel.pluginVersion = pluginVersion;
         }
       }
-
       this.setState({ plugin, angularPanel: null });
     }
   }

public/app/features/dashboard/state/PanelModel.ts

@@ -58,6 +58,7 @@ const mustKeepProps: { [str: string]: boolean } = {
   cacheTimeout: true,
   cachedPluginOptions: true,
   transparent: true,
+  pluginVersion: true,
 };
 
 const defaults: any = {
@@ -87,6 +88,7 @@ export class PanelModel {
   targets: DataQuery[];
   datasource: string;
   thresholds?: any;
+  pluginVersion?: string;
 
   snapshotData?: TimeSeries[] | [TableData];
   timeFrom?: any;

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

@@ -5,8 +5,7 @@ import { BarGaugePanelEditor } from './BarGaugePanelEditor';
 import { BarGaugeOptions, defaults } from './types';
 import { singleStatBaseOptionsCheck } from '../singlestat2/module';
 
-export const reactPanel = new ReactPanelPlugin<BarGaugeOptions>(BarGaugePanel);
+export const reactPanel = new ReactPanelPlugin<BarGaugeOptions>(BarGaugePanel, defaults);
 
-reactPanel.setEditor(BarGaugePanelEditor);
-reactPanel.setDefaults(defaults);
-reactPanel.setPanelTypeChangedHook(singleStatBaseOptionsCheck);
+reactPanel.editor = BarGaugePanelEditor;
+reactPanel.onPanelTypeChanged = singleStatBaseOptionsCheck;

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

@@ -3,10 +3,10 @@ import { ReactPanelPlugin } from '@grafana/ui';
 import { GaugePanelEditor } from './GaugePanelEditor';
 import { GaugePanel } from './GaugePanel';
 import { GaugeOptions, defaults } from './types';
-import { singleStatBaseOptionsCheck } from '../singlestat2/module';
+import { singleStatBaseOptionsCheck, singleStatMigrationCheck } from '../singlestat2/module';
 
-export const reactPanel = new ReactPanelPlugin<GaugeOptions>(GaugePanel);
+export const reactPanel = new ReactPanelPlugin<GaugeOptions>(GaugePanel, defaults);
 
-reactPanel.setEditor(GaugePanelEditor);
-reactPanel.setDefaults(defaults);
-reactPanel.setPanelTypeChangedHook(singleStatBaseOptionsCheck);
+reactPanel.editor = GaugePanelEditor;
+reactPanel.onPanelTypeChanged = singleStatBaseOptionsCheck;
+reactPanel.onPanelMigration = singleStatMigrationCheck;

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

@@ -2,7 +2,8 @@ import { ReactPanelPlugin } from '@grafana/ui';
 
 import { GraphPanelEditor } from './GraphPanelEditor';
 import { GraphPanel } from './GraphPanel';
-import { Options } from './types';
+import { Options, defaults } from './types';
 
-export const reactPanel = new ReactPanelPlugin<Options>(GraphPanel);
-reactPanel.setEditor(GraphPanelEditor);
+export const reactPanel = new ReactPanelPlugin<Options>(GraphPanel, defaults);
+
+reactPanel.editor = GraphPanelEditor;

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

@@ -3,3 +3,9 @@ export interface Options {
   showLines: boolean;
   showPoints: boolean;
 }
+
+export const defaults: Options = {
+  showBars: false,
+  showLines: true,
+  showPoints: false,
+};

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

@@ -5,8 +5,7 @@ import { PieChartPanel } from './PieChartPanel';
 import { PieChartOptions, defaults } from './types';
 import { singleStatBaseOptionsCheck } from '../singlestat2/module';
 
-export const reactPanel = new ReactPanelPlugin<PieChartOptions>(PieChartPanel);
+export const reactPanel = new ReactPanelPlugin<PieChartOptions>(PieChartPanel, defaults);
 
-reactPanel.setEditor(PieChartPanelEditor);
-reactPanel.setDefaults(defaults);
-reactPanel.setPanelTypeChangedHook(singleStatBaseOptionsCheck);
+reactPanel.editor = PieChartPanelEditor;
+reactPanel.onPanelTypeChanged = singleStatBaseOptionsCheck;

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

@@ -4,8 +4,6 @@ import { SingleStatPanel } from './SingleStatPanel';
 import cloneDeep from 'lodash/cloneDeep';
 import { SingleStatEditor } from './SingleStatEditor';
 
-export const reactPanel = new ReactPanelPlugin<SingleStatOptions>(SingleStatPanel);
-
 const optionsToKeep = ['valueOptions', 'stat', 'maxValue', 'maxValue', 'thresholds', 'valueMappings'];
 
 export const singleStatBaseOptionsCheck = (
@@ -23,17 +21,22 @@ export const singleStatBaseOptionsCheck = (
   return options;
 };
 
-export const singleStatMigrationCheck = (options: Partial<SingleStatBaseOptions>) => {
-  // 6.1 renamed some stats, This makes sure they are up to date
-  // avg -> mean, current -> last, total -> sum
-  const { valueOptions } = options;
-  if (valueOptions && valueOptions.stat) {
-    valueOptions.stat = getStatsCalculators([valueOptions.stat]).map(s => s.id)[0];
+export const singleStatMigrationCheck = (exiting: any, oldVersion?: string) => {
+  const options = exiting as Partial<SingleStatOptions>;
+  if (options.valueOptions) {
+    // 6.1 renamed some stats, This makes sure they are up to date
+    // avg -> mean, current -> last, total -> sum
+
+    const { valueOptions } = options;
+    if (valueOptions && valueOptions.stat) {
+      valueOptions.stat = getStatsCalculators([valueOptions.stat]).map(s => s.id)[0];
+    }
   }
   return options;
 };
 
-reactPanel.setEditor(SingleStatEditor);
-reactPanel.setDefaults(defaults);
-reactPanel.setPanelTypeChangedHook(singleStatBaseOptionsCheck);
-reactPanel.setPanelMigrationHook(singleStatMigrationCheck);
+export const reactPanel = new ReactPanelPlugin<SingleStatOptions>(SingleStatPanel, defaults);
+
+reactPanel.editor = SingleStatEditor;
+reactPanel.onPanelTypeChanged = singleStatBaseOptionsCheck;
+reactPanel.onPanelMigration = singleStatMigrationCheck;

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

@@ -4,6 +4,5 @@ import { TablePanelEditor } from './TablePanelEditor';
 import { TablePanel } from './TablePanel';
 import { Options, defaults } from './types';
 
-export const reactPanel = new ReactPanelPlugin<Options>(TablePanel);
-reactPanel.setEditor(TablePanelEditor);
-reactPanel.setDefaults(defaults);
+export const reactPanel = new ReactPanelPlugin<Options>(TablePanel, defaults);
+reactPanel.editor = TablePanelEditor;

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

@@ -4,14 +4,12 @@ import { TextPanelEditor } from './TextPanelEditor';
 import { TextPanel } from './TextPanel';
 import { TextOptions, defaults } from './types';
 
-export const reactPanel = new ReactPanelPlugin<TextOptions>(TextPanel);
+export const reactPanel = new ReactPanelPlugin<TextOptions>(TextPanel, defaults);
 
-reactPanel.setEditor(TextPanelEditor);
-reactPanel.setDefaults(defaults);
-reactPanel.setPanelTypeChangedHook((options: TextOptions, prevPluginId: string, prevOptions: any) => {
+reactPanel.editor = TextPanelEditor;
+reactPanel.onPanelTypeChanged = (options: TextOptions, prevPluginId: string, prevOptions: any) => {
   if (prevPluginId === 'text') {
     return prevOptions as TextOptions;
   }
-
   return options;
-});
+};