triggers panel: redesign, unify with Alert List panel

src/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>

src/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>