Switch to a new single-selected-context layout and system in the view repository screen. Now selecting tags or images changes the context

static/js/controllers.js

@@ -151,7 +151,13 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
 
   // Watch for changes to the tag parameter.
   $scope.$on('$routeUpdate', function(){
-    $scope.setTag($location.search().tag, false);
+    if ($location.search().tag) {
+      $scope.setTag($location.search().tag, false);
+    } else if ($location.search().image) {
+      $scope.setImage($location.search().image, false);
+    } else {
+      $scope.setTag($location.search().tag, false);
+    }
   });
 
   // Start scope methods //////////////////////////////////////////
@@ -186,11 +192,28 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
       addedDisplayed - removedDisplayed - changedDisplayed;
   };
 
-  $scope.setImage = function(image) {
+  $scope.setImage = function(imageId, opt_updateURL) {
+    var image = null;
+    for (var i = 0; i < $scope.images.length; ++i) {
+      var currentImage = $scope.images[i];
+      if (currentImage.id == imageId || currentImage.id.substr(0, 12) == imageId) {
+        image = currentImage;
+        break;
+      }
+    }
+
+    if (!image) { return; }
+
+    $scope.currentTag = null;
     $scope.currentImage = image;
     $scope.loadImageChanges(image);
     if ($scope.tree) {
-      $scope.tree.setImage($scope.currentImage.id);
+      $scope.tree.setImage(image.id);
+    }
+
+    if (opt_updateURL) {
+      $location.search('tag', null);
+      $location.search('image', imageId.substr(0, 12));
     }
   };
 
@@ -205,20 +228,13 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
     }
 
     var getIdsForTag = function(currentTag) {
-      var ancestors = currentTag.image.ancestors.split('/');
-      var dbid = currentTag.image.dbid;
       var ids = {};
-
-      ids[dbid] = true;
-      for (var i = 0; i < ancestors.length; ++i) {
-        if (ancestors[i]) {
-          ids[ancestors[i]] = true;
-        }
-      }
+      forAllTagImages(currentTag, function(image) {
+        ids[image.dbid] = true;
+      });
       return ids;
     };
 
-
     // Remove any IDs that match other tags.
     var toDelete = getIdsForTag(tag);
     for (var currentTagName in $scope.repo.tags) {
@@ -252,7 +268,6 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
     return images;
   };
 
-
   $scope.askDeleteTag = function(tagName) {
     if (!$scope.repo.can_admin) { return; }
 
@@ -285,6 +300,27 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
     });
   };
 
+  $scope.getImagesForTagBySize = function(tag) {
+    var images = [];
+    forAllTagImages(tag, function(image) {
+        images.push(image);
+    });
+
+    images.sort(function(a, b) {
+      return b.size - a.size;
+    });
+
+    return images;
+  };
+
+  $scope.getTotalSize = function(tag) {
+    var size = 0;
+    forAllTagImages(tag, function(image) {
+      size += image.size;
+    });
+    return size;
+  };
+
   $scope.setTag = function(tagName, opt_updateURL) {
     var repo = $scope.repo;
     var proposedTag = repo.tags[tagName];
@@ -306,6 +342,7 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
       } 
 
       if (opt_updateURL) {
+        $location.search('image', null);
         $location.search('tag', $scope.currentTag.name);
       }
     }
@@ -387,6 +424,20 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
     }
   };
 
+  var forAllTagImages = function(tag, callback) {
+    if (!tag || !$scope.imageByDBID) { return; }
+
+    callback(tag.image);
+
+    var ancestors = tag.image.ancestors.split('/');
+    for (var i = 0; i < ancestors.length; ++i) {
+      var image = $scope.imageByDBID[ancestors[i]];
+      if (image) {
+        callback(image);
+      }
+    }
+  };
+
   var fetchRepository = function() {
     var params = {'repository': namespace + '/' + name};
     $rootScope.title = 'Loading Repository...';
@@ -467,6 +518,13 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
       $scope.images = resp.images;
       $scope.specificImages = [];
 
+      // Build various images for quick lookup of images.
+      $scope.imageByDBID = {};
+      for (var i = 0; i < $scope.images.length; ++i) {
+        var currentImage = $scope.images[i];
+        $scope.imageByDBID[currentImage.dbid] = currentImage;
+      }
+
       // Dispose of any existing tree.
       if ($scope.tree) {
         $scope.tree.dispose();
@@ -489,7 +547,7 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
       });
 
       $($scope.tree).bind('imageChanged', function(e) {
-        $scope.$apply(function() { $scope.setImage(e.image); });
+        $scope.$apply(function() { $scope.setImage(e.image.id, true); });
       });
 
       $($scope.tree).bind('showTagMenu', function(e) {
@@ -500,6 +558,10 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
         $scope.$apply(function() { $scope.hideTagMenu(); });
       });
 
+      if ($routeParams.image) {
+        $scope.setImage($routeParams.image);
+      }
+
       return resp.images;
     });
   };
@@ -936,7 +998,7 @@ function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService) {
     }, 10);
   };
 
-  var fetchImage = function() {
+  var fetchImages = function() {
     var params = {
       'repository': namespace + '/' + name,
       'image_id': imageid