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

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