Redo the build status box on the repo page to be a much nicer drop down

static/css/quay.css

@@ -507,35 +507,96 @@ i.toggle-icon:hover {
   color: #428bca;
 }
 
-.status-boxes .popover {
+.status-box a {
-  margin-right: 20px;
+  padding: 6px;
+  color: black;
 }
 
-.status-boxes .popover-content {
+.status-box a b {
-  width: 260px;
+  margin-right: 10px;
 }
 
-.build-statuses {
+.build-info {
+  margin: 4px;
+  padding: 4px;
+  margin-left: 6px;
+  margin-right: 6px;
+  border-bottom: 1px solid #eee;
+}
+
+.build-info:hover {
+  background: rgba(66, 139, 202, 0.2);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+
+.build-info:last-child {
+  border-bottom: 0px;
+}
+
+.build-status .phase-icon {
+  border-radius: 50%;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
+  margin-top: 4px;
+  float: left;
+}
+
+.build-status .phase-icon.error {
+  background-color: red;
+}
+
+.build-status .phase-icon.waiting, .build-status .phase-icon.starting, .build-status .phase-icon.initializing {
+  background-color: #ddd;
+}
+
+.build-status .phase-icon.building {
+  background-color: #f0ad4e;
+}
+
+.build-status .phase-icon.pushing {
+  background-color: #5cb85c;
+}
+
+.build-status .phase-icon.complete {
+  background-color: #428bca;
+}
+
+.build-status {
+  display: inline-block;
 }
 
 .build-status-container {
   padding: 4px;
   margin-bottom: 10px;
   border-bottom: 1px solid #eee;
-  width: 230px;
+  width: 350px;
 }
 
 .build-status-container .build-message {
   display: block;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: 14px;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  margin-left: 20px;
 }
 
 .build-status-container .progress {
-  height: 12px;
+  height: 10px;
   margin: 0px;
   margin-top: 10px;
-  width: 230px;
+  margin-left: 20px;
+  width: 310px;
+}
+
+.build-status-container .timing {
+  margin-left: 20px;
+  margin-top: 6px;
 }
 
 .build-status-container:last-child {
@@ -1676,16 +1737,6 @@ p.editable:hover i {
   cursor: pointer;
 }
 
-.repo .build-info {
-  padding: 10px;
-  margin: 0px;
-}
-
-.repo .build-info .progress {
-  margin: 0px;
-  margin-top: 10px;
-}
-
 .repo .section {
   display: block;
   margin-bottom: 20px;

static/directives/build-status.html

@@ -1,8 +1,14 @@
 <div id="build-status-container" class="build-status-container">
+  <div>
+    <span class="phase-icon" ng-class="build.phase"></span>
     <span class="build-message">{{ getBuildMessage(build) }}</span>
-  <div class="progress" ng-class="getBuildProgress(build) < 100 ? 'active progress-striped' : ''" ng-show="getBuildProgress(build) >= 0">
+  </div>
+  <div class="timing">
+    <i class="fa fa-clock-o"></i>
+    Started: <span am-time-ago="build.started || 0"></span>
+  </div>
+  <div class="progress" ng-class="getBuildProgress(build) < 100 ? 'active progress-striped' : ''" ng-show="getBuildProgress(build) > 0 && getBuildProgress(build) < 100">
     <div class="progress-bar"  role="progressbar" aria-valuenow="{{ getBuildProgress(build) }}" aria-valuemin="0" aria-valuemax="100" style="{{ 'width: ' + getBuildProgress(build) + '%' }}">
     </div>
   </div>
-
 </div>

static/js/app.js

@@ -2534,6 +2534,14 @@ quayApp.directive('ngBlur', function() {
   };
 });
 
+quayApp.directive('ngVisible', function () {
+  return function (scope, element, attr) {
+    scope.$watch(attr.ngVisible, function (visible) {
+      element.css('visibility', visible ? 'visible' : 'hidden');
+    });
+  };
+});
+
 quayApp.run(['$location', '$rootScope', 'Restangular', 'UserService', 'PlanService', '$http', '$timeout',
     function($location, $rootScope, Restangular, UserService, PlanService, $http, $timeout) {
 

static/partials/view-repo.html

@@ -38,13 +38,18 @@
 
     <!-- Status boxes -->
     <div class="status-boxes">
-      <div id="buildInfoBox" class="status-box" ng-show="repo.is_building"
+      <div id="buildInfoBox" class="status-box" ng-show="repo.is_building">
-           bs-popover="'static/partials/build-status-item.html'" data-placement="bottom">
+        <div class="dropdown" data-placement="top">
-        <span class="title">
-          <span class="quay-spinner"></span>
-          <b>Building Images</b>
-        </span>
           <span class="count" ng-class="buildsInfo ? 'visible' : ''"><span>{{ buildsInfo ? buildsInfo.length : '-' }}</span></span>
+          <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Building Dockerfile<span ng-show="buildsInfo.length > 1">s</span> <b class="caret"></b></a>
+          <ul class="dropdown-menu pull-right">           
+            <li ng-repeat="buildInfo in buildsInfo">
+              <div class="build-info">
+                <span class="build-status" build="buildInfo"></span>
+              </div>
+            </li>
+          </ul>
+        </div>        
       </div>
     </div>