From e7daca5d95cdb4c4107005efc846e1a106985e38 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Wed, 13 Aug 2014 17:54:15 -0400
Subject: [PATCH] Add better messaging and UI around repos and images that are
 currently being pushed

---
 endpoints/api/image.py         |  1 +
 static/js/controllers.js       | 21 +++++++++++++++
 static/js/graphing.js          | 12 +++++++++
 static/partials/view-repo.html | 48 ++++++++++++++++++++--------------
 4 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/endpoints/api/image.py b/endpoints/api/image.py
index cdf06c6e2..3060053ad 100644
--- a/endpoints/api/image.py
+++ b/endpoints/api/image.py
@@ -24,6 +24,7 @@ def image_view(image):
     'dbid': image.id,
     'size': extended_props.image_size,
     'locations': list(image.storage.locations),
+    'uploading': image.storage.uploading,
   }
 
 
diff --git a/static/js/controllers.js b/static/js/controllers.js
index d77ffb298..e04dd0a3c 100644
--- a/static/js/controllers.js
+++ b/static/js/controllers.js
@@ -431,6 +431,27 @@ function RepoCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiServi
     $location.search('current', buildInfo.id);
   };
 
+  $scope.isPushing = function(images) {
+    if (!images) { return false; }
+
+    var cached = images.__isPushing;
+    if (cached !== undefined) {
+      return cached;
+    }
+
+    return images.__isPushing = $scope.isPushingInternal(images);
+  };
+
+  $scope.isPushingInternal = function(images) {
+    if (!images) { return false; }
+
+    for (var i = 0; i < images.length; ++i) {
+      if (images[i].uploading) { return true; }
+    }
+
+    return false;
+  };
+
   $scope.getTooltipCommand = function(image) {
     var sanitized = ImageMetadataService.getEscapedFormattedCommand(image);
     return '<span class=\'codetooltip\'>' + sanitized + '</span>';
diff --git a/static/js/graphing.js b/static/js/graphing.js
index b5abf2d00..32eff8635 100644
--- a/static/js/graphing.js
+++ b/static/js/graphing.js
@@ -402,6 +402,10 @@ ImageHistoryTree.prototype.buildRoot_ = function() {
   var roots = [];
   for (var i = 0; i < this.images_.length; ++i) {
     var image = this.images_[i];
+
+    // Skip images that are currently uploading.
+    if (image.uploading) { continue; }
+
     var imageNode = imageByDBID[image.dbid];
     var ancestors = this.getAncestors_(image);
     var immediateParent = ancestors[ancestors.length - 1] * 1;
@@ -432,6 +436,10 @@ ImageHistoryTree.prototype.buildRoot_ = function() {
   var maxChildCount = roots.length;
   for (var i = 0; i < this.images_.length; ++i) {
     var image = this.images_[i];
+
+    // Skip images that are currently uploading.
+    if (image.uploading) { continue; }
+
     var imageNode = imageByDBID[image.dbid];
     maxChildCount = Math.max(maxChildCount, this.determineMaximumChildCount_(imageNode));
   }
@@ -582,6 +590,10 @@ ImageHistoryTree.prototype.setTag_ = function(tagName) {
   // Ensure that the children are in the correct order.
   for (var i = 0; i < this.images_.length; ++i) {
     var image = this.images_[i];
+
+    // Skip images that are currently uploading.
+    if (image.uploading) { continue; }
+
     var imageNode = this.imageByDBID_[image.dbid];
     var ancestors = this.getAncestors_(image);
     var immediateParent = ancestors[ancestors.length - 1] * 1;
diff --git a/static/partials/view-repo.html b/static/partials/view-repo.html
index 2f4d79f72..7df865add 100644
--- a/static/partials/view-repo.html
+++ b/static/partials/view-repo.html
@@ -76,33 +76,43 @@
     <div class="description markdown-input" content="repo.description" can-write="repo.can_write"
          content-changed="updateForDescription" field-title="'repository description'"></div>
 
-    <!-- Empty message -->
-    <div class="repo-content" ng-show="!currentTag.image_id && !currentImage && !repo.is_building">
-      <div class="empty-message">
-        This repository is empty
-      </div>
+    <!-- Empty messages -->
+    <div ng-if="!currentTag.image_id && !currentImage">
+      <!-- !building && !pushing -->
+      <div class="repo-content" ng-show="!repo.is_building && !isPushing(images)">
+        <div class="empty-message">
+          This repository is empty
+        </div>
 
-      <div class="empty-description" ng-show="repo.can_write">
-        <div class="panel-default">
-          <div class="panel-heading">How to push a new image to this repository:</div>
-          <div class="panel-body">
-            First login to the registry (if you have not done so already):
-            <pre class="command">sudo docker login {{ Config.getDomain() }}</pre>
+        <div class="empty-description" ng-show="repo.can_write">
+          <div class="panel-default">
+            <div class="panel-heading">How to push a new image to this repository:</div>
+            <div class="panel-body">
+              First login to the registry (if you have not done so already):
+              <pre class="command">sudo docker login {{ Config.getDomain() }}</pre>
 
-            Tag an image to this repository:
-            <pre class="command">sudo docker tag <i>0u123imageidgoeshere</i> {{ Config.getDomain() }}/{{repo.namespace}}/{{repo.name}}</pre>
+              Tag an image to this repository:
+              <pre class="command">sudo docker tag <i>0u123imageidgoeshere</i> {{ Config.getDomain() }}/{{repo.namespace}}/{{repo.name}}</pre>
 
-            Push the image to this repository:
-            <pre class="command">sudo docker push {{ Config.getDomain() }}/{{repo.namespace}}/{{repo.name}}</pre>
+              Push the image to this repository:
+              <pre class="command">sudo docker push {{ Config.getDomain() }}/{{repo.namespace}}/{{repo.name}}</pre>
+            </div>
           </div>
         </div>
       </div>
 
-    </div>
+      <!-- building -->
+      <div class="repo-content" ng-show="repo.is_building">
+        <div class="empty-message">
+          A build is currently processing. If this takes longer than an hour, please <a href="/contact">contact us</a>
+        </div>
+      </div>
 
-    <div class="repo-content" ng-show="!currentTag.image_id && repo.is_building">
-      <div class="empty-message">
-        A build is currently processing. If this takes longer than an hour, please <a href="/contact">contact us</a>
+      <!-- pushing -->
+      <div class="repo-content" ng-show="!repo.is_building && isPushing(images)">
+        <div class="empty-message">
+          A push to this repository is in progress.
+        </div>
       </div>
     </div>