feat(plugins): good progress on converting query editors, graphite's query ctrl…

feat(plugins): good progress on converting query editors, graphite's query ctrl is now working as is unit tests

public/app/core/directives/rebuild_on_change.ts

@@ -28,12 +28,12 @@ function rebuildOnChange($compile) {
   return {
     transclude: true,
     priority: 600,
-    restrict: 'A',
+    restrict: 'E',
     link: function(scope, elem, attrs, ctrl, transclude) {
       var childScope, previousElements;
       var uncompiledHtml;
 
-      scope.$watch(attrs.rebuildOnChange, function rebuildOnChangeAction(value) {
+      scope.$watch(attrs.property, function rebuildOnChangeAction(value) {
 
         if (childScope) {
           childScope.$destroy();
@@ -41,7 +41,7 @@ function rebuildOnChange($compile) {
           elem.empty();
         }
 
-        if (value) {
+        if (value || attrs.ignoreNull) {
           if (!childScope) {
             transclude(function(clone, newScope) {
               childScope = newScope;

public/app/features/datasources/partials/edit.html

@@ -41,10 +41,10 @@
 				<div class="clearfix"></div>
 			</div>
 
-			<div rebuild-on-change="datasourceMeta.id">
+			<rebuild-on-change property="datasourceMeta.id">
 				<plugin-component type="datasource-config-view">
 				</plugin-component>
-			</div>
+			</rebuild-on-change>
 
 			<div ng-if="testing" style="margin-top: 25px">
 				<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>

public/app/partials/metrics.html

 <div class="editor-row">
 
 	<div class="tight-form-container">
-		<plugin-component type="metrics-query-editor" ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
-		</plugin-component>
+		<rebuild-on-change property="ctrl.panel.datasource" ignore-null="true">
+			<plugin-component type="metrics-query-editor" ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
+			</plugin-component>
+		</rebuild-on-change>
 	</div>
 
 	<div style="margin: 20px 0 0 0">

public/app/plugins/datasource/graphite/add_graphite_func.js

@@ -22,6 +22,7 @@ function (angular, _, $, gfunc) {
         link: function($scope, elem) {
           var categories = gfunc.getCategories();
           var allFunctions = getAllFunctionNames(categories);
+          var ctrl = $scope.ctrl;
 
           $scope.functionMenu = createFunctionDropDownMenu(categories);
 
@@ -48,7 +49,7 @@ function (angular, _, $, gfunc) {
               }
 
               $scope.$apply(function() {
-                $scope.addFunction(funcDef);
+                ctrl.addFunction(funcDef);
               });
 
               $input.trigger('blur');

public/app/plugins/datasource/graphite/func_editor.js

@@ -27,6 +27,7 @@ function (angular, _, $) {
         link: function postLink($scope, elem) {
           var $funcLink = $(funcSpanTemplate);
           var $funcControls = $(funcControlsTemplate);
+          var ctrl = $scope.ctrl;
           var func = $scope.func;
           var funcDef = func.def;
           var scheduledRelink = false;
@@ -79,11 +80,13 @@ function (angular, _, $) {
               func.updateParam($input.val(), paramIndex);
               scheduledRelinkIfNeeded();
 
-              $scope.$apply($scope.targetChanged);
-            }
+              $scope.$apply(function() {
+                ctrl.targetChanged();
+              });
 
-            $input.hide();
-            $link.show();
+              $input.hide();
+              $link.show();
+            }
           }
 
           function inputKeyPress(paramIndex, e) {
@@ -198,7 +201,7 @@ function (angular, _, $) {
               if ($target.hasClass('fa-remove')) {
                 toggleFuncControls();
                 $scope.$apply(function() {
-                  $scope.removeFunction($scope.func);
+                  ctrl.removeFunction($scope.func);
                 });
                 return;
               }
@@ -206,7 +209,7 @@ function (angular, _, $) {
               if ($target.hasClass('fa-arrow-left')) {
                 $scope.$apply(function() {
                   _.move($scope.functions, $scope.$index, $scope.$index - 1);
-                  $scope.targetChanged();
+                  ctrl.targetChanged();
                 });
                 return;
               }
@@ -214,7 +217,7 @@ function (angular, _, $) {
               if ($target.hasClass('fa-arrow-right')) {
                 $scope.$apply(function() {
                   _.move($scope.functions, $scope.$index, $scope.$index + 1);
-                  $scope.targetChanged();
+                  ctrl.targetChanged();
                 });
                 return;
               }

public/app/plugins/datasource/graphite/query_ctrl.ts

 ///<reference path="../../../headers/common.d.ts" />
 
 import './add_graphite_func';
+import './func_editor';
 
 import angular from 'angular';
 import _ from 'lodash';

public/app/plugins/datasource/prometheus/partials/query.editor.html

@@ -9,14 +9,14 @@
           <i class="fa fa-bars"></i>
         </a>
         <ul class="dropdown-menu pull-right" role="menu">
-          <li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateDataQuery(target)">Duplicate</a></li>
-          <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveDataQuery(-1)">Move up</a></li>
-          <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveDataQuery(1)">Move down</a></li>
+          <li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a></li>
+          <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a></li>
+          <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a></li>
         </ul>
       </div>
     </li>
     <li class="tight-form-item last">
-      <a class="pointer" tabindex="1" ng-click="ctrl.removeDataQuery(ctrl.target)">
+      <a class="pointer" tabindex="1" ng-click="ctrl.removeQuery()">
         <i class="fa fa-remove"></i>
       </a>
     </li>