logging.html

<div class="container">
  <pre class="alert alert-error" ng-if="error"><b>Error:</b><br/>{{ error | json }}</pre>
  <div ng-show="loggers">
    <form>
      <div class="input-prepend input-append">
        <button class="btn" title="Show package-level loggers" ng-class="{'btn-inverse': showPackageLoggers}" ng-click="togglePackageLoggers()"><i class="fa fa-folder-o"></i></button>
        <input placeholder="Filter by name ..." class="input-xxlarge" type="search" ng-model="filterLogger.name" />
        <button class="btn" title="reload list" ng-click="refreshLoggers()"><i class="fa fa-repeat"></i></button>
        <span title="filtered / total" class="add-on">{{ filteredLoggers.length }}/{{ loggers.length }}</span>
      </div>
    </form>
    <table class="table table-hover">
      <tbody>
        <tr ng-repeat="logger in (filteredLoggers = (loggers | filter:packageFilter | filter:filterLogger) ) | limitTo: limit track by logger.name">
          <td>
            <sba-logger value="logger" on-level-changed="refreshLoggers"></sba-logger>
          </td>
        </tr>
        <tr ng-show="limit < loggers.length">
          <td>
            <button class="btn btn-link btn-block" ng-click="limit = limit + 10">show more</button>
          </td>
        </tr>
        <tr ng-show="limit < loggers.length">
          <td>
            <button class="btn btn-link btn-block" ng-click="limit = loggers.length">show all</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>