Merge pull request #14071 from grafana/react-panels-query-editor-fixes

React panels query editor fixes

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

@@ -132,6 +132,7 @@ export class DataPanel extends Component<Props, State> {
   };
 
   render() {
+    const { queries } = this.props;
     const { response, loading, isFirstLoad } = this.state;
     const timeSeries = response.data;
 
@@ -139,6 +140,14 @@ export class DataPanel extends Component<Props, State> {
       return this.renderLoadingSpinner();
     }
 
+    if (!queries.length) {
+      return (
+        <div className="panel-empty">
+          <p>Add a query to get some data!</p>
+        </div>
+      );
+    }
+
     return (
       <>
         {this.renderLoadingSpinner()}

public/app/features/panel/metrics_panel_ctrl.ts

@@ -27,7 +27,6 @@ class MetricsPanelCtrl extends PanelCtrl {
   dataStream: any;
   dataSubscription: any;
   dataList: any;
-  nextRefId: string;
 
   constructor($scope, $injector) {
     super($scope, $injector);
@@ -263,25 +262,6 @@ class MetricsPanelCtrl extends PanelCtrl {
       this.$timeout(() => this.$location.url(url));
     }
   }
-
-  addQuery(target) {
-    target.refId = this.dashboard.getNextQueryLetter(this.panel);
-
-    this.panel.targets.push(target);
-    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
-  }
-
-  removeQuery(target) {
-    const index = _.indexOf(this.panel.targets, target);
-    this.panel.targets.splice(index, 1);
-    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
-    this.refresh();
-  }
-
-  moveQuery(target, direction) {
-    const index = _.indexOf(this.panel.targets, target);
-    _.move(this.panel.targets, index, index + direction);
-  }
 }
 
 export { MetricsPanelCtrl };

public/app/features/panel/metrics_tab.ts

@@ -5,6 +5,7 @@ import Remarkable from 'remarkable';
 // Services & utils
 import coreModule from 'app/core/core_module';
 import config from 'app/core/config';
+import { Emitter } from 'app/core/utils/emitter';
 
 // Types
 import { DashboardModel } from '../dashboard/dashboard_model';
@@ -25,6 +26,7 @@ export class MetricsTabCtrl {
   hasQueryHelp: boolean;
   helpHtml: string;
   queryOptions: any;
+  events: Emitter;
 
   /** @ngInject */
   constructor($scope, private $sce, datasourceSrv, private backendSrv) {
@@ -39,6 +41,10 @@ export class MetricsTabCtrl {
     this.datasources = datasourceSrv.getMetricSources();
     this.panelDsValue = this.panelCtrl.panel.datasource;
 
+    // addded here as old query controller expects this on panelCtrl but
+    // they are getting MetricsTabCtrl instead
+    this.events = this.panel.events;
+
     for (const ds of this.datasources) {
       if (ds.value === this.panelDsValue) {
         this.datasourceInstance = ds;
@@ -48,7 +54,7 @@ export class MetricsTabCtrl {
     this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
 
     // update next ref id
-    this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
+    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
     this.updateDatasourceOptions();
   }
 
@@ -112,10 +118,6 @@ export class MetricsTabCtrl {
     this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
   }
 
-  addQuery() {
-    this.panelCtrl.addQuery({ isNew: true });
-  }
-
   toggleHelp() {
     this.optionsOpen = false;
     this.queryTroubleshooterOpen = false;
@@ -138,6 +140,35 @@ export class MetricsTabCtrl {
     this.optionsOpen = false;
     this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
   }
+
+  addQuery(query?) {
+    query = query || {};
+    query.refId = this.dashboard.getNextQueryLetter(this.panel);
+    query.isNew = true;
+
+    this.panel.targets.push(query);
+    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
+  }
+
+  refresh() {
+    this.panel.refresh();
+  }
+
+  render() {
+    this.panel.render();
+  }
+
+  removeQuery(target) {
+    const index = _.indexOf(this.panel.targets, target);
+    this.panel.targets.splice(index, 1);
+    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
+    this.panel.refresh();
+  }
+
+  moveQuery(target, direction) {
+    const index = _.indexOf(this.panel.targets, target);
+    _.move(this.panel.targets, index, index + direction);
+  }
 }
 
 /** @ngInject */

public/app/features/panel/partials/metrics_tab.html

@@ -83,7 +83,7 @@
 				<span class="gf-form-query-letter-cell-carret">
 					<i class="fa fa-caret-down"></i>
 				</span>
-				<span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span>
+				<span class="gf-form-query-letter-cell-letter">{{ctrl.nextRefId}}</span>
 			</label>
 			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.datasourceInstance.meta.mixed">
 				Add Query

public/app/features/plugins/plugin_component.ts

@@ -116,7 +116,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
               bindings: { target: '=', panelCtrl: '=', datasource: '=' },
               attrs: {
                 target: 'target',
-                'panel-ctrl': 'ctrl.panelCtrl',
+                'panel-ctrl': 'ctrl',
                 datasource: 'datasource',
               },
               Component: dsModule.QueryCtrl,

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

@@ -154,11 +154,6 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
-  moveQuery(target, direction) {
-    super.moveQuery(target, direction);
-    super.refresh();
-  }
-
   exportCsv() {
     const scope = this.$scope.$new(true);
     scope.tableData = this.renderer.render_values();

public/sass/pages/_dashboard.scss

@@ -148,6 +148,20 @@ div.flot-text {
   color: $text-color-weak;
 }
 
+.panel-empty {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  p {
+    text-align: center;
+    color: $text-muted;
+    font-size: $font-size-lg;
+    width: 100%;
+  }
+}
+
 .panel-header {
   &:hover {
     transition: background-color 0.1s ease-in-out;