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

Fix UI rendering issue when creating/deleting tags from the UI (#3269)

Browse source 
### Description of Changes

Tag operations in UI would not be rendered properly when using the paginated tags endpoint.
When a user would create/delete a tag from the repo-panel-tags, `digest` would be called. This caused the `$scope.repository.tags` to be removed.

To fix this:
* Bind the tags directly to the scope instead of the repository
* Change references to scope.repository.tags to use scope.repositoryTags

---
This commit is contained in:
Kenny Lee Sin Cheong 2018-10-23 13:26:40 -04:00 • committed by GitHub
parent bb01e08d44
commit 8b25d5b77b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 69 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

57
static/js/directives/ui/tag-operations-dialog.js
View file

@ -11,6 +11,7 @@ angular.module('quay').directive('tagOperationsDialog', function () {
restrict: 'C',
scope: {
'repository': '=repository',
'repositoryTags': '=repositoryTags',
'actionHandler': '=actionHandler',
'imageLoader': '=imageLoader',
'tagChanged': '&tagChanged',
@ -20,22 +21,44 @@ angular.module('quay').directive('tagOperationsDialog', function () {
$scope.addingTag = false;
$scope.changeTagsExpirationInfo = null;
var markChanged = function(added, removed) {
// Reload the repository.
$scope.repository.get().then(function(resp) {
$scope.repository = resp;
$scope.imageLoader.reset()
var reloadTags = function(page, tags, added, removed) {
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'limit': 100,
'page': page,
'onlyActiveTags': true
};
// Note: We need the timeout here so that Angular can $digest the images change
// on the parent scope before the tagChanged callback occurs.
$timeout(function() {
$scope.tagChanged({
'data': { 'added': added, 'removed': removed }
});
}, 1);
ApiService.listRepoTags(null, params).then(function(resp) {
var newTags = resp.tags.reduce(function(result, item, index, array) {
var tag_name = item['name'];
result[tag_name] = item;
return result;
}, {});
$.extend(tags, newTags);
if (resp.has_additional) {
loadPaginatedRepositoryTags(page + 1, tags, added, removed);
} else {
$scope.repositoryTags = tags;
$scope.imageLoader.reset();
$timeout(function() {
$scope.tagChanged({
'data': { 'added': added, 'removed': removed }
});
}, 1);
}
});
};
var markChanged = function(added, removed) {
// Reload the tags
tags = {};
reloadTags(1, tags, added, removed);
};
$scope.alertOnTagOpsDisabled = function() {
if ($scope.repository.tag_operations_disabled) {
$('#tagOperationsDisabledModal').modal('show');
@ -46,17 +69,17 @@ angular.module('quay').directive('tagOperationsDialog', function () {
};
$scope.isAnotherImageTag = function(image, tag) {
if (!$scope.repository.tags) { return; }
if (!$scope.repositoryTags) { return; }
var found = $scope.repository.tags[tag];
var found = $scope.repositoryTags[tag];
if (found == null) { return false; }
return found.image_id != image;
};
$scope.isOwnedTag = function(image, tag) {
if (!$scope.repository.tags) { return; }
if (!$scope.repositoryTags) { return; }
var found = $scope.repository.tags[tag];
var found = $scope.repositoryTags[tag];
if (found == null) { return false; }
return found.image_id == image;
};
@ -227,7 +250,7 @@ angular.module('quay').directive('tagOperationsDialog', function () {
actions.push({
'action': 'delete',
'label': label
})
});
}
});

10
static/js/directives/ui/tag-specific-image-view.js
View file

@ -11,6 +11,7 @@ angular.module('quay').directive('tagSpecificImagesView', function () {
restrict: 'C',
scope: {
'repository': '=repository',
'repositoryTags': '=repositoryTags',
'tag': '=tag',
'imageLoader': '=imageLoader',
'imageCutoff': '=imageCutoff'
@ -22,7 +23,7 @@ angular.module('quay').directive('tagSpecificImagesView', function () {
$scope.getImageListingClasses = function(image) {
var classes = '';
if (!$scope.repository) {
if (!$scope.repositoryTags) {
return '';
}
@ -30,7 +31,7 @@ angular.module('quay').directive('tagSpecificImagesView', function () {
classes += 'child ';
}
var currentTag = $scope.repository.tags[$scope.tag];
var currentTag = $scope.repositoryTags[$scope.tag];
if (currentTag && image.id == currentTag.image_id) {
classes += 'tag-image ';
}
@ -39,12 +40,12 @@ angular.module('quay').directive('tagSpecificImagesView', function () {
};
var refresh = function() {
if (!$scope.repository || !$scope.tag || !$scope.imageLoader) {
if (!$scope.repositoryTags || !$scope.tag || !$scope.imageLoader) {
$scope.tagSpecificImages = [];
return;
}
var tag = $scope.repository.tags[$scope.tag];
var tag = $scope.repositoryTags[$scope.tag];
if (!tag) {
$scope.tagSpecificImages = [];
return;
@ -58,6 +59,7 @@ angular.module('quay').directive('tagSpecificImagesView', function () {
};
$scope.$watch('repository', refresh);
$scope.$watch('repositoryTags', refresh);
$scope.$watch('tag', refresh);
}
};