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

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;