various fixes to to queries tab (in react mode)

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

-import React from 'react';
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Services & utils
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+
+// Types
 import { PanelModel } from '../panel_model';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { DashboardModel } from '../dashboard_model';
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 
 
 interface Props {
 interface Props {
   panel: PanelModel;
   panel: PanelModel;
   dashboard: DashboardModel;
   dashboard: DashboardModel;
 }
 }
 
 
-export class QueriesTab extends React.Component<Props, any> {
+export class QueriesTab extends PureComponent<Props> {
   element: any;
   element: any;
   component: AngularComponent;
   component: AngularComponent;
 
 
@@ -29,10 +34,7 @@ export class QueriesTab extends React.Component<Props, any> {
       ctrl: {
       ctrl: {
         panel: panel,
         panel: panel,
         dashboard: dashboard,
         dashboard: dashboard,
-        panelCtrl: {
-          panel: panel,
-          dashboard: dashboard,
-        },
+        refresh: () => panel.refresh(),
       },
       },
     };
     };
 
 

public/app/features/dashboard/panel_model.ts

@@ -16,6 +16,12 @@ const notPersistedProperties: { [str: string]: boolean } = {
   hasRefreshed: true,
   hasRefreshed: true,
 };
 };
 
 
+const defaults: any = {
+  gridPos: { x: 0, y: 0, h: 3, w: 6 },
+  datasource: null,
+  targets: [{}],
+};
+
 export class PanelModel {
 export class PanelModel {
   id: number;
   id: number;
   gridPos: GridPos;
   gridPos: GridPos;
@@ -51,7 +57,7 @@ export class PanelModel {
     }
     }
 
 
     // defaults
     // defaults
-    this.gridPos = this.gridPos || { x: 0, y: 0, h: 3, w: 6 };
+    _.defaultsDeep(this, _.cloneDeep(defaults));
   }
   }
 
 
   getSaveModel() {
   getSaveModel() {
@@ -61,6 +67,10 @@ export class PanelModel {
         continue;
         continue;
       }
       }
 
 
+      if (_.isEqual(this[property], defaults[property])) {
+        continue;
+      }
+
       model[property] = _.cloneDeep(this[property]);
       model[property] = _.cloneDeep(this[property]);
     }
     }
 
 

public/app/features/dashboard/specs/exporter.test.ts

@@ -240,5 +240,5 @@ stubs['-- Grafana --'] = {
 };
 };
 
 
 function getStub(arg) {
 function getStub(arg) {
-  return Promise.resolve(stubs[arg]);
+  return Promise.resolve(stubs[arg || 'gfdb']);
 }
 }

public/app/features/panel/metrics_panel_ctrl.ts

@@ -12,7 +12,6 @@ import { metricsTabDirective } from './metrics_tab';
 class MetricsPanelCtrl extends PanelCtrl {
 class MetricsPanelCtrl extends PanelCtrl {
   scope: any;
   scope: any;
   datasource: any;
   datasource: any;
-  datasourceName: any;
   $q: any;
   $q: any;
   $timeout: any;
   $timeout: any;
   contextSrv: any;
   contextSrv: any;
@@ -287,27 +286,6 @@ class MetricsPanelCtrl extends PanelCtrl {
     });
     });
   }
   }
 
 
-  setDatasource(datasource) {
-    // switching to mixed
-    if (datasource.meta.mixed) {
-      _.each(this.panel.targets, target => {
-        target.datasource = this.panel.datasource;
-        if (!target.datasource) {
-          target.datasource = config.defaultDatasource;
-        }
-      });
-    } else if (this.datasource && this.datasource.meta.mixed) {
-      _.each(this.panel.targets, target => {
-        delete target.datasource;
-      });
-    }
-
-    this.panel.datasource = datasource.value;
-    this.datasourceName = datasource.name;
-    this.datasource = null;
-    this.refresh();
-  }
-
   getAdditionalMenuItems() {
   getAdditionalMenuItems() {
     const items = [];
     const items = [];
     if (
     if (

public/app/features/panel/metrics_tab.ts

-import { DashboardModel } from '../dashboard/dashboard_model';
+// Libraries
+import _ from 'lodash';
 import Remarkable from 'remarkable';
 import Remarkable from 'remarkable';
+
+// Services & utils
 import coreModule from 'app/core/core_module';
 import coreModule from 'app/core/core_module';
+import config from 'app/core/config';
+
+// Types
+import { DashboardModel } from '../dashboard/dashboard_model';
 
 
 export class MetricsTabCtrl {
 export class MetricsTabCtrl {
   dsName: string;
   dsName: string;
@@ -70,10 +77,29 @@ export class MetricsTabCtrl {
     }
     }
 
 
     this.datasourceInstance = option.datasource;
     this.datasourceInstance = option.datasource;
-    this.panelCtrl.setDatasource(option.datasource);
+    this.setDatasource(option.datasource);
     this.updateDatasourceOptions();
     this.updateDatasourceOptions();
   }
   }
 
 
+  setDatasource(datasource) {
+    // switching to mixed
+    if (datasource.meta.mixed) {
+      _.each(this.panel.targets, target => {
+        target.datasource = this.panel.datasource;
+        if (!target.datasource) {
+          target.datasource = config.defaultDatasource;
+        }
+      });
+    } else if (this.datasourceInstance && this.datasourceInstance.meta.mixed) {
+      _.each(this.panel.targets, target => {
+        delete target.datasource;
+      });
+    }
+
+    this.panel.datasource = datasource.value;
+    this.panel.refresh();
+  }
+
   addMixedQuery(option) {
   addMixedQuery(option) {
     if (!option) {
     if (!option) {
       return;
       return;

public/app/plugins/panel/graph/module.ts

@@ -179,7 +179,6 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
   }
 
 
   onDataReceived(dataList) {
   onDataReceived(dataList) {
-    console.log(dataList);
     this.dataList = dataList;
     this.dataList = dataList;
     this.seriesList = this.processor.getSeriesList({
     this.seriesList = this.processor.getSeriesList({
       dataList: dataList,
       dataList: dataList,