feat(apps): work on plugin directives loading

public/app/core/core.ts

@@ -25,5 +25,6 @@ import 'app/core/controllers/all';
 import 'app/core/services/all';
 import 'app/core/routes/all';
 import './filters/filters';
+import coreModule from './core_module';
 
-export {arrayJoin};
+export {arrayJoin, coreModule};

public/app/core/services/dynamic_directive_srv.ts

@@ -9,25 +9,31 @@ class DynamicDirectiveSrv {
   constructor(private $compile, private $parse) {}
 
   addDirective(element, name, scope) {
+    var child = angular.element(document.createElement(name));
+    this.$compile(child)(scope);
+
     element.empty();
-    element.append(angular.element(document.createElement(name)));
-    this.$compile(element)(scope);
+    element.append(child);
   }
 
   create(options) {
     let directiveDef = {
       restrict: 'E',
       scope: options.scope,
-      link: function(scope, elem) {
+      link: (scope, elem, attrs) => {
         options.directive(scope).then(directiveInfo => {
           if (!directiveInfo) {
             return;
           }
 
-          if (directiveInfo.fn.hasBeenRegistered) {
-            coreModule.directive(directiveInfo.name, directiveInfo.fn);
-            directiveInfo.fn.hasBeenRegistered = true;
+          if (!directiveInfo.fn.registered) {
+            coreModule.directive(attrs.$normalize(directiveInfo.name), directiveInfo.fn);
+            directiveInfo.fn.registered = true;
           }
+
+          this.addDirective(elem, directiveInfo.name, scope);
+        }).catch(function(err) {
+          console.log('Dynamic directive load error: ', err);
         });
       }
     };

public/app/features/apps/config_loader.ts

@@ -11,8 +11,8 @@ function appConfigLoader(dynamicDirectiveSrv) {
     directive: scope => {
       return System.import(scope.appModel.module).then(function(appModule) {
         return {
-          name: 'appConfigLoader' + scope.appModel.appId,
-          fn: scope.appModel.directives.configView,
+          name: 'app-config-' + scope.appModel.appId,
+          fn: appModule.configView,
         };
       });
     },

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

@@ -96,8 +96,6 @@
 			</div>
 		</section>
 
-		<nginx-config></nginx-config>
-
 		<div ng-if="ctrl.appModel.appId">
 			<app-config-loader app-model="ctrl.appModel"></app-config-loader>
 		</div>

public/app/grafana.ts

@@ -8,12 +8,12 @@ import 'angular-sanitize';
 import 'angular-dragdrop';
 import 'angular-bindonce';
 import 'angular-ui';
-import 'app/core/core';
 
 import $ from 'jquery';
 import angular from 'angular';
 import config from 'app/core/config';
 import _ from 'lodash';
+import {coreModule} from './core/core';
 
 export class GrafanaApp {
   registerFunctions: any;
@@ -67,6 +67,9 @@ export class GrafanaApp {
       this.useModule(angular.module(moduleName, []));
     });
 
+    // makes it possible to add dynamic stuff
+    this.useModule(coreModule);
+
     var preBootRequires = [System.import('app/features/all')];
     var pluginModules = config.bootData.pluginModules || [];
 

tasks/options/watch.js

@@ -27,15 +27,17 @@ module.exports = function(config, grunt) {
     }
 
     if (/(\.ts)$/.test(filepath)) {
+      newPath = filepath.replace(/^public/, 'public_gen');
+      grunt.log.writeln('Copying to ' + newPath);
+      grunt.file.copy(filepath, newPath);
+
+      // copy ts file also used by source maps
       //changes changed file source to that of the changed file
       var option = 'typescript.build.src';
       var result = filepath;
       grunt.config(option, result);
       grunt.task.run('typescript:build');
       grunt.task.run('tslint');
-      // copy ts file also used by source maps
-      newPath = filepath.replace(/^public/, 'public_gen');
-      grunt.file.copy(filepath, newPath);
     }
   });