triggers panel: blink option

dist/panel-triggers/partials/module.html

@@ -3,11 +3,11 @@
     <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 card-item zabbix-trigger-card">
             <div class="alert-list-body">
-              <div class="alert-list-icon alert-list-item-state"
+              <div class="alert-list-icon alert-list-item-state alert-list-icon--alerting"
                 ng-style="{color: trigger.color}">
-                <i class="icon-gf" ng-class="trigger.value === '1' ? 'icon-gf-critical' : 'icon-gf-online'"></i>
+                <i class="icon-gf" ng-class="ctrl.getAlertStateIcon(trigger)"></i>
               </div>
               <div class="alert-list-main">
                 <p class="alert-list-title">

dist/panel-triggers/partials/options_tab.html

@@ -123,7 +123,7 @@
         <label class="gf-form-label width-3">{{ trigger.priority }}</label>
         <label class="gf-form-label triggers-severity-config"
           ng-style="{color: trigger.color}">
-          <i class="icon-gf icon-gf-critical"></i>
+          <i class="icon-gf" ng-class="ctrl.getAlertStateIcon(trigger)"></i>
         </label>
         <input type="text"
           class="gf-form-input width-12"
@@ -141,6 +141,12 @@
         checked="trigger.show"
         on-change="ctrl.refresh()">
       </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-0"
+        label="Blink"
+        checked="trigger.blink"
+        on-change="ctrl.refresh()">
+      </gf-form-switch>
     </div>
 
     <div class="gf-form-inline">
@@ -148,7 +154,7 @@
         <label class="gf-form-label width-3">&nbsp;</label>
         <label class="gf-form-label triggers-severity-config"
           ng-style="{color: editor.panel.ackEventColor}">
-          <i class="icon-gf icon-gf-critical"></i>
+          <i class="icon-gf icon-gf-online"></i>
         </label>
         <label class="gf-form-label width-12">
           Acknowledged color
@@ -169,7 +175,7 @@
         <label class="gf-form-label width-3">&nbsp;</label>
         <label class="gf-form-label triggers-severity-config"
           ng-style="{color: editor.panel.okEventColor}">
-          <i class="icon-gf icon-gf-critical"></i>
+          <i class="icon-gf icon-gf-online"></i>
         </label>
         <label class="gf-form-label width-12">
           OK event color

dist/panel-triggers/triggers_panel_ctrl.js

@@ -119,7 +119,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
 
       _export('DEFAULT_TARGET', DEFAULT_TARGET);
 
-      _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 = [{ 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);
 
@@ -183,7 +183,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
           _this.datasources = {};
 
           _this.panel = migratePanelSchema(_this.panel);
-          _.defaults(_this.panel, _.cloneDeep(PANEL_DEFAULTS));
+          _.defaultsDeep(_this.panel, _.cloneDeep(PANEL_DEFAULTS));
 
           _this.available_datasources = _.map(_this.getZabbixDataSources(), 'name');
           if (_this.panel.datasources.length === 0) {
@@ -528,6 +528,26 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
               return "";
             }
           }
+        }, {
+          key: 'getAlertStateIcon',
+          value: function getAlertStateIcon(trigger) {
+            var triggerValue = Number(trigger.value);
+            var iconClass = '';
+            if (triggerValue || trigger.color) {
+              if (trigger.priority >= 3) {
+                iconClass = 'icon-gf-critical';
+              } else {
+                iconClass = 'icon-gf-warning';
+              }
+            } else {
+              iconClass = 'icon-gf-online';
+            }
+
+            if (this.panel.triggerSeverity[trigger.priority].blink) {
+              iconClass += ' zabbix-trigger--blinked';
+            }
+            return iconClass;
+          }
         }, {
           key: 'link',
           value: function link(scope, elem, attrs, ctrl) {