Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Query options moved to separate section with show/hide function.

Browse Source
This commit is contained in:
Alexander Zobnin
2016-04-26 22:53:53 +03:00
parent 485e9335ef
commit f6f6bc8338
2 changed files with 67 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/datasource-zabbix/partials/query.editor.html
View File

@@ -114,13 +114,6 @@
'zbx-regex': ctrl.isRegex(ctrl.target.host.filter)
}">
</li>
<li class="tight-form-item" ng-hide="ctrl.target.mode == 2">
Show disabled items&nbsp;
<editor-checkbox text=""
model="ctrl.target.showDisabledItems"
change="ctrl.onTargetBlur()">
</editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
@@ -160,25 +153,49 @@
'zbx-regex': ctrl.isRegex(ctrl.target.item.filter)
}">
</li>
<li class="tight-form-item query-keyword">Options</li>
<li ng-repeat="func in ctrl.target.functions">
<span metric-function-editor class="tight-form-item tight-form-func">
</span>
</li>
<li class="dropdown" add-metric-function>
<li class="tight-form-item last">
<a ng-click="ctrl.toggleQueryOptions()">
<i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.showQueryOptions"></i>
{{ctrl.queryOptionsText}}
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-hide="ctrl.target.mode === 1" ng-if="ctrl.target.options">
<div class="tight-form" ng-hide="ctrl.target.mode === 1">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 44px">&nbsp</li>
<li class="tight-form-item query-keyword" style="width: 5em">Options</li>
<li class="tight-form-item query-keyword" style="width: 5em">Functions</li>
<li ng-repeat="func in ctrl.target.functions">
<span metric-function-editor class="tight-form-item tight-form-func"></span>
</li>
<li class="dropdown" add-metric-function></li>
</ul>
<div class="clearfix"></div>
</div>
<!-- Query options -->
<div class="tight-form" ng-if="ctrl.showQueryOptions">
<div class="tight-form-inner-box">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 170px">
Show disabled items
</li>
<li class="tight-form-item last">
<editor-checkbox text=""
model="ctrl.target.options.showDisabledItems"
change="ctrl.onQueryOptionChange()">
</editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="tight-form" ng-show="ctrl.target.mode == 2">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 44px">&nbsp</li>

38
src/datasource-zabbix/query.controller.js
View File

@@ -48,7 +48,8 @@ export class ZabbixQueryController extends QueryCtrl {
var scopeDefaults = {
metric: {},
oldTarget: _.cloneDeep(this.target)
oldTarget: _.cloneDeep(this.target),
queryOptionsText: this.renderQueryOptionsText()
};
_.defaults(this, scopeDefaults);
@@ -60,6 +61,9 @@ export class ZabbixQueryController extends QueryCtrl {
application: { filter: "" },
item: { filter: "" },
functions: [],
options: {
showDisabledItems: false
},
refId: "A"
};
_.defaults(target, targetDefaults);
@@ -156,7 +160,7 @@ export class ZabbixQueryController extends QueryCtrl {
return self.zabbix
.getItems(undefined, appids, itemtype)
.then(items => {
if (!self.target.showDisabledItems) {
if (!self.target.options.showDisabledItems) {
items = _.filter(items, {'status': '0'});
}
self.metric.itemList = items;
@@ -169,7 +173,7 @@ export class ZabbixQueryController extends QueryCtrl {
return self.zabbix
.getItems(hostids, undefined, itemtype)
.then(items => {
if (!self.target.showDisabledItems) {
if (!self.target.options.showDisabledItems) {
items = _.filter(items, {'status': '0'});
}
self.metric.itemList = items;
@@ -258,6 +262,34 @@ export class ZabbixQueryController extends QueryCtrl {
}
}
toggleQueryOptions() {
this.showQueryOptions = !this.showQueryOptions;
}
onQueryOptionChange() {
this.queryOptionsText = this.renderQueryOptionsText();
this.onTargetBlur();
}
renderQueryOptionsText() {
var optionsMap = {
showDisabledItems: "Show disabled items"
};
var options = [];
_.forOwn(this.target.options, (value, key) => {
if (value) {
if (value === true) {
// Show only option name (if enabled) for boolean options
options.push(optionsMap[key]);
} else {
// Show "option = value" for another options
options.push(optionsMap[key] + " = " + value);
}
}
});
return "Options: " + options.join(', ');
}
/**
* Switch query editor to specified mode.
* Modes: