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

query editor refactor

Browse Source
This commit is contained in:
Alexander Zobnin
2017-07-26 11:32:09 +03:00
parent b23f6677dd
commit 15f6c00763
6 changed files with 100 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
dist/datasource-zabbix/partials/query.editor.html vendored
View File

@@ -7,7 +7,7 @@
<select class="gf-form-input" <select class="gf-form-input"
ng-change="ctrl.switchEditorMode(ctrl.target.mode)" ng-change="ctrl.switchEditorMode(ctrl.target.mode)"
ng-model="ctrl.target.mode" ng-model="ctrl.target.mode"
ng-options="v.mode as v.text for (k, v) in ctrl.editorModes"> ng-options="m.mode as m.text for m in ctrl.editorModes">
</select> </select>
</div> </div>
</div> </div>
@@ -17,7 +17,7 @@
</div> </div>
<!-- IT Service editor --> <!-- IT Service editor -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == 1"> <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.ITSERVICE">
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">IT Service</label> <label class="gf-form-label query-keyword width-7">IT Service</label>
<input type="text" <input type="text"
@@ -48,7 +48,7 @@
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-show="ctrl.target.mode == 0 || ctrl.target.mode == 2"> <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT">
<!-- Select Group --> <!-- Select Group -->
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Group</label> <label class="gf-form-label query-keyword width-7">Group</label>
@@ -85,7 +85,7 @@
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-show="ctrl.target.mode == 0 || ctrl.target.mode == 2"> <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT">
<!-- Select Application --> <!-- Select Application -->
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Application</label> <label class="gf-form-label query-keyword width-7">Application</label>
@@ -131,7 +131,7 @@
<!-- Query options --> <!-- Query options -->
<div class="gf-form-group" ng-if="ctrl.showQueryOptions"> <div class="gf-form-group" ng-if="ctrl.showQueryOptions">
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
<gf-form-switch class="gf-form" ng-hide="ctrl.target.mode == 2" <gf-form-switch class="gf-form"
label="Show disabled items" label="Show disabled items"
checked="ctrl.target.options.showDisabledItems" checked="ctrl.target.options.showDisabledItems"
on-change="ctrl.onQueryOptionChange()"> on-change="ctrl.onQueryOptionChange()">
@@ -139,41 +139,8 @@
</div> </div>
</div> </div>
<!-- Metric processing functions --> <!-- Item IDs editor mode -->
<div class="gf-form-inline" ng-hide="ctrl.target.mode"> <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.ITEMID">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Functions</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>
<!-- Text mode options -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == 2">
<!-- Text metric regex -->
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Text filter</label>
<input type="text"
class="gf-form-input"
ng-model="ctrl.target.textFilter"
spellcheck='false'
placeholder="Text filter (regex)"
ng-blur="ctrl.onTargetBlur()">
</div>
<gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" 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>
<!-- IT Service editor -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == 3">
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Item IDs</label> <label class="gf-form-label query-keyword width-7">Item IDs</label>
<input type="text" <input type="text"
@@ -194,4 +161,36 @@
</div> </div>
</div> </div>
<!-- Metric processing functions -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.ITEMID">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Functions</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>
<!-- Text mode options -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.TEXT">
<!-- Text metric regex -->
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Text filter</label>
<input type="text"
class="gf-form-input"
ng-model="ctrl.target.textFilter"
spellcheck='false'
placeholder="Text filter (regex)"
ng-blur="ctrl.onTargetBlur()">
</div>
<gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" 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>
</query-editor-row> </query-editor-row>

7
dist/datasource-zabbix/query.controller.js vendored
View File

@@ -85,6 +85,13 @@ System.register(['app/plugins/sdk', 'lodash', './constants', './utils', './metri
_this.editorModes = [{ value: 'num', text: 'Metrics', mode: c.MODE_METRICS }, { value: 'text', text: 'Text', mode: c.MODE_TEXT }, { value: 'itservice', text: 'IT Services', mode: c.MODE_ITSERVICE }, { value: 'itemid', text: 'Item ID', mode: c.MODE_ITEMID }]; _this.editorModes = [{ value: 'num', text: 'Metrics', mode: c.MODE_METRICS }, { value: 'text', text: 'Text', mode: c.MODE_TEXT }, { value: 'itservice', text: 'IT Services', mode: c.MODE_ITSERVICE }, { value: 'itemid', text: 'Item ID', mode: c.MODE_ITEMID }];
_this.$scope.editorMode = {
METRICS: c.MODE_METRICS,
TEXT: c.MODE_TEXT,
ITSERVICE: c.MODE_ITSERVICE,
ITEMID: c.MODE_ITEMID
};
_this.slaPropertyList = [{ name: "Status", property: "status" }, { name: "SLA", property: "sla" }, { name: "OK time", property: "okTime" }, { name: "Problem time", property: "problemTime" }, { name: "Down time", property: "downtimeTime" }]; _this.slaPropertyList = [{ name: "Status", property: "status" }, { name: "SLA", property: "sla" }, { name: "OK time", property: "okTime" }, { name: "Problem time", property: "problemTime" }, { name: "Down time", property: "downtimeTime" }];
// Map functions for bs-typeahead // Map functions for bs-typeahead

2
dist/datasource-zabbix/query.controller.js.map vendored
View File

File diff suppressed because one or more lines are too long

7
dist/test/datasource-zabbix/query.controller.js vendored
View File

@@ -62,6 +62,13 @@ var ZabbixQueryController = exports.ZabbixQueryController = function (_QueryCtrl
_this.editorModes = [{ value: 'num', text: 'Metrics', mode: c.MODE_METRICS }, { value: 'text', text: 'Text', mode: c.MODE_TEXT }, { value: 'itservice', text: 'IT Services', mode: c.MODE_ITSERVICE }, { value: 'itemid', text: 'Item ID', mode: c.MODE_ITEMID }]; _this.editorModes = [{ value: 'num', text: 'Metrics', mode: c.MODE_METRICS }, { value: 'text', text: 'Text', mode: c.MODE_TEXT }, { value: 'itservice', text: 'IT Services', mode: c.MODE_ITSERVICE }, { value: 'itemid', text: 'Item ID', mode: c.MODE_ITEMID }];
_this.$scope.editorMode = {
METRICS: c.MODE_METRICS,
TEXT: c.MODE_TEXT,
ITSERVICE: c.MODE_ITSERVICE,
ITEMID: c.MODE_ITEMID
};
_this.slaPropertyList = [{ name: "Status", property: "status" }, { name: "SLA", property: "sla" }, { name: "OK time", property: "okTime" }, { name: "Problem time", property: "problemTime" }, { name: "Down time", property: "downtimeTime" }]; _this.slaPropertyList = [{ name: "Status", property: "status" }, { name: "SLA", property: "sla" }, { name: "OK time", property: "okTime" }, { name: "Problem time", property: "problemTime" }, { name: "Down time", property: "downtimeTime" }];
// Map functions for bs-typeahead // Map functions for bs-typeahead

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

@@ -7,7 +7,7 @@
<select class="gf-form-input" <select class="gf-form-input"
ng-change="ctrl.switchEditorMode(ctrl.target.mode)" ng-change="ctrl.switchEditorMode(ctrl.target.mode)"
ng-model="ctrl.target.mode" ng-model="ctrl.target.mode"
ng-options="v.mode as v.text for (k, v) in ctrl.editorModes"> ng-options="m.mode as m.text for m in ctrl.editorModes">
</select> </select>
</div> </div>
</div> </div>
@@ -17,7 +17,7 @@
</div> </div>
<!-- IT Service editor --> <!-- IT Service editor -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == 1"> <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.ITSERVICE">
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">IT Service</label> <label class="gf-form-label query-keyword width-7">IT Service</label>
<input type="text" <input type="text"
@@ -48,7 +48,7 @@
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-show="ctrl.target.mode == 0 || ctrl.target.mode == 2"> <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT">
<!-- Select Group --> <!-- Select Group -->
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Group</label> <label class="gf-form-label query-keyword width-7">Group</label>
@@ -85,7 +85,7 @@
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-show="ctrl.target.mode == 0 || ctrl.target.mode == 2"> <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT">
<!-- Select Application --> <!-- Select Application -->
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Application</label> <label class="gf-form-label query-keyword width-7">Application</label>
@@ -131,7 +131,7 @@
<!-- Query options --> <!-- Query options -->
<div class="gf-form-group" ng-if="ctrl.showQueryOptions"> <div class="gf-form-group" ng-if="ctrl.showQueryOptions">
<div class="gf-form offset-width-7"> <div class="gf-form offset-width-7">
<gf-form-switch class="gf-form" ng-hide="ctrl.target.mode == 2" <gf-form-switch class="gf-form"
label="Show disabled items" label="Show disabled items"
checked="ctrl.target.options.showDisabledItems" checked="ctrl.target.options.showDisabledItems"
on-change="ctrl.onQueryOptionChange()"> on-change="ctrl.onQueryOptionChange()">
@@ -139,41 +139,8 @@
</div> </div>
</div> </div>
<!-- Metric processing functions --> <!-- Item IDs editor mode -->
<div class="gf-form-inline" ng-hide="ctrl.target.mode"> <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.ITEMID">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Functions</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>
<!-- Text mode options -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == 2">
<!-- Text metric regex -->
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Text filter</label>
<input type="text"
class="gf-form-input"
ng-model="ctrl.target.textFilter"
spellcheck='false'
placeholder="Text filter (regex)"
ng-blur="ctrl.onTargetBlur()">
</div>
<gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" 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>
<!-- IT Service editor -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == 3">
<div class="gf-form max-width-20"> <div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Item IDs</label> <label class="gf-form-label query-keyword width-7">Item IDs</label>
<input type="text" <input type="text"
@@ -194,4 +161,36 @@
</div> </div>
</div> </div>
<!-- Metric processing functions -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.ITEMID">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Functions</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>
<!-- Text mode options -->
<div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.TEXT">
<!-- Text metric regex -->
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Text filter</label>
<input type="text"
class="gf-form-input"
ng-model="ctrl.target.textFilter"
spellcheck='false'
placeholder="Text filter (regex)"
ng-blur="ctrl.onTargetBlur()">
</div>
<gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" 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>
</query-editor-row> </query-editor-row>

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

@@ -28,6 +28,13 @@ export class ZabbixQueryController extends QueryCtrl {
{value: 'itemid', text: 'Item ID', mode: c.MODE_ITEMID} {value: 'itemid', text: 'Item ID', mode: c.MODE_ITEMID}
]; ];
this.$scope.editorMode = {
METRICS: c.MODE_METRICS,
TEXT: c.MODE_TEXT,
ITSERVICE: c.MODE_ITSERVICE,
ITEMID: c.MODE_ITEMID
};
this.slaPropertyList = [ this.slaPropertyList = [
{name: "Status", property: "status"}, {name: "Status", property: "status"},
{name: "SLA", property: "sla"}, {name: "SLA", property: "sla"},