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

13
endpoints/api/image.py
View file

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

2
static/directives/image-info-sidebar.html
View file

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

9
static/directives/multiselect-dropdown.html
View file

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

6
static/directives/repo-view/repo-panel-changes.html
View file

@ -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'">

12
static/directives/repo-view/repo-panel-tags.html
View file

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

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) {