feat(plugins): more work on how plugins expose directives

docs/sources/reference/keyboard_shortcuts.md

@@ -18,10 +18,10 @@ Press `Shift`+`?` to open the keyboard shortcut dialog from anywhere within the
 |---|---|
 |`Esc`|Exit fullscreen edit/view mode, close search or any editor view|
 |`F`|Open dashboard search view (also contains import/playlist controls)|
+|`R`|Refresh (Fetches new data and rerenders panels)|
 |`CTRL`+`S`|Save dashboard|
 |`CTRL`+`H`|Hide row controls|
 |`CTRL`+`Z`|Zoom out|
-|`CTRL`+`R`|Refresh (Fetches new data and rerenders panels)|
 |`CTRL`+`O`|Enable/Disable shared graph crosshair|
 
 

public/app/core/services/dynamic_directive_srv.ts

@@ -6,7 +6,7 @@ import coreModule from '../core_module';
 class DynamicDirectiveSrv {
 
   /** @ngInject */
-  constructor(private $compile, private $parse) {}
+  constructor(private $compile, private $parse, private $rootScope) {}
 
   addDirective(element, name, scope) {
     var child = angular.element(document.createElement(name));
@@ -16,25 +16,35 @@ class DynamicDirectiveSrv {
     element.append(child);
   }
 
+  link(scope, elem, attrs, options) {
+    options.directive(scope).then(directiveInfo => {
+      if (!directiveInfo || !directiveInfo.fn) {
+        elem.empty();
+        return;
+      }
+
+      if (!directiveInfo.fn.registered) {
+        coreModule.directive(attrs.$normalize(directiveInfo.name), directiveInfo.fn);
+        directiveInfo.fn.registered = true;
+      }
+
+      this.addDirective(elem, directiveInfo.name, scope);
+    }).catch(err => {
+      console.log('Plugin load:', err);
+      this.$rootScope.appEvent('alert-error', ['Plugin error', err.toString()]);
+    });
+  }
+
   create(options) {
     let directiveDef = {
       restrict: 'E',
       scope: options.scope,
       link: (scope, elem, attrs) => {
-        options.directive(scope).then(directiveInfo => {
-          if (!directiveInfo || !directiveInfo.fn) {
-            return;
-          }
-
-          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);
-        });
+        if (options.watch) {
+          scope.$watch(options.watch,() => this.link(scope, elem, attrs, options));
+        } else {
+          this.link(scope, elem, attrs, options);
+        }
       }
     };
 

public/app/features/all.js

 define([
   './panellinks/module',
   './dashlinks/module',
-  './annotations/annotationsSrv',
+  './annotations/annotations_srv',
   './templating/templateSrv',
   './dashboard/all',
   './playlist/all',

public/app/features/annotations/annotationsSrv.js → public/app/features/annotations/annotations_srv.js

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

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

@@ -91,10 +91,8 @@
 				</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>
+			<annotations-query-editor datasource="currentDatasource" annotation="currentAnnotation">
+			</annotations-query-editor>
 
 			<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: "="
+    },
+    watch: "datasource.type",
+    directive: scope => {
+      console.log(scope.datasource);
+      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/apps/all.ts

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

public/app/features/dashboard/keybindings.js

@@ -52,7 +52,7 @@ function(angular, $) {
         scope.appEvent('save-dashboard', evt);
       }, { inputDisabled: true });
 
-      keyboardManager.bind('ctrl+r', function() {
+      keyboardManager.bind('r', function() {
         scope.broadcastRefresh();
       }, { inputDisabled: true });
 

public/app/features/panel/panel_directive.js

@@ -43,20 +43,6 @@ function (angular, $, config) {
     };
   });
 
-  module.directive('datasourceEditorView', function(dynamicDirectiveSrv) {
-    return {
-      restrict: 'E',
-      link: function(scope, elem, attrs) {
-        dynamicDirectiveSrv.define({
-          datasourceProperty: attrs.datasource,
-          name: attrs.name,
-          scope: scope,
-          parentElem: elem,
-        });
-      }
-    };
-  });
-
   module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
     return {
       restrict: 'E',

public/app/partials/help_modal.html

@@ -25,6 +25,10 @@
 				<td>Open dashboard search view (also contains import/playlist controls)</td>
 			</tr>
 			<tr>
+				<td><span class="label label-info">R</span></td>
+				<td>Refresh (Fetches new data and rerenders panels)</td>
+			</tr>
+			<tr>
 				<td><span class="label label-info">CTRL+S</span></td>
 				<td>Save dashboard</td>
 			</tr>
@@ -37,10 +41,6 @@
 				<td>Zoom out</td>
 			</tr>
 			<tr>
-				<td><span class="label label-info">CTRL+R</span></td>
-				<td>Refresh (Fetches new data and rerenders panels)</td>
-			</tr>
-			<tr>
 				<td><span class="label label-info">CTRL+O</span></td>
 				<td>Enable/Disable shared graph crosshair</td>
 			</tr>

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

@@ -29,11 +29,12 @@ function (angular, CloudWatchDatasource) {
     };
   });
 
-  module.directive('datasourceCustomSettingsViewCloudwatch', function() {
+  function configView() {
     return {templateUrl: 'app/plugins/datasource/cloudwatch/partials/edit_view.html'};
-  });
+  }
 
   return  {
-    Datasource: CloudWatchDatasource
+    Datasource: CloudWatchDatasource,
+    configView: configView,
   };
 });

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

@@ -10,18 +10,6 @@ function (angular, ElasticDatasource, editView) {
 
   var module = angular.module('grafana.directives');
 
-  module.directive('metricQueryEditorElasticsearch', function() {
-    return {controller: 'ElasticQueryCtrl', templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.editor.html'};
-  });
-
-  module.directive('metricQueryOptionsElasticsearch', function() {
-    return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.options.html'};
-  });
-
-  module.directive('annotationsQueryEditorElasticsearch', function() {
-    return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/annotations.editor.html'};
-  });
-
   module.directive('elasticMetricAgg', function() {
     return {
       templateUrl: 'app/plugins/datasource/elasticsearch/partials/metric_agg.html',
@@ -51,11 +39,22 @@ function (angular, ElasticDatasource, editView) {
     };
   });
 
-  module.directive('datasourceCustomSettingsViewElasticsearch', editView.default);
+  module.directive('metricQueryEditorElasticsearch', function() {
+    return {controller: 'ElasticQueryCtrl', templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.editor.html'};
+  });
+
+  module.directive('metricQueryOptionsElasticsearch', function() {
+    return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.options.html'};
+  });
+
+  function annotationsQueryEditor() {
+    return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/annotations.editor.html'};
+  }
 
   return {
     Datasource: ElasticDatasource,
     configView: editView.default,
+    annotationsQueryEditor: annotationsQueryEditor,
   };
 
 });

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

@@ -15,15 +15,17 @@ function (angular, GraphiteDatasource) {
     return {templateUrl: 'app/plugins/datasource/graphite/partials/query.options.html'};
   });
 
-  module.directive('annotationsQueryEditorGraphite', function() {
+  function annotationsQueryEditor() {
     return {templateUrl: 'app/plugins/datasource/graphite/partials/annotations.editor.html'};
-  });
+  }
 
-  module.directive('datasourceCustomSettingsViewGraphite', function() {
+  function configView() {
     return {templateUrl: 'app/plugins/datasource/graphite/partials/config.html'};
-  });
+  }
 
   return {
     Datasource: GraphiteDatasource,
+    configView: configView,
+    annotationsQueryEditor: annotationsQueryEditor,
   };
 });

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='currentAnnotation.target' placeholder=""></input>
+		<input type="text" class="span10" ng-model='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='currentAnnotation.tags' placeholder=""></input>
+		<input type="text" ng-model='annotation.tags' placeholder=""></input>
 	</div>
 </div>