copying options between visualizations

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

@@ -25,7 +25,7 @@ export interface PanelEditorProps<T = any> {
   onChange: (options: T) => void;
 }
 
-export type PreservePanelOptionsHandler<TOptions> = (pluginId: string, prevOptions: any) => Partial<TOptions>;
+export type PreservePanelOptionsHandler<TOptions = any> = (pluginId: string, prevOptions: any) => Partial<TOptions>;
 
 export class ReactPanelPlugin<TOptions = any> {
   panel: ComponentClass<PanelProps<TOptions>>;

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

@@ -85,7 +85,14 @@ export class DashboardPanel extends PureComponent<Props, State> {
       }
 
       if (panel.type !== pluginId) {
-        this.props.panel.changeType(pluginId, fromAngularPanel);
+        if (fromAngularPanel) {
+          // for angular panels only we need to remove all events and let angular panels do some cleanup
+          panel.destroy();
+
+          this.props.panel.changeType(pluginId);
+        } else {
+          panel.changeType(pluginId, plugin.exports.reactPanel.preserveOptions);
+        }
       }
 
       this.setState({ plugin, angularPanel: null });

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

@@ -228,10 +228,6 @@ export class PanelModel {
     }, {});
   }
 
-  private saveCurrentPanelOptions() {
-    this.cachedPluginOptions[this.type] = this.getOptionsToRemember();
-  }
-
   private restorePanelOptions(pluginId: string) {
     const prevOptions = this.cachedPluginOptions[pluginId] || {};
 
@@ -240,14 +236,11 @@ export class PanelModel {
     });
   }
 
-  changeType(pluginId: string, fromAngularPanel: boolean) {
+  changeType(pluginId: string, preserveOptions?: any) {
-    this.saveCurrentPanelOptions();
+    const oldOptions: any = this.getOptionsToRemember();
-    this.type = pluginId;
+    const oldPluginId = this.type;
 
-    // for angular panels only we need to remove all events and let angular panels do some cleanup
+    this.type = pluginId;
-    if (fromAngularPanel) {
-      this.destroy();
-    }
 
     // remove panel type specific  options
     for (const key of _.keys(this)) {
@@ -258,7 +251,13 @@ export class PanelModel {
       delete this[key];
     }
 
+    this.cachedPluginOptions[oldPluginId] = oldOptions;
     this.restorePanelOptions(pluginId);
+
+    if (preserveOptions && oldOptions) {
+      this.options = this.options || {};
+      Object.assign(this.options, preserveOptions(oldPluginId, oldOptions.options));
+    }
   }
 
   addQuery(query?: Partial<DataQuery>) {

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

@@ -8,3 +8,15 @@ export const reactPanel = new ReactPanelPlugin<BarGaugeOptions>(BarGaugePanel);
 
 reactPanel.setEditor(BarGaugePanelEditor);
 reactPanel.setDefaults(defaults);
+reactPanel.setPreserveOptionsHandler((pluginId: string, prevOptions: any) => {
+  const options: Partial<BarGaugeOptions> = {};
+
+  if (prevOptions.valueOptions) {
+    options.valueOptions = prevOptions.valueOptions;
+    options.thresholds = prevOptions.thresholds;
+    options.maxValue = prevOptions.maxValue;
+    options.minValue = prevOptions.minValue;
+  }
+
+  return options;
+});

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

@@ -11,8 +11,11 @@ reactPanel.setDefaults(defaults);
 reactPanel.setPreserveOptionsHandler((pluginId: string, prevOptions: any) => {
   const options: Partial<GaugeOptions> = {};
 
-  if (prevOptions.valueOptions.unit) {
+  if (prevOptions.valueOptions) {
     options.valueOptions = prevOptions.valueOptions;
+    options.thresholds = prevOptions.thresholds;
+    options.maxValue = prevOptions.maxValue;
+    options.minValue = prevOptions.minValue;
   }
 
   return options;