feat(plugins): moved annotation editor to new plugin component loader

public/app/core/directives/plugin_component.ts

@@ -60,6 +60,17 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope) {
           });
         });
       }
+      // QueryOptionsCtrl
+      case "annotations-query-ctrl": {
+        return System.import(scope.currentDatasource.meta.module).then(function(dsModule) {
+          return {
+            name: 'annotations-query-ctrl-' + scope.currentDatasource.meta.id,
+            bindings: {annotation: "=", datasource: "="},
+            attrs: {"annotation": "currentAnnotation", datasource: "currentDatasource"},
+            Component: dsModule.AnnotationsQueryCtrl,
+          };
+        });
+      }
       // ConfigCtrl
       case 'datasource-config-ctrl': {
         return System.import(scope.datasourceMeta.module).then(function(dsModule) {

public/app/features/annotations/annotations_srv.js

@@ -2,7 +2,6 @@ define([
   'angular',
   'lodash',
   './editor_ctrl',
-  './query_editor'
 ], function (angular, _) {
   'use strict';
 

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

@@ -91,8 +91,10 @@
 				</div>
 			</div>
 
-			<annotations-query-editor datasource="currentDatasource" annotation="currentAnnotation">
-			</annotations-query-editor>
+			<rebuild-on-change property="currentAnnotation.datasource">
+				<plugin-component type="annotations-query-ctrl">
+				</plugin-component>
+			</rebuild-on-change>
 
 			<br>
 			<button ng-show="mode === 'new'" type="button" class="btn btn-success" ng-click="add()">Add</button>

public/app/features/annotations/query_editor.ts

-///<reference path="../../headers/common.d.ts" />
-
-import angular from 'angular';
-
-/** @ngInject */
-function annotationsQueryEditor(dynamicDirectiveSrv) {
-  return dynamicDirectiveSrv.create({
-    scope: {
-      annotation: "=",
-      datasource: "="
-    },
-    watchPath: "annotation.datasource",
-    directive: scope => {
-      return System.import(scope.datasource.meta.module).then(function(dsModule) {
-        return {
-          name: 'annotation-query-editor-' + scope.datasource.meta.id,
-          fn: dsModule.annotationsQueryEditor,
-        };
-      });
-    },
-  });
-}
-
-
-angular.module('grafana.directives').directive('annotationsQueryEditor', annotationsQueryEditor);

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: "="
-    },
-    watchPath: "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/plugins/datasource/graphite/module.ts

@@ -9,49 +9,15 @@ class GraphiteQueryOptionsCtrl {
   static templateUrl = 'public/app/plugins/datasource/graphite/partials/query.options.html';
 }
 
+class AnnotationsQueryCtrl {
+  static templateUrl = 'public/app/plugins/datasource/graphite/partials/annotations.editor.html';
+}
 
 export {
   GraphiteDatasource as Datasource,
   GraphiteQueryCtrl as QueryCtrl,
   GraphiteConfigCtrl as ConfigCtrl,
   GraphiteQueryOptionsCtrl as QueryOptionsCtrl,
+  AnnotationsQueryCtrl as AnnotationsQueryCtrl,
 };
 
-// define([
-//   './datasource',
-// ],
-// function (GraphiteDatasource) {
-//   'use strict';
-//
-//   function metricsQueryEditor() {
-//     return {
-//       controller: 'GraphiteQueryCtrl',
-//       templateUrl: 'public/app/plugins/datasource/graphite/partials/query.editor.html'
-//     };
-//   }
-//
-//   function metricsQueryOptions() {
-//     return {templateUrl: 'public/app/plugins/datasource/graphite/partials/query.options.html'};
-//   }
-//
-//   function annotationsQueryEditor() {
-//     return {templateUrl: 'public/app/plugins/datasource/graphite/partials/annotations.editor.html'};
-//   }
-//
-//   function configView() {
-//     return {templateUrl: 'public/app/plugins/datasource/graphite/partials/config.html'};
-//   }
-//
-//   function ConfigView() {
-//   }
-//   ConfigView.templateUrl = 'public/app/plugins/datasource/graphite/partials/config.html';
-//
-//   return {
-//     Datasource: GraphiteDatasource,
-//     configView: configView,
-//     annotationsQueryEditor: annotationsQueryEditor,
-//     metricsQueryEditor: metricsQueryEditor,
-//     metricsQueryOptions: metricsQueryOptions,
-//     ConfigView: ConfigView
-//   };
-// });

public/app/plugins/datasource/graphite/partials/annotations.editor.html

 <div class="editor-row">
 	<div class="editor-option">
 		<label class="small">Graphite target expression</label>
-		<input type="text" class="span10" ng-model='annotation.target' placeholder=""></input>
+		<input type="text" class="span10" ng-model='ctrl.annotation.target' placeholder=""></input>
 	</div>
 </div>
 
 <div class="editor-row">
 	<div class="editor-option">
 		<label class="small">Graphite event tags</label>
-		<input type="text" ng-model='annotation.tags' placeholder=""></input>
+		<input type="text" ng-model='ctrl.annotation.tags' placeholder=""></input>
 	</div>
 </div>