fixed issues when changing type, need to remove event listeners and cleanup props

public/app/core/constants.ts

@@ -14,3 +14,4 @@ export const DASHBOARD_TOP_PADDING = 20;
 
 
 export const PANEL_HEADER_HEIGHT = 27;
 export const PANEL_HEADER_HEIGHT = 27;
 export const PANEL_BORDER = 2;
 export const PANEL_BORDER = 2;
+export const PANEL_OPTIONS_KEY_PREFIX = 'options-';

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

@@ -55,7 +55,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
   }
   }
 
 
   onPluginTypeChanged = (plugin: PanelPlugin) => {
   onPluginTypeChanged = (plugin: PanelPlugin) => {
-    this.props.panel.changeType(plugin.id);
+    this.props.panel.changeType(plugin.id, this.state.angularPanel !== null);
     this.loadPlugin();
     this.loadPlugin();
   };
   };
 
 

public/app/features/dashboard/panel_model.ts

 import { Emitter } from 'app/core/utils/emitter';
 import { Emitter } from 'app/core/utils/emitter';
 import _ from 'lodash';
 import _ from 'lodash';
+import { PANEL_OPTIONS_KEY_PREFIX } from 'app/core/constants';
 
 
 export interface GridPos {
 export interface GridPos {
   x: number;
   x: number;
@@ -16,6 +17,42 @@ const notPersistedProperties: { [str: string]: boolean } = {
   hasRefreshed: true,
   hasRefreshed: true,
 };
 };
 
 
+// For angular panels we need to clean up properties when changing type
+// To make sure the change happens without strange bugs happening when panels use same
+// named property with different type / value expectations
+// This is not required for react panels
+
+const mustKeepProps: { [str: string]: boolean } = {
+  id: true,
+  gridPos: true,
+  type: true,
+  title: true,
+  scopedVars: true,
+  repeat: true,
+  repeatIteration: true,
+  repeatPanelId: true,
+  repeatDirection: true,
+  repeatedByRow: true,
+  minSpan: true,
+  collapsed: true,
+  panels: true,
+  targets: true,
+  datasource: true,
+  timeFrom: true,
+  timeShift: true,
+  hideTimeOverride: true,
+  maxDataPoints: true,
+  interval: true,
+  description: true,
+  links: true,
+  fullscreen: true,
+  isEditing: true,
+  hasRefreshed: true,
+  events: true,
+  cacheTimeout: true,
+  nullPointMode: true,
+};
+
 const defaults: any = {
 const defaults: any = {
   gridPos: { x: 0, y: 0, h: 3, w: 6 },
   gridPos: { x: 0, y: 0, h: 3, w: 6 },
   datasource: null,
   datasource: null,
@@ -82,7 +119,7 @@ export class PanelModel {
   }
   }
 
 
   private getOptionsKey() {
   private getOptionsKey() {
-    return this.type + 'Options';
+    return 'options-' + this.type;
   }
   }
 
 
   getSaveModel() {
   getSaveModel() {
@@ -146,11 +183,25 @@ export class PanelModel {
     this.events.emit('panel-initialized');
     this.events.emit('panel-initialized');
   }
   }
 
 
-  changeType(pluginId: string) {
+  changeType(pluginId: string, fromAngularPanel: boolean) {
     this.type = pluginId;
     this.type = pluginId;
 
 
-    delete this.thresholds;
+    // for now we need to remove alert rules when changing type
     delete this.alert;
     delete this.alert;
+
+    // for angular panels only we need to remove all events and let angular panels do some cleanup
+    if (fromAngularPanel) {
+      this.destroy();
+
+      for (const key of _.keys(this)) {
+        if (mustKeepProps[key] || key.indexOf(PANEL_OPTIONS_KEY_PREFIX) === 0) {
+          continue;
+        }
+
+        delete this[key];
+        console.log('deleting ', key);
+      }
+    }
   }
   }
 
 
   destroy() {
   destroy() {