Get build page ready for logs

static/css/quay.css

@@ -1697,6 +1697,55 @@ p.editable:hover i {
   padding-left: 44px;
 }
 
+
+.repo-build .build-id:before {
+  content: "Build ID: "
+}
+
+.repo-build .build-id {
+  float: right;
+  font-size: 12px;
+  color: #aaa;
+  padding: 10px;
+}
+
+.repo-build .build-pane .timing {
+  float: right;
+}
+
+.repo-build .build-tab-link {
+  white-space: nowrap;
+}
+
+.repo-build .build-pane .build-header {
+  padding-top: 10px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.repo-build .build-pane .build-progress {
+  margin-top: 16px;
+  margin-bottom: 10px;
+}
+
+.repo-build .build-pane .build-progress .progress {
+  height: 14px;
+  margin-bottom: 0px;
+}
+
+.repo-build .build-pane .quay-spinner {
+  margin-top: 4px;
+  display: inline-block;
+}
+
+.repo-build .build-pane .build-logs {
+  background: #222;
+  color: white;
+  padding: 10px;
+  font-family: Consolas, "Lucida Console", Monaco, monospace;
+  overflow: auto;
+}
+
 .repo-admin .right-info {
   font-size: 11px;
   margin-top: 10px;

static/js/controllers.js

@@ -621,9 +621,10 @@ function RepoCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiServi
   loadViewInfo();
 }
 
-function RepoBuildCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $location) {
+function RepoBuildCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $location, $interval) {
   var namespace = $routeParams.namespace;
   var name = $routeParams.name;
+  var pollTimerHandle = null;
 
   // Watch for changes to the current parameter.
   $scope.$on('$routeUpdate', function(){
@@ -633,6 +634,11 @@ function RepoBuildCtrl($scope, Restangular, ApiService, $routeParams, $rootScope
   });
 
   $scope.builds = [];
+  $scope.polling = false;
+
+  $scope.adjustLogHeight = function() {
+    $('.build-logs').height($(window).height() - 365);
+  };
 
   $scope.getShortId = function(id) {
     var lastIndex = id.lastIndexOf('-');
@@ -650,16 +656,74 @@ function RepoBuildCtrl($scope, Restangular, ApiService, $routeParams, $rootScope
   };
 
   $scope.setCurrentBuildInternal = function(build, opt_updateURL) {
+    stopPollTimer();
+
     $scope.currentBuild = build;
     if (opt_updateURL) {
-      $location.search('current', build.id);
+      if (build) {
+        $location.search('current', build.id);
+      } else {
+        $location.search('current', null);
+      }
     }
+
+    // Timeout needed to ensure the log element has been created
+    // before its height is adjusted.
+    setTimeout(function() {
+      $scope.adjustLogHeight();
+    }, 1);
+
+    // If the build is currently processing, start the build timer.
+    checkPollTimer();
+  };
+
+  var checkPollTimer = function() {
+    var build = $scope.currentBuild;
+    if (!build) {
+      stopPollTimer();
+      return;
+    }
+
+    if (build['phase'] != 'complete' && build['phase'] != 'error') {
+      startPollTimer();
+    } else {
+      stopPollTimer();
+    }
+  };
+
+  var stopPollTimer = function() {    
+    $interval.cancel(pollTimerHandle);
+  };
+
+  var startPollTimer = function() {
+    stopPollTimer();
+    pollTimerHandle = $interval(getBuildStatus, 1000);
+  };
+
+  var getBuildStatus = function() {
+    if (!$scope.currentBuild) { return; }
+
+    // Note: We use restangular manually here because we need to turn off the loading bar.
+    var buildStatus = Restangular.one('repository/' + namespace + '/' + name + '/build/' + $scope.currentBuild.id + '/status');
+    buildStatus.withHttpConfig({
+      'ignoreLoadingBar': true
+    });
+
+    $scope.polling = true;
+    buildStatus.get().then(function(resp) {
+      // Note: We use extend here rather than replacing as Angular is depending on the
+      // root build object to remain the same object.
+      $.extend(true, $scope.currentBuild, resp);
+      $scope.polling = false;
+      checkPollTimer();
+    });
   };
 
   var fetchRepository = function() {
     var params = {'repository': namespace + '/' + name};
     $rootScope.title = 'Loading Repository...';
     $scope.repository = ApiService.getRepoAsResource(params).get(function(repo) {
+      $rootScope.title = 'Repository Builds';
       $scope.repo = repo;
       getBuildInfo();
     });
@@ -677,6 +741,8 @@ function RepoBuildCtrl($scope, Restangular, ApiService, $routeParams, $rootScope
 
       if ($location.search().current) {
         $scope.setCurrentBuild($location.search().current, false);
+      } else if ($scope.builds.length > 0) {
+        $scope.setCurrentBuild($scope.builds[0].id, true);
       }
     });
   };

static/partials/repo-build.html

@@ -11,14 +11,13 @@
   <div class="row" ng-show="!repo.is_building">
     There are no active builds for this repository
   </div>
-
   
   <div class="row" ng-show="repo.is_building">
     <!-- Side tabs -->
-    <div class="col-md-2">
+    <div class="col-sm-2">
       <ul class="nav nav-pills nav-stacked">
         <li ng-class="currentBuild == build ? 'active' : ''" ng-repeat="build in builds">
-          <a href="javascript:void(0)" ng-click="setCurrentBuild(build.id, true)">
+          <a class="build-tab-link" href="javascript:void(0)" ng-click="setCurrentBuild(build.id, true)">
             <span class="phase-icon" ng-class="build.phase"></span>
             <span>{{ getShortId(build.id) }}</span>
           </a>
@@ -27,16 +26,26 @@
     </div>
 
     <!-- Content -->
-    <div class="col-md-10">
+    <div class="col-sm-10">      
-      
+      <div class="tab-content" onresize="adjustLogHeight()">
-      <div class="tab-content">
+        <div ng-repeat="build in builds" class="tab-pane build-pane" ng-class="currentBuild == build ? 'active' : ''">
-        <div ng-repeat="build in builds" class="tab-pane" ng-class="currentBuild == build ? 'active' : ''">
+          <div class="build-header">
-          <div>{{ build.id }}</div>
+            <div class="timing">
-          <div>
+              <i class="fa fa-clock-o"></i>
+              Started: <span am-time-ago="build.started || 0"></span>
+            </div>
             <span class="phase-icon" ng-class="build.phase"></span>
             <span class="build-message" build="build"></span>
             <div class="build-progress" build="build"></div>
           </div>
+
+          <div class="build-logs">
+            some logs here
+          </div>
+          <div>
+            <span class="quay-spinner" ng-show="polling"></span>
+            <span class="build-id">{{ build.id }}</span>
+          </div>
         </div>
       </div>
     </div>