Skip to content

N
nexpie-grafana-theme
Commit 2fe3b0de by Torkel Ödegaard
Options

influxdb annoations starting to work

parent b47047a9
Showing with 120 additions and 44 deletions
src/app/panels/annotations/editor.html
<div bindonce class="modal-body"> <div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div class="modal-body">
<div class="pull-right editor-title">Annotations</div> <div class="pull-right editor-title">Annotations</div>
<div class="editor-row"> <div class="editor-row">
...@@ -29,7 +30,7 @@ ...@@ -29,7 +30,7 @@
<div class="editor-option"> <div class="editor-option">
<label class="small">Name</label> <label class="small">Name</label>
<input type="text" class="input-medium" ng-model='currentAnnnotation.name' placeholder="name"></input> <input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Datasource</label> <label class="small">Datasource</label>
...@@ -37,19 +38,19 @@ ...@@ -37,19 +38,19 @@
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Icon color</label> <label class="small">Icon color</label>
<spectrum-picker ng-model="currentAnnnotation.iconColor"></spectrum-picker> <spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Icon size</label> <label class="small">Icon size</label>
<select class="input-mini" ng-model="currentAnnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select> <select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Grid line</label> <label class="small">Grid line</label>
<input type="checkbox" ng-model="currentAnnnotation.showLine" ng-checked="currentAnnnotation.showLine"> <input type="checkbox" ng-model="currentAnnotation.showLine" ng-checked="currentAnnotation.showLine">
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Line color</label> <label class="small">Line color</label>
<spectrum-picker ng-model="currentAnnnotation.lineColor"></spectrum-picker> <spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
</div> </div>
</div> </div>
...@@ -63,3 +64,4 @@ ...@@ -63,3 +64,4 @@
<button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</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> <button type="button" class="btn btn-danger" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
</div> </div>
</div>
src/app/panels/annotations/editor.js 0 → 100644
/*
*/
define([
'angular',
'app',
'underscore'
],
function (angular, app, _) {
'use strict';
var module = angular.module('kibana.panels.annotations', []);
app.useModule(module);
module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv, $rootScope) {
var annotationDefaults = {
name: '',
datasource: null,
showLine: true,
iconColor: '#C0C6BE',
lineColor: 'rgba(255, 96, 96, 0.592157)',
iconSize: 13,
enable: true
};
$scope.init = function() {
$scope.currentAnnotation = angular.copy(annotationDefaults);
$scope.currentIsNew = true;
$scope.datasources = datasourceSrv.getAnnotationSources();
if ($scope.datasources.length > 0) {
$scope.currentDatasource = $scope.datasources[0];
}
};
$scope.setDatasource = function() {
$scope.currentAnnotation.datasource = $scope.currentDatasource.name;
};
$scope.edit = function(annotation) {
$scope.currentAnnotation = annotation;
$scope.currentIsNew = false;
$scope.currentDatasource = _.findWhere($scope.datasources, { name: annotation.datasource });
};
$scope.update = function() {
$scope.currentAnnotation = angular.copy(annotationDefaults);
$scope.currentIsNew = true;
};
$scope.add = function() {
$scope.currentAnnotation.datasource = $scope.currentDatasource.name;
$scope.panel.annotations.push($scope.currentAnnotation);
$scope.currentAnnnotation = angular.copy(annotationDefaults);
};
$scope.hide = function (annotation) {
annotation.enable = !annotation.enable;
$rootScope.$broadcast('refresh');
};
});
});
src/app/panels/annotations/module.js
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
define([ define([
'angular', 'angular',
'app', 'app',
'underscore' 'underscore',
'./editor'
], ],
function (angular, app, _) { function (angular, app, _) {
'use strict'; 'use strict';
...@@ -26,48 +27,13 @@ function (angular, app, _) { ...@@ -26,48 +27,13 @@ function (angular, app, _) {
annotations: [] annotations: []
}; };
var annotationDefaults = {
name: '',
type: 'graphite metric',
showLine: true,
iconColor: '#C0C6BE',
lineColor: 'rgba(255, 96, 96, 0.592157)',
iconSize: 13,
enable: true
};
_.defaults($scope.panel,_d); _.defaults($scope.panel,_d);
$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;
};
$scope.add = function() {
$scope.panel.annotations.push($scope.currentAnnnotation);
$scope.currentAnnnotation = angular.copy(annotationDefaults);
};
$scope.hide = function (annotation) { $scope.hide = function (annotation) {
annotation.enable = !annotation.enable; annotation.enable = !annotation.enable;
$rootScope.$broadcast('refresh'); $rootScope.$broadcast('refresh');
}; };
}); });
}); });
src/app/partials/influxdb/annotation_editor.html
<div class="editor-row"> <div class="editor-row">
<div class="editor-option"> <div class="editor-option">
<label class="small">InfluxDB query</label> <label class="small">InfluxDB query</label>
<input type="text" class="span10" ng-model='currentAnnnotation.query' placeholder=""></input> <input type="text" class="span10" ng-model='currentAnnotation.query' placeholder=""></input>
</div> </div>
</div> </div>
src/app/services/influxdb/influxdbDatasource.js
...@@ -119,6 +119,50 @@ function (angular, _, kbn, InfluxSeries) { ...@@ -119,6 +119,50 @@ function (angular, _, kbn, InfluxSeries) {
}; };
InfluxDatasource.prototype.annotationQuery = function(annotation, filterSrv, rangeUnparsed) {
var timeFilter = getTimeFilter({ range: rangeUnparsed });
var query = _.template(annotation.query, {
timeFilter: timeFilter
}, this.templateSettings);
return this.doInfluxRequest(query)
.then(function (results) {
var list = [];
_.each(results, function (series) {
var descriptionCol = 0;
var tagsCol = 0;
_.each(series.columns, function(column, index) {
if (column === 'time' || column === 'sequence_number') {
return;
}
if (!descriptionCol) {
descriptionCol = index;
}
else {
tagsCol = index;
}
});
_.each(series.points, function (point) {
var data = {
annotation: annotation,
time: point[0] * 1000,
description: point[descriptionCol]
};
if (tagsCol) {
data.tags = point[tagsCol];
}
list.push(data);
});
});
return list;
});
};
InfluxDatasource.prototype.listColumns = function(seriesName) { InfluxDatasource.prototype.listColumns = function(seriesName) {
return this.doInfluxRequest('select * from /' + seriesName + '/ limit 1').then(function(data) { return this.doInfluxRequest('select * from /' + seriesName + '/ limit 1').then(function(data) {
if (!data) { if (!data) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment