From 4829ec51ca52f3f2edb5d1ea02d07ed28c9aa6ad Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Thu, 17 Sep 2015 14:24:34 -0400 Subject: [PATCH] Better UX for build logs when switching focus back to tab Currently, build logs are not loaded when the tab is in the background. However, when switching back to the tab, there is no indication that logs have not loaded, and it can take up to the poll duration (5s) before we even start loading the logs. This change adds a message displayed for the user before the logs start to load to indicate they are being refreshed and also *immediately* starts the loading of the logs when the tab is made visible. Fixes #501 --- static/directives/build-logs-view.html | 59 ++++++++++++---------- static/js/directives/ui/build-logs-view.js | 12 ++--- static/js/services/angular-poll-channel.js | 20 ++++++-- 3 files changed, 56 insertions(+), 35 deletions(-) diff --git a/static/directives/build-logs-view.html b/static/directives/build-logs-view.html index a26f3eafc..b1cf1aebc 100644 --- a/static/directives/build-logs-view.html +++ b/static/directives/build-logs-view.html @@ -24,34 +24,41 @@ please check for JavaScript or networking issues and contact support. - - (Waiting for build to start) - +
+ Refreshing Build Status... + +
-
-
- -
- -
-
- -
-
- -
-
+
+ + (Waiting for build to start) + - -
-
- - - - +
+
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
+ + + + +
diff --git a/static/js/directives/ui/build-logs-view.js b/static/js/directives/ui/build-logs-view.js index 9f8e1e9fe..aa7df7d85 100644 --- a/static/js/directives/ui/build-logs-view.js +++ b/static/js/directives/ui/build-logs-view.js @@ -28,7 +28,7 @@ angular.module('quay').directive('buildLogsView', function () { $scope.currentBuild = null; $scope.loadError = null; - var pollChannel = null; + $scope.pollChannel = null; var appendToTextLog = function(type, message) { if (type == 'phase') { @@ -146,14 +146,14 @@ angular.module('quay').directive('buildLogsView', function () { getBuildStatusAndLogs(build, callback); }; - pollChannel = AngularPollChannel.create($scope, conductStatusAndLogRequest, 5 * 1000 /* 5s */); - pollChannel.start(); + $scope.pollChannel = AngularPollChannel.create($scope, conductStatusAndLogRequest, 5 * 1000 /* 5s */); + $scope.pollChannel.start(); }; var stopWatching = function() { - if (pollChannel) { - pollChannel.stop(); - pollChannel = null; + if ($scope.pollChannel) { + $scope.pollChannel.stop(); + $scope.pollChannel = null; } }; diff --git a/static/js/services/angular-poll-channel.js b/static/js/services/angular-poll-channel.js index f4028a65f..98b69e664 100644 --- a/static/js/services/angular-poll-channel.js +++ b/static/js/services/angular-poll-channel.js @@ -1,8 +1,9 @@ /** * Specialized class for conducting an HTTP poll, while properly preventing multiple calls. */ -angular.module('quay').factory('AngularPollChannel', ['ApiService', '$timeout', 'DocumentVisibilityService', - function(ApiService, $timeout, DocumentVisibilityService) { +angular.module('quay').factory('AngularPollChannel', + ['ApiService', '$timeout', 'DocumentVisibilityService', 'CORE_EVENT', '$rootScope', + function(ApiService, $timeout, DocumentVisibilityService, CORE_EVENT, $rootScope) { var _PollChannel = function(scope, requester, opt_sleeptime) { this.scope_ = scope; this.requester_ = requester; @@ -11,10 +12,20 @@ angular.module('quay').factory('AngularPollChannel', ['ApiService', '$timeout', this.working = false; this.polling = false; + this.skipping = false; var that = this; + + var visibilityHandler = $rootScope.$on(CORE_EVENT.DOC_VISIBILITY_CHANGE, function() { + // If the poll channel was skipping because the visibility was hidden, call it immediately. + if (that.skipping && !DocumentVisibilityService.isHidden()) { + that.call_(); + } + }); + scope.$on('$destroy', function() { that.stop(); + visibilityHandler(); }); }; @@ -28,9 +39,10 @@ angular.module('quay').factory('AngularPollChannel', ['ApiService', '$timeout', if (this.timer_) { $timeout.cancel(this.timer_); this.timer_ = null; - this.polling_ = false; + this.polling = false; } + this.skipping = false; this.working = false; }; @@ -53,6 +65,7 @@ angular.module('quay').factory('AngularPollChannel', ['ApiService', '$timeout', // If the document is currently hidden, skip the call. if (DocumentVisibilityService.isHidden()) { + this.skipping = true; this.setupTimer_(); return; } @@ -63,6 +76,7 @@ angular.module('quay').factory('AngularPollChannel', ['ApiService', '$timeout', that.requester_(function(status) { if (status) { that.working = false; + that.skipping = false; that.setupTimer_(); } else { that.stop();