feat(plugins): work on plugin directives loading

public/app/core/services/dynamic_directive_srv.ts

@@ -22,7 +22,7 @@ class DynamicDirectiveSrv {
       scope: options.scope,
       link: (scope, elem, attrs) => {
         options.directive(scope).then(directiveInfo => {
-          if (!directiveInfo) {
+          if (!directiveInfo || !directiveInfo.fn) {
             return;
           }
 

public/app/features/apps/config_loader.ts → public/app/features/apps/config_view.ts

@@ -3,7 +3,7 @@
 import angular from 'angular';
 
 /** @ngInject */
-function appConfigLoader(dynamicDirectiveSrv) {
+function appConfigView(dynamicDirectiveSrv) {
   return dynamicDirectiveSrv.create({
     scope: {
       appModel: "="
@@ -20,4 +20,4 @@ function appConfigLoader(dynamicDirectiveSrv) {
 }
 
 
-angular.module('grafana.directives').directive('appConfigLoader', appConfigLoader);
+angular.module('grafana.directives').directive('appConfigView', appConfigView);

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

@@ -93,12 +93,12 @@
 		<section class="simple-box">
 			<h3 class="simple-box-header">Configuration:</h3>
 			<div class="simple-box-body">
+				<div ng-if="ctrl.appModel.appId">
+					<app-config-view app-model="ctrl.appModel"></app-config-view>
+				</div>
 			</div>
 		</section>
 
-		<div ng-if="ctrl.appModel.appId">
-			<app-config-loader app-model="ctrl.appModel"></app-config-loader>
-		</div>
 
 	</div>
 </div>

public/app/features/datasources/all.js

 define([
   './list_ctrl',
   './edit_ctrl',
+  './config_view',
 ], function () {});

public/app/features/datasources/config_view.ts

+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+
+/** @ngInject */
+function dsConfigView(dynamicDirectiveSrv) {
+  return dynamicDirectiveSrv.create({
+    scope: {
+      dsMeta: "=",
+      current: "="
+    },
+    watch: "dsMeta.module",
+    directive: scope => {
+      return System.import(scope.dsMeta.module).then(function(dsModule) {
+        return {
+          name: 'ds-config-' + scope.dsMeta.id,
+          fn: dsModule.configView,
+        };
+      });
+    },
+  });
+}
+
+
+angular.module('grafana.directives').directive('dsConfigView', dsConfigView);

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

@@ -42,7 +42,7 @@
 				<div class="clearfix"></div>
 			</div>
 
-			<datasource-custom-settings-view ds-meta="datasourceMeta" current="current"></datasource-custom-settings-view>
+			<ds-config-view ng-if="datasourceMeta.id" ds-meta="datasourceMeta" current="current"></ds-config-view>
 
 			<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/features/panel/panel_directive.js

@@ -43,33 +43,6 @@ function (angular, $, config) {
     };
   });
 
-  module.directive('datasourceCustomSettingsView', function($compile) {
-    return {
-      restrict: 'E',
-      scope: {
-        dsMeta: "=",
-        current: "=",
-      },
-      link: function(scope, elem) {
-        scope.$watch("dsMeta.module", function() {
-          if (!scope.dsMeta) {
-            return;
-          }
-
-          System.import(scope.dsMeta.module).then(function() {
-            elem.empty();
-            var panelEl = angular.element(document.createElement('datasource-custom-settings-view-' + scope.dsMeta.id));
-            elem.append(panelEl);
-            $compile(panelEl)(scope);
-          }).catch(function(err) {
-            console.log('Failed to load plugin:', err);
-            scope.appEvent('alert-error', ['Plugin Load Error', 'Failed to load plugin ' + scope.dsMeta.id + ', ' + err]);
-          });
-        });
-      }
-    };
-  });
-
   module.directive('datasourceEditorView', function(dynamicDirectiveSrv) {
     return {
       restrict: 'E',

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

@@ -55,6 +55,7 @@ function (angular, ElasticDatasource, editView) {
 
   return {
     Datasource: ElasticDatasource,
+    configView: editView.default,
   };
 
 });