cloudron-box/src/views/activity.html

<div>
  <div class="col-md-10 col-md-offset-1">
      <h1>Event Log</h1>
  </div>
</div>

<div>
  <div class="col-md-10 col-md-offset-1">
    <div class="eventlog-filter">
      <input type="text" class="form-control" style="min-width: 350px;" ng-model="search" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="Search"/>
      <multiselect ng-model="selectedActions" ms-header="All Events" options="a.name for a in actions" data-multiple="true"  ng-change="updateFilter(true)" filter-after-rows="5" scroll-after-rows="10"></multiselect>
      <select class="form-control" ng-model="pageItems" ng-options="a.name for a in pageItemCount" ng-change="updateFilter(true)"></select>
      <!-- <select class="form-control" ng-model="action" ng-options="a.name for a in actions" ng-change="updateFilter()">
        <option value="">-- All actions --</option>
      </select> -->
    </div>
    <div class="pagination pull-right">
      <button class="btn btn-default btn-outline" ng-click="showPrevPage()" ng-disabled="busy || currentPage <= 1"><i class="fa fa-angle-double-left"></i> prev</button>
      <button class="btn btn-default btn-outline" ng-click="showNextPage()" ng-disabled="busy || pageItems.value > eventLogs.length">next <i class="fa fa-angle-double-right"></i></button>
    </div>
  </div>
</div>

<div>
  <div class="col-md-10 col-md-offset-1">
    <div class="card card-block" style="max-width: 100%">
      <div>
        <center ng-show="busy"><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center>
        <table ng-hide="busy" class="table table-condensed table-hover">
          <thead>
            <tr>
              <th class="col-md-2">Time</th>
              <th class="col-md-3">Source</th>
              <th class="col-md-7">Details</th>
            </tr>
          </thead>
          <tbody ng-repeat="eventLog in eventLogs">
            <tr ng-click="showEventLogDetails(eventLog)" class="hand">
              <td><span uib-tooltip="{{ eventLog.raw.creationTime | prettyLongDate }}" class="arrow">{{ eventLog.raw.creationTime | prettyDate }}</span></td>
              <td>{{ eventLog.source }}</td>
              <td ng-bind-html="eventLog.details"></td>
            </tr>
            <tr ng-show="activeEventLog === eventLog">
              <td colspan="4"><pre class="eventlog-details">{{ eventLog.raw.data | json }}</pre></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>