PR for request #562
https://github.com/alexanderzobnin/grafana-zabbix/issues/562
This commit is contained in:
Бунин Олег Александрович
446
dist/panel-triggers/partials/options_tab.html
vendored
446
dist/panel-triggers/partials/options_tab.html
vendored
@@ -1,223 +1,223 @@
|
||||
<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="ctrl.panel.hostField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Technical name"
|
||||
checked="ctrl.panel.hostTechNameField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Host groups"
|
||||
checked="ctrl.panel.hostGroups"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Tags"
|
||||
checked="ctrl.panel.showTags"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Status"
|
||||
checked="ctrl.panel.statusField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Severity"
|
||||
checked="ctrl.panel.severityField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Description"
|
||||
checked="ctrl.panel.descriptionField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form" ng-if="ctrl.panel.descriptionField"
|
||||
label-class="width-9"
|
||||
label="At the new line"
|
||||
checked="ctrl.panel.descriptionAtNewLine"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Options</h5>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-15"
|
||||
label="Show hosts in maintenance"
|
||||
checked="ctrl.panel.hostsInMaintenance"
|
||||
on-change="ctrl.render()">
|
||||
</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.panel.showTriggers"
|
||||
ng-options="f for f in editor.ackFilters"
|
||||
ng-change="ctrl.refresh()">
|
||||
</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.panel.sortTriggersBy"
|
||||
ng-options="f.text for f in editor.sortByFields track by f.value"
|
||||
ng-change="ctrl.render()">
|
||||
</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.panel.showEvents"
|
||||
ng-options="f.text for f in editor.showEventsFields track by f.value"
|
||||
ng-change="ctrl.refresh()">
|
||||
</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.panel.limit"
|
||||
ng-model-onblur ng-change="ctrl.refresh()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">View options</h5>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-10">Font size</label>
|
||||
<div class="gf-form-select-wrapper max-width-8">
|
||||
<select class="gf-form-input"
|
||||
ng-model="ctrl.panel.fontSize"
|
||||
ng-options="f for f in editor.fontSizes"
|
||||
ng-change="ctrl.render()"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-10">Page size</label>
|
||||
<input class="gf-form-input width-8"
|
||||
type="number" placeholder="10"
|
||||
ng-model="ctrl.panel.pageSize"
|
||||
ng-model-onblur ng-change="ctrl.render()">
|
||||
</div>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-10"
|
||||
label="Highlight background"
|
||||
checked="ctrl.panel.highlightBackground"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-10"
|
||||
label="Highlight new events"
|
||||
checked="ctrl.panel.highlightNewEvents"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-10">Newer than</label>
|
||||
<input class="gf-form-input width-8" placeholder="1h"
|
||||
ng-model="ctrl.panel.highlightNewerThan"
|
||||
ng-model-onblur ng-change="ctrl.render()">
|
||||
</div>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-16"
|
||||
label="Custom Last change format"
|
||||
checked="ctrl.panel.customLastChangeFormat"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<div class="gf-form" ng-if="ctrl.panel.customLastChangeFormat">
|
||||
<label class="gf-form-label width-3">
|
||||
<a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
|
||||
<tip>See moment.js dosc for time format.</tip>
|
||||
</a>
|
||||
</label>
|
||||
<input class="gf-form-input width-18"
|
||||
type="text"
|
||||
placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
|
||||
empty-to-null
|
||||
ng-model-onblur
|
||||
ng-model="ctrl.panel.lastChangeFormat"
|
||||
ng-change="ctrl.render()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Triggers severity and colors</h5>
|
||||
<div class="gf-form-inline" ng-repeat="trigger in ctrl.panel.triggerSeverity">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-3">{{ trigger.priority }}</label>
|
||||
<label class="gf-form-label triggers-severity-config"
|
||||
ng-style="{color: trigger.color}">
|
||||
<i class="icon-gf" ng-class="ctrl.getAlertIconClassBySeverity(trigger)"></i>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="gf-form-input width-12"
|
||||
empty-to-null
|
||||
ng-model="trigger.severity"
|
||||
ng-model-onblur
|
||||
ng-change="ctrl.render()">
|
||||
<span class="gf-form-label">
|
||||
<spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
|
||||
</span>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-0"
|
||||
label="Show"
|
||||
checked="trigger.show"
|
||||
on-change="ctrl.refresh()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-3"> </label>
|
||||
<label class="gf-form-label triggers-severity-config"
|
||||
ng-style="{color: ctrl.panel.ackEventColor}">
|
||||
<i class="icon-gf icon-gf-online"></i>
|
||||
</label>
|
||||
<label class="gf-form-label width-12">
|
||||
Acknowledged color
|
||||
</label>
|
||||
<span class="gf-form-label">
|
||||
<spectrum-picker ng-model="ctrl.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
|
||||
</span>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-0"
|
||||
label="Show"
|
||||
checked="ctrl.panel.markAckEvents"
|
||||
on-change="ctrl.refresh()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-3"> </label>
|
||||
<label class="gf-form-label triggers-severity-config"
|
||||
ng-style="{color: ctrl.panel.okEventColor}">
|
||||
<i class="icon-gf icon-gf-online"></i>
|
||||
</label>
|
||||
<label class="gf-form-label width-12">
|
||||
OK event color
|
||||
</label>
|
||||
<span class="gf-form-label">
|
||||
<spectrum-picker ng-model="ctrl.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="ctrl.panel.hostField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Technical name"
|
||||
checked="ctrl.panel.hostTechNameField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Host groups"
|
||||
checked="ctrl.panel.hostGroups"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Tags"
|
||||
checked="ctrl.panel.showTags"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Status"
|
||||
checked="ctrl.panel.statusField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Severity"
|
||||
checked="ctrl.panel.severityField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-9"
|
||||
label="Description"
|
||||
checked="ctrl.panel.descriptionField"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form" ng-if="ctrl.panel.descriptionField"
|
||||
label-class="width-9"
|
||||
label="At the new line"
|
||||
checked="ctrl.panel.descriptionAtNewLine"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Options</h5>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-15"
|
||||
label="Show hosts in maintenance"
|
||||
checked="ctrl.panel.hostsInMaintenance"
|
||||
on-change="ctrl.render()">
|
||||
</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.panel.showTriggers"
|
||||
ng-options="f for f in editor.ackFilters"
|
||||
ng-change="ctrl.refresh()">
|
||||
</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.panel.sortTriggersBy"
|
||||
ng-options="f.text for f in editor.sortByFields track by f.value"
|
||||
ng-change="ctrl.render()">
|
||||
</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.panel.showEvents"
|
||||
ng-options="f.text for f in editor.showEventsFields track by f.value"
|
||||
ng-change="ctrl.refresh()">
|
||||
</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.panel.limit"
|
||||
ng-model-onblur ng-change="ctrl.refresh()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">View options</h5>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-10">Font size</label>
|
||||
<div class="gf-form-select-wrapper max-width-8">
|
||||
<select class="gf-form-input"
|
||||
ng-model="ctrl.panel.fontSize"
|
||||
ng-options="f for f in editor.fontSizes"
|
||||
ng-change="ctrl.render()"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-10">Page size</label>
|
||||
<input class="gf-form-input width-8"
|
||||
type="number" placeholder="10"
|
||||
ng-model="ctrl.panel.pageSize"
|
||||
ng-model-onblur ng-change="ctrl.render()">
|
||||
</div>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-10"
|
||||
label="Highlight background"
|
||||
checked="ctrl.panel.highlightBackground"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-10"
|
||||
label="Highlight new events"
|
||||
checked="ctrl.panel.highlightNewEvents"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-10">Newer than</label>
|
||||
<input class="gf-form-input width-8" placeholder="1h"
|
||||
ng-model="ctrl.panel.highlightNewerThan"
|
||||
ng-model-onblur ng-change="ctrl.render()">
|
||||
</div>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-16"
|
||||
label="Custom Last change format"
|
||||
checked="ctrl.panel.customLastChangeFormat"
|
||||
on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<div class="gf-form" ng-if="ctrl.panel.customLastChangeFormat">
|
||||
<label class="gf-form-label width-3">
|
||||
<a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
|
||||
<tip>See moment.js dosc for time format.</tip>
|
||||
</a>
|
||||
</label>
|
||||
<input class="gf-form-input width-18"
|
||||
type="text"
|
||||
placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
|
||||
empty-to-null
|
||||
ng-model-onblur
|
||||
ng-model="ctrl.panel.lastChangeFormat"
|
||||
ng-change="ctrl.render()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Triggers severity and colors</h5>
|
||||
<div class="gf-form-inline" ng-repeat="trigger in ctrl.panel.triggerSeverity">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-3">{{ trigger.priority }}</label>
|
||||
<label class="gf-form-label triggers-severity-config"
|
||||
ng-style="{color: trigger.color}">
|
||||
<i class="icon-gf" ng-class="ctrl.getAlertIconClassBySeverity(trigger)"></i>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="gf-form-input width-12"
|
||||
empty-to-null
|
||||
ng-model="trigger.severity"
|
||||
ng-model-onblur
|
||||
ng-change="ctrl.render()">
|
||||
<span class="gf-form-label">
|
||||
<spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
|
||||
</span>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-0"
|
||||
label="Show"
|
||||
checked="trigger.show"
|
||||
on-change="ctrl.refresh()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-3"> </label>
|
||||
<label class="gf-form-label triggers-severity-config"
|
||||
ng-style="{color: ctrl.panel.ackEventColor}">
|
||||
<i class="icon-gf icon-gf-online"></i>
|
||||
</label>
|
||||
<label class="gf-form-label width-12">
|
||||
Acknowledged color
|
||||
</label>
|
||||
<span class="gf-form-label">
|
||||
<spectrum-picker ng-model="ctrl.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
|
||||
</span>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form"
|
||||
label-class="width-0"
|
||||
label="Show"
|
||||
checked="ctrl.panel.markAckEvents"
|
||||
on-change="ctrl.refresh()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-3"> </label>
|
||||
<label class="gf-form-label triggers-severity-config"
|
||||
ng-style="{color: ctrl.panel.okEventColor}">
|
||||
<i class="icon-gf icon-gf-online"></i>
|
||||
</label>
|
||||
<label class="gf-form-label width-12">
|
||||
OK event color
|
||||
</label>
|
||||
<span class="gf-form-label">
|
||||
<spectrum-picker ng-model="ctrl.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user