dashboard/lib/templates/index.html

<div class="row">
  <div class="col-md-3">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-th-large"></i></span>
      <input type="text" ng-model=sesFilter.curComponent placeholder="search by component" typeahead="a.key for a in components2 | filter:{key:$viewValue}" typeahead-template-url="templates/partials/select.html" class="form-control">
    </div>
  </div>
  <div class="col-md-3">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text" ng-model=sesFilter.curUser placeholder="search by user/client_ip" typeahead="a.key for a in users2 | filter:{key:$viewValue}" typeahead-template-url="templates/partials/select.html" class="form-control">
    </div>
  </div>
  <div class="col-md-3">
    <div class="input-group">
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>

      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model=sesFilter.dt is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
    </div>
  </div>
  <div class="col-md-3">
  </div>
</div>

<h1>{{filtSessions.length}} Sessions</h1>
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th class="dr width15" sort-header label="'start'" order=sesFilter.orderBy>Date</th>
      <th class="dr width15" sort-header label="'nLogs'" order=sesFilter.orderBy>
        # Logs <small style="color:#aaa">(<span style="color: #777">USER</span>|<span style="color: #aaa">SYS</span>)</small>
      </th>
      <!-- <th ng-click=orderBy('nLogs') class="dr width15" style="cursor:pointer"># Logs <small style="color:#aaa">(<span style="color: #777">USER</span>|<span style="color: #aaa">SYS</span>)</small></th> -->
      <th class="dr width15" style="cursor:pointer">Start</th>
      <th class="dr width15" style="cursor:pointer">Duration</th>
      <th class="dr width15" style="cursor:pointer">Client</th>
      <th class="dr width25" style="cursor:pointer">Component</th>
    </tr>
  </thead>
  <tbody>
    <tr
    style="cursor:pointer"
    ng-click="redirect(session)"
    ng-repeat="session in pagedData">
      <td>{{session.start | date : 'longDate'}}</td>
      <td>{{session.nLogs}} <small style="color:#aaa">(<span style="color: #777">{{session.nUserLogs}}</span>|<span style="color: #aaa">{{nSysLogs(session)}}</span>)</small></td>
      <!-- <td>{{session.nLogs}}/{{nSysLogs(session)}}/{{session.nUserLogs}}</td> -->
      <td>{{session.start | date : 'shortTime'}}</td>
      <td>{{duration(session) | duration}}</td>
      <td>{{session.user}}</td>
      <td>{{session.component}}</td>
    </tr>
  </tbody>
</table>

<paginate current-page=currentPage number-of-pages=numberOfPages></paginate>