IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard
2014-07-13 15:01:20 +02:00
parent b5d378c425
commit 171c5aa50c
7 changed files with 64 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/panels/annotations/editor.html
View File

@@ -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>
</div>

10
src/app/panels/annotations/module.js
View File

@@ -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, _) {
};
});
});
});

15
src/app/partials/graphite/annotation_editor.html Normal file
View File

@@ -0,0 +1,15 @@
<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>

7
src/app/partials/influxdb/annotation_editor.html Normal file
View File

@@ -0,0 +1,7 @@
<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>

35
src/app/services/datasourceSrv.js
View File

@@ -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 {

2
src/app/services/graphite/graphiteDatasource.js
View File

@@ -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) {

3
src/app/services/influxdb/influxdbDatasource.js
View File

@@ -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) {