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

feat(query editor): updated query editor to use new forms stle and outer query row component

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-04-28 12:06:36 +02:00
parent 3a463dc4cf
commit 53b1eae85f
3 changed files with 91 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/datasource-zabbix/add-metric-function.directive.js
View File

@@ -8,10 +8,10 @@ angular
.module('grafana.directives') .module('grafana.directives')
.directive('addMetricFunction', function($compile) { .directive('addMetricFunction', function($compile) {
var inputTemplate = '<input type="text"'+ var inputTemplate = '<input type="text"'+
' class="tight-form-input input-medium tight-form-input"' + ' class="gf-form-input"' +
' spellcheck="false" style="display:none"></input>'; ' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="tight-form-item tight-form-func dropdown-toggle"' + var buttonTemplate = '<a class="gf-form-label tight-form-func dropdown-toggle query-part"' +
' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' + ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
'<i class="fa fa-plus"></i></a>'; '<i class="fa fa-plus"></i></a>';

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

@@ -1,210 +1,149 @@
<div class="tight-form"> <query-editor-row query-ctrl="ctrl" can-collapse="false">
<ul class="tight-form-list pull-right">
<li class="tight-form-item small" ng-show="ctrl.target.datasource">
<em>{{ctrl.target.datasource}}</em>
</li>
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<!-- Switch editor mode --> <div class="gf-form-inline">
<li role="menuitem" ng-show="ctrl.target.mode"> <div class="gf-form max-width-20">
<a class="pointer" tabindex="1" <label class="gf-form-label width-7">Query Mode</label>
ng-click="ctrl.switchEditorMode(0)">Numeric metrics</a> <div class="gf-form-select-wrapper max-width-20">
</li> <select class="gf-form-input"
<li role="menuitem" ng-show="ctrl.target.mode != 1"> ng-change="ctrl.switchEditorMode(ctrl.target.mode)"
<a class="pointer" tabindex="1" ng-model="ctrl.target.mode"
ng-click="ctrl.switchEditorMode(1)">IT services</a> ng-options="v.mode as v.text for (k, v) in ctrl.editorModes">
</li> </select>
<li role="menuitem" ng-show="ctrl.target.mode != 2"> </div>
<a class="pointer" tabindex="1" </div>
ng-click="ctrl.switchEditorMode(2)">Text metrics</a> <div class="gf-form gf-form--grow">
</li> <div class="gf-form-label gf-form-label--grow"></div>
<li class="divider" role="menuitem"></li> </div>
<!-- From app/features/panel/partials/query_editor_row.html -->
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
</li>
</ul>
</div> </div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(target)">
<i class="fa fa-trash"></i>
</a>
</li>
</ul>
<ul class="tight-form-list">
<li class="tight-form-item" style="min-width: 15px; text-align: center">
{{ctrl.target.refId}}
</li>
<li>
<a class="tight-form-item" ng-click="ctrl.toggleHideQuery()" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<!-- IT Service editor --> <!-- IT Service editor -->
<ul class="tight-form-list" role="menu" ng-show="ctrl.target.mode == 1"> <div class="gf-form-inline" ng-show="ctrl.target.mode == 1">
<li class="tight-form-item input-small">IT Service</li> <div class="gf-form max-width-20">
<li> <label class="gf-form-label width-7">IT Service</label>
<select class="tight-form-input input-large" <div class="gf-form-select-wrapper max-width-20">
<select class="gf-form-input"
ng-change="ctrl.selectITService()" ng-change="ctrl.selectITService()"
ng-model="ctrl.target.itservice" ng-model="ctrl.target.itservice"
bs-tooltip="ctrl.target.itservice.name.length > 25 ? ctrl.target.itservice.name : ''" bs-tooltip="ctrl.target.itservice.name.length > 25 ? ctrl.target.itservice.name : ''"
ng-options="itservice.name for itservice in ctrl.itserviceList track by itservice.name"> ng-options="itservice.name for itservice in ctrl.itserviceList track by itservice.name">
<option value="">-- Select IT service --</option> <option value="">-- Select IT service --</option>
</select> </select>
</li> </div>
<li class="tight-form-item input-medium">IT service property</li> </div>
<li> <div class="gf-form">
<select class="tight-form-input input-medium" <label class="gf-form-label">IT service property</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input"
ng-change="ctrl.selectITService()" ng-change="ctrl.selectITService()"
ng-model="ctrl.target.slaProperty" ng-model="ctrl.target.slaProperty"
ng-options="slaProperty.name for slaProperty in ctrl.slaPropertyList track by slaProperty.name"> ng-options="slaProperty.name for slaProperty in ctrl.slaPropertyList track by slaProperty.name">
<option value="">-- Property --</option> <option value="">-- Property --</option>
</select> </select>
</li> </div>
</ul> </div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<ul class="tight-form-list" role="menu" ng-hide="ctrl.target.mode == 1"> <div class="gf-form-inline" ng-hide="ctrl.target.mode == 1">
<!-- Select Group -->
<!-- Select Host Group --> <div class="gf-form max-width-20">
<li class="tight-form-item input-small" style="width: 5em">Group</li> <label class="gf-form-label width-7">Group</label>
<li>
<input type="text" <input type="text"
ng-model="ctrl.target.group.filter" ng-model="ctrl.target.group.filter"
bs-typeahead="ctrl.getGroupNames" bs-typeahead="ctrl.getGroupNames"
ng-blur="ctrl.onTargetBlur()" ng-blur="ctrl.onTargetBlur()"
data-min-length=0 data-min-length=0
data-items=100 data-items=100
class="input-medium tight-form-input" class="gf-form-input"
ng-class="{ ng-class="{
'zbx-variable': ctrl.isVariable(ctrl.target.group.filter), 'zbx-variable': ctrl.isVariable(ctrl.target.group.filter),
'zbx-regex': ctrl.isRegex(ctrl.target.group.filter) 'zbx-regex': ctrl.isRegex(ctrl.target.group.filter)
}"> }"></input>
</li> </div>
<!-- Select Host --> <!-- Select Host -->
<li class="tight-form-item input-small" style="width: 3em">Host</li> <div class="gf-form">
<li> <label class="gf-form-label 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"
ng-blur="ctrl.onTargetBlur()" ng-blur="ctrl.onTargetBlur()"
data-min-length=0 data-min-length=0
data-items=100 data-items=100
class="input-large tight-form-input" class="gf-form-input"
ng-class="{ ng-class="{
'zbx-variable': ctrl.isVariable(ctrl.target.host.filter), 'zbx-variable': ctrl.isVariable(ctrl.target.host.filter),
'zbx-regex': ctrl.isRegex(ctrl.target.host.filter) '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> </div>
<div class="tight-form" ng-hide="ctrl.target.mode == 1"> <gf-form-switch class="gf-form" ng-hide="ctrl.target.mode == 2"
<ul class="tight-form-list" role="menu"> label="Show disabled items" checked="ctrl.target.showDisabledItems" on-change="ctrl.onTargetBlur()">
<li class="tight-form-item" style="width: 44px">&nbsp</li> </gf-form-switch>
<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-hide="ctrl.target.mode == 1">
<!-- Select Application --> <!-- Select Application -->
<li class="tight-form-item" style="width: 5em">Application</li> <div class="gf-form max-width-20">
<li> <label class="gf-form-label width-7">Application</label>
<input type="text" <input type="text"
ng-model="ctrl.target.application.filter" ng-model="ctrl.target.application.filter"
bs-typeahead="ctrl.getApplicationNames" bs-typeahead="ctrl.getApplicationNames"
ng-blur="ctrl.onTargetBlur()" ng-blur="ctrl.onTargetBlur()"
data-min-length=0 data-min-length=0
data-items=100 data-items=100
class="input-medium tight-form-input" class="gf-form-input"
ng-class="{ ng-class="{
'zbx-variable': ctrl.isVariable(ctrl.target.application.filter), 'zbx-variable': ctrl.isVariable(ctrl.target.application.filter),
'zbx-regex': ctrl.isRegex(ctrl.target.application.filter) 'zbx-regex': ctrl.isRegex(ctrl.target.application.filter)
}"> }">
</li> </div>
<!-- Select Item --> <!-- Select Item -->
<li class="tight-form-item input-small" style="width: 3em">Item</li> <div class="gf-form">
<li> <label class="gf-form-label 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"
ng-blur="ctrl.onTargetBlur()" ng-blur="ctrl.onTargetBlur()"
data-min-length=0 data-min-length=0
data-items=100 data-items=100
class="input-large tight-form-input" class="gf-form-input"
ng-class="{ ng-class="{
'zbx-variable': ctrl.isVariable(ctrl.target.item.filter), 'zbx-variable': ctrl.isVariable(ctrl.target.item.filter),
'zbx-regex': ctrl.isRegex(ctrl.target.item.filter) '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>
</ul>
<div class="clearfix"></div>
</div> </div>
<div class="tight-form" ng-hide="ctrl.target.mode === 1" ng-if="ctrl.target.options"> <div class="gf-form">
<ul class="tight-form-list" role="menu"> <label class="gf-form-label">Options</label>
<li class="tight-form-item" style="width: 44px">&nbsp</li> <div ng-repeat="func in ctrl.target.functions" class="gf-form-label query-part" metric-function-editor></div>
<li class="tight-form-item query-keyword" style="width: 5em">Options</li> </div>
</ul> <div class="gf-form dropdown" add-metric-function>
<div class="clearfix"></div> </div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div> </div>
<div class="tight-form" ng-show="ctrl.target.mode == 2"> <div class="gf-form-inline" ng-show="ctrl.target.mode == 2">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 44px">&nbsp</li>
<!-- Text metric regex --> <!-- Text metric regex -->
<li class="tight-form-item" style="width: 5em" ng-show="ctrl.target.mode == 2"> <div class="gf-form max-width-20">
Text filter <label class="gf-form-label width-7">Text filter</label>
</li>
<li ng-show="ctrl.target.mode == 2">
<input type="text" <input type="text"
class="tight-form-input" style="width: 417px" class="gf-form-input"
ng-model="ctrl.target.textFilter" ng-model="ctrl.target.textFilter"
spellcheck='false' spellcheck='false'
placeholder="Text filter (regex)" placeholder="Text filter (regex)"
ng-blur="ctrl.targetBlur()"> ng-blur="ctrl.onTargetBlur()">
</li>
<li class="tight-form-item" ng-show="ctrl.target.mode == 2">
Use capture groups&nbsp;
<input class="cr1" id="ctrl.target.useCaptureGroups" type="checkbox"
ng-model="ctrl.target.useCaptureGroups"
ng-checked="ctrl.target.useCaptureGroups"
ng-change="ctrl.targetBlur()">
<label for="ctrl.target.useCaptureGroups" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" on-change="ctrl.onTargetBlur()">
</gf-form-switch>
</div>
</query-editor-row>

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

@@ -26,9 +26,9 @@ export class ZabbixQueryController extends QueryCtrl {
this.templateSrv = templateSrv; this.templateSrv = templateSrv;
this.editorModes = { this.editorModes = {
0: 'num', 0: {value: 'num', text: 'Numeric metrics', mode: 0},
1: 'itservice', 1: {value: 'itservice', text: 'IT Services', mode: 1},
2: 'text' 2: {value: 'text', text: 'Text metrics', mode: 2}
}; };
// Map functions for bs-typeahead // Map functions for bs-typeahead
@@ -98,7 +98,7 @@ export class ZabbixQueryController extends QueryCtrl {
initFilters() { initFilters() {
var self = this; var self = this;
var itemtype = self.editorModes[self.target.mode]; var itemtype = self.editorModes[self.target.mode].value;
return this.$q.when(this.suggestGroups()) return this.$q.when(this.suggestGroups())
.then(() => {return self.suggestHosts();}) .then(() => {return self.suggestHosts();})
.then(() => {return self.suggestApps();}) .then(() => {return self.suggestApps();})