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

triggers panel: highlight new events

Browse Source
This commit is contained in:
Alexander Zobnin
2017-12-13 23:00:53 +03:00
parent c1cb3b41d8
commit f53db242d7
10 changed files with 80 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,7 @@
.zabbix-trigger--blinked { .zabbix-trigger--blinked {
opacity: 0.5; opacity: 0.5;
animation: zabbix-triggers-icon 1.1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate; } animation: zabbix-triggers-icon 0.8s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate; }
@keyframes zabbix-triggers-panel { @keyframes zabbix-triggers-panel {
100% { 100% {

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

@@ -33,7 +33,7 @@
.zabbix-trigger--blinked { .zabbix-trigger--blinked {
opacity: 0.5; opacity: 0.5;
animation: zabbix-triggers-icon 1.1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate; } animation: zabbix-triggers-icon 0.8s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate; }
@keyframes zabbix-triggers-panel { @keyframes zabbix-triggers-panel {
100% { 100% {

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

@@ -7,7 +7,7 @@
<div class="alert-list-body"> <div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state alert-list-icon--alerting" <div class="alert-list-icon alert-list-item-state alert-list-icon--alerting"
ng-style="{color: trigger.color}"> ng-style="{color: trigger.color}">
<i class="icon-gf" ng-class="ctrl.getAlertStateIcon(trigger)"></i> <i class="icon-gf" ng-class="ctrl.getAlertIconClass(trigger)"></i>
</div> </div>
<div class="alert-list-main"> <div class="alert-list-main">
<p class="alert-list-title"> <p class="alert-list-title">
@@ -18,10 +18,10 @@
</p> </p>
<p class="alert-list-text"> <p class="alert-list-text">
<span ng-if="ctrl.panel.statusField" class="alert-list-state" ng-class="ctrl.getStatusClass(trigger)"> <span ng-if="ctrl.panel.statusField" class="alert-list-state" ng-class="ctrl.getAlertStateClass(trigger)">
{{ctrl.triggerStatusMap[trigger.value]}} {{ctrl.triggerStatusMap[trigger.value]}}
</span> </span>
<span ng-if="ctrl.panel.severityField" class="alert-list-state" ng-class="ctrl.getStatusClass(trigger)" <span ng-if="ctrl.panel.severityField" class="alert-list-state" ng-class="ctrl.getAlertStateClass(trigger)"
ng-style="{color: trigger.color}"> ng-style="{color: trigger.color}">
{{trigger.severity}} {{trigger.severity}}
</span> </span>

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

@@ -83,9 +83,9 @@
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">View options</h5> <h5 class="section-heading">View options</h5>
<div class="gf-form max-width-14"> <div class="gf-form">
<label class="gf-form-label width-8">Font size</label> <label class="gf-form-label width-10">Font size</label>
<div class="gf-form-select-wrapper max-width-6"> <div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" <select class="gf-form-input"
ng-model="editor.panel.fontSize" ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes" ng-options="f for f in editor.fontSizes"
@@ -93,13 +93,26 @@
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Page size</label> <label class="gf-form-label width-10">Page size</label>
<input class="gf-form-input width-6" <input class="gf-form-input width-8"
type="number" type="number"
ng-model="editor.panel.pageSize" ng-model="editor.panel.pageSize"
ng-model-onblur ng-model-onblur
ng-change="ctrl.render()"> ng-change="ctrl.render()">
</div> </div>
<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"
ng-model="editor.panel.highlightNewerThan"
ng-model-onblur
ng-change="ctrl.render()">
</div>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label-class="width-16" label-class="width-16"
label="Custom Last change format" label="Custom Last change format"

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

@@ -119,7 +119,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
_export('DEFAULT_TARGET', DEFAULT_TARGET); _export('DEFAULT_TARGET', DEFAULT_TARGET);
_export('DEFAULT_SEVERITY', DEFAULT_SEVERITY = [{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true, blink: false }, { priority: 1, severity: 'Information', color: '#82B5D8', show: true, blink: false }, { priority: 2, severity: 'Warning', color: '#E5AC0E', show: true, blink: false }, { priority: 3, severity: 'Average', color: '#C15C17', show: true, blink: false }, { priority: 4, severity: 'High', color: '#BF1B00', show: true, blink: true }, { priority: 5, severity: 'Disaster', color: '#890F02', show: true, blink: true }]); _export('DEFAULT_SEVERITY', DEFAULT_SEVERITY = [{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true }, { priority: 1, severity: 'Information', color: '#82B5D8', show: true }, { priority: 2, severity: 'Warning', color: '#E5AC0E', show: true }, { priority: 3, severity: 'Average', color: '#C15C17', show: true }, { priority: 4, severity: 'High', color: '#BF1B00', show: true }, { priority: 5, severity: 'Disaster', color: '#890F02', show: true }]);
_export('DEFAULT_SEVERITY', DEFAULT_SEVERITY); _export('DEFAULT_SEVERITY', DEFAULT_SEVERITY);
@@ -144,6 +144,8 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
// View options // View options
fontSize: '100%', fontSize: '100%',
pageSize: 10, pageSize: 10,
highlightNewEvents: true,
highlightNewerThan: '1h',
customLastChangeFormat: false, customLastChangeFormat: false,
lastChangeFormat: "", lastChangeFormat: "",
// Triggers severity and colors // Triggers severity and colors
@@ -530,8 +532,8 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
} }
} }
}, { }, {
key: 'getAlertStateIcon', key: 'getAlertIconClass',
value: function getAlertStateIcon(trigger) { value: function getAlertIconClass(trigger) {
var triggerValue = Number(trigger.value); var triggerValue = Number(trigger.value);
var iconClass = ''; var iconClass = '';
if (triggerValue || trigger.color) { if (triggerValue || trigger.color) {
@@ -544,14 +546,14 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
iconClass = 'icon-gf-online'; iconClass = 'icon-gf-online';
} }
if (this.panel.triggerSeverity[trigger.priority].blink) { if (this.panel.highlightNewEvents && this.isNewTrigger(trigger)) {
iconClass += ' zabbix-trigger--blinked'; iconClass += ' zabbix-trigger--blinked';
} }
return iconClass; return iconClass;
} }
}, { }, {
key: 'getStatusClass', key: 'getAlertStateClass',
value: function getStatusClass(trigger) { value: function getAlertStateClass(trigger) {
var statusClass = ''; var statusClass = '';
if (trigger.value === '1') { if (trigger.value === '1') {
@@ -560,13 +562,19 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
statusClass = 'alert-state-ok'; statusClass = 'alert-state-ok';
} }
var durationSec = (Date.now() - trigger.lastchangeUnix * 1000) / 1000; if (this.panel.highlightNewEvents && this.isNewTrigger(trigger)) {
if (durationSec < 3000) {
statusClass += ' zabbix-trigger--blinked'; statusClass += ' zabbix-trigger--blinked';
} }
return statusClass; return statusClass;
} }
}, {
key: 'isNewTrigger',
value: function isNewTrigger(trigger) {
var highlightIntervalMs = utils.parseInterval(this.panel.highlightNewerThan);
var durationSec = Date.now() - trigger.lastchangeUnix * 1000;
return durationSec < highlightIntervalMs;
}
}, { }, {
key: 'link', key: 'link',
value: function link(scope, elem, attrs, ctrl) { value: function link(scope, elem, attrs, ctrl) {

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

File diff suppressed because one or more lines are too long

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

@@ -7,7 +7,7 @@
<div class="alert-list-body"> <div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state alert-list-icon--alerting" <div class="alert-list-icon alert-list-item-state alert-list-icon--alerting"
ng-style="{color: trigger.color}"> ng-style="{color: trigger.color}">
<i class="icon-gf" ng-class="ctrl.getAlertStateIcon(trigger)"></i> <i class="icon-gf" ng-class="ctrl.getAlertIconClass(trigger)"></i>
</div> </div>
<div class="alert-list-main"> <div class="alert-list-main">
<p class="alert-list-title"> <p class="alert-list-title">
@@ -18,10 +18,10 @@
</p> </p>
<p class="alert-list-text"> <p class="alert-list-text">
<span ng-if="ctrl.panel.statusField" class="alert-list-state" ng-class="ctrl.getStatusClass(trigger)"> <span ng-if="ctrl.panel.statusField" class="alert-list-state" ng-class="ctrl.getAlertStateClass(trigger)">
{{ctrl.triggerStatusMap[trigger.value]}} {{ctrl.triggerStatusMap[trigger.value]}}
</span> </span>
<span ng-if="ctrl.panel.severityField" class="alert-list-state" ng-class="ctrl.getStatusClass(trigger)" <span ng-if="ctrl.panel.severityField" class="alert-list-state" ng-class="ctrl.getAlertStateClass(trigger)"
ng-style="{color: trigger.color}"> ng-style="{color: trigger.color}">
{{trigger.severity}} {{trigger.severity}}
</span> </span>

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

@@ -83,9 +83,9 @@
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">View options</h5> <h5 class="section-heading">View options</h5>
<div class="gf-form max-width-14"> <div class="gf-form">
<label class="gf-form-label width-8">Font size</label> <label class="gf-form-label width-10">Font size</label>
<div class="gf-form-select-wrapper max-width-6"> <div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" <select class="gf-form-input"
ng-model="editor.panel.fontSize" ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes" ng-options="f for f in editor.fontSizes"
@@ -93,13 +93,26 @@
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Page size</label> <label class="gf-form-label width-10">Page size</label>
<input class="gf-form-input width-6" <input class="gf-form-input width-8"
type="number" type="number"
ng-model="editor.panel.pageSize" ng-model="editor.panel.pageSize"
ng-model-onblur ng-model-onblur
ng-change="ctrl.render()"> ng-change="ctrl.render()">
</div> </div>
<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"
ng-model="editor.panel.highlightNewerThan"
ng-model-onblur
ng-change="ctrl.render()">
</div>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label-class="width-16" label-class="width-16"
label="Custom Last change format" label="Custom Last change format"

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

@@ -17,12 +17,12 @@ export const DEFAULT_TARGET = {
}; };
export const DEFAULT_SEVERITY = [ export const DEFAULT_SEVERITY = [
{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true, blink: false }, { priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true},
{ priority: 1, severity: 'Information', color: '#82B5D8', show: true, blink: false }, { priority: 1, severity: 'Information', color: '#82B5D8', show: true},
{ priority: 2, severity: 'Warning', color: '#E5AC0E', show: true, blink: false }, { priority: 2, severity: 'Warning', color: '#E5AC0E', show: true},
{ priority: 3, severity: 'Average', color: '#C15C17', show: true, blink: false }, { priority: 3, severity: 'Average', color: '#C15C17', show: true},
{ priority: 4, severity: 'High', color: '#BF1B00', show: true, blink: true }, { priority: 4, severity: 'High', color: '#BF1B00', show: true},
{ priority: 5, severity: 'Disaster', color: '#890F02', show: true, blink: true }, { priority: 5, severity: 'Disaster', color: '#890F02', show: true},
]; ];
const DEFAULT_TIME_FORMAT = "DD MMM YYYY HH:mm:ss"; const DEFAULT_TIME_FORMAT = "DD MMM YYYY HH:mm:ss";
@@ -46,6 +46,8 @@ export const PANEL_DEFAULTS = {
// View options // View options
fontSize: '100%', fontSize: '100%',
pageSize: 10, pageSize: 10,
highlightNewEvents: true,
highlightNewerThan: '1h',
customLastChangeFormat: false, customLastChangeFormat: false,
lastChangeFormat: "", lastChangeFormat: "",
// Triggers severity and colors // Triggers severity and colors
@@ -395,7 +397,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
} }
} }
getAlertStateIcon(trigger) { getAlertIconClass(trigger) {
const triggerValue = Number(trigger.value); const triggerValue = Number(trigger.value);
let iconClass = ''; let iconClass = '';
if (triggerValue || trigger.color) { if (triggerValue || trigger.color) {
@@ -408,13 +410,13 @@ export class TriggerPanelCtrl extends PanelCtrl {
iconClass = 'icon-gf-online'; iconClass = 'icon-gf-online';
} }
if (this.panel.triggerSeverity[trigger.priority].blink) { if (this.panel.highlightNewEvents && this.isNewTrigger(trigger)) {
iconClass += ' zabbix-trigger--blinked'; iconClass += ' zabbix-trigger--blinked';
} }
return iconClass; return iconClass;
} }
getStatusClass(trigger) { getAlertStateClass(trigger) {
let statusClass = ''; let statusClass = '';
if (trigger.value === '1') { if (trigger.value === '1') {
@@ -423,14 +425,19 @@ export class TriggerPanelCtrl extends PanelCtrl {
statusClass = 'alert-state-ok'; statusClass = 'alert-state-ok';
} }
let durationSec = (Date.now() - trigger.lastchangeUnix * 1000) / 1000; if (this.panel.highlightNewEvents && this.isNewTrigger(trigger)) {
if (durationSec < 3000) {
statusClass += ' zabbix-trigger--blinked'; statusClass += ' zabbix-trigger--blinked';
} }
return statusClass; return statusClass;
} }
isNewTrigger(trigger) {
const highlightIntervalMs = utils.parseInterval(this.panel.highlightNewerThan);
const durationSec = (Date.now() - trigger.lastchangeUnix * 1000);
return durationSec < highlightIntervalMs;
}
link(scope, elem, attrs, ctrl) { link(scope, elem, attrs, ctrl) {
let panel = ctrl.panel; let panel = ctrl.panel;
let pageCount = 0; let pageCount = 0;

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

@@ -65,7 +65,7 @@
.zabbix-trigger { .zabbix-trigger {
&--blinked { &--blinked {
opacity: 0.5; opacity: 0.5;
animation: zabbix-triggers-icon 1.1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate; animation: zabbix-triggers-icon 0.8s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate;
} }
} }