UI and API improvements for working with large repositories

- Change the tag check bar to only select the current page (by default), but allow for selecting ALL tags
- Limit the number of tags compared in the visualization view to 10
- Fix the multiselect dropdown to limit itself to 10 items selected
- Remove saving the selected tags in the URL, as it is too slow and overloads the URLs in Chrome when there are 1000+ tags selected
- Change the images API to not return locations: By skipping the extra join and looping, it made the /images API call 10x faster (in hand tests)

Fixes #292
Fixes #293

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.listen(function(checked) {
-          $scope.selectedTags = checked.map(function(tag_info) {
+        $scope.checkedTags = UIService.createCheckStateController(ordered, 'name');
+        $scope.checkedTags.setPage($scope.options.page, $scope.tagsPerPage);
+
+        $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;