Merge pull request #294 from coreos-inc/logsload

Switch to using an aggregated logs query and infinite scrolling
This commit is contained in:
Jimmy Zelinskie 2015-08-03 14:52:04 -04:00
commit 8e6a0fbbee
15 changed files with 270 additions and 99 deletions

View file

@ -14,29 +14,27 @@
<span class="hidden-xs right">
<i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''"
ng-click="toggleChart()" data-title="Toggle Chart" bs-tooltip="tooltip.title"></i>
<a href="{{ logsPath }}" download="usage-log.json" target="_new">
<i class="fa fa-download toggle-icon" data-title="Download Logs" bs-tooltip="tooltip.title"></i>
</a>
</span>
</div>
<div>
<div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
<svg style="width: 800px; height: 500px;"></svg>
<div class="cor-loader" ng-if="chartLoading"></div>
</div>
<div class="hidden-xs side-controls">
<div class="result-count">
Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150).length}} of
{{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs
Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs
</div>
<div class="filter-input">
<input id="log-filter" class="form-control" placeholder="Filter Logs" type="text" ng-model="search.$">
</div>
</div>
<div class="table-container">
<div class="cor-loader" ng-show="loading"></div>
<div class="table-container" infinite-scroll="nextPage()"
infinite-scroll-disabled="loading || !hasAdditional"
infinite-scroll-distance="2">
<table class="cor-table">
<thead>
<td>Description</td>
@ -44,14 +42,15 @@
<td>User/Token/App</td>
</thead>
<tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150)">
<tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search)"
bindonce>
<td>
<span class="circle" style="{{ 'background: ' + getColor(log.kind) }}"></span>
<span class="log-description" ng-bind-html="getDescription(log)"></span>
<span class="circle" style="{{ 'background: ' + getColor(log.kind, chart) }}"></span>
<span class="log-description" bo-html="getDescription(log)"></span>
</td>
<td>{{ log.datetime }}</td>
<td><span bo-text="log.datetime"></span></td>
<td>
<span class="log-performer" ng-if="log.metadata.oauth_token_application">
<span class="log-performer" bo-if="log.metadata.oauth_token_application">
<div>
<span class="application-reference"
data-title="log.metadata.oauth_token_application"
@ -62,19 +61,20 @@
<span class="entity-reference" entity="log.performer" namespace="organization.name"></span>
</div>
</span>
<span class="log-performer" ng-if="!log.metadata.oauth_token_application && log.performer">
<span class="log-performer" bo-if="!log.metadata.oauth_token_application && log.performer">
<span class="entity-reference" entity="log.performer" namespace="organization.name"></span>
</span>
<span class="log-performer" ng-if="!log.performer && log.metadata.token">
<span class="log-performer" bo-if="!log.performer && log.metadata.token">
<i class="fa fa-key"></i>
<span>{{ log.metadata.token }}</span>
<span bo-text="log.metadata.token"></span>
</span>
<span ng-if="!log.performer && !log.metadata.token">
<span bo-if="!log.performer && !log.metadata.token">
(anonymous)
</span>
</td>
</tr>
</table>
<div class="cor-loader" ng-show="loading"></div>
</div>
</div>
</div>