vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

UI and API improvements for working with large repositories

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

15
static/js/directives/repo-view/repo-panel-changes.js
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.

33
static/js/directives/repo-view/repo-panel-tags.js
View file

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

13
static/js/pages/repo-view.js
View file

@ -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; }

76
static/js/services/ui-service.js
View file

@ -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 = opt_checked || [];
this.checkedMap = {};
this.listeners_ = [];
this.checked = [];
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) {
this.checked = items.slice();
this.buildMap_();
CheckStateController.prototype.setPage = function(page, pageSize) {
this.items = this.allItems_.slice(page * pageSize, (page + 1) * pageSize);
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) {