refactor(): began work on big design change for how data source query editors are loaded

public/app/features/panel/panelDirective.js

@@ -6,9 +6,9 @@ define([
 function (angular, $, config) {
   'use strict';
 
-  angular
-    .module('grafana.directives')
-    .directive('panelLoader', function($compile, $parse) {
+  var module = angular.module('grafana.directives');
+
+  module.directive('panelLoader', function($compile, $parse) {
     return {
       restrict: 'E',
       link: function(scope, elem, attr) {
@@ -22,7 +22,9 @@ function (angular, $, config) {
         });
       }
     };
-    }).directive('grafanaPanel', function() {
+  });
+
+  module.directive('grafanaPanel', function() {
     return {
       restrict: 'E',
       templateUrl: 'app/features/panel/partials/panel.html',
@@ -37,4 +39,18 @@ function (angular, $, config) {
       }
     };
   });
+
+  module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
+    return {
+      restrict: 'E',
+      link: function(scope, elem) {
+        datasourceSrv.get(scope.panel.datasource).then(function(ds) {
+          var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.type));
+          elem.append(panelEl);
+          $compile(panelEl)(scope);
+        });
+      }
+    };
+  });
+
 });

public/app/partials/metrics.html

-<div ng-include src="datasource.meta.partials.query"></div>
+<div class="editor-row">
 
+	<!-- <div ng&#45;include src="datasource.meta.partials.query"></div> -->
+
+	<query-editor-loader ng-repeat="target in panel.targets">
+	</query-editor-loader>
+
+ 	</div>
+</div>
 
 <div class="editor-row" style="margin-top: 30px">
 	<button class="btn btn-inverse pull-right" ng-click="addDataQuery(panel.target)">

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

@@ -11,6 +11,13 @@ function (angular, _, config, gfunc, Parser) {
   var module = angular.module('grafana.controllers');
   var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
+  module.directive('metricQueryEditorGraphite', function() {
+    return {
+      controller: 'GraphiteQueryCtrl',
+      templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html',
+    };
+  });
+
   module.controller('GraphiteQueryCtrl', function($scope, $sce, templateSrv) {
 
     $scope.init = function() {
@@ -313,22 +320,8 @@ function (angular, _, config, gfunc, Parser) {
       return new MetricSegment({value: 'select metric', fake: true});
     };
 
-  });
+    $scope.init();
 
-  module.directive('focusMe', function($timeout, $parse) {
-    return {
-      //scope: true,   // optionally create a child scope
-      link: function(scope, element, attrs) {
-        var model = $parse(attrs.focusMe);
-        scope.$watch(model, function(value) {
-          if(value === true) {
-            $timeout(function() {
-              element[0].focus();
-            });
-          }
-        });
-      }
-    };
   });
 
 });

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

@@ -59,7 +59,7 @@
 				</li>
 			</ul>
 
-			<input type="text" class="tight-form-clear-input" style="width: 80%" ng-model="target.query" focus-me="target.rawQuery" spellcheck='false' ng-model-onblur ng-change="get_data()" ng-show="target.rawQuery"/>
+			<input type="text" class="tight-form-clear-input" style="width: 80%" ng-model="target.query" give-focus="target.rawQuery" spellcheck='false' ng-model-onblur ng-change="get_data()" ng-show="target.rawQuery"/>
 
 			<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
 				<li class="tight-form-item query-keyword" style="width: 75px;">

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

@@ -40,7 +40,7 @@
 					class="tight-form-input span10"
 					ng-model="target.query"
 					placeholder="select ..."
-					focus-me="target.rawQuery"
+					give-focus="target.rawQuery"
 					spellcheck='false'
 					data-min-length=0 data-items=100
 					ng-model-onblur