Skip to content

N
nexpie-grafana-theme
Commit 5ae0239c by Torkel Ödegaard
Options

small UI changes to InfluxDB query editor, made each query two lines to give… 

small UI changes to InfluxDB query editor, made each query two lines to give more space to series name
parent 2dc4434a
Showing with 121 additions and 90 deletions
src/app/partials/influxdb/editor.html
......@@ -45,7 +45,7 @@
<ul class="grafana-segment-list" ng-show="target.rawQuery">
<li>
<input type="text"
class="grafana-target-segment-input span8"
class="grafana-target-text-input span10"
ng-model="target.query"
placeholder="select ..."
focus-me="target.rawQuery"
......@@ -55,25 +55,16 @@
ng-blur="get_data()">
</li>
<li class="grafana-target-segment">
as
</li>
<li>
<input type="text"
class="input-medium grafana-target-segment-input"
ng-model="target.alias"
spellcheck='false'
placeholder="alias"
ng-blur="get_data()">
</li>
</ul>
<!-- Query editor mode -->
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
<li class="grafana-target-segment">
from series
</li>
<li>
<input type="text"
class="input-large grafana-target-segment-input"
class="grafana-target-text-input span8"
ng-model="target.series"
spellcheck='false'
bs-typeahead="listSeries"
......@@ -81,94 +72,116 @@
data-min-length=0 data-items=100
ng-blur="seriesBlur()">
</li>
</ul>
<li class="grafana-target-segment">
select
</li>
<div class="clearfix"></div>
</div>
<li class="dropdown">
<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
</span>
<div class="grafana-target-inner">
<!-- Raw Query mode -->
<ul class="grafana-segment-list" ng-show="target.rawQuery">
<li class="grafana-target-segment">
alias
</li>
<li>
<a class="grafana-target-segment"
ng-click="target.condition_filter = !target.condition_filter; get_data();"
bs-tooltip="'Add a where clause'"
role="menuitem">
<i class="icon-filter"></i>
</a>
</li>
<li ng-show="target.condition_filter">
<input type="text"
class="input-small grafana-target-segment-input"
ng-model="target.condition_key"
placeholder="key"
spellcheck='false'
bs-typeahead="listColumns"
data-min-length=0
ng-blur="get_data()">
<select class="input-mini grafana-target-segment-input"
ng-change="get_data()"
ng-model="target.condition_op"
ng-options="f for f in operators" ></select>
<input type="text"
class="input-small grafana-target-segment-input"
ng-model="target.condition_value"
placeholder="value"
class="input-medium grafana-target-segment-input"
ng-model="target.alias"
spellcheck='false'
data-min-length=0
placeholder="alias"
ng-blur="get_data()">
</li>
<li class="grafana-target-segment">
group by time
</li>
</ul>
<li>
<input type="text"
class="input-mini grafana-target-segment-input"
ng-model="target.interval"
placeholder="{{interval}}"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
spellcheck='false'
ng-model-onblur ng-change="get_data()" >
</li>
<li>
<a class="grafana-target-segment"
ng-click="target.groupby_field_add = !target.groupby_field_add; get_data();"
bs-tooltip="'Add a group by column'"
role="menuitem">
<i class="icon-plus"></i>
</a>
</li>
<!-- Query editor mode -->
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
<li class="grafana-target-segment">
select
</li>
<li class="dropdown">
<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
</span>
</li>
<li ng-show="target.groupby_field_add">
<input type="text"
class="input-small grafana-target-segment-input"
ng-model="target.groupby_field"
placeholder="column"
spellcheck="false"
bs-typeahead="listColumns"
data-min-length=0
ng-blur="get_data()">
</li>
<li class="grafana-target-segment">
alias
</li>
<li class="grafana-target-segment">
as
</li>
<li>
<input type="text"
class="input-medium grafana-target-segment-input"
ng-model="target.alias"
spellcheck='false'
placeholder="alias"
ng-blur="get_data()">
</li>
<li>
<a class="grafana-target-segment"
ng-click="target.condition_filter = !target.condition_filter; get_data();"
bs-tooltip="'Add a where clause'"
role="menuitem">
<i class="icon-filter"></i>
</a>
</li>
<li ng-show="target.condition_filter">
<input type="text"
class="input-small grafana-target-segment-input"
ng-model="target.condition_key"
placeholder="key"
spellcheck='false'
bs-typeahead="listColumns"
data-min-length=0
ng-blur="get_data()">
<select class="input-mini grafana-target-segment-input"
ng-change="get_data()"
ng-model="target.condition_op"
ng-options="f for f in operators" ></select>
<input type="text"
class="input-small grafana-target-segment-input"
ng-model="target.condition_value"
placeholder="value"
spellcheck='false'
data-min-length=0
ng-blur="get_data()">
</li>
<li class="grafana-target-segment">
group by time
</li>
<li>
<input type="text"
class="input-mini grafana-target-segment-input"
ng-model="target.interval"
placeholder="{{interval}}"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
spellcheck='false'
ng-model-onblur ng-change="get_data()" >
</li>
<li>
<a class="grafana-target-segment"
ng-click="target.groupby_field_add = !target.groupby_field_add; get_data();"
bs-tooltip="'Add a group by column'"
role="menuitem">
<i class="icon-plus"></i>
</a>
</li>
<li ng-show="target.groupby_field_add">
<input type="text"
class="input-small grafana-target-segment-input"
ng-model="target.groupby_field"
placeholder="column"
spellcheck="false"
bs-typeahead="listColumns"
data-min-length=0
ng-blur="get_data()">
</li>
<li>
<input type="text"
class="input-medium grafana-target-segment-input"
ng-model="target.alias"
spellcheck='false'
placeholder="alias"
ng-blur="get_data()">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
......
src/app/partials/templating_editor.html
......@@ -101,7 +101,7 @@
</div>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All format</label>
<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['Glob', 'wildcard', 'regex wildcard', 'regex all values', 'comma list', 'custom']" ng-change="typeChanged()"></select>
<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex all values', 'comma list', 'custom']" ng-change="typeChanged()"></select>
</div>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All value</label>
......
src/app/services/influxdb/influxdbDatasource.js
......@@ -124,7 +124,7 @@ function (angular, _, kbn, InfluxSeries) {
};
InfluxDatasource.prototype.annotationQuery = function(annotation, filterSrv, rangeUnparsed) {
InfluxDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) {
var timeFilter = getTimeFilter({ range: rangeUnparsed });
var query = _.template(annotation.query, { timeFilter: timeFilter }, this.templateSettings);
......@@ -132,9 +132,14 @@ function (angular, _, kbn, InfluxSeries) {
return new InfluxSeries({ seriesList: results, annotation: annotation }).getAnnotations();
});
};
InfluxDatasource.prototype.listColumns = function(seriesName) {
var interpolated = templateSrv.replace(seriesName);
if (interpolated[0] !== '/') {
interpolated = '/' + interpolated + '/';
}
return this._seriesQuery('select * from /' + seriesName + '/ limit 1').then(function(data) {
return this._seriesQuery('select * from ' + interpolated + ' limit 1').then(function(data) {
if (!data) {
return [];
}
......
src/test/specs/templateValuesSrv-specs.js
......@@ -154,7 +154,7 @@ define([
describeUpdateVariable('with include All glob syntax', function(ctx) {
ctx.setup(function() {
ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'Glob' };
ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' };
ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}];
});
......@@ -163,6 +163,19 @@ define([
});
});
describeUpdateVariable('with include all regex wildcard', function(ctx) {
ctx.setup(function() {
ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'wildcard' };
ctx.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}];
});
it('should add All wildcard option', function() {
expect(ctx.variable.options[0].value).to.be('*');
});
});
});
});
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