feat(plugins): updated cloudwatch to new plugin style

public/app/core/services/dynamic_directive_srv.ts

@@ -28,7 +28,7 @@ class DynamicDirectiveSrv {
         directiveInfo.fn.registered = true;
       }
 
-      this.addDirective(elem, directiveInfo.name, directiveInfo.scope || scope);
+      this.addDirective(elem, directiveInfo.name, scope);
     }).catch(err => {
       console.log('Plugin load:', err);
       this.$rootScope.appEvent('alert-error', ['Plugin error', err.toString()]);
@@ -41,7 +41,14 @@ class DynamicDirectiveSrv {
       scope: options.scope,
       link: (scope, elem, attrs) => {
         if (options.watch) {
-          scope.$watch(options.watch,() => this.link(scope, elem, attrs, options));
+          let childScope = null;
+          scope.$watch(options.watch, () => {
+            if (childScope) {
+              childScope.$destroy();
+            }
+            childScope = scope.$new();
+            this.link(childScope, elem, attrs, options);
+          });
         } else {
           this.link(scope, elem, attrs, options);
         }

public/app/features/annotations/editor_ctrl.js

@@ -31,10 +31,10 @@ function (angular, _, $) {
     };
 
     $scope.datasourceChanged = function() {
-      $scope.currentDatasource = _.findWhere($scope.datasources, { name: $scope.currentAnnotation.datasource });
-      if (!$scope.currentDatasource) {
-        $scope.currentDatasource = $scope.datasources[0];
-      }
+      datasourceSrv.get($scope.currentAnnotation.datasource).then(function(ds) {
+        $scope.currentDatasource = ds;
+        $scope.currentAnnotation.datasource = ds.name;
+      });
     };
 
     $scope.edit = function(annotation) {
@@ -50,7 +50,6 @@ function (angular, _, $) {
       $scope.currentAnnotation = angular.copy(annotationDefaults);
       $scope.currentIsNew = true;
       $scope.datasourceChanged();
-      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
     };
 
     $scope.update = function() {

public/app/features/panel/query_editor.ts

@@ -8,21 +8,13 @@ function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) {
     watch: "panel.datasource",
     directive: scope => {
       let datasource = scope.target.datasource || scope.panel.datasource;
-      let editorScope = null;
-
       return datasourceSrv.get(datasource).then(ds => {
-        if (editorScope) {
-          editorScope.$destroy();
-        }
-
-        editorScope = scope.$new();
-        editorScope.datasource = ds;
+        scope.datasource = ds;
 
         return System.import(ds.meta.module).then(dsModule => {
           return {
             name: 'metrics-query-editor-' + ds.meta.id,
             fn: dsModule.metricsQueryEditor,
-            scope: editorScope,
           };
         });
       });

public/app/plugins/datasource/cloudwatch/datasource.js

@@ -3,7 +3,6 @@ define([
   'lodash',
   'moment',
   'app/core/utils/datemath',
-  './query_ctrl',
 ],
 function (angular, _, moment, dateMath) {
   'use strict';

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

 define([
-  'angular',
   './datasource',
   './query_parameter_ctrl',
+  './query_ctrl',
 ],
-function (angular, CloudWatchDatasource) {
+function (CloudWatchDatasource) {
   'use strict';
 
-  var module = angular.module('grafana.directives');
-
-  module.directive('metricQueryEditorCloudwatch', function() {
+  function metricsQueryEditor() {
     return {controller: 'CloudWatchQueryCtrl', templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.editor.html'};
-  });
+  }
 
-  module.directive('annotationsQueryEditorCloudwatch', function() {
+  function annotationsQueryEditor() {
     return {templateUrl: 'app/plugins/datasource/cloudwatch/partials/annotations.editor.html'};
-  });
-
-  module.directive('cloudwatchQueryParameter', function() {
-    return {
-      templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.parameter.html',
-      controller: 'CloudWatchQueryParameterCtrl',
-      restrict: 'E',
-      scope: {
-        target: "=",
-        datasourceName: "@",
-        onChange: "&",
-      }
-    };
-  });
+  }
 
   function configView() {
     return {templateUrl: 'app/plugins/datasource/cloudwatch/partials/edit_view.html'};
@@ -36,5 +21,7 @@ function (angular, CloudWatchDatasource) {
   return  {
     Datasource: CloudWatchDatasource,
     configView: configView,
+    annotationsQueryEditor: annotationsQueryEditor,
+    metricsQueryEditor: metricsQueryEditor,
   };
 });

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

-<cloudwatch-query-parameter target="currentAnnotation" datasource-name="{{currentAnnotation.datasource}}"></cloudwatch-query-parameter>
+<cloudwatch-query-parameter target="annotation" datasource="datasource"></cloudwatch-query-parameter>

public/app/plugins/datasource/cloudwatch/partials/query.editor.html

@@ -35,4 +35,4 @@
 	<div class="clearfix"></div>
 </div>
 
-<cloudwatch-query-parameter target="target" datasource-name="{{datasource.name}}" on-change="refreshMetricData()"></cloudwatch-query-parameter>
+<cloudwatch-query-parameter target="target" datasource="datasource" on-change="refreshMetricData()"></cloudwatch-query-parameter>

public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.js

@@ -7,6 +7,19 @@ function (angular, _) {
 
   var module = angular.module('grafana.controllers');
 
+  module.directive('cloudwatchQueryParameter', function() {
+    return {
+      templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.parameter.html',
+      controller: 'CloudWatchQueryParameterCtrl',
+      restrict: 'E',
+      scope: {
+        target: "=",
+        datasource: "=",
+        onChange: "&",
+      }
+    };
+  });
+
   module.controller('CloudWatchQueryParameterCtrl', function($scope, templateSrv, uiSegmentSrv, datasourceSrv, $q) {
 
     $scope.init = function() {
@@ -38,12 +51,9 @@ function (angular, _) {
       $scope.removeDimSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove dimension --'});
       $scope.removeStatSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove stat --'});
 
-      datasourceSrv.get($scope.datasourceName).then(function(datasource) {
-        $scope.datasource = datasource;
-        if (_.isEmpty($scope.target.region)) {
-          $scope.target.region = $scope.datasource.getDefaultRegion();
-        }
-      });
+      if (_.isEmpty($scope.target.region)) {
+        $scope.target.region = $scope.datasource.getDefaultRegion();
+      }
 
       if (!$scope.onChange) {
         $scope.onChange = function() {};

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

 <div class="editor-row">
-	<div class="section" ng-if="currentAnnotation.index">
+	<div class="section" ng-if="annotation.index">
 		<h5>Index name</h5>
 		<div class="editor-option">
-			<input type="text" class="span4" ng-model='currentAnnotation.index' placeholder="events-*"></input>
+			<input type="text" class="span4" ng-model='annotation.index' placeholder="events-*"></input>
 		</div>
 	</div>
 	<div class="section">
 		<h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5>
 		<div class="editor-option">
-			<input type="text" class="span6" ng-model='currentAnnotation.query' placeholder="tags:deploy"></input>
+			<input type="text" class="span6" ng-model='annotation.query' placeholder="tags:deploy"></input>
 		</div>
 	</div>
 </div>
@@ -18,22 +18,22 @@
 		<h5>Field mappings</h5>
 		<div class="editor-option">
 			<label class="small">Time</label>
-			<input type="text" class="input-small" ng-model='currentAnnotation.timeField' placeholder="@timestamp"></input>
+			<input type="text" class="input-small" ng-model='annotation.timeField' placeholder="@timestamp"></input>
 		</div>
 
 		<div class="editor-option">
 			<label class="small">Title</label>
-			<input type="text" class="input-small" ng-model='currentAnnotation.titleField' placeholder="desc"></input>
+			<input type="text" class="input-small" ng-model='annotation.titleField' placeholder="desc"></input>
 		</div>
 
 		<div class="editor-option">
 			<label class="small">Tags</label>
-			<input type="text" class="input-small" ng-model='currentAnnotation.tagsField' placeholder="tags"></input>
+			<input type="text" class="input-small" ng-model='annotation.tagsField' placeholder="tags"></input>
 		</div>
 
 		<div class="editor-option">
 			<label class="small">Text</label>
-			<input type="text" class="input-small" ng-model='currentAnnotation.textField' placeholder=""></input>
+			<input type="text" class="input-small" ng-model='annotation.textField' placeholder=""></input>
 		</div>
 	</div>
 </div>