Skip to content

N
nexpie-grafana-theme
Commit 549eeeb2 by Torkel Ödegaard
Options

progress on influxdb datasource and target editor

parent 75bec29d
Showing with 167 additions and 11 deletions
src/app/controllers/all.js
...@@ -8,4 +8,5 @@ define([ ...@@ -8,4 +8,5 @@ define([
'./metricKeys', './metricKeys',
'./graphiteTarget', './graphiteTarget',
'./graphiteImport', './graphiteImport',
'./influxTargetCtrl',
], function () {}); ], function () {});
\ No newline at end of file
src/app/controllers/influxTargetCtrl.js 0 → 100644
define([
'angular'
],
function (angular) {
'use strict';
var module = angular.module('kibana.controllers');
module.controller('InfluxTargetCtrl', function($scope) {
$scope.init = function() {
if (!$scope.target.function) {
$scope.target.function = 'mean';
}
};
$scope.duplicate = function() {
var clone = angular.copy($scope.target);
$scope.panel.targets.push(clone);
};
});
});
\ No newline at end of file
src/app/panels/graphite/module.js
...@@ -244,6 +244,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -244,6 +244,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
var graphiteQuery = { var graphiteQuery = {
range: $scope.rangeUnparsed, range: $scope.rangeUnparsed,
interval: $scope.interval,
targets: $scope.panel.targets, targets: $scope.panel.targets,
format: $scope.panel.renderer === 'png' ? 'png' : 'json', format: $scope.panel.renderer === 'png' ? 'png' : 'json',
maxDataPoints: $scope.panel.span * 50, maxDataPoints: $scope.panel.span * 50,
...@@ -307,7 +308,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -307,7 +308,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
if (datapoints && datapoints.length > 0) { if (datapoints && datapoints.length > 0) {
var last = moment.utc(datapoints[datapoints.length - 1][1] * 1000); var last = moment.utc(datapoints[datapoints.length - 1][1] * 1000);
var from = moment.utc($scope.range.from); var from = moment.utc($scope.range.from);
if (last - from < -1000) { if (last - from < -10000) {
$scope.datapointsOutside = true; $scope.datapointsOutside = true;
} }
} }
......
src/app/partials/graphite/editor.html
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</ul> </ul>
<input type="text" <input type="text"
class="grafana-target-text-input" class="grafana-target-text-input span12"
ng-model="target.target" ng-model="target.target"
focus-me="showTextEditor" focus-me="showTextEditor"
spellcheck='false' spellcheck='false'
......
src/app/partials/influxdb/editor.html
<h5>InfluxDB<h5> <h5>InfluxDB queries<h5>
\ No newline at end of file
<div class="editor-row">
<div ng-repeat="target in panel.targets"
class="grafana-target"
ng-class="{'grafana-target-hidden': target.hide}"
ng-controller="InfluxTargetCtrl"
ng-init="init()">
<div class="grafana-target-inner-wrapper">
<div class="grafana-target-inner">
<ul class="grafana-target-controls">
<li class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="icon-cog"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
</ul>
</li>
<li>
<a class="pointer" tabindex="1" ng-click="removeTarget(target)">
<i class="icon-remove"></i>
</a>
</li>
</ul>
<ul class="grafana-target-controls-left">
<li>
<a class="grafana-target-segment"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="icon-eye-open"></i>
</a>
</li>
</ul>
<ul class="grafana-segment-list" role="menu">
<li>
<a class="grafana-target-segment">
From series
</a>
</li>
<li>
<input type="text"
class="input-medium grafana-target-segment-input"
ng-model="target.series"
spellcheck='false'
placeholder="series name"
ng-model-onblur ng-change="targetTextChanged()" >
</li>
<li>
<a class="grafana-target-segment">
Select
</a>
</li>
<li>
<input type="text"
class="input-medium grafana-target-segment-input"
ng-model="target.column"
placeholder="value column"
spellcheck='false'
ng-model-onblur ng-change="targetTextChanged()" >
</li>
<li>
<a class="grafana-target-segment">
Function
</a>
</li>
<li>
<select class="input-small grafana-target-segment-input" ng-model="target.function" ng-options="f for f in ['mean', 'sum']" ></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row" style="margin-top: 20px" ng-show="editor.index == 1">
<button class="btn btn-success pull-right" ng-click="add_target(panel.target)">Add target</button>
</div>
\ No newline at end of file
src/app/services/influxdb/influxdbDatasource.js
...@@ -15,15 +15,30 @@ function (angular, _) { ...@@ -15,15 +15,30 @@ function (angular, _) {
this.url = datasource.url; this.url = datasource.url;
this.username = datasource.username; this.username = datasource.username;
this.password = datasource.password; this.password = datasource.password;
this.templateSettings = {
interpolate : /\[\[([\s\S]+?)\]\]/g,
};
} }
InfluxDatasource.prototype.query = function() { InfluxDatasource.prototype.query = function(options) {
var target = options.targets[0];
var template = "select [[func]]([[column]]) from [[series]] where [[timeFilter]] group by time([[interval]])";
var templateData = {
series: target.series,
column: target.column,
func: target.function,
timeFilter: getTimeFilter(options),
interval: options.interval
};
var q = "select value from request_count where time > now() - 1h group by time(1m)"; var query = _.template(template, templateData, this.templateSettings);
console.log(query);
var output = { data: [] }; var output = { data: [] };
return this.doInfluxRequest(q).then(function(results) { return this.doInfluxRequest(query).then(function(results) {
_.each(results.data, function(series) { _.each(results.data, function(series) {
var timeCol = series.columns.indexOf('time'); var timeCol = series.columns.indexOf('time');
...@@ -38,10 +53,11 @@ function (angular, _) { ...@@ -38,10 +53,11 @@ function (angular, _) {
var target = series.name + "." + column; var target = series.name + "." + column;
var datapoints = []; var datapoints = [];
for(var i=0; i < series.points.length; i++) { var i, y;
for(i = series.points.length - 1, y = 0; i >= 0; i--, y++) {
var t = Math.floor(series.points[i][timeCol] / 1000); var t = Math.floor(series.points[i][timeCol] / 1000);
var v = series.points[i][index]; var v = series.points[i][index];
datapoints[i] = [v,t]; datapoints[y] = [v,t];
} }
output.data.push({ target:target, datapoints:datapoints }); output.data.push({ target:target, datapoints:datapoints });
...@@ -69,6 +85,10 @@ function (angular, _) { ...@@ -69,6 +85,10 @@ function (angular, _) {
return $http(options); return $http(options);
}; };
function getTimeFilter(options) {
return "time > now() - 6h";
}
return InfluxDatasource; return InfluxDatasource;
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/less/grafana.less
...@@ -318,15 +318,32 @@ ...@@ -318,15 +318,32 @@
input[type=text].grafana-target-text-input { input[type=text].grafana-target-text-input {
padding: 5px 7px; padding: 5px 7px;
border: 1px solid @grafanaTargetSegmentBorder; border: none;
margin: 0px; margin: 0px;
background: transparent; background: transparent;
width: 80%;
float: left; float: left;
color: @grafanaTargetColor; color: @grafanaTargetColor;
border-radius: 0; border-radius: 0;
} }
input[type=text].grafana-target-segment-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px;
border-radius: 0;
height: 22px;
line-height: 22px;
}
select.grafana-target-segment-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px;
border-radius: 0;
height: 30px;
line-height: 30px;
}
.grafana-target .dropdown { .grafana-target .dropdown {
padding: 0; margin: 0; padding: 0; margin: 0;
} }
......
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