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

Problems: rearrange options in query editor

Browse Source
This commit is contained in:
Alexander Zobnin
2020-05-12 12:55:45 +03:00
parent 030d86aa45
commit eafe90c7bf
2 changed files with 64 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,7 +86,7 @@
}"> }">
</div> </div>
<div class="gf-form" ng-show="ctrl.target.queryType == editorMode.PROBLEMS"> <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
<label class="gf-form-label query-keyword width-7">Proxy</label> <label class="gf-form-label query-keyword width-7">Proxy</label>
<input type="text" <input type="text"
ng-model="ctrl.target.proxy.filter" ng-model="ctrl.target.proxy.filter"
@@ -154,7 +154,7 @@
empty-to-null> empty-to-null>
</div> </div>
<div class="gf-form"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Tags</label> <label class="gf-form-label query-keyword width-7">Tags</label>
<input type="text" class="gf-form-input width-14" <input type="text" class="gf-form-input width-14"
ng-model="ctrl.target.tags.filter" ng-model="ctrl.target.tags.filter"
@@ -168,7 +168,17 @@
</div> </div>
<div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS"> <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS">
<div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS"> <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
<label class="gf-form-label query-keyword width-7">Show events</label>
<div class="gf-form-select-wrapper max-width-20">
<select class="gf-form-input"
ng-model="ctrl.target.options.showEvents"
ng-options="f.text for f in ctrl.showEventsFields track by f.value"
ng-change="ctrl.onQueryOptionChange()">
</select>
</div>
</div>
<div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.TRIGGERS">
<label class="gf-form-label query-keyword width-7">Min Severity</label> <label class="gf-form-label query-keyword width-7">Min Severity</label>
<div class="gf-form-select-wrapper width-14"> <div class="gf-form-select-wrapper width-14">
<select class="gf-form-input" <select class="gf-form-input"
@@ -178,20 +188,6 @@
</select> </select>
</div> </div>
</div> </div>
<div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS">
<label class="gf-form-label query-keyword width-7">Acknowledged</label>
<div class="gf-form-select-wrapper width-14">
<select class="gf-form-input"
ng-change="ctrl.onTargetBlur()"
ng-model="ctrl.target.triggers.acknowledged"
ng-options="a.value as a.text for a in ctrl.ackFilters">
</select>
</div>
</div>
<gf-form-switch class="gf-form" label="Count" ng-show="ctrl.target.queryType == editorMode.TRIGGERS"
checked="ctrl.target.triggers.count" on-change="ctrl.onTargetBlur()">
</gf-form-switch>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
@@ -255,7 +251,7 @@
</div> </div>
</div> </div>
<div class="gf-form gf-form--grow" ng-hide="ctrl.target.queryType == editorMode.TRIGGERS"> <div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow"> <label class="gf-form-label gf-form-label--grow">
<a ng-click="ctrl.toggleQueryOptions()"> <a ng-click="ctrl.toggleQueryOptions()">
<i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i> <i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i>
@@ -282,25 +278,29 @@
</gf-form-switch> </gf-form-switch>
</div> </div>
<div class="gf-form-group" ng-show="ctrl.target.queryType == editorMode.PROBLEMS"> <div class="gf-form-group" ng-show="ctrl.target.queryType == editorMode.PROBLEMS || ctrl.target.queryType == editorMode.TRIGGERS">
<gf-form-switch class="gf-form" <div ng-show="ctrl.target.queryType == editorMode.TRIGGERS">
label-class="width-15" <div class="gf-form max-width-20">
label="Show hosts in maintenance" <label class="gf-form-label width-7">Acknowledged</label>
checked="ctrl.target.options.hostsInMaintenance" <div class="gf-form-select-wrapper width-14">
on-change="ctrl.onQueryOptionChange()">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-8">Acknowledged</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input" <select class="gf-form-input"
ng-model="ctrl.target.options.showTriggers" ng-change="ctrl.onTargetBlur()"
ng-options="f for f in ctrl.problemAckFilters" ng-model="ctrl.target.triggers.acknowledged"
ng-change="ctrl.onQueryOptionChange()"> ng-options="a.value as a.text for a in ctrl.ackFilters">
</select> </select>
</div> </div>
</div> </div>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Count"
checked="ctrl.target.triggers.count"
on-change="ctrl.onTargetBlur()">
</gf-form-switch>
</div>
<div ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Sort by</label> <label class="gf-form-label width-9">Sort by</label>
<div class="gf-form-select-wrapper width-12"> <div class="gf-form-select-wrapper width-12">
<select class="gf-form-input" <select class="gf-form-input"
ng-model="ctrl.target.options.sortTriggersBy" ng-model="ctrl.target.options.sortTriggersBy"
@@ -309,24 +309,20 @@
</select> </select>
</div> </div>
</div> </div>
<div class="gf-form">
<label class="gf-form-label width-8">Show events</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="ctrl.target.options.showEvents"
ng-options="f.text for f in ctrl.showEventsFields track by f.value"
ng-change="ctrl.onQueryOptionChange()">
</select>
</div>
</div>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label-class="width-8" label-class="width-9"
label="Hosts in maintenance"
checked="ctrl.target.options.hostsInMaintenance"
on-change="ctrl.onQueryOptionChange()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Host proxy" label="Host proxy"
checked="ctrl.target.options.hostProxy" checked="ctrl.target.options.hostProxy"
on-change="ctrl.onQueryOptionChange()"> on-change="ctrl.onQueryOptionChange()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Limit triggers</label> <label class="gf-form-label width-9">Limit triggers</label>
<input class="gf-form-input width-5" <input class="gf-form-input width-5"
type="number" placeholder="100" type="number" placeholder="100"
ng-model="ctrl.target.options.limit" ng-model="ctrl.target.options.limit"
@@ -334,4 +330,5 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</query-editor-row> </query-editor-row>

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

@@ -26,9 +26,9 @@ function getTargetDefaults() {
skipEmptyValues: false, skipEmptyValues: false,
// Problems // Problems
hostsInMaintenance: false, hostsInMaintenance: false,
showTriggers: null, hostProxy: false,
sortTriggersBy: null, sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: null, showEvents: { text: 'Problems', value: 1 },
}, },
table: { table: {
'skipEmptyValues': false 'skipEmptyValues': false
@@ -358,15 +358,13 @@ export class ZabbixQueryController extends QueryCtrl {
showDisabledItems: "Show disabled items", showDisabledItems: "Show disabled items",
skipEmptyValues: "Skip empty values", skipEmptyValues: "Skip empty values",
hostsInMaintenance: "Show hosts in maintenance", hostsInMaintenance: "Show hosts in maintenance",
showTriggers: "Acknowledged",
sortTriggersBy: "Sort problems", sortTriggersBy: "Sort problems",
showEvents: "Show events",
limit: "Limit problems", limit: "Limit problems",
hostProxy: "Show proxy", hostProxy: "Show proxy",
}; };
var options = []; var options = [];
_.forOwn(this.target.options, (value, key) => { _.forOwn(this.target.options, (value, key) => {
if (value) { if (value && optionsMap[key]) {
if (value === true) { if (value === true) {
// Show only option name (if enabled) for boolean options // Show only option name (if enabled) for boolean options
options.push(optionsMap[key]); options.push(optionsMap[key]);