PanelModel: Clear queryRunner on destroy (#16906)

* PanelModel: Clear queryRunner on destroy

* fix test asumptions

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

@@ -87,10 +87,7 @@ describe('PanelModel', () => {
     });
     });
 
 
     describe('when changing panel type', () => {
     describe('when changing panel type', () => {
-      let panelQueryRunner: any;
-
       beforeEach(() => {
       beforeEach(() => {
-        panelQueryRunner = model.getQueryRunner();
         model.changePlugin(getPanelPlugin({ id: 'graph' }));
         model.changePlugin(getPanelPlugin({ id: 'graph' }));
         model.alert = { id: 2 };
         model.alert = { id: 2 };
       });
       });
@@ -109,9 +106,9 @@ describe('PanelModel', () => {
         expect(model.alert).toBe(undefined);
         expect(model.alert).toBe(undefined);
       });
       });
 
 
-      it('getQueryRunner() should return same instance after plugin change', () => {
-        const sameQueryRunner = model.getQueryRunner();
-        expect(panelQueryRunner).toBe(sameQueryRunner);
+      it('panelQueryRunner should be cleared', () => {
+        const panelQueryRunner = (model as any).queryRunner;
+        expect(panelQueryRunner).toBeFalsy();
       });
       });
     });
     });
 
 
@@ -131,12 +128,15 @@ describe('PanelModel', () => {
       });
       });
     });
     });
 
 
-    describe('when changing to react panel', () => {
+    describe('when changing to react panel from angular panel', () => {
+      let panelQueryRunner: any;
+
       const onPanelTypeChanged = jest.fn();
       const onPanelTypeChanged = jest.fn();
       const reactPlugin = getPanelPlugin({ id: 'react' }).setPanelChangeHandler(onPanelTypeChanged as any);
       const reactPlugin = getPanelPlugin({ id: 'react' }).setPanelChangeHandler(onPanelTypeChanged as any);
 
 
       beforeEach(() => {
       beforeEach(() => {
         model.changePlugin(reactPlugin);
         model.changePlugin(reactPlugin);
+        panelQueryRunner = model.getQueryRunner();
       });
       });
 
 
       it('should call react onPanelTypeChanged', () => {
       it('should call react onPanelTypeChanged', () => {
@@ -144,6 +144,12 @@ describe('PanelModel', () => {
         expect(onPanelTypeChanged.mock.calls[0][1]).toBe('table');
         expect(onPanelTypeChanged.mock.calls[0][1]).toBe('table');
         expect(onPanelTypeChanged.mock.calls[0][2].thresholds).toBeDefined();
         expect(onPanelTypeChanged.mock.calls[0][2].thresholds).toBeDefined();
       });
       });
+
+      it('getQueryRunner() should return same instance after changing to another react panel', () => {
+        model.changePlugin(getPanelPlugin({ id: 'react2' }));
+        const sameQueryRunner = model.getQueryRunner();
+        expect(panelQueryRunner).toBe(sameQueryRunner);
+      });
     });
     });
 
 
     describe('get panel options', () => {
     describe('get panel options', () => {

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

@@ -336,6 +336,7 @@ export class PanelModel {
 
 
     if (this.queryRunner) {
     if (this.queryRunner) {
       this.queryRunner.destroy();
       this.queryRunner.destroy();
+      this.queryRunner = null;
     }
     }
   }
   }
 }
 }

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

@@ -41,7 +41,7 @@ export class PanelQueryState {
   sendLegacy = false;
   sendLegacy = false;
 
 
   // A promise for the running query
   // A promise for the running query
-  private executor?: Promise<PanelData>;
+  private executor?: Promise<PanelData> = null;
   private rejector = (reason?: any) => {};
   private rejector = (reason?: any) => {};
   private datasource: DataSourceApi = {} as any;
   private datasource: DataSourceApi = {} as any;