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

triggers panel: redesign, unify with Alert List panel

Browse Source
This commit is contained in:
Alexander Zobnin
2017-12-10 19:27:50 +03:00
parent a723057684
commit 565de4b405
14 changed files with 393 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
dist/css/grafana-zabbix.dark.css vendored
View File

@@ -1,20 +1,27 @@
.triggers-panel-wrapper .panel-content {
padding: 0; }
.triggers-panel-wrapper .panel-title-container {
padding-bottom: 4px; }
.triggers-panel-scroll {
overflow: auto; }
.triggers-panel-container {
padding-top: 2.2em;
position: relative; }
.triggers-panel-container .zabbix-hostname {
color: #8e8e8e;
margin-left: 1rem;
font-weight: bold; }
.triggers-panel-container .alert-list-info.alert-list-info-left {
color: #b3b3b3; }
.triggers-panel-container .trigger-info-block {
display: inline; }
.triggers-panel-container .trigger-info-block i {
margin-right: 0.4rem; }
.triggers-panel-container .trigger-info-block i,
.triggers-panel-container .trigger-info-block a {
color: #8e8e8e; }
.triggers-panel-footer {
text-align: center;
font-size: 90%;
line-height: 2px; }
line-height: 2px;
padding-top: 4px; }
.triggers-panel-footer ul {
position: relative;
display: inline-block;
@@ -33,50 +40,6 @@
font-weight: bold;
color: #33B5E5; }
.triggers-panel-table {
width: 100%;
border-collapse: collapse; }
.triggers-panel-table th {
padding: 0; }
.triggers-panel-table th:first-child .triggers-panel-table-header-inner {
padding-left: 15px; }
.triggers-panel-table td {
padding: 0.45em 0 0.45em 1.1em;
border-bottom: 2px solid #141414;
border-right: 2px solid #141414; }
.triggers-panel-table td:first-child {
padding-left: 15px; }
.triggers-panel-table td:last-child {
border-right: none; }
.triggers-panel-table .zbx-field-colored {
color: #f4f5f8; }
.triggers-panel-table .zbx-description-icon {
float: right;
padding-right: 8px;
color: #f4f5f8; }
.triggers-panel-header-bg {
background: #242222;
border-top: 2px solid #141414;
border-bottom: 2px solid #141414;
height: 2.0em;
position: absolute;
top: 0;
right: 0;
left: 0; }
.triggers-panel-table-header-inner {
padding: 0.45em 0 0.45em 1.1em;
text-align: left;
color: #33B5E5;
position: absolute;
top: 0; }
.triggers-panel-width-hack {
visibility: hidden;
height: 0px;
line-height: 0px; }
.ack-tooltip .drop-content {
max-width: 70rem !important;
min-width: 30rem !important; }

2
dist/css/grafana-zabbix.dark.css.map vendored
View File

@@ -8,6 +8,6 @@
"../../src/sass/_variables.scss",
"../../src/sass/_panel-triggers.scss"
],
"mappings": "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",
"mappings": "AIAA,AAAA,sBAAsB,CAAC;EACrB,QAAQ,EAAE,IAAK,GAChB;;AAED,AAAA,yBAAyB,CAAC;EACxB,QAAQ,EAAE,QAAS,GAsBpB;EAvBD,AAGE,yBAHuB,CAGvB,gBAAgB,CAAC;IACf,KAAK,EHCU,OAAO;IGAtB,WAAW,EAAE,IAAK;IAClB,WAAW,EAAE,IAAK,GACnB;EAPH,AASkB,yBATO,CASvB,gBAAgB,AAAA,qBAAqB,CAAC;IACpC,KAAK,EHJU,OAAO,GGKvB;EAXH,AAaE,yBAbuB,CAavB,mBAAmB,CAAC;IAClB,OAAO,EAAE,MAAO,GAQjB;IAtBH,AAeI,yBAfqB,CAavB,mBAAmB,CAEjB,CAAC,CAAC;MACA,YAAY,EAAE,MAAO,GACtB;IAjBL,AAkBI,yBAlBqB,CAavB,mBAAmB,CAKjB,CAAC;IAlBL,AAmBI,yBAnBqB,CAavB,mBAAmB,CAMjB,CAAC,CAAC;MACA,KAAK,EHfQ,OAAO,GGgBrB;;AAIL,AAAA,sBAAsB,CAAC;EACrB,UAAU,EAAE,MAAO;EACnB,SAAS,EAAE,GAAI;EACf,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,GAAI,GA0BlB;EA9BD,AAME,sBANoB,CAMpB,EAAE,CAAC;IACD,QAAQ,EAAE,QAAS;IACnB,OAAO,EAAE,YAAa;IACtB,WAAW,EAAE,CAAE;IACf,aAAa,EAAE,CAAE,GAClB;EAXH,AAYO,sBAZe,CAYpB,EAAE,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,MAAO,GACjB;EAdH,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IACV,KAAK,EAAE,IAAK;IACZ,OAAO,EAAE,QAAS;IAClB,eAAe,EAAE,IAAK;IACtB,iBAAiB,EAAE,CAAE,GAUtB;IA7BH,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,AAMR,MAAM,CAAC;MACN,gBAAgB,EHjBE,IAAI,GGkBvB;IAvBL,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,AAUR,OAAO,CAAC;MACP,WAAW,EAAE,IAAK;MAClB,KAAK,EHnCa,OAAO,GGoC1B;;AAIL,AACE,YADU,CACV,aAAa,CAAC;EAEZ,SAAS,EAAE,gBAAiB;EAC5B,SAAS,EAAE,gBAAiB,GAC7B;;AALH,AAOE,YAPU,CAOV,aAAa,CAAC;EACZ,KAAK,EAAE,GAAI,GACZ;;AATH,AAWE,YAXU,CAWV,eAAe,CAAC;EACd,WAAW,EAAE,IAAK,GACnB;;AAbH,AAeQ,YAfI,CAeV,KAAK,CAAC,EAAE,EAfV,AAeY,YAfA,CAeA,EAAE,CAAC;EACX,aAAa,EAAE,IAAK,GACrB;;AAjBH,AAmBE,YAnBU,CAmBV,gBAAgB,CAAC;EACf,WAAW,EAAE,IAAK,GAWnB;EA/BH,AAsBI,YAtBQ,CAmBV,gBAAgB,CAGd,KAAK,CAAC;IACJ,MAAM,EAAE,SAAU;IAClB,aAAa,EAAE,GAAI;IACnB,KAAK,EAAE,GAAI,GACZ;EA1BL,AA4BI,YA5BQ,CAmBV,gBAAgB,CASd,MAAM,CAAC;IACL,WAAW,EAAE,IAAK,GACnB",
"names": []
}

69
dist/css/grafana-zabbix.light.css vendored
View File

@@ -1,20 +1,27 @@
.triggers-panel-wrapper .panel-content {
padding: 0; }
.triggers-panel-wrapper .panel-title-container {
padding-bottom: 4px; }
.triggers-panel-scroll {
overflow: auto; }
.triggers-panel-container {
padding-top: 2.2em;
position: relative; }
.triggers-panel-container .zabbix-hostname {
color: #767980;
margin-left: 1rem;
font-weight: bold; }
.triggers-panel-container .alert-list-info.alert-list-info-left {
color: #acb6bf; }
.triggers-panel-container .trigger-info-block {
display: inline; }
.triggers-panel-container .trigger-info-block i {
margin-right: 0.4rem; }
.triggers-panel-container .trigger-info-block i,
.triggers-panel-container .trigger-info-block a {
color: #767980; }
.triggers-panel-footer {
text-align: center;
font-size: 90%;
line-height: 2px; }
line-height: 2px;
padding-top: 4px; }
.triggers-panel-footer ul {
position: relative;
display: inline-block;
@@ -28,55 +35,11 @@
text-decoration: none;
border-left-width: 0; }
.triggers-panel-footer ul > li > a:hover {
background-color: #ECECEC; }
background-color: #dde4ed; }
.triggers-panel-footer ul > li > a.active {
font-weight: bold;
color: #2AB2E4; }
.triggers-panel-table {
width: 100%;
border-collapse: collapse; }
.triggers-panel-table th {
padding: 0; }
.triggers-panel-table th:first-child .triggers-panel-table-header-inner {
padding-left: 15px; }
.triggers-panel-table td {
padding: 0.45em 0 0.45em 1.1em;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff; }
.triggers-panel-table td:first-child {
padding-left: 15px; }
.triggers-panel-table td:last-child {
border-right: none; }
.triggers-panel-table .zbx-field-colored {
color: #f4f5f8; }
.triggers-panel-table .zbx-description-icon {
float: right;
padding-right: 8px;
color: #f4f5f8; }
.triggers-panel-header-bg {
background: #ECECEC;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
height: 2.0em;
position: absolute;
top: 0;
right: 0;
left: 0; }
.triggers-panel-table-header-inner {
padding: 0.45em 0 0.45em 1.1em;
text-align: left;
color: #2AB2E4;
position: absolute;
top: 0; }
.triggers-panel-width-hack {
visibility: hidden;
height: 0px;
line-height: 0px; }
.ack-tooltip .drop-content {
max-width: 70rem !important;
min-width: 30rem !important; }

2
dist/css/grafana-zabbix.light.css.map vendored
View File

@@ -8,6 +8,6 @@
"../../src/sass/_variables.scss",
"../../src/sass/_panel-triggers.scss"
],
"mappings": "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",
"mappings": "AIAA,AAAA,sBAAsB,CAAC;EACrB,QAAQ,EAAE,IAAK,GAChB;;AAED,AAAA,yBAAyB,CAAC;EACxB,QAAQ,EAAE,QAAS,GAsBpB;EAvBD,AAGE,yBAHuB,CAGvB,gBAAgB,CAAC;IACf,KAAK,EHCU,OAAO;IGAtB,WAAW,EAAE,IAAK;IAClB,WAAW,EAAE,IAAK,GACnB;EAPH,AASkB,yBATO,CASvB,gBAAgB,AAAA,qBAAqB,CAAC;IACpC,KAAK,EHJU,OAAO,GGKvB;EAXH,AAaE,yBAbuB,CAavB,mBAAmB,CAAC;IAClB,OAAO,EAAE,MAAO,GAQjB;IAtBH,AAeI,yBAfqB,CAavB,mBAAmB,CAEjB,CAAC,CAAC;MACA,YAAY,EAAE,MAAO,GACtB;IAjBL,AAkBI,yBAlBqB,CAavB,mBAAmB,CAKjB,CAAC;IAlBL,AAmBI,yBAnBqB,CAavB,mBAAmB,CAMjB,CAAC,CAAC;MACA,KAAK,EHfQ,OAAO,GGgBrB;;AAIL,AAAA,sBAAsB,CAAC;EACrB,UAAU,EAAE,MAAO;EACnB,SAAS,EAAE,GAAI;EACf,WAAW,EAAE,GAAI;EACjB,WAAW,EAAE,GAAI,GA0BlB;EA9BD,AAME,sBANoB,CAMpB,EAAE,CAAC;IACD,QAAQ,EAAE,QAAS;IACnB,OAAO,EAAE,YAAa;IACtB,WAAW,EAAE,CAAE;IACf,aAAa,EAAE,CAAE,GAClB;EAXH,AAYO,sBAZe,CAYpB,EAAE,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,MAAO,GACjB;EAdH,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IACV,KAAK,EAAE,IAAK;IACZ,OAAO,EAAE,QAAS;IAClB,eAAe,EAAE,IAAK;IACtB,iBAAiB,EAAE,CAAE,GAUtB;IA7BH,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,AAMR,MAAM,CAAC;MACN,gBAAgB,EHvCH,OAAO,GGwCrB;IAvBL,AAeY,sBAfU,CAepB,EAAE,GAAG,EAAE,GAAG,CAAC,AAUR,OAAO,CAAC;MACP,WAAW,EAAE,IAAK;MAClB,KAAK,EHpCa,OAAO,GGqC1B;;AAIL,AACE,YADU,CACV,aAAa,CAAC;EAEZ,SAAS,EAAE,gBAAiB;EAC5B,SAAS,EAAE,gBAAiB,GAC7B;;AALH,AAOE,YAPU,CAOV,aAAa,CAAC;EACZ,KAAK,EAAE,GAAI,GACZ;;AATH,AAWE,YAXU,CAWV,eAAe,CAAC;EACd,WAAW,EAAE,IAAK,GACnB;;AAbH,AAeQ,YAfI,CAeV,KAAK,CAAC,EAAE,EAfV,AAeY,YAfA,CAeA,EAAE,CAAC;EACX,aAAa,EAAE,IAAK,GACrB;;AAjBH,AAmBE,YAnBU,CAmBV,gBAAgB,CAAC;EACf,WAAW,EAAE,IAAK,GAWnB;EA/BH,AAsBI,YAtBQ,CAmBV,gBAAgB,CAGd,KAAK,CAAC;IACJ,MAAM,EAAE,SAAU;IAClB,aAAa,EAAE,GAAI;IACnB,KAAK,EAAE,GAAI,GACZ;EA1BL,AA4BI,YA5BQ,CAmBV,gBAAgB,CASd,MAAM,CAAC;IACL,WAAW,EAAE,IAAK,GACnB",
"names": []
}

63
dist/panel-triggers/partials/module.html vendored
View File

@@ -1,7 +1,7 @@
<div class="triggers-panel-container">
<div class="triggers-panel-header-bg"></div>
<!-- <div class="triggers-panel-header-bg"></div> -->
<div class="triggers-panel-scroll">
<table class="triggers-panel-table">
<table class="triggers-panel-table" ng-if="false">
<thead>
<tr>
<th ng-if="ctrl.panel.hostField" class="zbx-field-host">
@@ -121,6 +121,65 @@
</tr>
</tbody>
</table>
<section class="card-section card-list-layout-list">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="trigger in ctrl.currentTriggersPage">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state"
ng-style="{color: trigger.color}">
<i class="icon-gf"
ng-class="trigger.value === '1' ? 'icon-gf-critical' : 'icon-gf-online'"></i>
</div>
<div class="alert-list-main">
<p class="alert-list-title">
{{trigger.description}}
<span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
{{ ctrl.formatHostName(trigger) }}
</span>
</p>
<p class="alert-list-text">
<span ng-if="ctrl.panel.statusField" class="alert-list-state"
ng-class="trigger.value === '1' ? 'alert-state-critical' : 'alert-state-ok'">
{{ctrl.triggerStatusMap[trigger.value]}}
</span>
<span ng-if="ctrl.panel.severityField" class="alert-list-state"
ng-style="{color: trigger.color}">
{{trigger.severity}}
</span>
for {{trigger.age}}
<span class="alert-list-info alert-list-info-left">{{trigger.comments}}</span>
</p>
</div>
</div>
<div class="alert-list-footer">
<span class="alert-list-text">{{trigger.lastchange}}</span>
<span class="alert-list-text">
<!--Img Link-->
</span>
<div class="trigger-info-block">
<a ng-if="trigger.url" href="{{trigger.url}}" target="_blank">
<i class="fa fa-external-link"></i>
</a>
<span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
<i class="fa fa-question-circle"></i>
</span>
<ack-tooltip ack="trigger.acknowledges" trigger="trigger"
on-ack="ctrl.acknowledgeTrigger" context="ctrl">
</ack-tooltip>
</div>
</div>
</div>
</li>
</ol>
</section>
</div>
</div>
<div class="triggers-panel-footer"></div>

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

@@ -69,7 +69,7 @@
<select class="gf-form-input"
ng-model="editor.panel.sortTriggersBy"
ng-options="f.text for f in editor.sortByFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
ng-change="ctrl.render()">
</select>
</div>
</div>
@@ -107,7 +107,7 @@
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.fontColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
<spectrum-picker ng-model="editor.panel.fontColor" ng-change="ctrl.render()"></spectrum-picker>
</span>
</div>
<div class="gf-form">
@@ -116,7 +116,7 @@
type="number"
ng-model="editor.panel.pageSize"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
ng-change="ctrl.render()">
</div>
<gf-form-switch class="gf-form"
label-class="width-8"
@@ -128,7 +128,7 @@
label-class="width-16"
label="Custom Last change format"
checked="editor.panel.customLastChangeFormat"
on-change="editor.panelCtrl.refresh()">
on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
<label class="gf-form-label width-3">
@@ -142,7 +142,7 @@
empty-to-null
ng-model-onblur
ng-model="editor.panel.lastChangeFormat"
ng-change="editor.panelCtrl.refresh()">
ng-change="ctrl.render()">
</div>
</div>
@@ -157,9 +157,9 @@
ng-model="trigger.severity"
ng-style="{background: trigger.color, color: editor.panel.fontColor}"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
ng-change="ctrl.render()">
<span class="gf-form-label">
<spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
<spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
@@ -178,7 +178,7 @@
Acknowledged color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
<spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
@@ -196,7 +196,7 @@
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
</span>
</div>
</div>

129
dist/panel-triggers/triggers_panel_ctrl.js vendored
View File

@@ -134,7 +134,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
triggerStatusMap = {
'0': 'OK',
'1': 'Problem'
'1': 'PROBLEM'
};
_export('TriggerPanelCtrl', TriggerPanelCtrl = function (_PanelCtrl) {
@@ -227,6 +227,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
delete this.error;
this.loading = true;
this.setTimeQueryStart();
this.pageIndex = 0;
return this.getTriggers().then(function (triggerList) {
// Notify panel that request is finished
@@ -292,10 +293,6 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
return Promise.all(promises).then(function (results) {
return _.flatten(results);
}).then(function (triggers) {
return _.map(triggers, _this4.formatTrigger.bind(_this4));
}).then(function (triggers) {
return _this4.sortTriggers(triggers);
});
}
}, {
@@ -327,11 +324,6 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
return ack;
});
// Mark acknowledged triggers with different color
if (_this5.panel.markAckEvents && trigger.acknowledges.length) {
trigger.color = _this5.panel.ackEventColor;
}
}
});
@@ -372,45 +364,68 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
key: 'sortTriggers',
value: function sortTriggers(triggerList) {
if (this.panel.sortTriggersBy.value === 'priority') {
triggerList = _.sortBy(triggerList, 'priority').reverse();
triggerList = _.sortBy(triggerList, ['priority', 'triggerid']).reverse();
} else {
triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
triggerList = _.sortBy(triggerList, ['lastchangeUnix', 'triggerid']).reverse();
}
return triggerList;
}
}, {
key: 'formatTrigger',
value: function formatTrigger(trigger) {
value: function formatTrigger(zabbixTrigger) {
var trigger = _.cloneDeep(zabbixTrigger);
var triggerObj = trigger;
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
var timestamp = moment.unix(trigger.lastchangeUnix);
if (this.panel.customLastChangeFormat) {
// User defined format
triggerObj.lastchange = timestamp.format(this.panel.lastChangeFormat);
} else {
triggerObj.lastchange = timestamp.format(this.defaultTimeFormat);
}
triggerObj.age = timestamp.fromNow(true);
// Set host that the trigger belongs
if (trigger.hosts.length) {
triggerObj.host = trigger.hosts[0].name;
triggerObj.hostTechName = trigger.hosts[0].host;
}
// Set color
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
triggerObj = this.setTriggerLastChange(triggerObj);
triggerObj = this.setTriggerSeverity(triggerObj);
return triggerObj;
}
}, {
key: 'updateTriggerFormat',
value: function updateTriggerFormat(trigger) {
trigger = this.setTriggerLastChange(trigger);
trigger = this.setTriggerSeverity(trigger);
return trigger;
}
}, {
key: 'setTriggerSeverity',
value: function setTriggerSeverity(trigger) {
if (trigger.value === '1') {
// Problem state
triggerObj.color = this.panel.triggerSeverity[trigger.priority].color;
trigger.color = this.panel.triggerSeverity[trigger.priority].color;
} else {
// OK state
triggerObj.color = this.panel.okEventColor;
trigger.color = this.panel.okEventColor;
}
trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
// Mark acknowledged triggers with different color
if (this.panel.markAckEvents && trigger.acknowledges && trigger.acknowledges.length) {
trigger.color = this.panel.ackEventColor;
}
triggerObj.severity = this.panel.triggerSeverity[trigger.priority].severity;
return triggerObj;
return trigger;
}
}, {
key: 'setTriggerLastChange',
value: function setTriggerLastChange(trigger) {
var timestamp = moment.unix(trigger.lastchangeUnix);
if (this.panel.customLastChangeFormat) {
// User defined format
trigger.lastchange = timestamp.format(this.panel.lastChangeFormat);
} else {
trigger.lastchange = timestamp.format(this.defaultTimeFormat);
}
trigger.age = timestamp.fromNow(true);
return trigger;
}
}, {
key: 'switchComment',
@@ -437,22 +452,32 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
return this.currentTriggersPage;
}
}, {
key: 'formatHostName',
value: function formatHostName(trigger) {
if (this.panel.hostField && this.panel.hostTechNameField) {
return trigger.host + ' (' + trigger.hostTechName + ')';
} else if (this.panel.hostField || this.panel.hostTechNameField) {
return trigger.host || trigger.hostTechName;
} else {
return "";
}
}
}, {
key: 'link',
value: function link(scope, elem, attrs, ctrl) {
var data;
var panel = ctrl.panel;
var pageCount = 0;
data = ctrl.triggerList;
var data = ctrl.triggerList;
function getTableHeight() {
function getContentHeight() {
var panelHeight = ctrl.height;
if (pageCount > 1) {
panelHeight -= 26;
panelHeight -= 36;
}
return panelHeight - 31 + 'px';
return panelHeight + 'px';
}
function switchPage(e) {
@@ -492,16 +517,26 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
footerElem.append(paginationList);
}
function setFontSize() {
var fontSize = parseInt(panel.fontSize.slice(0, panel.fontSize.length - 1));
var triggerCardElem = elem.find('.card-item-wrapper');
if (fontSize && fontSize !== 100) {
triggerCardElem.find('.alert-list-icon').css({ 'font-size': fontSize + '%' });
triggerCardElem.find('.alert-list-title').css({ 'font-size': fontSize + '%' });
triggerCardElem.find('.alert-list-text').css({ 'font-size': fontSize * 0.8 + '%' });
} else {
// remove css
triggerCardElem.find('.alert-list-icon').css({ 'font-size': fontSize + '%' });
}
}
function renderPanel() {
var panelElem = elem.parents('.panel');
var rootElem = elem.find('.triggers-panel-scroll');
var footerElem = elem.find('.triggers-panel-footer');
elem.css({ 'font-size': panel.fontSize });
panelElem.addClass('triggers-panel-wrapper');
appendPaginationControls(footerElem);
rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' });
setFontSize();
rootElem.css({ 'max-height': panel.scroll ? getContentHeight() : '' });
rootElem.css({ 'height': getContentHeight() });
ctrl.renderingCompleted();
}
@@ -513,11 +548,17 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
});
ctrl.events.on('render', function (renderData) {
data = renderData || data;
if (renderData) {
renderData = _.map(renderData, ctrl.formatTrigger.bind(ctrl));
data = renderData;
} else {
data = _.map(data, ctrl.updateTriggerFormat.bind(ctrl));
}
data = ctrl.sortTriggers(data);
if (data) {
scope.$apply(function () {
renderPanel();
});
ctrl.triggerList = data;
ctrl.getCurrentTriggersPage();
renderPanel();
}
});
}

2
dist/panel-triggers/triggers_panel_ctrl.js.map vendored
View File

File diff suppressed because one or more lines are too long

63
src/panel-triggers/partials/module.html
View File

@@ -1,7 +1,7 @@
<div class="triggers-panel-container">
<div class="triggers-panel-header-bg"></div>
<!-- <div class="triggers-panel-header-bg"></div> -->
<div class="triggers-panel-scroll">
<table class="triggers-panel-table">
<table class="triggers-panel-table" ng-if="false">
<thead>
<tr>
<th ng-if="ctrl.panel.hostField" class="zbx-field-host">
@@ -121,6 +121,65 @@
</tr>
</tbody>
</table>
<section class="card-section card-list-layout-list">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="trigger in ctrl.currentTriggersPage">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state"
ng-style="{color: trigger.color}">
<i class="icon-gf"
ng-class="trigger.value === '1' ? 'icon-gf-critical' : 'icon-gf-online'"></i>
</div>
<div class="alert-list-main">
<p class="alert-list-title">
{{trigger.description}}
<span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
{{ ctrl.formatHostName(trigger) }}
</span>
</p>
<p class="alert-list-text">
<span ng-if="ctrl.panel.statusField" class="alert-list-state"
ng-class="trigger.value === '1' ? 'alert-state-critical' : 'alert-state-ok'">
{{ctrl.triggerStatusMap[trigger.value]}}
</span>
<span ng-if="ctrl.panel.severityField" class="alert-list-state"
ng-style="{color: trigger.color}">
{{trigger.severity}}
</span>
for {{trigger.age}}
<span class="alert-list-info alert-list-info-left">{{trigger.comments}}</span>
</p>
</div>
</div>
<div class="alert-list-footer">
<span class="alert-list-text">{{trigger.lastchange}}</span>
<span class="alert-list-text">
<!--Img Link-->
</span>
<div class="trigger-info-block">
<a ng-if="trigger.url" href="{{trigger.url}}" target="_blank">
<i class="fa fa-external-link"></i>
</a>
<span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
<i class="fa fa-question-circle"></i>
</span>
<ack-tooltip ack="trigger.acknowledges" trigger="trigger"
on-ack="ctrl.acknowledgeTrigger" context="ctrl">
</ack-tooltip>
</div>
</div>
</div>
</li>
</ol>
</section>
</div>
</div>
<div class="triggers-panel-footer"></div>

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

@@ -69,7 +69,7 @@
<select class="gf-form-input"
ng-model="editor.panel.sortTriggersBy"
ng-options="f.text for f in editor.sortByFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
ng-change="ctrl.render()">
</select>
</div>
</div>
@@ -107,7 +107,7 @@
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.fontColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
<spectrum-picker ng-model="editor.panel.fontColor" ng-change="ctrl.render()"></spectrum-picker>
</span>
</div>
<div class="gf-form">
@@ -116,7 +116,7 @@
type="number"
ng-model="editor.panel.pageSize"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
ng-change="ctrl.render()">
</div>
<gf-form-switch class="gf-form"
label-class="width-8"
@@ -128,7 +128,7 @@
label-class="width-16"
label="Custom Last change format"
checked="editor.panel.customLastChangeFormat"
on-change="editor.panelCtrl.refresh()">
on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
<label class="gf-form-label width-3">
@@ -142,7 +142,7 @@
empty-to-null
ng-model-onblur
ng-model="editor.panel.lastChangeFormat"
ng-change="editor.panelCtrl.refresh()">
ng-change="ctrl.render()">
</div>
</div>
@@ -157,9 +157,9 @@
ng-model="trigger.severity"
ng-style="{background: trigger.color, color: editor.panel.fontColor}"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
ng-change="ctrl.render()">
<span class="gf-form-label">
<spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
<spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
@@ -178,7 +178,7 @@
Acknowledged color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
<spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
@@ -196,7 +196,7 @@
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
</span>
</div>
</div>

157
src/panel-triggers/triggers_panel_ctrl.js
View File

@@ -59,7 +59,7 @@ export const PANEL_DEFAULTS = {
const triggerStatusMap = {
'0': 'OK',
'1': 'Problem'
'1': 'PROBLEM'
};
export class TriggerPanelCtrl extends PanelCtrl {
@@ -135,6 +135,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
delete this.error;
this.loading = true;
this.setTimeQueryStart();
this.pageIndex = 0;
return this.getTriggers()
.then(triggerList => {
@@ -199,13 +200,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
});
return Promise.all(promises)
.then(results => _.flatten(results))
.then(triggers => {
return _.map(triggers, this.formatTrigger.bind(this));
})
.then((triggers) => {
return this.sortTriggers(triggers);
});
.then(results => _.flatten(results));
}
getAcknowledges(triggerList, ds) {
@@ -234,11 +229,6 @@ export class TriggerPanelCtrl extends PanelCtrl {
ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
return ack;
});
// Mark acknowledged triggers with different color
if (this.panel.markAckEvents && trigger.acknowledges.length) {
trigger.color = this.panel.ackEventColor;
}
}
});
@@ -275,44 +265,64 @@ export class TriggerPanelCtrl extends PanelCtrl {
sortTriggers(triggerList) {
if (this.panel.sortTriggersBy.value === 'priority') {
triggerList = _.sortBy(triggerList, 'priority').reverse();
triggerList = _.sortBy(triggerList, ['priority', 'triggerid']).reverse();
} else {
triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
triggerList = _.sortBy(triggerList, ['lastchangeUnix', 'triggerid']).reverse();
}
return triggerList;
}
formatTrigger(trigger) {
formatTrigger(zabbixTrigger) {
let trigger = _.cloneDeep(zabbixTrigger);
let triggerObj = trigger;
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
let timestamp = moment.unix(trigger.lastchangeUnix);
if (this.panel.customLastChangeFormat) {
// User defined format
triggerObj.lastchange = timestamp.format(this.panel.lastChangeFormat);
} else {
triggerObj.lastchange = timestamp.format(this.defaultTimeFormat);
}
triggerObj.age = timestamp.fromNow(true);
// Set host that the trigger belongs
if (trigger.hosts.length) {
triggerObj.host = trigger.hosts[0].name;
triggerObj.hostTechName = trigger.hosts[0].host;
}
// Set color
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
triggerObj = this.setTriggerLastChange(triggerObj);
triggerObj = this.setTriggerSeverity(triggerObj);
return triggerObj;
}
updateTriggerFormat(trigger) {
trigger = this.setTriggerLastChange(trigger);
trigger = this.setTriggerSeverity(trigger);
return trigger;
}
setTriggerSeverity(trigger) {
if (trigger.value === '1') {
// Problem state
triggerObj.color = this.panel.triggerSeverity[trigger.priority].color;
trigger.color = this.panel.triggerSeverity[trigger.priority].color;
} else {
// OK state
triggerObj.color = this.panel.okEventColor;
trigger.color = this.panel.okEventColor;
}
trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
// Mark acknowledged triggers with different color
if (this.panel.markAckEvents && trigger.acknowledges && trigger.acknowledges.length) {
trigger.color = this.panel.ackEventColor;
}
triggerObj.severity = this.panel.triggerSeverity[trigger.priority].severity;
return triggerObj;
return trigger;
}
setTriggerLastChange(trigger) {
let timestamp = moment.unix(trigger.lastchangeUnix);
if (this.panel.customLastChangeFormat) {
// User defined format
trigger.lastchange = timestamp.format(this.panel.lastChangeFormat);
} else {
trigger.lastchange = timestamp.format(this.defaultTimeFormat);
}
trigger.age = timestamp.fromNow(true);
return trigger;
}
switchComment(trigger) {
@@ -339,20 +349,29 @@ export class TriggerPanelCtrl extends PanelCtrl {
return this.currentTriggersPage;
}
link(scope, elem, attrs, ctrl) {
var data;
var panel = ctrl.panel;
var pageCount = 0;
data = ctrl.triggerList;
formatHostName(trigger) {
if (this.panel.hostField && this.panel.hostTechNameField) {
return `${trigger.host} (${trigger.hostTechName})`;
} else if (this.panel.hostField || this.panel.hostTechNameField) {
return trigger.host || trigger.hostTechName;
} else {
return "";
}
}
function getTableHeight() {
var panelHeight = ctrl.height;
link(scope, elem, attrs, ctrl) {
let panel = ctrl.panel;
let pageCount = 0;
let data = ctrl.triggerList;
function getContentHeight() {
let panelHeight = ctrl.height;
if (pageCount > 1) {
panelHeight -= 26;
panelHeight -= 36;
}
return (panelHeight - 31) + 'px';
return panelHeight + 'px';
}
function switchPage(e) {
@@ -372,52 +391,68 @@ export class TriggerPanelCtrl extends PanelCtrl {
function appendPaginationControls(footerElem) {
footerElem.empty();
var pageSize = ctrl.panel.pageSize || 5;
let pageSize = ctrl.panel.pageSize || 5;
pageCount = Math.ceil(data.length / pageSize);
if (pageCount === 1) {
return;
}
var startPage = Math.max(ctrl.pageIndex - 3, 0);
var endPage = Math.min(pageCount, startPage + 9);
let startPage = Math.max(ctrl.pageIndex - 3, 0);
let endPage = Math.min(pageCount, startPage + 9);
var paginationList = $('<ul></ul>');
let paginationList = $('<ul></ul>');
for (var i = startPage; i < endPage; i++) {
var activeClass = i === ctrl.pageIndex ? 'active' : '';
var pageLinkElem = $('<li><a class="triggers-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
for (let i = startPage; i < endPage; i++) {
let activeClass = i === ctrl.pageIndex ? 'active' : '';
let pageLinkElem = $('<li><a class="triggers-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
paginationList.append(pageLinkElem);
}
footerElem.append(paginationList);
}
function setFontSize() {
const fontSize = parseInt(panel.fontSize.slice(0, panel.fontSize.length - 1));
let triggerCardElem = elem.find('.card-item-wrapper');
if (fontSize && fontSize !== 100) {
triggerCardElem.find('.alert-list-icon').css({'font-size': fontSize + '%'});
triggerCardElem.find('.alert-list-title').css({'font-size': fontSize + '%'});
triggerCardElem.find('.alert-list-text').css({'font-size': fontSize * 0.8 + '%'});
} else {
// remove css
triggerCardElem.find('.alert-list-icon').css({'font-size': fontSize + '%'});
}
}
function renderPanel() {
var panelElem = elem.parents('.panel');
var rootElem = elem.find('.triggers-panel-scroll');
var footerElem = elem.find('.triggers-panel-footer');
elem.css({'font-size': panel.fontSize});
panelElem.addClass('triggers-panel-wrapper');
let rootElem = elem.find('.triggers-panel-scroll');
let footerElem = elem.find('.triggers-panel-footer');
appendPaginationControls(footerElem);
rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' });
setFontSize();
rootElem.css({'max-height': panel.scroll ? getContentHeight() : '' });
rootElem.css({'height': getContentHeight()});
ctrl.renderingCompleted();
}
elem.on('click', '.triggers-panel-page-link', switchPage);
var unbindDestroy = scope.$on('$destroy', function() {
let unbindDestroy = scope.$on('$destroy', function() {
elem.off('click', '.triggers-panel-page-link');
unbindDestroy();
});
ctrl.events.on('render', (renderData) => {
data = renderData || data;
if (renderData) {
renderData = _.map(renderData, ctrl.formatTrigger.bind(ctrl));
data = renderData;
} else {
data = _.map(data, ctrl.updateTriggerFormat.bind(ctrl));
}
data = ctrl.sortTriggers(data);
if (data) {
scope.$apply(() => {
renderPanel();
});
ctrl.triggerList = data;
ctrl.getCurrentTriggersPage();
renderPanel();
}
});
}

115
src/sass/_panel-triggers.scss
View File

@@ -1,25 +1,37 @@
.triggers-panel-wrapper {
.panel-content {
padding: 0;
}
.panel-title-container {
padding-bottom: 4px;
}
}
.triggers-panel-scroll {
overflow: auto;
}
.triggers-panel-container {
padding-top: 2.2em;
position: relative;
.zabbix-hostname {
color: $gray-2;
margin-left: 1rem;
font-weight: bold;
}
.alert-list-info.alert-list-info-left {
color: $gray-3;
}
.trigger-info-block {
display: inline;
i {
margin-right: 0.4rem;
}
i,
a {
color: $gray-2;
}
}
}
.triggers-panel-footer {
text-align: center;
font-size: 90%;
line-height: 2px;
padding-top: 4px;
ul {
position: relative;
@@ -47,89 +59,6 @@
}
}
.triggers-panel-table {
width: 100%;
border-collapse: collapse;
th {
padding: 0;
&:first-child {
.triggers-panel-table-header-inner {
padding-left: 15px;
}
}
}
td {
padding: 0.45em 0 0.45em 1.1em;
border-bottom: 2px solid $body-bg;
border-right: 2px solid $body-bg;
&:first-child {
padding-left: 15px;
}
&:last-child {
border-right: none;
}
}
.zbx-field-colored {
color: $gray-6;
}
.zbx-description-icon {
float: right;
padding-right: 8px;
color: $gray-6;
}
// .zbx-field-info {
// width: 7%;
// }
// .zbx-field-host {
// width: 15%;
// }
// .zbx-field-status {
// width: 9rem;
// }
// .zbx-field-severity {
// width: 7%;
// }
// .zbx-field-lastchange {
// width: 15%;
// }
}
.triggers-panel-header-bg {
background: $grafanaListAccent;
border-top: 2px solid $body-bg;
border-bottom: 2px solid $body-bg;
height: 2.0em;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.triggers-panel-table-header-inner {
padding: 0.45em 0 0.45em 1.1em;
text-align: left;
color: $blue;
position: absolute;
top: 0;
}
.triggers-panel-width-hack {
visibility: hidden;
height: 0px;
line-height: 0px;
}
.ack-tooltip {
.drop-content {
// Rewrite tooltip width

7
src/sass/_variables.dark.scss
View File

@@ -2,17 +2,18 @@
// -------------------------
$black: #000;
$dark-1: #141414;
$dark-2: #1f1d1d;
$dark-3: #292929;
$dark-2: #1f1f20;
$dark-3: #262628;
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #7B7B7B;
$gray-2: #8e8e8e;
$gray-3: #b3b3b3;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;
$gray-6: #f4f5f8;
$gray-7: #fbfbfb;
$gray-blue: #292a2d;
$white: #fff;

24
src/sass/_variables.light.scss
View File

@@ -1,18 +1,18 @@
// Grays
// -------------------------
$black: #000;
$dark-1: #141414;
$dark-2: #1f1d1d;
$dark-3: #292929;
$dark-4: #373737;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #7B7B7B;
$gray-3: #b3b3b3;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;
$gray-6: #f4f5f8;
$gray-7: #fbfbfb;
$dark-1: #13161d;
$dark-2: #1e2028;
$dark-3: #303133;
$dark-4: #35373f;
$dark-5: #41444b;
$gray-1: #52545c;
$gray-2: #767980;
$gray-3: #acb6bf;
$gray-4: #c7d0d9;
$gray-5: #dde4ed;
$gray-6: #e9edf2;
$gray-7: #f7f8fa;
$white: #fff;