From 89883c2cf6d249a34146bbff8cbbdaa39bc5bd7f Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 21 Feb 2019 13:43:36 +0100
Subject: [PATCH] copying options between visualizations

---
 packages/grafana-ui/src/types/panel.ts        |  2 +-
 .../dashboard/dashgrid/DashboardPanel.tsx     |  9 +++++++-
 .../features/dashboard/state/PanelModel.ts    | 21 +++++++++----------
 public/app/plugins/panel/bargauge/module.tsx  | 12 +++++++++++
 public/app/plugins/panel/gauge/module.tsx     |  5 ++++-
 5 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 051798a3792..553adb60ec6 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/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>>;
diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index f4773da9271..3955f45d926 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/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 });
diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts
index ac3722d61c2..681f2281b99 100644
--- a/public/app/features/dashboard/state/PanelModel.ts
+++ b/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) {
-    this.saveCurrentPanelOptions();
-    this.type = pluginId;
+  changeType(pluginId: string, preserveOptions?: any) {
+    const oldOptions: any = this.getOptionsToRemember();
+    const oldPluginId = this.type;
 
-    // for angular panels only we need to remove all events and let angular panels do some cleanup
-    if (fromAngularPanel) {
-      this.destroy();
-    }
+    this.type = pluginId;
 
     // 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>) {
diff --git a/public/app/plugins/panel/bargauge/module.tsx b/public/app/plugins/panel/bargauge/module.tsx
index c16b8121797..d5dcbabc34f 100644
--- a/public/app/plugins/panel/bargauge/module.tsx
+++ b/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;
+});
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index c11d397b425..95a6e29ae4d 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/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;