triggers panel: redesign, unify with Alert List panel

dist/panel-triggers/partials/module.html

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

dist/panel-triggers/partials/options_tab.html

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

dist/panel-triggers/triggers_panel_ctrl.js

@@ -134,7 +134,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
 
       triggerStatusMap = {
         '0': 'OK',
-        '1': 'Problem'
+        '1': 'PROBLEM'
       };
 
       _export('TriggerPanelCtrl', TriggerPanelCtrl = function (_PanelCtrl) {
@@ -227,6 +227,7 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             delete this.error;
             this.loading = true;
             this.setTimeQueryStart();
+            this.pageIndex = 0;
 
             return this.getTriggers().then(function (triggerList) {
               // Notify panel that request is finished
@@ -292,10 +293,6 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
 
             return Promise.all(promises).then(function (results) {
               return _.flatten(results);
-            }).then(function (triggers) {
-              return _.map(triggers, _this4.formatTrigger.bind(_this4));
-            }).then(function (triggers) {
-              return _this4.sortTriggers(triggers);
             });
           }
         }, {
@@ -327,11 +324,6 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
                     ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
                     return ack;
                   });
-
-                  // Mark acknowledged triggers with different color
-                  if (_this5.panel.markAckEvents && trigger.acknowledges.length) {
-                    trigger.color = _this5.panel.ackEventColor;
-                  }
                 }
               });
 
@@ -372,45 +364,68 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
           key: 'sortTriggers',
           value: function 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;
           }
         }, {
           key: 'formatTrigger',
-          value: function formatTrigger(trigger) {
+          value: function formatTrigger(zabbixTrigger) {
+            var trigger = _.cloneDeep(zabbixTrigger);
             var triggerObj = trigger;
 
-            // Format last change and age
-            trigger.lastchangeUnix = Number(trigger.lastchange);
-            var 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;
+          }
+        }, {
+          key: 'updateTriggerFormat',
+          value: function updateTriggerFormat(trigger) {
+            trigger = this.setTriggerLastChange(trigger);
+            trigger = this.setTriggerSeverity(trigger);
+            return trigger;
+          }
+        }, {
+          key: 'setTriggerSeverity',
+          value: function 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;
+          }
+        }, {
+          key: 'setTriggerLastChange',
+          value: function setTriggerLastChange(trigger) {
+            var 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;
           }
         }, {
           key: 'switchComment',
@@ -437,22 +452,32 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
             return this.currentTriggersPage;
           }
+        }, {
+          key: 'formatHostName',
+          value: function 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 "";
+            }
+          }
         }, {
           key: 'link',
           value: function link(scope, elem, attrs, ctrl) {
-            var data;
             var panel = ctrl.panel;
             var pageCount = 0;
-            data = ctrl.triggerList;
+            var data = ctrl.triggerList;
 
-            function getTableHeight() {
+            function getContentHeight() {
               var panelHeight = ctrl.height;
 
               if (pageCount > 1) {
-                panelHeight -= 26;
+                panelHeight -= 36;
               }
 
-              return panelHeight - 31 + 'px';
+              return panelHeight + 'px';
             }
 
             function switchPage(e) {
@@ -492,16 +517,26 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
               footerElem.append(paginationList);
             }
 
+            function setFontSize() {
+              var fontSize = parseInt(panel.fontSize.slice(0, panel.fontSize.length - 1));
+              var 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');
               appendPaginationControls(footerElem);
-
-              rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' });
+              setFontSize();
+              rootElem.css({ 'max-height': panel.scroll ? getContentHeight() : '' });
+              rootElem.css({ 'height': getContentHeight() });
               ctrl.renderingCompleted();
             }
 
@@ -513,11 +548,17 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
             });
 
             ctrl.events.on('render', function (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(function () {
-                  renderPanel();
-                });
+                ctrl.triggerList = data;
+                ctrl.getCurrentTriggersPage();
+                renderPanel();
               }
             });
           }