began work on annotations redesign to easier support more annotation sources, #133, #394, #403

src/app/panels/annotations/editor.html

@@ -32,8 +32,8 @@
       <input type="text" class="input-medium" ng-model='currentAnnnotation.name' placeholder="name"></input>
     </div>
     <div class="editor-option">
-      <label class="small">Type</label>
-      <select ng-model="currentAnnnotation.type" ng-options="f for f in ['graphite metric', 'graphite events']"></select>
+      <label class="small">Datasource</label>
+      <select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
     </div>
     <div class="editor-option">
       <label class="small">Icon color</label>
@@ -53,18 +53,7 @@
     </div>
   </div>
 
-  <div class="editor-row" ng-if="currentAnnnotation.type === 'graphite metric'">
-    <div class="editor-option">
-      <label class="small">Graphite target expression</label>
-      <input type="text" class="span10" ng-model='currentAnnnotation.target' placeholder=""></input>
-    </div>
-  </div>
-
-  <div class="editor-row" ng-if="currentAnnnotation.type === 'graphite events'">
-    <div class="editor-option">
-      <label class="small">Graphite event tags</label>
-      <input type="text" ng-model='currentAnnnotation.tags' placeholder=""></input>
-    </div>
+  <div ng-include src="currentDatasource.editorSrc">
   </div>
 
 </div>
@@ -73,4 +62,4 @@
   <button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
   <button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</button>
   <button type="button" class="btn btn-danger" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
-</div>
\ No newline at end of file
+</div>

src/app/panels/annotations/module.js

@@ -14,7 +14,7 @@ function (angular, app, _) {
   var module = angular.module('kibana.panels.annotations', []);
   app.useModule(module);
 
-  module.controller('AnnotationsCtrl', function($scope, dashboard, $rootScope) {
+  module.controller('AnnotationsCtrl', function($scope, datasourceSrv, $rootScope) {
 
     $scope.panelMeta = {
       status  : "Stable",
@@ -41,14 +41,20 @@ function (angular, app, _) {
     $scope.init = function() {
       $scope.currentAnnnotation = angular.copy(annotationDefaults);
       $scope.currentIsNew = true;
+      $scope.datasources = datasourceSrv.getAnnotationSources();
+      if ($scope.datasources.length > 0) {
+        $scope.currentDatasource = $scope.datasources[0];
+      }
     };
 
     $scope.edit = function(annotation) {
       $scope.currentAnnnotation = annotation;
       $scope.currentIsNew = false;
+      $scope.currentDatasource = datasourceSrv.get(annotation.datasource);
     };
 
     $scope.update = function() {
+      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
       $scope.currentAnnnotation = angular.copy(annotationDefaults);
       $scope.currentIsNew = true;
     };
@@ -64,4 +70,4 @@ function (angular, app, _) {
     };
 
   });
-});
\ No newline at end of file
+});

src/app/partials/graphite/annotation_editor.html

+<div class="editor-row"> 
+	<div class="editor-option">
+		<label class="small">Graphite target expression</label>
+		<input type="text" class="span10" ng-model='currentAnnnotation.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='currentAnnnotation.tags' placeholder=""></input>
+	</div>
+</div>
+
+

src/app/partials/influxdb/annotation_editor.html

+<div class="editor-row"> 
+	<div class="editor-option">
+		<label class="small">InfluxDB query</label>
+		<input type="text" class="span10" ng-model='currentAnnnotation.query' placeholder=""></input>
+	</div>
+</div>
+

src/app/services/datasourceSrv.js

@@ -12,13 +12,19 @@ function (angular, _, config) {
   var module = angular.module('kibana.services');
 
   module.service('datasourceSrv', function($q, filterSrv, $http, GraphiteDatasource, InfluxDatasource, OpenTSDBDatasource) {
+    var datasources = {};
 
     this.init = function() {
-      var defaultDatasource = _.findWhere(_.values(config.datasources), { default: true });
-      if (!defaultDatasource) {
-        defaultDatasource = config.datasources[_.keys(config.datasources)[0]];
+      _.each(config.datasources, function(value, key) {
+        datasources[key] = this.datasourceFactory(value);
+        if (value.default) {
+          this.default = datasources[key];
+        }
+      }, this);
+
+      if (!this.default) {
+        this.default = datasources[_.keys(datasources)[0]];
       }
-      this.default = this.datasourceFactory(defaultDatasource);
     };
 
     this.datasourceFactory = function(ds) {
@@ -34,15 +40,24 @@ function (angular, _, config) {
 
     this.get = function(name) {
       if (!name) { return this.default; }
+      if (datasources[name]) { return datasources[name]; }
 
-      var ds = config.datasources[name];
-      if (!ds) {
-        return null;
-      }
-
-      return this.datasourceFactory(ds);
+      throw "Unable to find datasource: " + name;
     };
 
+    this.getAnnotationSources = function() {
+      var results = [];
+      _.each(datasources, function(value, key) {
+        if (value.supportAnnotations) {
+          results.push({
+            name: key,
+            editorSrc: value.annotationEditorSrc
+          }); 
+        } 
+      });
+      return results;
+    }; 
+
     this.listOptions = function() {
       return _.map(config.datasources, function(value, key) {
         return {

src/app/services/graphite/graphiteDatasource.js

@@ -20,6 +20,8 @@ function (angular, _, $, config, kbn, moment) {
       this.editorSrc = 'app/partials/graphite/editor.html';
       this.name = datasource.name;
       this.render_method = datasource.render_method || 'POST';
+      this.supportAnnotations = true;
+      this.annotationEditorSrc = 'app/partials/graphite/annotation_editor.html';
     }
 
     GraphiteDatasource.prototype.query = function(filterSrv, options) {

src/app/services/influxdb/influxdbDatasource.js

@@ -21,6 +21,9 @@ function (angular, _, kbn, InfluxSeries) {
       this.templateSettings = {
         interpolate : /\[\[([\s\S]+?)\]\]/g,
       };
+
+      this.supportAnnotations = true;
+      this.annotationEditorSrc = 'app/partials/influxdb/annotation_editor.html';
     }
 
     InfluxDatasource.prototype.query = function(filterSrv, options) {