Skip to content

N
nexpie-grafana-theme
Commit c4c3f9dc by Torkel Ödegaard
Options

feat(influxdb): more work on changing the influxdb editor to support better… 

feat(influxdb): more work on changing the influxdb editor to support better aliasing and interval options, #2647, #2599
parent 5b722deb
Showing with 137 additions and 266 deletions
public/app/plugins/datasource/influxdb/datasource.js
......@@ -6,7 +6,6 @@ define([
'./queryBuilder',
'./directives',
'./queryCtrl',
'./funcEditor',
],
function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
'use strict';
......
public/app/plugins/datasource/influxdb/funcEditor.js deleted 100644 → 0
define([
'angular',
'lodash',
'jquery',
],
function (angular, _, $) {
'use strict';
angular
.module('grafana.directives')
.directive('influxdbFuncEditor', function($compile) {
var funcSpanTemplate = '<a gf-dropdown="functionMenu" class="dropdown-toggle" ' +
'data-toggle="dropdown">{{field.func}}</a><span>(</span>';
var paramTemplate = '<input type="text" style="display:none"' +
' class="input-mini tight-form-func-param"></input>';
var functionList = [
'count', 'mean', 'sum', 'min', 'max', 'mode', 'distinct', 'median',
'derivative', 'non_negative_derivative', 'stddev', 'first', 'last'
];
var functionMenu = _.map(functionList, function(func) {
return { text: func, click: "changeFunction('" + func + "');" };
});
return {
restrict: 'A',
scope: {
field: "=",
getFields: "&",
onChange: "&",
},
link: function postLink($scope, elem) {
var $funcLink = $(funcSpanTemplate);
$scope.functionMenu = functionMenu;
$scope.changeFunction = function(func) {
$scope.field.func = func;
$scope.onChange();
};
function clickFuncParam() {
/*jshint validthis:true */
var $link = $(this);
var $input = $link.next();
$input.val($scope.field.name);
$input.css('width', ($link.width() + 16) + 'px');
$link.hide();
$input.show();
$input.focus();
$input.select();
var typeahead = $input.data('typeahead');
if (typeahead) {
$input.val('');
typeahead.lookup();
}
}
function inputBlur() {
/*jshint validthis:true */
var $input = $(this);
var $link = $input.prev();
if ($input.val() !== '') {
$link.text($input.val());
$scope.field.name = $input.val();
$scope.$apply($scope.onChange());
}
$input.hide();
$link.show();
}
function inputKeyPress(e) {
/*jshint validthis:true */
if(e.which === 13) {
inputBlur.call(this);
}
}
function inputKeyDown() {
/*jshint validthis:true */
this.style.width = (3 + this.value.length) * 8 + 'px';
}
function addTypeahead($input) {
$input.attr('data-provide', 'typeahead');
$input.typeahead({
source: function (query, callback) {
return $scope.getFields().then(function(results) {
callback(results);
});
},
minLength: 0,
items: 1000,
updater: function (value) {
setTimeout(function() {
inputBlur.call($input[0]);
}, 0);
return value;
}
});
var typeahead = $input.data('typeahead');
typeahead.lookup = function () {
var items;
this.query = this.$element.val() || '';
items = this.source(this.query, $.proxy(this.process, this));
return items ? this.process(items) : items;
};
}
function addElementsAndCompile() {
$funcLink.appendTo(elem);
var $paramLink = $('<a ng-click="" class="graphite-func-param-link">' + $scope.field.name + '</a>');
var $input = $(paramTemplate);
$paramLink.appendTo(elem);
$input.appendTo(elem);
$input.blur(inputBlur);
$input.keyup(inputKeyDown);
$input.keypress(inputKeyPress);
$paramLink.click(clickFuncParam);
addTypeahead($input);
$('<span>)</span>').appendTo(elem);
$compile(elem.contents())($scope);
}
addElementsAndCompile();
}
};
});
});
public/app/plugins/datasource/influxdb/partials/query.editor2.html
......@@ -69,6 +69,39 @@
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-repeat="field in target.fields">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<span ng-show="$index === 0">SELECT</span>
</li>
<li>
<metric-segment-model property="field.func" get-options="getFunctions()" on-change="get_data()"></metric-segment>
</li>
<li>
<metric-segment-model property="field.name" get-options="getFields()" on-change="get_data()"></metric-segment>
</li>
<li>
<input type="text" class="tight-form-clear-input text-center" style="width: 70px;" ng-model="field.mathExpr" spellcheck='false' placeholder="math expr" ng-blur="get_data()">
</li>
<li class="tight-form-item query-keyword">
AS
</li>
<li>
<input type="text" class="tight-form-clear-input" style="width: 180px;" ng-model="field.asExpr" spellcheck='false' placeholder="as expr" ng-blur="get_data()">
</li>
</ul>
<ul class="tight-form-list pull-right">
<li class="tight-form-item last" ng-show="$index === 0">
<a class="pointer" ng-click="addSelect()"><i class="fa fa-plus"></i></a>
</li>
<li class="tight-form-item last" ng-show="target.fields.length > 1">
<a class="pointer" ng-click="removeSelect($index)"><i class="fa fa-minus"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-repeat="tag in target.groupBy">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
......@@ -96,14 +129,10 @@
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
SELECT
</li>
<li class="dropdown" ng-repeat="field in target.fields">
<span influxdb-func-editor field="field" get-fields="getFields()" on-change="fieldChanged(field)" class="tight-form-item">
</span>
ALIAS BY
</li>
<li>
<metric-segment segment="addFieldSegment" get-options="getFieldSegments()" on-change="addField()"></metric-segment>
<input type="text" class="tight-form-clear-input input-xlarge" ng-model="target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="get_data()">
</li>
</ul>
<div class="clearfix"></div>
......
public/app/plugins/datasource/influxdb/queryBuilder.js
......@@ -84,6 +84,14 @@ function (_) {
return query;
};
p._getGroupByTimeInterval = function(interval) {
if (interval === 'auto') {
return '$interval';
}
return interval;
};
p._buildQuery = function() {
var target = this.target;
......@@ -103,6 +111,14 @@ function (_) {
query += ', ';
}
query += field.func + '("' + field.name + '")';
if (field.mathExpr) {
query += field.mathExpr;
}
if (field.asExpr) {
query += ' AS "' + field.asExpr + '"';
} else {
query += ' AS "' + field.name + '"';
}
}
var measurement = target.measurement;
......@@ -122,9 +138,9 @@ function (_) {
for (i = 0; i < target.groupBy.length; i++) {
var group = target.groupBy[i];
if (group.type === 'time') {
query += ' time(10s)';
query += ' time(' + this._getGroupByTimeInterval(group.interval) + ')';
} else {
query += ', ' + group.key;
query += ', "' + group.key + '"';
}
}
......
public/app/plugins/datasource/influxdb/queryCtrl.js
......@@ -29,8 +29,6 @@ function (angular, _, InfluxQueryBuilder) {
$scope.measurementSegment = uiSegmentSrv.newSegment(target.measurement);
}
$scope.addFieldSegment = uiSegmentSrv.newPlusButton();
$scope.tagSegments = [];
_.each(target.tags, function(tag) {
if (!tag.operator) {
......@@ -73,23 +71,13 @@ function (angular, _, InfluxQueryBuilder) {
$scope.get_data();
};
$scope.groupByTagUpdated = function(segment, index) {
if (segment.value === $scope.removeGroupBySegment.value) {
$scope.target.groupByTags.splice(index, 1);
$scope.groupBySegments.splice(index, 1);
$scope.$parent.get_data();
return;
}
if (index === $scope.groupBySegments.length-1) {
$scope.groupBySegments.push(uiSegmentSrv.newPlusButton());
}
segment.type = 'group-by-key';
segment.fake = false;
$scope.addSelect = function() {
$scope.target.fields.push({name: "select field", func: 'mean'});
};
$scope.target.groupByTags[index] = segment.value;
$scope.$parent.get_data();
$scope.removeSelect = function(index) {
$scope.target.fields.splice(index, 1);
$scope.get_data();
};
$scope.changeFunction = function(func) {
......@@ -105,13 +93,7 @@ function (angular, _, InfluxQueryBuilder) {
$scope.getFields = function() {
var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS');
return $scope.datasource.metricFindQuery(fieldsQuery)
.then(function(results) {
var values = _.pluck(results, 'text');
if ($scope.target.fields.length > 1) {
values.splice(0, 0, "-- remove from select --");
}
return values;
});
.then($scope.transformToSegments(false), $scope.handleQueryError);
};
$scope.toggleQueryMode = function () {
......@@ -121,8 +103,16 @@ function (angular, _, InfluxQueryBuilder) {
$scope.getMeasurements = function () {
var query = $scope.queryBuilder.buildExploreQuery('MEASUREMENTS');
return $scope.datasource.metricFindQuery(query)
.then($scope.transformToSegments(true))
.then(null, $scope.handleQueryError);
.then($scope.transformToSegments(true), $scope.handleQueryError);
};
$scope.getFunctions = function () {
var functionList = ['count', 'mean', 'sum', 'min', 'max', 'mode', 'distinct', 'median',
'derivative', 'non_negative_derivative', 'stddev', 'first', 'last'
];
return $q.when(_.map(functionList, function(func) {
return uiSegmentSrv.newSegment(func);
}));
};
$scope.handleQueryError = function(err) {
......
public/test/specs/influx09-querybuilder-specs.js
......@@ -6,76 +6,96 @@ define([
describe('InfluxQueryBuilder', function() {
describe('series with mesurement only', function() {
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
});
it('should generate correct query', function() {
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
groupBy: [{type: 'time', interval: 'auto'}]
});
var query = builder.build();
var query = builder.build();
it('should generate correct query', function() {
expect(query).to.be('SELECT mean("value") FROM "cpu" WHERE $timeFilter GROUP BY time($interval)');
expect(query).to.be('SELECT mean("value") AS "value" FROM "cpu" WHERE $timeFilter GROUP BY time($interval)');
});
});
describe('series with math expr and as expr', function() {
it('should generate correct query', function() {
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
fields: [{name: 'test', func: 'max', mathExpr: '*2', asExpr: 'new_name'}],
groupBy: [{type: 'time', interval: 'auto'}]
});
var query = builder.build();
expect(query).to.be('SELECT max("test")*2 AS "new_name" FROM "cpu" WHERE $timeFilter GROUP BY time($interval)');
});
});
describe('series with single tag only', function() {
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
tags: [{key: 'hostname', value: 'server1'}]
});
it('should generate correct query', function() {
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
groupBy: [{type: 'time', interval: 'auto'}],
tags: [{key: 'hostname', value: 'server1'}]
});
var query = builder.build();
var query = builder.build();
it('should generate correct query', function() {
expect(query).to.be('SELECT mean("value") FROM "cpu" WHERE "hostname" = \'server1\' AND $timeFilter'
expect(query).to.be('SELECT mean("value") AS "value" FROM "cpu" WHERE "hostname" = \'server1\' AND $timeFilter'
+ ' GROUP BY time($interval)');
});
it('should switch regex operator with tag value is regex', function() {
var builder = new InfluxQueryBuilder({measurement: 'cpu', tags: [{key: 'app', value: '/e.*/'}]});
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
groupBy: [{type: 'time', interval: 'auto'}],
tags: [{key: 'app', value: '/e.*/'}]
});
var query = builder.build();
expect(query).to.be('SELECT mean("value") FROM "cpu" WHERE "app" =~ /e.*/ AND $timeFilter GROUP BY time($interval)');
expect(query).to.be('SELECT mean("value") AS "value" FROM "cpu" WHERE "app" =~ /e.*/ AND $timeFilter GROUP BY time($interval)');
});
});
describe('series with multiple fields', function() {
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
tags: [],
fields: [{ name: 'tx_in', func: 'sum' }, { name: 'tx_out', func: 'mean' }]
});
var query = builder.build();
it('should generate correct query', function() {
expect(query).to.be('SELECT sum("tx_in"), mean("tx_out") FROM "cpu" WHERE $timeFilter GROUP BY time($interval)');
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
tags: [],
groupBy: [{type: 'time', interval: 'auto'}],
fields: [{ name: 'tx_in', func: 'sum' }, { name: 'tx_out', func: 'mean' }]
});
var query = builder.build();
expect(query).to.be('SELECT sum("tx_in") AS "tx_in", mean("tx_out") AS "tx_out" FROM "cpu" WHERE $timeFilter GROUP BY time($interval)');
});
});
describe('series with multiple tags only', function() {
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
tags: [{key: 'hostname', value: 'server1'}, {key: 'app', value: 'email', condition: "AND"}]
});
var query = builder.build();
it('should generate correct query', function() {
expect(query).to.be('SELECT mean("value") FROM "cpu" WHERE "hostname" = \'server1\' AND "app" = \'email\' AND ' +
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
groupBy: [{type: 'time', interval: 'auto'}],
tags: [{key: 'hostname', value: 'server1'}, {key: 'app', value: 'email', condition: "AND"}]
});
var query = builder.build();
expect(query).to.be('SELECT mean("value") AS "value" FROM "cpu" WHERE "hostname" = \'server1\' AND "app" = \'email\' AND ' +
'$timeFilter GROUP BY time($interval)');
});
});
describe('series with tags OR condition', function() {
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
tags: [{key: 'hostname', value: 'server1'}, {key: 'hostname', value: 'server2', condition: "OR"}]
});
var query = builder.build();
it('should generate correct query', function() {
expect(query).to.be('SELECT mean("value") FROM "cpu" WHERE "hostname" = \'server1\' OR "hostname" = \'server2\' AND ' +
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
groupBy: [{type: 'time', interval: 'auto'}],
tags: [{key: 'hostname', value: 'server1'}, {key: 'hostname', value: 'server2', condition: "OR"}]
});
var query = builder.build();
expect(query).to.be('SELECT mean("value") AS "value" FROM "cpu" WHERE "hostname" = \'server1\' OR "hostname" = \'server2\' AND ' +
'$timeFilter GROUP BY time($interval)');
});
});
......@@ -85,12 +105,12 @@ define([
var builder = new InfluxQueryBuilder({
measurement: 'cpu',
tags: [],
groupByTags: ["host"]
groupBy: [{type: 'time', interval: 'auto'}, {type: 'tag', key: 'host'}],
});
var query = builder.build();
expect(query).to.be('SELECT mean("value") FROM "cpu" WHERE $timeFilter ' +
'GROUP BY time($interval), "host"');
expect(query).to.be('SELECT mean("value") AS "value" FROM "cpu" WHERE $timeFilter ' +
'GROUP BY time($interval), "host"');
});
});
......@@ -103,7 +123,10 @@ define([
});
it('should handle regex measurement in tag keys query', function() {
var builder = new InfluxQueryBuilder({ measurement: '/.*/', tags: [] });
var builder = new InfluxQueryBuilder({
measurement: '/.*/',
tags: []
});
var query = builder.buildExploreQuery('TAG_KEYS');
expect(query).to.be('SHOW TAG KEYS FROM /.*/');
});
......
public/test/specs/influxdbQueryCtrl-specs.js
......@@ -184,39 +184,5 @@ define([
});
});
describe('when adding group by', function() {
beforeEach(function() {
ctx.scope.init();
ctx.scope.groupByTagUpdated({value: 'host', type: 'plus-button' }, 0);
});
it('should add group by', function() {
expect(ctx.scope.target.groupByTags.length).to.be(1);
expect(ctx.scope.target.groupByTags[0]).to.be('host');
});
it('should add another plus button segment', function() {
expect(ctx.scope.groupBySegments[1].type).to.be('plus-button');
});
});
describe('when removing group by', function() {
beforeEach(function() {
ctx.scope.init();
ctx.scope.groupByTagUpdated({value: 'host', type: 'plus-button' }, 0);
ctx.scope.groupByTagUpdated(ctx.scope.removeGroupBySegment, 0);
});
it('should add group by', function() {
expect(ctx.scope.target.groupByTags.length).to.be(0);
});
it('should remove segment', function() {
expect(ctx.scope.groupBySegments.length).to.be(1);
expect(ctx.scope.groupBySegments[0].type).to.be('plus-button');
});
});
});
});
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