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

influxdb: improvements to influxdb query editor, SLIMIT, LIMIT and ORDER BY now added on demand by plus button

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-05-16 16:28:58 +02:00
parent 8b11712f5e
commit 02c79a6389
2 changed files with 74 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
public/app/plugins/datasource/influxdb/partials/query.editor.html
View File

@ -1,7 +1,7 @@
<query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true">
<div class="gf-form" ng-if="ctrl.target.rawQuery">
<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
<textarea rows="3" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" placeholder="InfuxDB Query" ng-model-onblur ng-change="ctrl.refresh()"></textarea>
</div>
<div ng-if="!ctrl.target.rawQuery">
@ -72,44 +72,51 @@
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">ORDER BY</label>
<label class="gf-form-label query-part width-4">time</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.orderByTime" ng-options="f.value as f.text for f in ctrl.orderByTime" ng-change="ctrl.refresh()"></select>
</div>
</div>
<div class="gf-form max-width-14">
<label class="gf-form-label query-keyword width-5">LIMIT</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.limit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
</div>
<div class="gf-form max-width-14">
<label class="gf-form-label query-keyword width-5">SLIMIT</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.slimit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-inline" ng-if="ctrl.target.orderByTime === 'DESC'">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">ORDER BY</label>
<label class="gf-form-label">time</label>
<label class="gf-form-label query-keyword" ng-click="ctrl.removeOrderBy()">DESC <i class="fa fa-remove"></i></label>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<label class="gf-form-label query-keyword width-7">ALIAS BY</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
</div>
<div class="gf-form">
<label class="gf-form-label">Format as</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
<div class="gf-form-inline" ng-if="ctrl.target.limit">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">LIMIT</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.limit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
</div>
<div class="gf-form-inline" ng-if="ctrl.target.slimit">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">SLIMIT</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.slimit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<label class="gf-form-label query-keyword width-7">ALIAS BY</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword">FORMAT AS</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
</div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
</query-editor-row>

37
public/app/plugins/datasource/influxdb/query_ctrl.ts
View File

@ -33,11 +33,6 @@ export class InfluxQueryCtrl extends QueryCtrl {
{text: 'Time series', value: 'time_series'},
{text: 'Table', value: 'table'},
];
this.orderByTime = [
{text: 'ASC', value: 'ASC'},
{text: 'DESC', value: 'DESC'},
];
this.policySegment = uiSegmentSrv.newSegment(this.target.policy);
if (!this.target.measurement) {
@ -70,6 +65,10 @@ export class InfluxQueryCtrl extends QueryCtrl {
this.removeTagFilterSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove tag filter --'});
}
removeOrderByTime() {
this.target.orderByTime = 'ASC';
}
buildSelectMenu() {
var categories = queryPart.getCategories();
this.selectMenu = _.reduce(categories, function(memo, cat, key) {
@ -92,6 +91,15 @@ export class InfluxQueryCtrl extends QueryCtrl {
if (!this.queryModel.hasFill()) {
options.push(this.uiSegmentSrv.newSegment({value: 'fill(null)'}));
}
if (!this.target.limit) {
options.push(this.uiSegmentSrv.newSegment({value: 'LIMIT'}));
}
if (!this.target.slimit) {
options.push(this.uiSegmentSrv.newSegment({value: 'SLIMIT'}));
}
if (this.target.orderByTime === 'ASC') {
options.push(this.uiSegmentSrv.newSegment({value: 'ORDER BY time DESC'}));
}
if (!this.queryModel.hasGroupByTime()) {
options.push(this.uiSegmentSrv.newSegment({value: 'time($interval)'}));
}
@ -103,7 +111,24 @@ export class InfluxQueryCtrl extends QueryCtrl {
}
groupByAction() {
this.queryModel.addGroupBy(this.groupBySegment.value);
switch (this.groupBySegment.value) {
case 'LIMIT': {
this.target.limit = 10;
break;
}
case 'SLIMIT': {
this.target.slimit = 10;
break;
}
case 'ORDER BY time DESC': {
this.target.orderByTime = 'DESC';
break;
}
default: {
this.queryModel.addGroupBy(this.groupBySegment.value);
}
}
var plusButton = this.uiSegmentSrv.newPlusButton();
this.groupBySegment.value = plusButton.value;
this.groupBySegment.html = plusButton.html;