temp work on dynamic directives

pkg/api/dtos/apps.go

@@ -10,6 +10,7 @@ type AppSettings struct {
 	AppId    string                   `json:"appId"`
 	Enabled  bool                     `json:"enabled"`
 	Pinned   bool                     `json:"pinned"`
+	Module   string                   `json:"module"`
 	Info     *plugins.PluginInfo      `json:"info"`
 	Pages    []*plugins.AppPluginPage `json:"pages"`
 	JsonData map[string]interface{}   `json:"jsonData"`
@@ -20,6 +21,7 @@ func NewAppSettingsDto(def *plugins.AppPlugin, data *models.AppSettings) *AppSet
 		AppId:  def.Id,
 		Name:   def.Name,
 		Info:   &def.Info,
+		Module: def.Module,
 		Pages:  def.Pages,
 	}
 

public/app/core/services/all.js

@@ -9,5 +9,6 @@ define([
   './popover_srv',
   './segment_srv',
   './backend_srv',
+  './dynamic_directive_srv',
 ],
 function () {});

public/app/core/services/dynamic_directive_srv.ts

+///<reference path="../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import angular from 'angular';
+import coreModule from '../core_module';
+
+class DynamicDirectiveSrv {
+
+  /** @ngInject */
+  constructor(private $compile, private $parse, private datasourceSrv) {
+  }
+
+  addDirective(element, name, scope) {
+    element.empty();
+    element.append(angular.element(document.createElement(name)));
+    this.$compile(element)(scope);
+  }
+
+  define(options) {
+    var editorScope;
+    options.scope.$watch(options.datasourceProperty, newVal => {
+      if (editorScope) {
+        editorScope.$destroy();
+        options.parentElem.empty();
+      }
+
+      editorScope = options.scope.$new();
+      this.datasourceSrv.get(newVal).then(ds => {
+        this.addDirective(options.parentElem, options.name + '-' + ds.meta.id, editorScope);
+      });
+    });
+  }
+}
+
+coreModule.service('dynamicDirectiveSrv', DynamicDirectiveSrv);
+
+

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

@@ -91,6 +91,9 @@
 				</div>
 			</div>
 
+			<annnotations-ds-query-editor
+				datasource="currentAnnotation.datasource"
+				current-annotation="currentAnnotation"></annotations-ds-query-editor>
 			<datasource-editor-view datasource="currentAnnotation.datasource" name="annotations-query-editor"></datasource-editor-view>
 
 			<br>

public/app/features/apps/all.ts

 import './edit_ctrl';
 import './list_ctrl';
+import './config_loader';

public/app/features/apps/app_srv.ts

-///<reference path="../../headers/common.d.ts" />
-
-import _ from 'lodash';
-import angular from 'angular';
-
-export class AppSrv {
-  apps: any = {};
-
-  /** @ngInject */
-  constructor(
-    private $rootScope,
-    private $timeout,
-    private $q,
-    private backendSrv) {
-  }
-
-  get(type) {
-    return this.getAll().then(() => {
-      return this.apps[type];
-    });
-  }
-
-  getAll() {
-    if (!_.isEmpty(this.apps)) {
-      return this.$q.when(this.apps);
-    }
-
-    return this.backendSrv.get('api/org/apps').then(results => {
-      return results.reduce((prev, current) => {
-        prev[current.type] = current;
-        return prev;
-      }, this.apps);
-    });
-  }
-
-  update(app) {
-    return this.backendSrv.post('api/org/apps', app).then(resp => {
-
-    });
-  }
-}
-
-angular.module('grafana.services').service('appSrv', AppSrv);

public/app/features/apps/config_loader.ts

+///<reference path="../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import angular from 'angular';
+
+function appConfigLoader($compile, $parse) {
+  return {
+    restrict: 'E',
+    scope: {
+      appModel: "="
+    },
+    link: function(scope, elem, attr) {
+      debugger;
+      System.import(scope.appModel.module).then(function(appModule) {
+        var directive = appModule.directives.configView;
+        if (!directive) {
+          return;
+        }
+        if (!directive.hasBeenRegistered) {
+          angular.module('grafana.directives').directive('nginxConfig', directive);
+          directive.hasBeenRegistered = true;
+        }
+
+        var panelEl = angular.element(document.createElement('nginx-config'));
+        elem.append(panelEl);
+        $compile(panelEl)(scope);
+      }).catch(function(err) {
+        console.log('Failed to load panel:', err);
+        scope.appEvent('alert-error', ['App Error', err.toString()]);
+      });
+    }
+  };
+}
+
+
+angular.module('grafana.directives').directive('appConfigLoader', appConfigLoader);

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

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

public/app/features/panel/panel_directive.js

@@ -70,31 +70,6 @@ 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',