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

Move problem query options to the datasource

Browse Source
This commit is contained in:
Alexander Zobnin
2020-05-07 17:51:24 +03:00
parent 7f1d4eb313
commit 80aa2e94ad
3 changed files with 158 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/datasource-zabbix/datasource.ts
View File

@@ -398,9 +398,9 @@ export class ZabbixDatasource {
let showAckButton = true; let showAckButton = true;
// const showEvents = this.panel.showEvents.value; // const showEvents = this.panel.showEvents.value;
const showEvents = target.showEvents?.value || 1; const showEvents = target.options.showEvents?.value || 1;
// const showProxy = this.panel.hostProxy; // const showProxy = this.panel.hostProxy;
const showProxy = target.hostProxy; const showProxy = target.options.hostProxy;
const getProxiesPromise = showProxy ? this.zabbix.getProxies() : () => []; const getProxiesPromise = showProxy ? this.zabbix.getProxies() : () => [];
showAckButton = !this.disableReadOnlyUsersAck || userIsEditor; showAckButton = !this.disableReadOnlyUsersAck || userIsEditor;

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

@@ -12,7 +12,7 @@
</div> </div>
</div> </div>
<div class="gf-form" ng-show="ctrl.target.queryType == editorMode.TEXT"> <div class="gf-form" ng-show="ctrl.target.queryType == editorMode.TEXT">
<label class="gf-form-label query-keyword width-8">Format As</label> <label class="gf-form-label query-keyword width-7">Format As</label>
<div class="gf-form-select-wrapper"> <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> <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>
@@ -71,8 +71,8 @@
}"></input> }"></input>
</div> </div>
<!-- Select Host --> <!-- Select Host -->
<div class="gf-form"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-8">Host</label> <label class="gf-form-label query-keyword width-7">Host</label>
<input type="text" <input type="text"
ng-model="ctrl.target.host.filter" ng-model="ctrl.target.host.filter"
bs-typeahead="ctrl.getHostNames" bs-typeahead="ctrl.getHostNames"
@@ -109,8 +109,8 @@
</div> </div>
<!-- Select Item --> <!-- Select Item -->
<div class="gf-form" ng-show="ctrl.target.queryType == editorMode.METRICS || ctrl.target.queryType == editorMode.TEXT"> <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.METRICS || ctrl.target.queryType == editorMode.TEXT">
<label class="gf-form-label query-keyword width-8">Item</label> <label class="gf-form-label query-keyword width-7">Item</label>
<input type="text" <input type="text"
ng-model="ctrl.target.item.filter" ng-model="ctrl.target.item.filter"
bs-typeahead="ctrl.getItemNames" bs-typeahead="ctrl.getItemNames"
@@ -124,9 +124,38 @@
}"> }">
</div> </div>
<div class="gf-form max-width-23" 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-8">Min Severity</label> <label class="gf-form-label query-keyword width-7">Problem</label>
<div class="gf-form-select-wrapper width-16"> <input type="text"
ng-model="ctrl.trigger.filter"
ng-blur="ctrl.onTargetBlur()"
placeholder="Problem name"
class="gf-form-input"
ng-style="ctrl.target.trigger.style"
ng-class="{
'zbx-variable': ctrl.isVariable(ctrl.target.trigger.filter),
'zbx-regex': ctrl.isRegex(ctrl.target.trigger.filter)
}"
empty-to-null>
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Tags</label>
<input type="text" class="gf-form-input width-14"
ng-model="ctrl.target.tags.filter"
ng-blur="ctrl.onTargetBlur()"
placeholder="tag1:value1, tag2:value2">
</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" 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">
<label class="gf-form-label query-keyword width-7">Min Severity</label>
<div class="gf-form-select-wrapper width-14">
<select class="gf-form-input" <select class="gf-form-input"
ng-change="ctrl.onTargetBlur()" ng-change="ctrl.onTargetBlur()"
ng-model="ctrl.target.triggers.minSeverity" ng-model="ctrl.target.triggers.minSeverity"
@@ -135,8 +164,8 @@
</div> </div>
</div> </div>
<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.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS">
<label class="gf-form-label query-keyword width-8">Acknowledged</label> <label class="gf-form-label query-keyword width-7">Acknowledged</label>
<div class="gf-form-select-wrapper width-12"> <div class="gf-form-select-wrapper width-14">
<select class="gf-form-input" <select class="gf-form-input"
ng-change="ctrl.onTargetBlur()" ng-change="ctrl.onTargetBlur()"
ng-model="ctrl.target.triggers.acknowledged" ng-model="ctrl.target.triggers.acknowledged"
@@ -145,36 +174,32 @@
</div> </div>
</div> </div>
<gf-form-switch class="gf-form" label="Count" ng-show="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS" <gf-form-switch class="gf-form" label="Count" ng-show="ctrl.target.queryType == editorMode.TRIGGERS"
checked="ctrl.target.triggers.count" on-change="ctrl.onTargetBlur()"> checked="ctrl.target.triggers.count" on-change="ctrl.onTargetBlur()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow"> <div class="gf-form-label gf-form-label--grow"></div>
<a ng-click="ctrl.toggleQueryOptions()" ng-hide="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS">
<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>
</label>
</div> </div>
</div> </div>
<!-- Query options --> <!-- Text mode options -->
<div class="gf-form-group" ng-if="ctrl.showQueryOptions"> <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.TEXT">
<div class="gf-form offset-width-7" ng-hide="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS"> <!-- Text metric regex -->
<gf-form-switch class="gf-form" label-class="width-10" <div class="gf-form max-width-20">
label="Show disabled items" <label class="gf-form-label query-keyword width-7">Text filter</label>
checked="ctrl.target.options.showDisabledItems" <input type="text"
on-change="ctrl.onQueryOptionChange()"> class="gf-form-input"
</gf-form-switch> ng-model="ctrl.target.textFilter"
spellcheck='false'
placeholder="Text filter (regex)"
ng-blur="ctrl.onTargetBlur()">
</div> </div>
<div class="gf-form offset-width-7" ng-show="ctrl.target.queryType === editorMode.TEXT && ctrl.target.resultFormat === 'table'">
<gf-form-switch class="gf-form" label-class="width-10" <gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" on-change="ctrl.onTargetBlur()">
label="Skip empty values" </gf-form-switch>
checked="ctrl.target.options.skipEmptyValues" <div class="gf-form gf-form--grow">
on-change="ctrl.onQueryOptionChange()"> <div class="gf-form-label gf-form-label--grow"></div>
</gf-form-switch>
</div> </div>
</div> </div>
@@ -215,23 +240,77 @@
</div> </div>
</div> </div>
<!-- Text mode options --> <div class="gf-form gf-form--grow" ng-hide="ctrl.target.queryType == editorMode.TRIGGERS">
<div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.TEXT"> <label class="gf-form-label gf-form-label--grow">
<!-- Text metric regex --> <a ng-click="ctrl.toggleQueryOptions()">
<div class="gf-form max-width-20"> <i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i>
<label class="gf-form-label query-keyword width-7">Text filter</label> <i class="fa fa-caret-right" ng-hide="ctrl.showQueryOptions"></i>
<input type="text" {{ctrl.queryOptionsText}}
class="gf-form-input" </a>
ng-model="ctrl.target.textFilter" </label>
spellcheck='false' </div>
placeholder="Text filter (regex)"
ng-blur="ctrl.onTargetBlur()"> <!-- Query options -->
<div class="gf-form-group offset-width-7" ng-if="ctrl.showQueryOptions">
<div class="gf-form" ng-hide="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS">
<gf-form-switch class="gf-form" label-class="width-10"
label="Show disabled items"
checked="ctrl.target.options.showDisabledItems"
on-change="ctrl.onQueryOptionChange()">
</gf-form-switch>
</div>
<div class="gf-form" ng-show="ctrl.target.queryType === editorMode.TEXT && ctrl.target.resultFormat === 'table'">
<gf-form-switch class="gf-form" label-class="width-10"
label="Skip empty values"
checked="ctrl.target.options.skipEmptyValues"
on-change="ctrl.onQueryOptionChange()">
</gf-form-switch>
</div> </div>
<gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" on-change="ctrl.onTargetBlur()"> <div class="gf-form-group" ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
</gf-form-switch> <gf-form-switch class="gf-form"
<div class="gf-form gf-form--grow"> label-class="width-15"
<div class="gf-form-label gf-form-label--grow"></div> label="Show hosts in maintenance"
checked="ctrl.target.options.hostsInMaintenance"
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"
ng-model="ctrl.target.options.showTriggers"
ng-options="f for f in ctrl.problemAckFilters"
ng-change="ctrl.onQueryOptionChange()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Sort by</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="ctrl.target.options.sortTriggersBy"
ng-options="f.text for f in ctrl.sortByFields track by f.value"
ng-change="ctrl.onQueryOptionChange()">
</select>
</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>
<div class="gf-form">
<label class="gf-form-label width-8">Limit triggers</label>
<input class="gf-form-input width-5"
type="number" placeholder="100"
ng-model="ctrl.target.options.limit"
ng-model-onblur ng-change="ctrl.onQueryOptionChange()">
</div>
</div> </div>
</div> </div>
</query-editor-row> </query-editor-row>

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

@@ -48,6 +48,23 @@ export class ZabbixQueryController extends QueryCtrl {
{text: 'acknowledged', value: 1}, {text: 'acknowledged', value: 1},
]; ];
this.problemAckFilters = [
'all triggers',
'unacknowledged',
'acknowledged'
];
this.sortByFields = [
{ text: 'last change', value: 'lastchange' },
{ text: 'severity', value: 'priority' }
];
this.showEventsFields = [
{ text: 'All', value: [0,1] },
{ text: 'OK', value: [0] },
{ text: 'Problems', value: 1 }
];
this.resultFormats = [{ text: 'Time series', value: 'time_series' }, { text: 'Table', value: 'table' }]; this.resultFormats = [{ text: 'Time series', value: 'time_series' }, { text: 'Table', value: 'table' }];
this.triggerSeverity = c.TRIGGER_SEVERITY; this.triggerSeverity = c.TRIGGER_SEVERITY;
@@ -307,7 +324,12 @@ export class ZabbixQueryController extends QueryCtrl {
renderQueryOptionsText() { renderQueryOptionsText() {
var optionsMap = { var optionsMap = {
showDisabledItems: "Show disabled items", showDisabledItems: "Show disabled items",
skipEmptyValues: "Skip empty values" skipEmptyValues: "Skip empty values",
hostsInMaintenance: "Show hosts in maintenance",
showTriggers: "Acknowledged",
sortTriggersBy: "Sort problems",
showEvents: "Show events",
limit: "Limit problems",
}; };
var options = []; var options = [];
_.forOwn(this.target.options, (value, key) => { _.forOwn(this.target.options, (value, key) => {
@@ -317,7 +339,13 @@ export class ZabbixQueryController extends QueryCtrl {
options.push(optionsMap[key]); options.push(optionsMap[key]);
} else { } else {
// Show "option = value" for another options // Show "option = value" for another options
options.push(optionsMap[key] + " = " + value); let optionValue = value;
if (value && value.text) {
optionValue = value.text;
} else if (value && value.value) {
optionValue = value.value;
}
options.push(optionsMap[key] + " = " + optionValue);
} }
} }
}); });