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() {
+    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

@@ -48,7 +48,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 +112,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 +134,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;