Merge pull request #296 from coreos-inc/delmanytags
UI performance improvements for large repositories
This commit is contained in:
Jimmy Zelinskie
commit
da49d0a0fc
9 changed files with 125 additions and 589 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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'">
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
})();
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Reference in a new issue