From b8d2e1be9ce55105c77e3f10812e1ccb8b0d52ce Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Tue, 27 Nov 2018 13:13:02 +0200 Subject: [PATCH] Remove infinite scroll from logs page and fix multiple loading bug This should make viewing logs significantly less janky --- static/directives/logs-view.html | 9 ++++++--- static/js/directives/ui/logs-view.js | 11 +++++++++-- static/js/quay-config.module.ts | 1 - static/lib/ng-infinite-scroll.min.js | 2 -- 4 files changed, 15 insertions(+), 8 deletions(-) delete mode 100644 static/lib/ng-infinite-scroll.min.js diff --git a/static/directives/logs-view.html b/static/directives/logs-view.html index a56006885..f07368847 100644 --- a/static/directives/logs-view.html +++ b/static/directives/logs-view.html @@ -5,6 +5,7 @@ From @@ -13,6 +14,7 @@ to @@ -39,9 +41,7 @@ -
+
@@ -92,6 +92,9 @@
Namespace
+
+ +
diff --git a/static/js/directives/ui/logs-view.js b/static/js/directives/ui/logs-view.js index 877863b78..9025fece6 100644 --- a/static/js/directives/ui/logs-view.js +++ b/static/js/directives/ui/logs-view.js @@ -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; diff --git a/static/js/quay-config.module.ts b/static/js/quay-config.module.ts index 8ce147187..3c113f815 100644 --- a/static/js/quay-config.module.ts +++ b/static/js/quay-config.module.ts @@ -18,7 +18,6 @@ var quayDependencies: string[] = [ 'pasvaz.bindonce', 'ansiToHtml', 'core-ui', - 'infinite-scroll', 'ngTagsInput', ]; diff --git a/static/lib/ng-infinite-scroll.min.js b/static/lib/ng-infinite-scroll.min.js deleted file mode 100644 index cbe2f801f..000000000 --- a/static/lib/ng-infinite-scroll.min.js +++ /dev/null @@ -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)}}}]); \ No newline at end of file