Began work on handling panel type switching and keep setting

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

@@ -25,10 +25,13 @@ export interface PanelEditorProps<T = any> {
   onChange: (options: T) => void;
 }
 
+export type PreservePanelOptionsHandler<TOptions> = (pluginId: string, prevOptions: any) => Partial<TOptions>;
+
 export class ReactPanelPlugin<TOptions = any> {
   panel: ComponentClass<PanelProps<TOptions>>;
   editor?: ComponentClass<PanelEditorProps<TOptions>>;
   defaults?: TOptions;
+  preserveOptions?: PreservePanelOptionsHandler<TOptions>;
 
   constructor(panel: ComponentClass<PanelProps<TOptions>>) {
     this.panel = panel;
@@ -41,6 +44,10 @@ export class ReactPanelPlugin<TOptions = any> {
   setDefaults(defaults: TOptions) {
     this.defaults = defaults;
   }
+
+  setPreserveOptionsHandler(handler: PreservePanelOptionsHandler<TOptions>) {
+    this.preserveOptions = handler;
+  }
 }
 
 export interface PanelSize {

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

@@ -76,23 +76,21 @@ export class DashboardPanel extends PureComponent<Props, State> {
       // unmount angular panel
       this.cleanUpAngularPanel();
 
-      if (panel.type !== pluginId) {
+      if (!plugin.exports) {
-        this.props.panel.changeType(pluginId, fromAngularPanel);
-      }
-
-      if (plugin.exports) {
-        this.setState({ plugin, angularPanel: null });
-      } else {
         try {
           plugin.exports = await importPluginModule(plugin.module);
         } catch (e) {
           plugin = getPanelPluginNotFound(pluginId);
         }
+      }
+
+      if (panel.type !== pluginId) {
+        this.props.panel.changeType(pluginId, fromAngularPanel);
+      }
 
       this.setState({ plugin, angularPanel: null });
     }
   }
-  }
 
   componentDidMount() {
     this.loadPlugin(this.props.panel.type);

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

@@ -19,6 +19,6 @@ export const defaults: BarGaugeOptions = {
     suffix: '',
     decimals: null,
   },
-  thresholds: [{ index: 2, value: 80, color: 'red' }, { index: 0, value: -Infinity, color: 'green' }],
+  thresholds: [{ index: 1, value: 80, color: 'red' }, { index: 0, value: -Infinity, color: 'green' }],
   valueMappings: [],
 };

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

@@ -8,3 +8,12 @@ export const reactPanel = new ReactPanelPlugin<GaugeOptions>(GaugePanel);
 
 reactPanel.setEditor(GaugePanelEditor);
 reactPanel.setDefaults(defaults);
+reactPanel.setPreserveOptionsHandler((pluginId: string, prevOptions: any) => {
+  const options: Partial<GaugeOptions> = {};
+
+  if (prevOptions.valueOptions.unit) {
+    options.valueOptions = prevOptions.valueOptions;
+  }
+
+  return options;
+});

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

@@ -31,5 +31,5 @@ export const defaults: GaugeOptions = {
     unit: 'none',
   },
   valueMappings: [],
-  thresholds: [],
+  thresholds: [{ index: 1, value: 80, color: 'red' }, { index: 0, value: -Infinity, color: 'green' }],
 };