grafana-zabbix/src/panel-triggers/partials/module.html

<div class="triggers-panel-container">
  <!-- <div class="triggers-panel-header-bg"></div> -->
  <div class="triggers-panel-scroll">
    <table class="triggers-panel-table" ng-if="false">
      <thead>
        <tr>
          <th ng-if="ctrl.panel.hostField" class="zbx-field-host">
            <div class="triggers-panel-table-header-inner pointer">
              Host
            </div>
          </th>
          <th ng-if="ctrl.panel.hostTechNameField" class="zbx-field-host">
            <div class="triggers-panel-table-header-inner pointer">
              Technical Name
            </div>
          </th>
          <th ng-if="ctrl.panel.statusField" class="zbx-field-status">
            <div class="triggers-panel-table-header-inner pointer">Status</div>
          </th>
          <th ng-if="ctrl.panel.severityField" class="zbx-field-severity">
            <div class="triggers-panel-table-header-inner pointer">Severity</div>
          </th>
          <th>
            <div class="triggers-panel-table-header-inner pointer">Issue</div>
          </th>
          <th ng-if="ctrl.panel.lastChangeField" class="zbx-field-lastchange">
            <div class="triggers-panel-table-header-inner pointer">Last change</div>
          </th>
          <th ng-if="ctrl.panel.ageField" class="zbx-field-age">
            <div class="triggers-panel-table-header-inner pointer">Age</div>
          </th>
          <th ng-if="ctrl.panel.infoField" class="zbx-field-info">
            <div class="triggers-panel-table-header-inner pointer">Info</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="trigger in ctrl.currentTriggersPage">

          <td ng-if="ctrl.panel.hostField">
            <div>
              <span><strong>{{trigger.host}}</strong></span>
            </div>
          </td>

          <td ng-if="ctrl.panel.hostTechNameField">
            <div>
              <span><strong>{{trigger.hostTechName}}</strong></span>
            </div>
          </td>

          <td ng-if="ctrl.panel.statusField" class="zbx-field-colored"
            ng-style="{background: trigger.color, color: ctrl.panel.fontColor}">
            <div>
              {{ctrl.triggerStatusMap[trigger.value]}}
            </div>
          </td>

          <td ng-if="ctrl.panel.severityField" class="zbx-field-colored"
            ng-style="{background: trigger.color, color: ctrl.panel.fontColor}">
            <div>
              {{trigger.severity}}
            </div>
          </td>

          <td class="zbx-field-colored"
            ng-style="{background: trigger.color, color: ctrl.panel.fontColor}">
            <div>
              {{trigger.description}}
              <a  ng-if="trigger.comments"
                  role="button"
                  ng-click="ctrl.switchComment(trigger)"
                  class="pointer zbx-description-icon"
                  bs-tooltip="'Show additional trigger description'"
                  data-placement="top">
                <i class="fa fa-file-text-o"></i>
              </a>
            </div>

            <!-- Trigger comments -->
            <div  class="collapse"
                  id="comments-{{trigger.triggerid}}"
                  ng-if="trigger.showComment">
              <div>
                <small>{{trigger.comments}}</small>
              </div>
            </div>
          </td>

          <td ng-if="ctrl.panel.lastChangeField">
            {{trigger.lastchange}}
          </td>

          <td ng-if="ctrl.panel.ageField">
            {{trigger.age}}
          </td>

          <td ng-if="ctrl.panel.infoField">

            <!-- Trigger Url -->
            <a  ng-if="trigger.url"
                href="{{trigger.url}}"
                target="_blank">
              <i class="fa fa-external-link"></i>
            </a>

            <!-- Trigger state -->
            <span ng-if="trigger.state === '1'"
                  bs-tooltip="'{{trigger.error}}'">
              <i class="fa fa-question-circle"></i>
            </span>

            <!-- Trigger acknowledges -->
            <ack-tooltip
              ack="trigger.acknowledges"
              trigger="trigger"
              on-ack="ctrl.acknowledgeTrigger"
              context="ctrl">
            </ack-tooltip>
          </td>
        </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>