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
This commit is contained in:
Joseph Schorr 2015-07-31 16:31:29 -04:00
parent 55a0b83ddf
commit 4160b720f9
9 changed files with 125 additions and 54 deletions

View file

@ -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.