events.html

<div ng-if="!events">
  Loading...
</div>
<div ng-if="events" class="events">
  <div class="table-filter-extension">
    <div class="data-toolbar">
      <form role="form" class="search-pf has-button">
        <div class="form-group filter-controls has-clear">
          <div class="search-pf-input-group">
            <label for="events-filter" class="sr-only">Filter</label>
            <input type="search"
                   placeholder="Filter by keyword"
                   class="form-control"
                   id="events-filter"
                   ng-model="filter.text"
                   autocorrect="off"
                   autocapitalize="none"
                   spellcheck="false">
            <button
                type="button"
                class="clear"
                aria-hidden="true"
                ng-if="filter.text"
                ng-click="filter.text = ''">
                <span class="pficon pficon-close"></span>
            </button>
          </div>
        </div>
      </form>
      <div class="vertical-divider"></div>
      <div class="sort-group">
        <span class="sort-label">Sort by</span>
        <pf-sort config="sortConfig" class="sort-controls"></pf-sort>
      </div>
    </div>
  </div>
  <table class="table table-bordered table-condensed table-mobile table-layout-fixed events-table">
    <thead>
      <tr>
        <th id="time">Time</th>
        <!-- Only show Name and Kind columns if not passed to the directive. -->
        <th id="kind-name" ng-if="showKindAndName">
          <span class="hidden-xs-inline visible-sm-inline visible-md-inline hidden-lg-inline">Kind and Name</span>
          <span class="visible-lg-inline">Name</span>
        </th>
        <th id="kind" ng-if="showKindAndName" class="hidden-sm hidden-md">
          <span class="visible-lg-inline">Kind</span>
        </th>
        <th id="severity" class="hidden-xs hidden-sm hidden-md"><span class="sr-only">Severity</span></th>
        <th id="reason" class="hidden-sm hidden-md"><span class="visible-lg-inline">Reason</span></th>
        <th id="message"><span class="hidden-xs-inline visible-sm-inline visible-md-inline hidden-lg-inline">Reason and </span>Message</th>
      </tr>
    </thead>
    <tbody ng-if="(filteredEvents | hashSize) === 0">
      <tr>
        <td class="hidden-lg" colspan="{{showKindAndName ? 3 : 2}}">
          <span ng-if="(events | hashSize) === 0"><em>No events to show.</em></span>
          <span ng-if="(events | hashSize) > 0">
            All events hidden by filter.
            <a href="" ng-click="filter.text = ''" role="button" class="nowrap">Clear Filter</a>
          </span>
        </td>
          <td class="hidden-xs hidden-sm hidden-md" colspan="{{showKindAndName ? 6 : 4}}">
          <span ng-if="(events | hashSize) === 0"><em>No events to show.</em></span>
          <span ng-if="(events | hashSize) > 0">
            All events hidden by filter.
            <a href="" ng-click="filter.text = ''" role="button" class="nowrap">Clear Filter</a>
          </span>
        </td>
      </tr>
    </tbody>
    <tbody ng-if="(filteredEvents | hashSize) > 0">
      <tr ng-repeat="event in filteredEvents">
        <td data-title="Time" class="nowrap">{{event.lastTimestamp | date:'mediumTime'}}</td>
        <td ng-if="showKindAndName" data-title="Name">
          <div class="hidden-xs-block visible-sm-block visible-md-block hidden-lg-block">
            <span ng-bind-html="event.involvedObject.kind | humanizeKind : true | highlightKeywords : filterExpressions"></span>
          </div>
          <span ng-init="resourceURL = (event | navigateEventInvolvedObjectURL)">
            <a
              ng-href="{{resourceURL}}"
              ng-if="resourceURL"><span ng-bind-html="event.involvedObject.name | highlightKeywords : filterExpressions"></span></a>
            <span ng-if="!resourceURL" ng-bind-html="event.involvedObject.name | highlightKeywords : filterExpressions"></span>
          </span>
        </td>
        <td ng-if="showKindAndName" class="hidden-sm hidden-md" data-title="Kind">
          <span ng-bind-html="event.involvedObject.kind | humanizeKind : true | highlightKeywords : filterExpressions"></span>
        </td>
        <td data-title="Severity" class="hidden-xs hidden-sm hidden-md text-center severity-icon-td">
          <span class="sr-only">{{event.type}}</span>
          <span class="pficon pficon-warning-triangle-o" ng-show="event.type === 'Warning'" aria-hidden="true" data-toggle="tooltip" data-original-title="Warning"></span></td>
        <td class="hidden-sm hidden-md" data-title="Reason">
          <span ng-bind-html="event.reason | humanizeReason | highlightKeywords : filterExpressions"></span>&nbsp;<span class="visible-xs-inline pficon pficon-warning-triangle-o" ng-show="event.type === 'Warning'" aria-hidden="true" data-toggle="tooltip" data-original-title="Warning"></span>
        </td>
        <td data-title="Message">
          <div class="hidden-xs-block visible-sm-block visible-md-block hidden-lg-block">
            <span ng-bind-html="event.reason | humanizeReason | highlightKeywords : filterExpressions"></span>&nbsp;
            <span class="pficon pficon-warning-triangle-o" ng-show="event.type === 'Warning'" aria-hidden="true" data-toggle="tooltip" data-original-title="Warning"></span>
          </div>
          <!-- Truncate long messages to 1000 chars or 4 lines. -->
          <truncate-long-text
              content="event.message"
              limit="1000"
              newline-limit="4"
              use-word-boundary="true"
              highlight-keywords="filterExpressions"
              expandable="true">
          </truncate-long-text>
          <div ng-if="event.count > 1" class="text-muted small">
            {{event.count}} times in the last
            <duration-until-now timestamp="event.firstTimestamp" omit-single="true" precision="1"></duration-until-now>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>