alerts-center-list.html

<div class="hk-screen-content">
  <hawkular-subtab ng-controller="Subtab.SubtabController">
    <div class="hk-nav-tabs-container">
      <ul class="nav nav-tabs nav-tabs-pf">
        <li class="active"><a href="/hawkular-ui/alerts-center/{{hkParams.timeOffset}}" class="hk-alerts">Alerts</a></li>
        <li><a href="/hawkular-ui/alerts-center-triggers/" class="hk-availability">Definitions</a></li>
      </ul>
    </div>
  </hawkular-subtab>

  <div class="hk-alert-center">

    <!-- No Alerts -->
    <div ng-show="ac.alertsList.length === 0">
      <div class="hk-info-top clearfix">
        <h3>Alerts ({{ac.alertsList.length}})</h3>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="ac.hasResolvedAlerts" ng-change="ac.changeResolvedFilter()"> Display Resolved Alerts
        </label>
      </div>
      <div class="blank-slate-pf">
        <div class="blank-slate-pf-icon">
          <i class="fa fa-flag"></i>
        </div>
        <h1>No Alerts.</h1>
      </div>
    </div>

    <div ng-show="ac.alertsList.length > 0">

      <div class="hk-info-top clearfix">
        <h3 class="pull-left">Alerts ({{ac.headerLinks.total}})</h3>
      <span class="hk-update pull-right" tooltip-trigger tooltip="Last update">
        <i class="fa fa-clock-o" ng-click="ac.getAlerts()"></i>{{ac.lastUpdateDate | date:'HH:mm'}}</span>
      </div>

      <div class="hk-table-container">
        <div class="hk-actions-table">
          <div class="dropdown" dropdown>
            <a href="#" class="btn btn-default" dropdown-toggle>
              Change State <b class="caret"></b>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#" ng-click="ac.ackSelected()" ng-disabled="!ac.hasOpenSelectedItems || ac.isWorking">Acknowledge</a></li>
              <li><a href="#" ng-click="ac.resolveSelected()" ng-disabled="ac.selectCount < 1 || ac.isWorking || ac.hasResolvedItems()">Resolve</a></li>
            </ul>
          </div>
        </div>
        <div class="dataTables_header">
          <div id="DataTables_Table_0_filter" class="dataTables_filter">
            <label><input type="search" ng-model="ac.search" aria-controls="DataTables_Table_0"></label>
          </div>
          <div class="hk-actions-table-search">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="ac.hasResolvedAlerts" ng-change="ac.changeResolvedFilter()"> Display Resolved Alerts
              </label>
            </div>
          </div>
          <div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing <b>1</b> to <b>{{(ac.alertsList | filter:ac.search).length}}</b> of <b>{{ac.alertsList.length}}</b> Items</div>
        </div>
        <table class="datatable table table-bordered hk-table-alerts hk-table-detailed hk-table-select">
          <thead>
          <tr>
            <th ng-click="ac.selectAll()"><input type="checkbox"/></th>
            <th ng-class="{'sorting_asc': ac.sortField == 'status' && ac.sortAsc, 'sorting_desc': ac.sortField == 'status' && !ac.sortAsc, 'sorting': ac.sortField != 'status'}" ng-click="ac.sortBy('status')">State</th>
            <th ng-class="{'sorting_asc': ac.sortField == 'severity' && ac.sortAsc, 'sorting_desc': ac.sortField == 'severity' && !ac.sortAsc, 'sorting': ac.sortField != 'severity'}" ng-click="ac.sortBy('severity')">Severity</th>
            <th ng-class="{'sorting_asc': ac.sortField == 'trigger.description' && ac.sortAsc, 'sorting_desc': ac.sortField == 'trigger.description' && !ac.sortAsc, 'sorting': ac.sortField != 'trigger.description'}" ng-click="ac.sortBy('trigger.description')">Description</th>
            <th ng-class="{'sorting_asc': ac.sortField == 'ctime' && ac.sortAsc, 'sorting_desc': ac.sortField == 'ctime' && !ac.sortAsc, 'sorting': ac.sortField != 'ctime'}" ng-click="ac.sortBy('ctime')" ng-click="ac.sortBy('ctime')">Created</th>
            <th ng-class="{'sorting_asc': ac.sortField == 'context.resourceName' && ac.sortAsc, 'sorting_desc': ac.sortField == 'context.resourceName' && !ac.sortAsc, 'sorting': ac.sortField != 'context.resourceName'}" ng-click="ac.sortBy('context.resourceName')">Resource</th>
            <th></th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="alert in ac.alertsList | filter:ac.search" ng-class="{'hk-selected': ac.selected}"
              ng-click="ac.selectItem(alert)">
            <td><input type="checkbox" ng-checked="alert.selected"/></td>
            <td ng-class="{'hk-bold': alert.status === 'OPEN'}" class="text-nowrap">{{alert.status|firstUpper}} <i ng-show="(alert.notes.length > 0)" class="fa fa-comment-o" tooltip="With comments" tooltip-trigger tooltip-placement="top"></i></td>
            <td>{{alert.severity|firstUpper}}</td>
            <td>{{alert.trigger.description| truncate: 50}}</td>
            <td>{{alert.ctime | date:'d MMM yyyy, HH:mm'}}</td>
            <td><a ng-href="{{ac.getResourceRoute(alert.trigger)}}">
              {{alert.context.resourceName | truncate: 30 : false : 'middle'}}</a></td>
            <td><a class="btn btn-link"><i class="fa fa-chevron-circle-right fa-lg"
                                           tooltip="View Details" tooltip-trigger tooltip-placement="top"
                                           ng-click="ac.showDetailPage(alert.id)">
            </i></a>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="dataTables_footer">
          <hk-data-pagination resource-list="ac.alertsList" current-page="ac.alertsCurPage"
                              page-setter="ac.setPage(pageNumber)"
                              per-page="ac.alertsPerPage" headers="ac.headerLinks"></hk-data-pagination>
        </div>
      </div>

    </div>
  </div>

</div>