Option to enable triggers background highlighting, #532

src/panel-triggers/partials/module.html

@@ -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">

src/panel-triggers/partials/options_tab.html

@@ -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"

src/panel-triggers/triggers_panel_ctrl.js

@@ -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);

src/sass/_panel-triggers.scss

@@ -81,6 +81,31 @@
   color: $orange;
 }
 
+.zbx-trigger-highlighted {
+  color: $zbx-text-highlighted;
+
+  // .alert-rule-item__icon,
+  .alert-rule-item__body,
+  .alert-rule-item__header,
+  .alert-rule-item__time,
+  .zabbix-hostname, .zbx-description {
+    color: $zbx-text-highlighted;
+  }
+
+  .alert-rule-item__text {
+    .zbx-trigger-state,
+    .zbx-trigger-severity {
+      color: $zbx-text-highlighted;
+    }
+  }
+
+  .zbx-trigger-lastchange .trigger-info-block.zbx-status-icons {
+    a {
+      color: $zbx-text-highlighted;
+    }
+  }
+}
+
 
 @keyframes zabbix-triggers-panel {
   100% {

src/sass/_variables.dark.scss

@@ -37,3 +37,4 @@ $tight-form-func-bg:    #333;
 $grafanaListAccent:     lighten($dark-2, 2%);
 
 $zbx-tag-color: $gray-5;
+$zbx-text-highlighted: $white;

src/sass/_variables.light.scss

@@ -36,3 +36,4 @@ $tight-form-func-bg:    $gray-5;
 $grafanaListAccent:     $gray-5;
 
 $zbx-tag-color: $gray-6;
+$zbx-text-highlighted: $black;