feat(query editor): updated query editor to use new forms stle and outer query row component
This commit is contained in:
Torkel Ödegaard
@@ -8,10 +8,10 @@ angular
|
||||
.module('grafana.directives')
|
||||
.directive('addMetricFunction', function($compile) {
|
||||
var inputTemplate = '<input type="text"'+
|
||||
' class="tight-form-input input-medium tight-form-input"' +
|
||||
' class="gf-form-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">' +
|
||||
'<i class="fa fa-plus"></i></a>';
|
||||
|
||||
|
||||
@@ -1,210 +1,149 @@
|
||||
<div class="tight-form">
|
||||
<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">
|
||||
<query-editor-row query-ctrl="ctrl" can-collapse="false">
|
||||
|
||||
<!-- Switch editor mode -->
|
||||
<li role="menuitem" ng-show="ctrl.target.mode">
|
||||
<a class="pointer" tabindex="1"
|
||||
ng-click="ctrl.switchEditorMode(0)">Numeric metrics</a>
|
||||
</li>
|
||||
<li role="menuitem" ng-show="ctrl.target.mode != 1">
|
||||
<a class="pointer" tabindex="1"
|
||||
ng-click="ctrl.switchEditorMode(1)">IT services</a>
|
||||
</li>
|
||||
<li role="menuitem" ng-show="ctrl.target.mode != 2">
|
||||
<a class="pointer" tabindex="1"
|
||||
ng-click="ctrl.switchEditorMode(2)">Text metrics</a>
|
||||
</li>
|
||||
<li class="divider" role="menuitem"></li>
|
||||
|
||||
<!-- 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 class="gf-form-inline">
|
||||
<div class="gf-form max-width-20">
|
||||
<label class="gf-form-label width-7">Query Mode</label>
|
||||
<div class="gf-form-select-wrapper max-width-20">
|
||||
<select class="gf-form-input"
|
||||
ng-change="ctrl.switchEditorMode(ctrl.target.mode)"
|
||||
ng-model="ctrl.target.mode"
|
||||
ng-options="v.mode as v.text for (k, v) in ctrl.editorModes">
|
||||
</select>
|
||||
</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>
|
||||
</div>
|
||||
<div class="gf-form gf-form--grow">
|
||||
<div class="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IT Service editor -->
|
||||
<ul class="tight-form-list" role="menu" ng-show="ctrl.target.mode == 1">
|
||||
<li class="tight-form-item input-small">IT Service</li>
|
||||
<li>
|
||||
<select class="tight-form-input input-large"
|
||||
<div class="gf-form-inline" ng-show="ctrl.target.mode == 1">
|
||||
<div class="gf-form max-width-20">
|
||||
<label class="gf-form-label width-7">IT Service</label>
|
||||
<div class="gf-form-select-wrapper max-width-20">
|
||||
<select class="gf-form-input"
|
||||
ng-change="ctrl.selectITService()"
|
||||
ng-model="ctrl.target.itservice"
|
||||
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">
|
||||
<option value="">-- Select IT service --</option>
|
||||
</select>
|
||||
</li>
|
||||
<li class="tight-form-item input-medium">IT service property</li>
|
||||
<li>
|
||||
<select class="tight-form-input input-medium"
|
||||
<option value="">-- Select IT service --</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<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-model="ctrl.target.slaProperty"
|
||||
ng-options="slaProperty.name for slaProperty in ctrl.slaPropertyList track by slaProperty.name">
|
||||
<option value="">-- Property --</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
<option value="">-- Property --</option>
|
||||
</select>
|
||||
</div>
|
||||
</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">
|
||||
|
||||
<!-- Select Host Group -->
|
||||
<li class="tight-form-item input-small" style="width: 5em">Group</li>
|
||||
<li>
|
||||
<div class="gf-form-inline" ng-hide="ctrl.target.mode == 1">
|
||||
<!-- Select Group -->
|
||||
<div class="gf-form max-width-20">
|
||||
<label class="gf-form-label width-7">Group</label>
|
||||
<input type="text"
|
||||
ng-model="ctrl.target.group.filter"
|
||||
bs-typeahead="ctrl.getGroupNames"
|
||||
ng-blur="ctrl.onTargetBlur()"
|
||||
data-min-length=0
|
||||
data-items=100
|
||||
class="input-medium tight-form-input"
|
||||
class="gf-form-input"
|
||||
ng-class="{
|
||||
'zbx-variable': ctrl.isVariable(ctrl.target.group.filter),
|
||||
'zbx-regex': ctrl.isRegex(ctrl.target.group.filter)
|
||||
}">
|
||||
</li>
|
||||
|
||||
}"></input>
|
||||
</div>
|
||||
<!-- Select Host -->
|
||||
<li class="tight-form-item input-small" style="width: 3em">Host</li>
|
||||
<li>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-7">Host</label>
|
||||
<input type="text"
|
||||
ng-model="ctrl.target.host.filter"
|
||||
bs-typeahead="ctrl.getHostNames"
|
||||
ng-blur="ctrl.onTargetBlur()"
|
||||
data-min-length=0
|
||||
data-items=100
|
||||
class="input-large tight-form-input"
|
||||
class="gf-form-input"
|
||||
ng-class="{
|
||||
'zbx-variable': ctrl.isVariable(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
|
||||
<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">
|
||||
<ul class="tight-form-list" role="menu">
|
||||
<li class="tight-form-item" style="width: 44px"> </li>
|
||||
<gf-form-switch class="gf-form" ng-hide="ctrl.target.mode == 2"
|
||||
label="Show disabled items" checked="ctrl.target.showDisabledItems" on-change="ctrl.onTargetBlur()">
|
||||
</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 -->
|
||||
<li class="tight-form-item" style="width: 5em">Application</li>
|
||||
<li>
|
||||
<div class="gf-form max-width-20">
|
||||
<label class="gf-form-label width-7">Application</label>
|
||||
<input type="text"
|
||||
ng-model="ctrl.target.application.filter"
|
||||
bs-typeahead="ctrl.getApplicationNames"
|
||||
ng-blur="ctrl.onTargetBlur()"
|
||||
data-min-length=0
|
||||
data-items=100
|
||||
class="input-medium tight-form-input"
|
||||
class="gf-form-input"
|
||||
ng-class="{
|
||||
'zbx-variable': ctrl.isVariable(ctrl.target.application.filter),
|
||||
'zbx-regex': ctrl.isRegex(ctrl.target.application.filter)
|
||||
}">
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<!-- Select Item -->
|
||||
<li class="tight-form-item input-small" style="width: 3em">Item</li>
|
||||
<li>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-7">Item</label>
|
||||
<input type="text"
|
||||
ng-model="ctrl.target.item.filter"
|
||||
bs-typeahead="ctrl.getItemNames"
|
||||
ng-blur="ctrl.onTargetBlur()"
|
||||
data-min-length=0
|
||||
data-items=100
|
||||
class="input-large tight-form-input"
|
||||
class="gf-form-input"
|
||||
ng-class="{
|
||||
'zbx-variable': ctrl.isVariable(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 class="tight-form" ng-hide="ctrl.target.mode === 1" ng-if="ctrl.target.options">
|
||||
<ul class="tight-form-list" role="menu">
|
||||
<li class="tight-form-item" style="width: 44px"> </li>
|
||||
<li class="tight-form-item query-keyword" style="width: 5em">Options</li>
|
||||
</ul>
|
||||
<div class="clearfix"></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"> </li>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label">Options</label>
|
||||
<div ng-repeat="func in ctrl.target.functions" class="gf-form-label query-part" metric-function-editor></div>
|
||||
</div>
|
||||
<div class="gf-form dropdown" add-metric-function>
|
||||
</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.mode == 2">
|
||||
<!-- Text metric regex -->
|
||||
<li class="tight-form-item" style="width: 5em" ng-show="ctrl.target.mode == 2">
|
||||
Text filter
|
||||
</li>
|
||||
<li ng-show="ctrl.target.mode == 2">
|
||||
<div class="gf-form max-width-20">
|
||||
<label class="gf-form-label width-7">Text filter</label>
|
||||
<input type="text"
|
||||
class="tight-form-input" style="width: 417px"
|
||||
class="gf-form-input"
|
||||
ng-model="ctrl.target.textFilter"
|
||||
spellcheck='false'
|
||||
placeholder="Text filter (regex)"
|
||||
ng-blur="ctrl.targetBlur()">
|
||||
</li>
|
||||
<li class="tight-form-item" ng-show="ctrl.target.mode == 2">
|
||||
Use capture groups
|
||||
<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>
|
||||
ng-blur="ctrl.onTargetBlur()">
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></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>
|
||||
|
||||
@@ -26,9 +26,9 @@ export class ZabbixQueryController extends QueryCtrl {
|
||||
this.templateSrv = templateSrv;
|
||||
|
||||
this.editorModes = {
|
||||
0: 'num',
|
||||
1: 'itservice',
|
||||
2: 'text'
|
||||
0: {value: 'num', text: 'Numeric metrics', mode: 0},
|
||||
1: {value: 'itservice', text: 'IT Services', mode: 1},
|
||||
2: {value: 'text', text: 'Text metrics', mode: 2}
|
||||
};
|
||||
|
||||
// Map functions for bs-typeahead
|
||||
@@ -98,7 +98,7 @@ export class ZabbixQueryController extends QueryCtrl {
|
||||
|
||||
initFilters() {
|
||||
var self = this;
|
||||
var itemtype = self.editorModes[self.target.mode];
|
||||
var itemtype = self.editorModes[self.target.mode].value;
|
||||
return this.$q.when(this.suggestGroups())
|
||||
.then(() => {return self.suggestHosts();})
|
||||
.then(() => {return self.suggestApps();})
|
||||
|
||||
Reference in New Issue
Block a user