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

triggers panel: update options page design

Browse Source
This commit is contained in:
Alexander Zobnin
2017-12-03 10:16:23 +03:00
parent e0064da209
commit d5ba6ec489
2 changed files with 296 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
dist/panel-triggers/partials/options_tab.html vendored
View File

@@ -1,7 +1,58 @@
<div class="editor-row"> <div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Show fields</h5>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Host name"
checked="editor.panel.hostField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Technical name"
checked="editor.panel.hostTechNameField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Status"
checked="editor.panel.statusField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Severity"
checked="editor.panel.severityField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Last change"
checked="editor.panel.lastChangeField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Age"
checked="editor.panel.ageField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Info"
checked="editor.panel.infoField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Options</h5> <h5 class="section-heading">Options</h5>
<div class="gf-form-inline"> <gf-form-switch class="gf-form"
label-class="width-15"
label="Hide hosts in maintenance"
checked="editor.panel.hideHostsInMaintenance"
on-change="ctrl.refresh()">
</gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Acknowledged</label> <label class="gf-form-label width-8">Acknowledged</label>
<div class="gf-form-select-wrapper width-12"> <div class="gf-form-select-wrapper width-12">
@@ -12,14 +63,6 @@
</select> </select>
</div> </div>
</div> </div>
<gf-form-switch class="gf-form"
label-class="width-13"
label="Hide hosts in maintenance"
checked="editor.panel.hideHostsInMaintenance"
on-change="ctrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Sort by</label> <label class="gf-form-label width-8">Sort by</label>
<div class="gf-form-select-wrapper width-12"> <div class="gf-form-select-wrapper width-12">
@@ -32,7 +75,7 @@
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Show events</label> <label class="gf-form-label width-8">Show events</label>
<div class="gf-form-select-wrapper width-9"> <div class="gf-form-select-wrapper width-12">
<select class="gf-form-input" <select class="gf-form-input"
ng-model="editor.panel.showEvents" ng-model="editor.panel.showEvents"
ng-options="f.text for f in editor.showEventsFields track by f.value" ng-options="f.text for f in editor.showEventsFields track by f.value"
@@ -40,8 +83,27 @@
</select> </select>
</div> </div>
</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"
ng-model="editor.panel.limit"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">View options</h5>
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper max-width-6">
<select class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.panelCtrl.render()"></select>
</div>
</div> </div>
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Page size</label> <label class="gf-form-label width-8">Page size</label>
<input class="gf-form-input width-6" <input class="gf-form-input width-6"
@@ -56,79 +118,8 @@
checked="editor.panel.scroll" checked="editor.panel.scroll"
on-change="ctrl.render()"> on-change="ctrl.render()">
</gf-form-switch> </gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.panelCtrl.render()"></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"
ng-model="editor.panel.limit"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Show fields</h5>
<div class="gf-form-inline">
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label-class="width-8" label-class="width-16"
label="Host name"
checked="editor.panel.hostField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-12"
label="Host technical name"
checked="editor.panel.hostTechNameField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-5"
label="Status"
checked="editor.panel.statusField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-5"
label="Severity"
checked="editor.panel.severityField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-7"
label="Last change"
checked="editor.panel.lastChangeField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-4"
label="Age"
checked="editor.panel.ageField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-4"
label="Info"
checked="editor.panel.infoField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-14"
label="Custom Last change format" label="Custom Last change format"
checked="editor.panel.customLastChangeFormat" checked="editor.panel.customLastChangeFormat"
on-change="ctrl.render()"> on-change="ctrl.render()">
@@ -148,12 +139,9 @@
ng-change="editor.panelCtrl.refresh()"> ng-change="editor.panelCtrl.refresh()">
</div> </div>
</div> </div>
</div>
</div>
<div class="editor-row">
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Customize triggers severity and colors</h5> <h5 class="section-heading">Triggers severity and colors</h5>
<div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity"> <div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-3">{{ trigger.priority }}</label> <label class="gf-form-label width-3">{{ trigger.priority }}</label>
@@ -180,19 +168,7 @@
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label> <label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-label width-12" <label class="gf-form-input width-12"
ng-style="{background:editor.panel.okEventColor}">
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-label width-12"
ng-style="{background:editor.panel.ackEventColor}"> ng-style="{background:editor.panel.ackEventColor}">
Acknowledged color Acknowledged color
</label> </label>
@@ -207,5 +183,17 @@
on-change="editor.panelCtrl.refresh()"> on-change="editor.panelCtrl.refresh()">
</gf-form-switch> </gf-form-switch>
</div> </div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-input width-12"
ng-style="{background:editor.panel.okEventColor}">
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
</div>
</div> </div>
</div> </div>

188
src/panel-triggers/partials/options_tab.html
View File

@@ -1,7 +1,58 @@
<div class="editor-row"> <div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Show fields</h5>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Host name"
checked="editor.panel.hostField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Technical name"
checked="editor.panel.hostTechNameField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Status"
checked="editor.panel.statusField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Severity"
checked="editor.panel.severityField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Last change"
checked="editor.panel.lastChangeField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Age"
checked="editor.panel.ageField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Info"
checked="editor.panel.infoField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Options</h5> <h5 class="section-heading">Options</h5>
<div class="gf-form-inline"> <gf-form-switch class="gf-form"
label-class="width-15"
label="Hide hosts in maintenance"
checked="editor.panel.hideHostsInMaintenance"
on-change="ctrl.refresh()">
</gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Acknowledged</label> <label class="gf-form-label width-8">Acknowledged</label>
<div class="gf-form-select-wrapper width-12"> <div class="gf-form-select-wrapper width-12">
@@ -12,14 +63,6 @@
</select> </select>
</div> </div>
</div> </div>
<gf-form-switch class="gf-form"
label-class="width-13"
label="Hide hosts in maintenance"
checked="editor.panel.hideHostsInMaintenance"
on-change="ctrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Sort by</label> <label class="gf-form-label width-8">Sort by</label>
<div class="gf-form-select-wrapper width-12"> <div class="gf-form-select-wrapper width-12">
@@ -32,7 +75,7 @@
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Show events</label> <label class="gf-form-label width-8">Show events</label>
<div class="gf-form-select-wrapper width-9"> <div class="gf-form-select-wrapper width-12">
<select class="gf-form-input" <select class="gf-form-input"
ng-model="editor.panel.showEvents" ng-model="editor.panel.showEvents"
ng-options="f.text for f in editor.showEventsFields track by f.value" ng-options="f.text for f in editor.showEventsFields track by f.value"
@@ -40,8 +83,27 @@
</select> </select>
</div> </div>
</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"
ng-model="editor.panel.limit"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">View options</h5>
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper max-width-6">
<select class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.panelCtrl.render()"></select>
</div>
</div> </div>
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Page size</label> <label class="gf-form-label width-8">Page size</label>
<input class="gf-form-input width-6" <input class="gf-form-input width-6"
@@ -56,79 +118,8 @@
checked="editor.panel.scroll" checked="editor.panel.scroll"
on-change="ctrl.render()"> on-change="ctrl.render()">
</gf-form-switch> </gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.panelCtrl.render()"></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"
ng-model="editor.panel.limit"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Show fields</h5>
<div class="gf-form-inline">
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label-class="width-8" label-class="width-16"
label="Host name"
checked="editor.panel.hostField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-12"
label="Host technical name"
checked="editor.panel.hostTechNameField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-5"
label="Status"
checked="editor.panel.statusField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-5"
label="Severity"
checked="editor.panel.severityField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-7"
label="Last change"
checked="editor.panel.lastChangeField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-4"
label="Age"
checked="editor.panel.ageField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-4"
label="Info"
checked="editor.panel.infoField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-14"
label="Custom Last change format" label="Custom Last change format"
checked="editor.panel.customLastChangeFormat" checked="editor.panel.customLastChangeFormat"
on-change="ctrl.render()"> on-change="ctrl.render()">
@@ -148,12 +139,9 @@
ng-change="editor.panelCtrl.refresh()"> ng-change="editor.panelCtrl.refresh()">
</div> </div>
</div> </div>
</div>
</div>
<div class="editor-row">
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Customize triggers severity and colors</h5> <h5 class="section-heading">Triggers severity and colors</h5>
<div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity"> <div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-3">{{ trigger.priority }}</label> <label class="gf-form-label width-3">{{ trigger.priority }}</label>
@@ -180,19 +168,7 @@
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label> <label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-label width-12" <label class="gf-form-input width-12"
ng-style="{background:editor.panel.okEventColor}">
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-label width-12"
ng-style="{background:editor.panel.ackEventColor}"> ng-style="{background:editor.panel.ackEventColor}">
Acknowledged color Acknowledged color
</label> </label>
@@ -207,5 +183,17 @@
on-change="editor.panelCtrl.refresh()"> on-change="editor.panelCtrl.refresh()">
</gf-form-switch> </gf-form-switch>
</div> </div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-input width-12"
ng-style="{background:editor.panel.okEventColor}">
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
</div>
</div> </div>
</div> </div>