feat(plugins): migrating graphite query editor to new model

public/app/core/directives/plugin_component.ts

@@ -37,7 +37,7 @@ function pluginDirectiveLoader($compile, datasourceSrv) {
               name: 'metrics-query-editor-' + ds.meta.id,
               bindings: {target: "=", panelCtrl: "=", datasource: "="},
               attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"},
-              Component: dsModule.MetricsQueryEditor
+              Component: dsModule.QueryCtrl
             };
           });
         });

public/app/features/dashboard/dashboardSrv.js

@@ -194,6 +194,16 @@ function (angular, $, _, moment) {
         moment.utc(date).fromNow();
     };
 
+    p.getNextQueryLetter = function(panel) {
+      var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+      return _.find(letters, function(refId) {
+        return _.every(panel.targets, function(other) {
+          return other.refId !== refId;
+        });
+      });
+    };
+
     p._updateSchema = function(old) {
       var i, j, k;
       var oldVersion = this.schemaVersion;

public/app/features/panel/all.js

@@ -3,6 +3,6 @@ define([
   './panel_directive',
   './solo_panel_ctrl',
   './panel_loader',
-  './query_editor',
+  './query_ctrl',
   './panel_editor_tab',
 ], function () {});

public/app/features/panel/panel.ts

@@ -5,11 +5,11 @@ import config from 'app/core/config';
 import {PanelCtrl} from './panel_ctrl';
 import {MetricsPanelCtrl} from './metrics_panel_ctrl';
 import {PanelDirective} from './panel_directive';
-import {QueryEditorCtrl} from './query_editor';
+import {QueryCtrl} from './query_ctrl';
 
 export {
   PanelCtrl,
   MetricsPanelCtrl,
   PanelDirective,
-  QueryEditorCtrl,
+  QueryCtrl,
 }

public/app/features/panel/query_editor.ts → public/app/features/panel/query_ctrl.ts

@@ -3,7 +3,7 @@
 import angular from 'angular';
 import _ from 'lodash';
 
-export class QueryEditorCtrl {
+export class QueryCtrl {
   target: any;
   datasource: any;
   panelCtrl: any;
@@ -27,22 +27,26 @@ export class QueryEditorCtrl {
     });
   }
 
-  removeDataQuery(query) {
-    this.panel.targets = _.without(this.panel.targets, query);
+  removeQuery() {
+    this.panel.targets = _.without(this.panel.targets, this.target);
     this.panelCtrl.refresh();
   };
 
-  duplicateDataQuery(query) {
-    var clone = angular.copy(query);
+  duplicateQuery() {
+    var clone = angular.copy(this.target);
     clone.refId = this.getNextQueryLetter();
     this.panel.targets.push(clone);
   }
 
-  moveDataQuery(direction) {
+  moveQuery(direction) {
     var index = _.indexOf(this.panel.targets, this.target);
     _.move(this.panel.targets, index, index + direction);
   }
 
+  refresh() {
+    this.panelCtrl.refresh();
+  }
+
   toggleHideQuery() {
     this.target.hide = !this.target.hide;
     this.panelCtrl.refresh();