Merge pull request #296 from coreos-inc/delmanytags

UI performance improvements for large repositories

endpoints/api/image.py

@@ -11,7 +11,7 @@ from data import model
 from util.cache import cache_control_flask_restful
 
 
-def image_view(image, image_map, include_locations=True, include_ancestors=True):
+def image_view(image, image_map, include_ancestors=True):
   extended_props = image
   if image.storage and image.storage.id:
     extended_props = image.storage
@@ -34,9 +34,6 @@ def image_view(image, image_map, include_locations=True, include_ancestors=True)
     'sort_index': len(image.ancestors),
   }
 
-  if include_locations:
-    image_data['locations'] = list(image.storage.locations)
-
   if include_ancestors:
     # Calculate the ancestors string, with the DBID's replaced with the docker IDs.
     ancestors = [docker_id(a) for a in image.ancestors.split('/')]
@@ -48,7 +45,7 @@ def image_view(image, image_map, include_locations=True, include_ancestors=True)
 def historical_image_view(image, image_map):
   ancestors = [image_map[a] for a in image.ancestors.split('/')[1:-1]]
   normal_view = image_view(image, image_map)
-  normal_view['history'] = [image_view(parent, image_map, False, False) for parent in ancestors]
+  normal_view['history'] = [image_view(parent, image_map, False) for parent in ancestors]
   return normal_view
 
 
@@ -60,7 +57,11 @@ class RepositoryImageList(RepositoryParamResource):
   @nickname('listRepositoryImages')
   def get(self, namespace, repository):
     """ List the images for the specified repository. """
-    all_images = model.image.get_repository_images(namespace, repository)
+    repo = model.repository.get_repository(namespace, repository)
+    if not repo:
+      raise NotFound()
+
+    all_images = model.image.get_repository_images_without_placements(repo)
     all_tags = model.tag.list_repository_tags(namespace, repository)
 
     tags_by_image_id = defaultdict(list)

static/directives/image-info-sidebar.html

@@ -82,7 +82,7 @@
   </div>
 
   <!-- Locations -->
-  <div class="image-section">
+  <div class="image-section" ng-if="imageData.locations">
     <i class="fa fa-map-marker section-icon"
        data-title="The geographic region(s) in which this image data is located"
        bs-tooltip></i>

static/directives/multiselect-dropdown.html

@@ -1,7 +1,12 @@
 <div class="multiselect-dropdown-element">
   <div class="dropdown" style="text-align: left;">
     <button class="btn-dropdown btn btn-default" data-toggle="dropdown">
-      <span class="selected-item-template" ng-repeat="item in selectedItems" ng-transcope></span>
+      <span class="selected-item-template" ng-repeat="item in selectedItems | limitTo:10" ng-transcope></span>
+      <span class="selected-item-template"
+            ng-if="(selectedItems | limitTo:11).length > 10">
+          and {{ selectedItems.length - 10 }} more...
+      </span>
+
       <span class="none" ng-if="!selectedItems.length">(No {{ itemName }}s selected)</span>
       <span class="caret" ng-if="!readOnly"></span>
     </button>
@@ -25,7 +30,7 @@
           </div>
         </div>
       </li>
-      <li role="presentation" ng-if="(items | filter:filter).length == 0">
+      <li role="presentation" ng-if="(items | filter:filter | limitTo:1).length == 0">
         <div class="empty">
           <div class="empty-primary-msg">No matching {{ itemName }}s found</div>
           <div class="empty-secondary-msg">

static/directives/repo-view/repo-panel-changes.html

@@ -3,14 +3,14 @@
        error-message="'Could not load repository images'">
     <h3 class="tab-header">
       Visualize Tags:
-      <span class="multiselect-dropdown" items="tagNames" selected-items="selectedTags"
+      <span class="multiselect-dropdown" items="tagNames" selected-items="selectedTagsSlice"
             item-name="tag" item-checked="updateState()">
         <span class="tag-span">{{ item }}</span>
       </span>
     </h3>
 
     <!-- No Tags Selected -->
-    <div class="empty" ng-if="!selectedTags.length">
+    <div class="empty" ng-if="!selectedTagsSlice.length">
       <div class="empty-primary-msg">No tags selected to view</div>
       <div class="empty-secondary-msg">
         Please select one or more tags above.
@@ -18,7 +18,7 @@
     </div>
 
     <!-- Tags Selected -->
-    <div ng-show="selectedTags.length > 0">
+    <div ng-show="selectedTagsSlice.length > 0">
       <div id="image-history row" class="resource-view" resource="imagesResource"
            error-message="'Cannot load repository images'">
 

static/directives/repo-view/repo-panel-tags.html

@@ -58,6 +58,16 @@
      </span>
    </div>
 
+   <div class="co-alert co-alert-info" ng-if="allTagsSelected && !fullPageSelected">
+     All <strong>{{ tags.length }}</strong> visible tags are selected.
+     <a href="javascript:void(0)" ng-click="clearSelectedTags()">Clear selection</a>.
+   </div>
+
+   <div class="co-alert co-alert-info" ng-if="fullPageSelected">
+     All <strong>{{ tagsPerPage }}</strong> tags on this page are selected.
+     <a href="javascript:void(0)" ng-click="selectAllTags()">Select all {{ tags.length }} tags currently visible</a>.
+   </div>
+
    <div class="cor-loader" ng-show="!isEnabled"></div>
 
    <table class="co-table" id="tagsTable" ng-if="isEnabled">
@@ -88,7 +98,7 @@
      </thead>
 
      <tr class="co-checkable-row"
-         ng-repeat="tag in tags | slice:(50 * options.page):(50 * (options.page + 1))"
+         ng-repeat="tag in tags | slice:(tagsPerPage * options.page):(tagsPerPage * (options.page + 1))"
          ng-class="checkedTags.isChecked(tag, checkedTags.checked) ? 'checked' : ''"
          bindonce>
       <td><span class="cor-checkable-item" controller="checkedTags" item="tag"></span></td>

static/js/directives/repo-view/repo-panel-changes.js

@@ -98,6 +98,11 @@ angular.module('quay').directive('repoPanelChanges', function () {
     controller: function($scope, $element, $timeout, ApiService, UtilService, ImageMetadataService) {
       $scope.tagNames = [];
 
+      $scope.$watch('selectedTags', function(selectedTags) {
+        if (!selectedTags) { return; }
+        $scope.selectedTagsSlice = selectedTags.slice(0, 10);
+      });
+
       var update = function() {
         if (!$scope.repository || !$scope.isEnabled) { return; }
 
@@ -117,12 +122,12 @@ angular.module('quay').directive('repoPanelChanges', function () {
 
         $scope.tracker = new RepositoryImageTracker($scope.repository, $scope.images);
 
-        if ($scope.selectedTags && $scope.selectedTags.length) {
+        if ($scope.selectedTagsSlice && $scope.selectedTagsSlice.length) {
           refreshTree();
         }
       };
 
-      $scope.$watch('selectedTags', update)
+      $scope.$watch('selectedTagsSlice', update)
       $scope.$watch('repository', update);
       $scope.$watch('isEnabled', update);
 
@@ -134,7 +139,7 @@ angular.module('quay').directive('repoPanelChanges', function () {
 
       var refreshTree = function() {
         if (!$scope.repository || !$scope.images || !$scope.isEnabled) { return; }
-        if ($scope.selectedTags.length < 1) { return; }
+        if ($scope.selectedTagsSlice.length < 1) { return; }
 
         $('#image-history-container').empty();
 
@@ -146,7 +151,7 @@ angular.module('quay').directive('repoPanelChanges', function () {
             $scope.getTimeSince,
             ImageMetadataService.getEscapedFormattedCommand,
             function(tag) {
-              return $.inArray(tag, $scope.selectedTags) >= 0;
+              return $.inArray(tag, $scope.selectedTagsSlice) >= 0;
             });
 
         $scope.tree = tree.draw('image-history-container');
@@ -154,7 +159,7 @@ angular.module('quay').directive('repoPanelChanges', function () {
           // Give enough time for the UI to be drawn before we resize the tree.
           $timeout(function() {
             $scope.tree.notifyResized();
-            $scope.setTag($scope.selectedTags[0]);
+            $scope.setTag($scope.selectedTagsSlice[0]);
           }, 100);
 
           // Listen for changes to the selected tag and image in the tree.

static/js/directives/repo-view/repo-panel-tags.js

@@ -22,6 +22,8 @@ angular.module('quay').directive('repoPanelTags', function () {
       var orderBy = $filter('orderBy');
 
       $scope.checkedTags = UIService.createCheckStateController([], 'name');
+      $scope.checkedTags.setPage(0);
+
       $scope.options = {
         'predicate': 'last_modified_datetime',
         'reverse': false,
@@ -32,6 +34,7 @@ angular.module('quay').directive('repoPanelTags', function () {
       $scope.tagHistory = {};
       $scope.tagActionHandler = null;
       $scope.showingHistory = false;
+      $scope.tagsPerPage = 50;
 
       var setTagState = function() {
         if (!$scope.repository || !$scope.selectedTags) { return; }
@@ -99,22 +102,38 @@ angular.module('quay').directive('repoPanelTags', function () {
 
         $scope.imageMap = imageMap;
         $scope.imageTracks = imageTracks;
+        $scope.options.page = 0;
 
         $scope.tags = ordered;
         $scope.allTags = allTags;
 
-        $scope.checkedTags = UIService.createCheckStateController(ordered, 'name', checked);
+        $scope.checkedTags = UIService.createCheckStateController(ordered, 'name');
-        $scope.checkedTags.listen(function(checked) {
+        $scope.checkedTags.setPage($scope.options.page, $scope.tagsPerPage);
-          $scope.selectedTags = checked.map(function(tag_info) {
+
+        $scope.checkedTags.listen(function(allChecked, pageChecked) {
+          $scope.selectedTags = allChecked.map(function(tag_info) {
             return tag_info.name;
           });
+
+          $scope.fullPageSelected = ((pageChecked.length == $scope.tagsPerPage) &&
+                                     (allChecked.length != $scope.tags.length));
+          $scope.allTagsSelected = ((allChecked.length > $scope.tagsPerPage) &&
+                                    (allChecked.length == $scope.tags.length));
         });
+
+        $scope.checkedTags.setChecked(checked);
       }
 
       $scope.$watch('options.predicate', setTagState);
       $scope.$watch('options.reverse', setTagState);
       $scope.$watch('options.tagFilter', setTagState);
 
+      $scope.$watch('options.page', function(page) {
+        if (page != null && $scope.checkedTags) {
+         $scope.checkedTags.setPage(page, $scope.tagsPerPage);
+        }
+      });
+
       $scope.$watch('selectedTags', function(selectedTags) {
         if (!selectedTags || !$scope.repository || !$scope.imageMap) { return; }
 
@@ -130,6 +149,14 @@ angular.module('quay').directive('repoPanelTags', function () {
         setTagState();
       });
 
+      $scope.clearSelectedTags = function() {
+        $scope.checkedTags.setChecked([]);
+      };
+
+      $scope.selectAllTags = function() {
+        $scope.checkedTags.setChecked($scope.tags);
+      };
+
       $scope.showHistory = function(value, opt_tagname) {
         $scope.options.historyFilter = opt_tagname ? opt_tagname : '';
         $scope.showingHistory = value;

static/js/pages/repo-view.js

@@ -36,19 +36,6 @@
     // Make sure we track the current user.
     UserService.updateUserIn($scope);
 
-    // Watch the selected tags and update the URL accordingly.
-    $scope.$watch('viewScope.selectedTags', function(selectedTags) {
-      if (!selectedTags || !$scope.viewScope.repository) { return; }
-
-      var tags = filterTags(selectedTags);
-      if (!tags.length) {
-        $location.search('tag', null);
-        return;
-      }
-
-      $location.search('tag', tags.join(','));
-    }, true);
-
     // Watch the repository to filter any tags removed.
     $scope.$watch('viewScope.repository', function(repository) {
       if (!repository) { return; }
@@ -178,539 +165,4 @@
       loadImages(callback);
     };
   }
-
-  function OldRepoViewCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiService, $routeParams, $rootScope, $location, $timeout, Config, UtilService) {
-    $scope.Config = Config;
-
-    var namespace = $routeParams.namespace;
-    var name = $routeParams.name;
-
-    $scope.pullCommands = [];
-    $scope.currentPullCommand = null;
-
-    $rootScope.title = 'Loading...';
-
-    // Watch for the destruction of the scope.
-    $scope.$on('$destroy', function() {
-      if ($scope.tree) {
-        $scope.tree.dispose();
-      }
-    });
-
-    // Watch for changes to the repository.
-    $scope.$watch('repo', function() {
-      $timeout(function() {
-        if ($scope.tree) {
-          $scope.tree.notifyResized();
-        }
-      });
-    });
-
-    // Watch for changes to the tag parameter.
-    $scope.$on('$routeUpdate', function(){
-      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 //////////////////////////////////////////
-
-    $scope.buildDialogShowCounter = 0;
-    $scope.getFormattedCommand = ImageMetadataService.getFormattedCommand;
-
-    $scope.setCurrentPullCommand = function(pullCommand) {
-      $scope.currentPullCommand = pullCommand;
-    };
-
-    $scope.updatePullCommand = function() {
-      $scope.pullCommands = [];
-
-      if ($scope.currentTag) {
-        $scope.pullCommands.push({
-          'title': 'docker pull (Tag ' + $scope.currentTag.name + ')',
-          'shortTitle': 'Pull Tag',
-          'icon': 'fa-tag',
-          'command': 'docker pull ' + Config.getDomain() + '/' + namespace + '/' + name + ':' + $scope.currentTag.name
-        });
-      }
-
-      $scope.pullCommands.push({
-        'title': 'docker pull (Full Repository)',
-        'shortTitle': 'Pull Repo',
-        'icon': 'fa-code-fork',
-        'command': 'docker pull ' + Config.getDomain() + '/' + namespace + '/' + name
-      });
-
-      if ($scope.currentTag) {
-        var squash = 'curl -L -f ' + Config.getHost('ACCOUNTNAME:PASSWORDORTOKEN');
-        squash += '/c1/squash/' + namespace + '/' + name + '/' + $scope.currentTag.name;
-        squash += ' | docker load';
-
-        $scope.pullCommands.push({
-          'title': 'Squashed image (Tag ' + $scope.currentTag.name + ')',
-          'shortTitle': 'Squashed',
-          'icon': 'fa-file-archive-o',
-          'command': squash,
-          'experimental': true
-        });
-      }
-
-      $scope.currentPullCommand = $scope.pullCommands[0];
-    };
-
-    $scope.showNewBuildDialog = function() {
-      $scope.buildDialogShowCounter++;
-    };
-
-    $scope.handleBuildStarted = function(build) {
-      getBuildInfo($scope.repo);
-      startBuildInfoTimer($scope.repo);
-    };
-
-    $scope.showBuild = function(buildInfo) {
-      $location.path('/repository/' + namespace + '/' + name + '/build');
-      $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>';
-    };
-
-    $scope.updateForDescription = function(content) {
-      $scope.repo.description = content;
-      $scope.repo.put();
-    };
-
-    $scope.parseDate = function(dateString) {
-      return Date.parse(dateString);
-    };
-
-    $scope.getTimeSince = function(createdTime) {
-        return moment($scope.parseDate(createdTime)).fromNow();
-    };
-
-    $scope.loadImageChanges = function(image) {
-      if (!image) { return; }
-
-      var params = {'repository': namespace + '/' + name, 'image_id': image.id};
-      $scope.currentImageChangeResource = ApiService.getImageChangesAsResource(params).get(function(ci) {
-        $scope.currentImageChanges = ci;
-      });
-    };
-
-    $scope.getMoreCount = function(changes) {
-      if (!changes) { return 0; }
-      var addedDisplayed = Math.min(2, changes.added.length);
-      var removedDisplayed = Math.min(2, changes.removed.length);
-      var changedDisplayed = Math.min(2, changes.changed.length);
-
-      return (changes.added.length + changes.removed.length + changes.changed.length) -
-        addedDisplayed - removedDisplayed - changedDisplayed;
-    };
-
-    $scope.showAddTag = function(image) {
-      $scope.toTagImage = image;
-      $('#addTagModal').modal('show');
-      setTimeout(function() {
-        $('#tagName').focus();
-      }, 500);
-    };
-
-    $scope.isOwnedTag = function(image, tagName) {
-      if (!image || !tagName) { return false; }
-      return image.tags.indexOf(tagName) >= 0;
-    };
-
-    $scope.isAnotherImageTag = function(image, tagName) {
-      if (!image || !tagName) { return false; }
-      return image.tags.indexOf(tagName) < 0 && $scope.repo.tags[tagName];
-    };
-
-    $scope.askDeleteTag = function(tagName) {
-      if (!$scope.repo.can_admin) { return; }
-
-      $scope.tagToDelete = tagName;
-      $('#confirmdeleteTagModal').modal('show');
-    };
-
-    $scope.findImageForTag = function(tag) {
-      return tag && $scope.imageByDockerId && $scope.imageByDockerId[tag.image_id];
-    };
-
-    $scope.createOrMoveTag = function(image, tagName, opt_invalid) {
-      if (opt_invalid) { return; }
-
-      $scope.creatingTag = true;
-
-      var params = {
-        'repository': $scope.repo.namespace + '/' + $scope.repo.name,
-        'tag': tagName
-      };
-
-      var data = {
-        'image': image.id
-      };
-
-      var errorHandler = ApiService.errorDisplay('Cannot create or move tag', function(resp) {
-        $('#addTagModal').modal('hide');
-      });
-
-      ApiService.changeTagImage(data, params).then(function(resp) {
-        $scope.creatingTag = false;
-        loadViewInfo();
-        $('#addTagModal').modal('hide');
-      }, errorHandler);
-    };
-
-    $scope.deleteTag = function(tagName) {
-      if (!$scope.repo.can_admin) { return; }
-
-      var params = {
-        'repository': namespace + '/' + name,
-        'tag': tagName
-      };
-
-      var errorHandler = ApiService.errorDisplay('Cannot delete tag', function() {
-        $('#confirmdeleteTagModal').modal('hide');
-        $scope.deletingTag = false;
-      });
-
-      $scope.deletingTag = true;
-
-      ApiService.deleteFullTag(null, params).then(function() {
-        loadViewInfo();
-        $('#confirmdeleteTagModal').modal('hide');
-        $scope.deletingTag = false;
-      }, errorHandler);
-    };
-
-    $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.setImage = function(imageId, opt_updateURL) {
-      if (!$scope.images) { return; }
-
-      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(image.id);
-      }
-
-      if (opt_updateURL) {
-        $location.search('tag', null);
-        $location.search('image', imageId.substr(0, 12));
-      }
-
-      $scope.updatePullCommand();
-    };
-
-    $scope.setTag = function(tagName, opt_updateURL) {
-      var repo = $scope.repo;
-      if (!repo) { return; }
-
-      var proposedTag = repo.tags[tagName];
-      if (!proposedTag) {
-        // We must find a good default.
-        for (tagName in repo.tags) {
-          if (!proposedTag || tagName == 'latest') {
-            proposedTag = repo.tags[tagName];
-          }
-        }
-      }
-
-      if (proposedTag) {
-        $scope.currentTag = proposedTag;
-        $scope.currentImage = null;
-
-        if ($scope.tree) {
-          $scope.tree.setTag(proposedTag.name);
-        }
-
-        if (opt_updateURL) {
-          $location.search('image', null);
-          $location.search('tag', proposedTag.name);
-        }
-      }
-
-      if ($scope.currentTag && !repo.tags[$scope.currentTag.name]) {
-        $scope.currentTag = null;
-        $scope.currentImage = null;
-      }
-
-      $scope.updatePullCommand();
-    };
-
-    $scope.getTagCount = function(repo) {
-      if (!repo) { return 0; }
-      var count = 0;
-      for (var tag in repo.tags) {
-        ++count;
-      }
-      return count;
-    };
-
-    $scope.hideTagMenu = function(tagName, clientX, clientY) {
-      $scope.currentMenuTag = null;
-
-      var tagMenu = $("#tagContextMenu");
-      tagMenu.hide();
-    };
-
-    $scope.showTagMenu = function(tagName, clientX, clientY) {
-      if (!$scope.repo.can_admin) { return; }
-
-      $scope.currentMenuTag = tagName;
-
-      var tagMenu = $("#tagContextMenu");
-      tagMenu.css({
-        display: "block",
-        left: clientX,
-        top: clientY
-      });
-
-      tagMenu.on("blur", function() {
-        setTimeout(function() {
-          tagMenu.hide();
-        }, 100); // Needed to allow clicking on menu items.
-      });
-
-      tagMenu.on("click", "a", function() {
-        setTimeout(function() {
-          tagMenu.hide();
-        }, 100); // Needed to allow clicking on menu items.
-      });
-
-      tagMenu[0].focus();
-    };
-
-    var getDefaultTag = function() {
-      if ($scope.repo === undefined) {
-        return undefined;
-      } else if ($scope.repo.tags.hasOwnProperty('latest')) {
-        return $scope.repo.tags['latest'];
-      } else {
-        for (key in $scope.repo.tags) {
-          return $scope.repo.tags[key];
-        }
-      }
-    };
-
-    var forAllTagImages = function(tag, callback) {
-      if (!tag || !$scope.imageByDockerId) { return; }
-
-      var tag_image =  $scope.imageByDockerId[tag.image_id];
-      if (!tag_image) { return; }
-
-      // Callback the tag's image itself.
-      callback(tag_image);
-
-      // Callback any parent images.
-      if (!tag_image.ancestors) { return; }
-      var ancestors = tag_image.ancestors.split('/');
-      for (var i = 0; i < ancestors.length; ++i) {
-        var image = $scope.imageByDockerId[ancestors[i]];
-        if (image) {
-          callback(image);
-        }
-      }
-    };
-
-    var fetchRepository = function() {
-      var params = {'repository': namespace + '/' + name};
-      $rootScope.title = 'Loading Repository...';
-      $scope.repository = ApiService.getRepoAsResource(params).get(function(repo) {
-        // Set the repository object.
-        $scope.repo = repo;
-
-        // Set the default tag.
-        $scope.setTag($routeParams.tag);
-
-        // Set the title of the page.
-        var qualifiedRepoName = namespace + '/' + name;
-        $rootScope.title = qualifiedRepoName;
-        var kind = repo.is_public ? 'public' : 'private';
-        $rootScope.description = jQuery(UtilService.getFirstMarkdownLineAsText(repo.description)).text() ||
-          'Visualization of images and tags for ' + kind + ' Docker repository: ' + qualifiedRepoName;
-
-        // Load the builds for this repository. If none are active it will cancel the poll.
-        startBuildInfoTimer(repo);
-      });
-    };
-
-    var startBuildInfoTimer = function(repo) {
-      if ($scope.interval) { return; }
-
-      getBuildInfo(repo);
-      $scope.interval = setInterval(function() {
-        $scope.$apply(function() { getBuildInfo(repo); });
-      }, 5000);
-
-      $scope.$on("$destroy", function() {
-        cancelBuildInfoTimer();
-      });
-    };
-
-    var cancelBuildInfoTimer = function() {
-      if ($scope.interval) {
-        clearInterval($scope.interval);
-      }
-    };
-
-    var getBuildInfo = function(repo) {
-      var params = {
-        'repository': repo.namespace + '/' + repo.name
-      };
-
-      ApiService.getRepoBuilds(null, params, true).then(function(resp) {
-        // Build a filtered list of the builds that are currently running.
-        var runningBuilds = [];
-        for (var i = 0; i < resp.builds.length; ++i) {
-          var build = resp.builds[i];
-          if (build['phase'] != 'complete' && build['phase'] != 'error') {
-            runningBuilds.push(build);
-          }
-        }
-
-        var existingBuilds = $scope.runningBuilds || [];
-        $scope.runningBuilds = runningBuilds;
-        $scope.buildHistory = resp.builds;
-
-        if (!runningBuilds.length) {
-          // Cancel the build timer.
-          cancelBuildInfoTimer();
-
-          // Mark the repo as no longer building.
-          $scope.repo.is_building = false;
-
-          // Reload the repo information if all of the builds recently finished.
-          if (existingBuilds.length > 0) {
-            loadViewInfo();
-          }
-        }
-      });
-    };
-
-    var listImages = function() {
-      var params = {'repository': namespace + '/' + name};
-      $scope.imageHistory = ApiService.listRepositoryImagesAsResource(params).get(function(resp) {
-        $scope.images = resp.images;
-        $scope.specificImages = [];
-
-        // Build various images for quick lookup of images.
-        $scope.imageByDockerId = {};
-        for (var i = 0; i < $scope.images.length; ++i) {
-          var currentImage = $scope.images[i];
-          $scope.imageByDockerId[currentImage.id] = currentImage;
-        }
-
-        // Dispose of any existing tree.
-        if ($scope.tree) {
-          $scope.tree.dispose();
-        }
-
-        // Create the new tree.
-        var tree = new ImageHistoryTree(namespace, name, resp.images,
-            UtilService.getFirstMarkdownLineAsText, $scope.getTimeSince, ImageMetadataService.getEscapedFormattedCommand);
-
-        $scope.tree = tree.draw('image-history-container');
-        if ($scope.tree) {
-          // If we already have a tag, use it
-          if ($scope.currentTag) {
-            $scope.tree.setTag($scope.currentTag.name);
-          }
-
-          // Listen for changes to the selected tag and image in the tree.
-          $($scope.tree).bind('tagChanged', function(e) {
-            $scope.$apply(function() { $scope.setTag(e.tag, true); });
-          });
-
-          $($scope.tree).bind('imageChanged', function(e) {
-            $scope.$apply(function() { $scope.setImage(e.image.id, true); });
-          });
-
-          $($scope.tree).bind('showTagMenu', function(e) {
-            $scope.$apply(function() { $scope.showTagMenu(e.tag, e.clientX, e.clientY); });
-          });
-
-          $($scope.tree).bind('hideTagMenu', function(e) {
-            $scope.$apply(function() { $scope.hideTagMenu(); });
-          });
-        }
-
-        if ($routeParams.image) {
-          $scope.setImage($routeParams.image);
-        }
-
-        $timeout(function() {
-          $scope.tree.notifyResized();
-        }, 100);
-
-        return resp.images;
-      });
-    };
-
-    var loadViewInfo = function() {
-      fetchRepository();
-      listImages();
-    };
-
-    // Fetch the repository itself as well as the image history.
-    loadViewInfo();
-  }
 })();

static/js/services/ui-service.js

@@ -2,14 +2,16 @@
  * Service which provides helper methods for performing some simple UI operations.
  */
 angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$location', function($timeout, $rootScope, $location) {
-  var CheckStateController = function(items, itemKey, opt_checked) {
+  var CheckStateController = function(items, itemKey) {
     this.items = items;
-    this.itemKey = itemKey;
+    this.checked = [];
-    this.checked = opt_checked || [];
-    this.checkedMap = {};
-    this.listeners_ = [];
 
-    this.buildMap_();
+    this.allItems_ = items;
+    this.allCheckedMap_ = {};
+
+    this.itemKey_ = itemKey;
+    this.listeners_ = [];
+    this.page_ = null;
   };
 
   CheckStateController.prototype.listen = function(callback) {
@@ -17,7 +19,7 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
   };
 
   CheckStateController.prototype.isChecked = function(item) {
-    return !!this.checkedMap[item[this.itemKey]];
+    return !!this.allCheckedMap_[item[this.itemKey_]];
   };
 
   CheckStateController.prototype.toggleItem = function(item) {
@@ -29,38 +31,59 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
   };
 
   CheckStateController.prototype.toggleItems = function() {
+    this.updateMap_(this.checked, false);
+
     if (this.checked.length) {
       this.checked = [];
-      this.checkedMap = {};
     } else {
       this.checked = this.items.slice();
-      this.buildMap_();
     }
+
+    this.updateMap_(this.checked, true);
     this.callListeners_();
   };
 
-  CheckStateController.prototype.setChecked = function(items) {
+  CheckStateController.prototype.setPage = function(page, pageSize) {
-    this.checked = items.slice();
+    this.items = this.allItems_.slice(page * pageSize, (page + 1) * pageSize);
-    this.buildMap_();
+    this.rebuildCheckedList_();
   };
 
-  CheckStateController.prototype.buildMap_ = function() {
+  CheckStateController.prototype.setChecked = function(items) {
+    this.allCheckedMap_ = {};
+    this.updateMap_(items, true);
+    this.rebuildCheckedList_();
+  };
+
+  CheckStateController.prototype.rebuildCheckedList_ = function() {
     var that = this;
-    this.checked.forEach(function(item) {
+    this.checked = [];
+    this.items.forEach(function(item) {
+      if (that.allCheckedMap_[item[that.itemKey_]]) {
+        that.checked.push(item);
+      }
+    });
+
+    this.callListeners_();
+  };
+
+  CheckStateController.prototype.updateMap_ = function(items, is_checked) {
+    var that = this;
+    items.forEach(function(item) {
       if (item == null) { return; }
-      that.checkedMap[item[that.itemKey]] = true;
+      that.allCheckedMap_[item[that.itemKey_]] = is_checked;
     });
   };
 
   CheckStateController.prototype.checkByFilter = function(filter) {
+    this.updateMap_(this.checked, false);
     this.checked = $.grep(this.items, filter);
-    this.buildMap_();
+    this.updateMap_(this.checked, true);
     this.callListeners_();
   };
 
   CheckStateController.prototype.checkItem = function(item) {
     this.checked.push(item);
-    this.checkedMap[item[this.itemKey]] = true;
+    this.allCheckedMap_[item[this.itemKey_]] = true;
     this.callListeners_();
   };
 
@@ -68,17 +91,30 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
     this.checked = $.grep(this.checked, function(cItem) {
       return cItem != item;
     });
-    this.checkedMap[item[this.itemKey]] = false;
+
+    this.allCheckedMap_[item[this.itemKey_]] = false;
     this.callListeners_();
   };
 
   CheckStateController.prototype.callListeners_ = function() {
-    var checked = this.checked;
+    var that = this;
+    var allCheckedMap = this.allCheckedMap_;
+    var allChecked = [];
+
+    this.allItems_.forEach(function(item) {
+      var key = item[that.itemKey_];
+      if (!!allCheckedMap[key]) {
+        allChecked.push(item);
+      }
+    });
+
     this.listeners_.map(function(listener) {
-      listener(checked);
+      listener(allChecked, that.checked);
     });
   };
 
+  //////////////////////////////////////////////////////////////////////////////////////
+
   var uiService = {};
 
   uiService.hidePopover = function(elem) {