Remove infinite scroll from logs page and fix multiple loading bug
This should make viewing logs significantly less janky
This commit is contained in:
Joseph Schorr
parent
9e2c5417b8
commit
b8d2e1be9c
4 changed files with 15 additions and 8 deletions
|
|
@ -5,6 +5,7 @@
|
|||
<span class="date-line-caption">From</span>
|
||||
<input type="text" class="logs-date-picker input-sm" name="start"
|
||||
ng-model="options.logStartDate" data-min-date="{{ options.monthAgo }}"
|
||||
ng-readonly="loading"
|
||||
data-max-date="{{ options.logEndDate }}"
|
||||
bs-datepicker>
|
||||
</span>
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
<span class="date-line-caption add-on">to</span>
|
||||
<input type="text" class="logs-date-picker input-sm" name="end"
|
||||
ng-model="options.logEndDate" data-min-date="{{ options.logStartDate }}"
|
||||
ng-readonly="loading"
|
||||
data-max-date="{{ options.now }}"
|
||||
data-placement="bottom-right"
|
||||
bs-datepicker>
|
||||
|
|
@ -39,9 +41,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container" infinite-scroll="nextPage()"
|
||||
infinite-scroll-disabled="loading || !hasAdditional"
|
||||
infinite-scroll-distance="2">
|
||||
<div class="table-container">
|
||||
<table class="cor-table">
|
||||
<thead>
|
||||
<td ng-if="allLogs == 'true'">Namespace</td>
|
||||
|
|
@ -92,6 +92,9 @@
|
|||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="text-align: right; margin-top: 10px;">
|
||||
<button class="btn btn-default" ng-click="nextPage()" ng-show="!loading && hasAdditional">Load More Logs</button>
|
||||
</div>
|
||||
<div class="cor-loader" ng-show="loading"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ angular.module('quay').directive('logsView', function () {
|
|||
controller: function($scope, $element, $sce, Restangular, ApiService, TriggerService,
|
||||
StringBuilderService, ExternalNotificationData, UtilService) {
|
||||
$scope.loading = true;
|
||||
$scope.loadCounter = -1;
|
||||
$scope.logs = null;
|
||||
$scope.kindsAllowed = null;
|
||||
$scope.chartVisible = true;
|
||||
|
|
@ -399,7 +400,7 @@ angular.module('quay').directive('logsView', function () {
|
|||
|
||||
var isValid = isValidEndpoint && hasValidLogStartDate && hasValidLogEndDate;
|
||||
|
||||
if (!$scope.makevisible || !isValid) {
|
||||
if (!$scope.makevisible || !isValid || ($scope.loading && $scope.loadCounter >= 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -429,12 +430,19 @@ angular.module('quay').directive('logsView', function () {
|
|||
if ($scope.loading || !$scope.hasAdditional) { return; }
|
||||
|
||||
$scope.loading = true;
|
||||
$scope.loadCounter++;
|
||||
|
||||
var currentCounter = $scope.loadCounter;
|
||||
var url = getUrl('logs');
|
||||
url.setQueryParameter('next_page', $scope.nextPageToken);
|
||||
|
||||
var loadLogs = Restangular.one(url.toString());
|
||||
loadLogs.customGET().then(function(resp) {
|
||||
if ($scope.loadCounter != currentCounter) {
|
||||
// Loaded logs data is out of date.
|
||||
return;
|
||||
}
|
||||
|
||||
resp.logs.forEach(function(log) {
|
||||
$scope.logs.push(log);
|
||||
});
|
||||
|
|
@ -462,7 +470,6 @@ angular.module('quay').directive('logsView', function () {
|
|||
log.metadata['_ip'] = log.ip ? log.ip : null;
|
||||
|
||||
// Note: This is for back-compat for logs that previously did not have namespaces.
|
||||
// TODO(jschorr): Remove this after a month or two (~April 2017).
|
||||
var namespace = '';
|
||||
if (log.namespace) {
|
||||
namespace = log.namespace.username || log.namespace.name;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ var quayDependencies: string[] = [
|
|||
'pasvaz.bindonce',
|
||||
'ansiToHtml',
|
||||
'core-ui',
|
||||
'infinite-scroll',
|
||||
'ngTagsInput',
|
||||
];
|
||||
|
||||
|
|
|
|||
2
static/lib/ng-infinite-scroll.min.js
vendored
2
static/lib/ng-infinite-scroll.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
/* ng-infinite-scroll - v1.2.0 - 2015-02-14 */
|
||||
var mod;mod=angular.module("infinite-scroll",[]),mod.value("THROTTLE_MILLISECONDS",null),mod.directive("infiniteScroll",["$rootScope","$window","$interval","THROTTLE_MILLISECONDS",function(a,b,c,d){return{scope:{infiniteScroll:"&",infiniteScrollContainer:"=",infiniteScrollDistance:"=",infiniteScrollDisabled:"=",infiniteScrollUseDocumentBottom:"=",infiniteScrollListenForEvent:"@"},link:function(e,f,g){var h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y;return y=angular.element(b),t=null,u=null,i=null,j=null,q=!0,x=!1,w=null,p=function(a){return a=a[0]||a,isNaN(a.offsetHeight)?a.document.documentElement.clientHeight:a.offsetHeight},r=function(a){return a[0].getBoundingClientRect&&!a.css("none")?a[0].getBoundingClientRect().top+s(a):void 0},s=function(a){return a=a[0]||a,isNaN(window.pageYOffset)?a.document.documentElement.scrollTop:a.ownerDocument.defaultView.pageYOffset},o=function(){var b,c,d,g,h;return j===y?(b=p(j)+s(j[0].document.documentElement),d=r(f)+p(f)):(b=p(j),c=0,void 0!==r(j)&&(c=r(j)),d=r(f)-c+p(f)),x&&(d=p((f[0].ownerDocument||f[0].document).documentElement)),g=d-b,h=g<=p(j)*t+1,h?(i=!0,u?e.$$phase||a.$$phase?e.infiniteScroll():e.$apply(e.infiniteScroll):void 0):i=!1},v=function(a,b){var d,e,f;return f=null,e=0,d=function(){var b;return e=(new Date).getTime(),c.cancel(f),f=null,a.call(),b=null},function(){var g,h;return g=(new Date).getTime(),h=b-(g-e),0>=h?(clearTimeout(f),c.cancel(f),f=null,e=g,a.call()):f?void 0:f=c(d,h,1)}},null!=d&&(o=v(o,d)),e.$on("$destroy",function(){return j.unbind("scroll",o),null!=w?(w(),w=null):void 0}),m=function(a){return t=parseFloat(a)||0},e.$watch("infiniteScrollDistance",m),m(e.infiniteScrollDistance),l=function(a){return u=!a,u&&i?(i=!1,o()):void 0},e.$watch("infiniteScrollDisabled",l),l(e.infiniteScrollDisabled),n=function(a){return x=a},e.$watch("infiniteScrollUseDocumentBottom",n),n(e.infiniteScrollUseDocumentBottom),h=function(a){return null!=j&&j.unbind("scroll",o),j=a,null!=a?j.bind("scroll",o):void 0},h(y),e.infiniteScrollListenForEvent&&(w=a.$on(e.infiniteScrollListenForEvent,o)),k=function(a){if(null!=a&&0!==a.length){if(a instanceof HTMLElement?a=angular.element(a):"function"==typeof a.append?a=angular.element(a[a.length-1]):"string"==typeof a&&(a=angular.element(document.querySelector(a))),null!=a)return h(a);throw new Exception("invalid infinite-scroll-container attribute.")}},e.$watch("infiniteScrollContainer",k),k(e.infiniteScrollContainer||[]),null!=g.infiniteScrollParent&&h(angular.element(f.parent())),null!=g.infiniteScrollImmediateCheck&&(q=e.$eval(g.infiniteScrollImmediateCheck)),c(function(){return q?o():void 0},0,1)}}}]);
|
||||
Reference in a new issue