feat(plugins): now solved all cases of loading plugin directives, now just have…

feat(plugins): now solved all cases of loading plugin directives, now just have to upgrade all panels and data sources

public/app/core/core.ts

@@ -17,6 +17,7 @@ import "./directives/spectrum_picker";
 import "./directives/tags";
 import "./directives/topnav";
 import "./directives/value_select_dropdown";
+import "./directives/give_focus";
 import './jquery_extended';
 import './partials';
 

public/app/core/directives/give_focus.ts

@@ -2,7 +2,7 @@
 
 import coreModule from '../core_module';
 
-coreModule.default.directive('giveFocus', function() {
+coreModule.directive('giveFocus', function() {
   return function(scope, element, attrs) {
     element.click(function(e) {
       e.stopPropagation();

public/app/core/services/dynamic_directive_srv.ts

@@ -28,7 +28,7 @@ class DynamicDirectiveSrv {
         directiveInfo.fn.registered = true;
       }
 
-      this.addDirective(elem, directiveInfo.name, scope);
+      this.addDirective(elem, directiveInfo.name, directiveInfo.scope || scope);
     }).catch(err => {
       console.log('Plugin load:', err);
       this.$rootScope.appEvent('alert-error', ['Plugin error', err.toString()]);

public/app/features/annotations/query_editor.ts

@@ -11,7 +11,6 @@ function annotationsQueryEditor(dynamicDirectiveSrv) {
     },
     watch: "datasource.type",
     directive: scope => {
-      console.log(scope.datasource);
       return System.import(scope.datasource.meta.module).then(function(dsModule) {
         return {
           name: 'annotation-query-editor-' + scope.datasource.meta.id,

public/app/features/panel/all.js

@@ -5,4 +5,5 @@ define([
   './panel_helper',
   './solo_panel_ctrl',
   './panel_loader',
+  './query_editor',
 ], function () {});

public/app/features/panel/panel_directive.js

@@ -23,37 +23,6 @@ function (angular, $) {
     };
   });
 
-  module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
-    return {
-      restrict: 'E',
-      link: function(scope, elem) {
-        var editorScope;
-
-        scope.$watch("panel.datasource", function() {
-          var datasource = scope.target.datasource || scope.panel.datasource;
-
-          datasourceSrv.get(datasource).then(function(ds) {
-            if (editorScope) {
-              editorScope.$destroy();
-              elem.empty();
-            }
-
-            editorScope = scope.$new();
-            editorScope.datasource = ds;
-
-            if (!scope.target.refId) {
-              scope.target.refId = 'A';
-            }
-
-            var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.id));
-            elem.append(panelEl);
-            $compile(panelEl)(editorScope);
-          });
-        });
-      }
-    };
-  });
-
   module.directive('panelResizer', function($rootScope) {
     return {
       restrict: 'E',

public/app/features/panel/query_editor.ts

+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+
+/** @ngInject */
+function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) {
+  return dynamicDirectiveSrv.create({
+    watch: "panel.datasource",
+    directive: scope => {
+      let datasource = scope.target.datasource || scope.panel.datasource;
+      let editorScope = null;
+
+      return datasourceSrv.get(datasource).then(ds => {
+        if (editorScope) {
+          editorScope.$destroy();
+        }
+
+        editorScope = scope.$new();
+        editorScope.datasource = ds;
+
+        return System.import(ds.meta.module).then(dsModule => {
+          return {
+            name: 'metrics-query-editor-' + ds.meta.id,
+            fn: dsModule.metricsQueryEditor,
+            scope: editorScope,
+          };
+        });
+      });
+    }
+  });
+}
+
+/** @ngInject */
+function metricsQueryOptions(dynamicDirectiveSrv, datasourceSrv) {
+  return dynamicDirectiveSrv.create({
+    watch: "panel.datasource",
+    directive: scope => {
+      return datasourceSrv.get(scope.panel.datasource).then(ds => {
+        return System.import(ds.meta.module).then(dsModule => {
+          return {
+            name: 'metrics-query-options-' + ds.meta.id,
+            fn: dsModule.metricsQueryOptions
+          };
+        });
+      });
+    }
+  });
+}
+
+angular.module('grafana.directives')
+  .directive('metricsQueryEditor', metricsQueryEditor)
+  .directive('metricsQueryOptions', metricsQueryOptions);

public/app/partials/metrics.html

 <div class="editor-row">
 
 	<div class="tight-form-container">
-		<query-editor-loader ng-repeat="target in panel.targets" ng-class="{'tight-form-disabled': target.hide}" >
-		</query-editor-loader>
+		<metrics-query-editor ng-repeat="target in panel.targets" ng-class="{'tight-form-disabled': target.hide}" >
+		</metrics-query-editor>
 	</div>
 
 	<div style="margin: 20px 0 0 0">
@@ -26,7 +26,7 @@
 
 	</div>
 
-	<datasource-editor-view datasource="panel.datasource" name="metric-query-options"></datasource-editor-view>
+	<metrics-query-options></metrics-query-options>
 </div>
 
 <div class="editor-row" style="margin-top: 30px">

public/app/plugins/datasource/elasticsearch/bucket_agg.js

@@ -8,6 +8,20 @@ function (angular, _, queryDef) {
 
   var module = angular.module('grafana.directives');
 
+  module.directive('elasticBucketAgg', function() {
+    return {
+      templateUrl: 'app/plugins/datasource/elasticsearch/partials/bucket_agg.html',
+      controller: 'ElasticBucketAggCtrl',
+      restrict: 'E',
+      scope: {
+        target: "=",
+        index: "=",
+        onChange: "&",
+        getFields: "&",
+      }
+    };
+  });
+
   module.controller('ElasticBucketAggCtrl', function($scope, uiSegmentSrv, $q, $rootScope) {
     var bucketAggs = $scope.target.bucketAggs;
 

public/app/plugins/datasource/elasticsearch/metric_agg.js

@@ -8,6 +8,21 @@ function (angular, _, queryDef) {
 
   var module = angular.module('grafana.directives');
 
+  module.directive('elasticMetricAgg', function() {
+    return {
+      templateUrl: 'app/plugins/datasource/elasticsearch/partials/metric_agg.html',
+      controller: 'ElasticMetricAggCtrl',
+      restrict: 'E',
+      scope: {
+        target: "=",
+        index: "=",
+        onChange: "&",
+        getFields: "&",
+        esVersion: '='
+      }
+    };
+  });
+
   module.controller('ElasticMetricAggCtrl', function($scope, uiSegmentSrv, $q, $rootScope) {
     var metricAggs = $scope.target.metrics;
 

public/app/plugins/datasource/elasticsearch/module.js

 define([
-  'angular',
   './datasource',
   './edit_view',
   './bucket_agg',
   './metric_agg',
 ],
-function (angular, ElasticDatasource, editView) {
+function (ElasticDatasource, editView) {
   'use strict';
 
-  var module = angular.module('grafana.directives');
-
-  module.directive('elasticMetricAgg', function() {
-    return {
-      templateUrl: 'app/plugins/datasource/elasticsearch/partials/metric_agg.html',
-      controller: 'ElasticMetricAggCtrl',
-      restrict: 'E',
-      scope: {
-        target: "=",
-        index: "=",
-        onChange: "&",
-        getFields: "&",
-        esVersion: '='
-      }
-    };
-  });
-
-  module.directive('elasticBucketAgg', function() {
-    return {
-      templateUrl: 'app/plugins/datasource/elasticsearch/partials/bucket_agg.html',
-      controller: 'ElasticBucketAggCtrl',
-      restrict: 'E',
-      scope: {
-        target: "=",
-        index: "=",
-        onChange: "&",
-        getFields: "&",
-      }
-    };
-  });
-
-  module.directive('metricQueryEditorElasticsearch', function() {
+  function metricsQueryEditor() {
     return {controller: 'ElasticQueryCtrl', templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.editor.html'};
-  });
+  }
 
-  module.directive('metricQueryOptionsElasticsearch', function() {
+  function metricsQueryOptions() {
     return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.options.html'};
-  });
+  }
 
   function annotationsQueryEditor() {
     return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/annotations.editor.html'};
@@ -55,6 +23,8 @@ function (angular, ElasticDatasource, editView) {
     Datasource: ElasticDatasource,
     configView: editView.default,
     annotationsQueryEditor: annotationsQueryEditor,
+    metricsQueryEditor: metricsQueryEditor,
+    metricsQueryOptions: metricsQueryOptions,
   };
 
 });

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

 define([
-  'angular',
   './datasource',
 ],
-function (angular, GraphiteDatasource) {
+function (GraphiteDatasource) {
   'use strict';
 
-  var module = angular.module('grafana.directives');
-
-  module.directive('metricQueryEditorGraphite', function() {
+  function metricsQueryEditor() {
     return {controller: 'GraphiteQueryCtrl', templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html'};
-  });
+  }
 
-  module.directive('metricQueryOptionsGraphite', function() {
+  function metricsQueryOptions() {
     return {templateUrl: 'app/plugins/datasource/graphite/partials/query.options.html'};
-  });
+  }
 
   function annotationsQueryEditor() {
     return {templateUrl: 'app/plugins/datasource/graphite/partials/annotations.editor.html'};
@@ -27,5 +24,7 @@ function (angular, GraphiteDatasource) {
     Datasource: GraphiteDatasource,
     configView: configView,
     annotationsQueryEditor: annotationsQueryEditor,
+    metricsQueryEditor: metricsQueryEditor,
+    metricsQueryOptions: metricsQueryOptions,
   };
 });