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

Option to enable triggers background highlighting, #532

Browse Source
This commit is contained in:
Alexander Zobnin
2018-03-15 17:49:49 +03:00
parent 22d1643caa
commit aa20e3dc36
14 changed files with 107 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,10 +3,12 @@
<section class="card-section card-list-layout-list">
<ol class="alert-rule-list">
<!-- Trigger list item -->
<li class="alert-rule-item zbx-trigger-card" ng-repeat="trigger in ctrl.currentTriggersPage">
<li class="alert-rule-item zbx-trigger-card" ng-repeat="trigger in ctrl.currentTriggersPage"
ng-class="{'zbx-trigger-highlighted': ctrl.panel.highlightBackground}"
ng-style="ctrl.panel.highlightBackground && {background: ctrl.getBackground(trigger)}">
<!-- Heart icon -->
<div class="alert-rule-item__icon" ng-style="{color: trigger.color}">
<div class="alert-rule-item__icon" ng-style="!ctrl.panel.highlightBackground && {color: trigger.color}">
<i class="icon-gf" ng-class="ctrl.getAlertIconClass(trigger)"></i>
</div>
@@ -32,11 +34,13 @@
</p>
<div class="alert-rule-item__text">
<span ng-if="ctrl.panel.statusField" ng-class="ctrl.getAlertStateClass(trigger)">
<span ng-if="ctrl.panel.statusField" class="zbx-trigger-state"
ng-class="ctrl.getAlertStateClass(trigger)">
{{ctrl.triggerStatusMap[trigger.value]}}
</span>
<span ng-if="ctrl.panel.severityField" ng-class="ctrl.getAlertStateClass(trigger)"
ng-style="{color: trigger.color}">
<span ng-if="ctrl.panel.severityField" class="zbx-trigger-severity"
ng-class="ctrl.getAlertStateClass(trigger)"
ng-style="!ctrl.panel.highlightBackground && {color: trigger.color}">
{{trigger.severity}}
</span>
<span class="alert-rule-item__time">

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

@@ -116,6 +116,12 @@
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"

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

@@ -524,6 +524,16 @@ export class TriggerPanelCtrl extends PanelCtrl {
return statusClass;
}
getBackground(trigger) {
// console.log(trigger.color, this.contextSrv.user.lightTheme);
const mainColor = trigger.color;
const secondColor = this.contextSrv.user.lightTheme ? '#dde4ed' : '#262628';
if (this.contextSrv.user.lightTheme) {
return `linear-gradient(135deg, ${secondColor}, ${mainColor})`;
}
return `linear-gradient(135deg, ${mainColor}, ${secondColor})`;
}
isNewTrigger(trigger) {
try {
const highlightIntervalMs = utils.parseInterval(this.panel.highlightNewerThan || PANEL_DEFAULTS.highlightNewerThan);