keep plugin versions

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: any) => Partial<TOptions>;
+export type PanelMigrationHook<TOptions = any> = (exiting: any, oldVersion?: string) => Partial<TOptions>;
 
 /**
  * Called before a panel is initalized
@@ -40,7 +40,18 @@ export class ReactPanelPlugin<TOptions = any> {
   editor?: ComponentClass<PanelEditorProps<TOptions>>;
   defaults?: TOptions;
 
+  /**
+   * 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
+   */
   onPanelMigration?: PanelMigrationHook<TOptions>;
+
+  /**
+   * This function is called when the visualization was changed.  This
+   * passes in the options that were used in the previous visualization
+   */
   onPanelTypeChanged?: PanelTypeChangedHook<TOptions>;
 
   constructor(panel: ComponentClass<PanelProps<TOptions>>, defaults?: TOptions) {

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';
@@ -99,12 +100,13 @@ export class DashboardPanel extends PureComponent<Props, State> {
           panel.changeType(pluginId, hook);
         }
       } else if (plugin.exports && plugin.exports.reactPanel && panel.options) {
+        const pluginVersion = get(plugin, 'info.version') || config.buildInfo.version;
         const hook = plugin.exports.reactPanel.onPanelMigration;
-        if (hook) {
+        if (hook && panel.pluginVersion !== pluginVersion) {
-          panel.options = hook(panel.options);
+          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/singlestat2/module.tsx

@@ -21,13 +21,17 @@ export const singleStatBaseOptionsCheck = (
   return options;
 };
 
-export const singleStatMigrationCheck = (options: Partial<SingleStatBaseOptions>) => {
+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;
 };