Merge pull request #507 from coreos-inc/buildmsg

Better UX for build logs when switching focus back to tab

static/directives/build-logs-view.html

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

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 */);
+        $scope.pollChannel = AngularPollChannel.create($scope, conductStatusAndLogRequest, 5 * 1000 /* 5s */);
-        pollChannel.start();
+        $scope.pollChannel.start();
       };
 
       var stopWatching = function() {
-        if (pollChannel) {
+        if ($scope.pollChannel) {
-          pollChannel.stop();
+          $scope.pollChannel.stop();
-          pollChannel = null;
+          $scope.pollChannel = null;
         }
       };
 

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',
+angular.module('quay').factory('AngularPollChannel',
-    function(ApiService, $timeout, DocumentVisibilityService) {
+    ['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();