Moved query manipulations from metrics controller to metrics tab so they are…

Moved query manipulations from metrics controller to metrics tab so they are more easily shared between angular and react panels

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

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

public/app/features/panel/metrics_panel_ctrl.ts

@@ -27,7 +27,6 @@ class MetricsPanelCtrl extends PanelCtrl {
   dataStream: any;
   dataStream: any;
   dataSubscription: any;
   dataSubscription: any;
   dataList: any;
   dataList: any;
-  nextRefId: string;
 
 
   constructor($scope, $injector) {
   constructor($scope, $injector) {
     super($scope, $injector);
     super($scope, $injector);
@@ -263,25 +262,6 @@ class MetricsPanelCtrl extends PanelCtrl {
       this.$timeout(() => this.$location.url(url));
       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 };
 export { MetricsPanelCtrl };

public/app/features/panel/metrics_tab.ts

@@ -48,7 +48,7 @@ export class MetricsTabCtrl {
     this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
     this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
 
 
     // update next ref id
     // update next ref id
-    this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
+    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
     this.updateDatasourceOptions();
     this.updateDatasourceOptions();
   }
   }
 
 
@@ -112,10 +112,6 @@ export class MetricsTabCtrl {
     this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
     this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
   }
   }
 
 
-  addQuery() {
-    this.panelCtrl.addQuery({ isNew: true });
-  }
-
   toggleHelp() {
   toggleHelp() {
     this.optionsOpen = false;
     this.optionsOpen = false;
     this.queryTroubleshooterOpen = false;
     this.queryTroubleshooterOpen = false;
@@ -138,6 +134,35 @@ export class MetricsTabCtrl {
     this.optionsOpen = false;
     this.optionsOpen = false;
     this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
     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 */
 /** @ngInject */

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

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

public/app/features/plugins/plugin_component.ts

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

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

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

public/sass/pages/_dashboard.scss

@@ -148,6 +148,20 @@ div.flot-text {
   color: $text-color-weak;
   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 {
 .panel-header {
   &:hover {
   &:hover {
     transition: background-color 0.1s ease-in-out;
     transition: background-color 0.1s ease-in-out;