feat(plugins): annotations view work again for elasticsearch

public/app/features/annotations/partials/editor.html

@@ -44,7 +44,7 @@
 				<table class="grafana-options-table">
 				<table class="grafana-options-table">
 					<tr ng-repeat="annotation in annotations">
 					<tr ng-repeat="annotation in annotations">
 						<td style="width:90%">
 						<td style="width:90%">
-                            <i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i> &nbsp;
+							<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i> &nbsp;
 							{{annotation.name}}
 							{{annotation.name}}
 						</td>
 						</td>
 						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
 						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>

public/app/features/panel/panel_directive.js

@@ -56,8 +56,8 @@ function (angular, $, config) {
             return;
             return;
           }
           }
 
 
-          System.import(scope.dsMeta.module).then(function(module) {
-            console.log('datasourceCustomSettingsView', module);
+          System.import(scope.dsMeta.module).then(function() {
+            elem.empty();
             var panelEl = angular.element(document.createElement('datasource-custom-settings-view-' + scope.dsMeta.id));
             var panelEl = angular.element(document.createElement('datasource-custom-settings-view-' + scope.dsMeta.id));
             elem.append(panelEl);
             elem.append(panelEl);
             $compile(panelEl)(scope);
             $compile(panelEl)(scope);
@@ -70,6 +70,45 @@ function (angular, $, config) {
     };
     };
   });
   });
 
 
+  module.service('dynamicDirectiveSrv', function($compile, $parse, datasourceSrv) {
+    var self = this;
+
+    this.addDirective = function(options, type, editorScope) {
+      var panelEl = angular.element(document.createElement(options.name + '-' + type));
+      options.parentElem.append(panelEl);
+      $compile(panelEl)(editorScope);
+    };
+
+    this.define = function(options) {
+      var editorScope;
+      options.scope.$watch(options.datasourceProperty, function(newVal) {
+        if (editorScope) {
+          editorScope.$destroy();
+          options.parentElem.empty();
+        }
+
+        editorScope = options.scope.$new();
+        datasourceSrv.get(newVal).then(function(ds) {
+          self.addDirective(options, ds.meta.id, editorScope);
+        });
+      });
+    };
+  });
+
+  module.directive('datasourceEditorView', function(dynamicDirectiveSrv) {
+    return {
+      restrict: 'E',
+      link: function(scope, elem, attrs) {
+        dynamicDirectiveSrv.define({
+          datasourceProperty: attrs.datasource,
+          name: attrs.name,
+          scope: scope,
+          parentElem: elem,
+        });
+      }
+    };
+  });
+
   module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
   module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
     return {
     return {
       restrict: 'E',
       restrict: 'E',