vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Better UX for build logs when switching focus back to tab

Browse source 
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
This commit is contained in:
Joseph Schorr 2015-09-17 14:24:34 -04:00
parent 0316f6e471
commit 4829ec51ca
3 changed files with 56 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/directives/build-logs-view.html
View file

@ -24,6 +24,12 @@
please check for JavaScript or networking issues and contact support.
</div>
<div ng-show="!loadError && pollChannel.skipping">
Refreshing Build Status...
<span class="cor-loader"></span>
</div>
<div ng-show="!pollChannel.skipping">
<span class="no-logs" ng-if="!logEntries.length && currentBuild.phase == 'waiting'">
(Waiting for build to start)
</span>
@ -55,4 +61,5 @@
</div>
</div>
</div>
</div>
</div>

12
static/js/directives/ui/build-logs-view.js
View file

@ -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;
}
};

20
static/js/services/angular-poll-channel.js vendored
View file

@ -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();