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>