Add ability to copy the full SHA256 or V1ID for an image
Clicking the little (SHA256) or (V1ID) bubble next to the ID will now show a dialog with a copy box.
This commit is contained in:
parent
514cd42eec
commit
86e4539c04
2 changed files with 54 additions and 14 deletions
|
@ -1,17 +1,37 @@
|
||||||
<span>
|
<span>
|
||||||
<a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ imageId }}"
|
<span class="id-label" ng-if="!hasSHA256(manifestDigest)"
|
||||||
class="image-link-element" bindonce>
|
data-title="The Docker V1 ID for this image. This ID is not content addressable nor is it stable across pulls."
|
||||||
<span class="id-label" ng-if="!hasSHA256(manifestDigest)"
|
data-container="body"
|
||||||
data-title="The Docker V1 ID for this image. This ID is not content addressable nor is it stable across pulls."
|
ng-click="showCopyBox()"
|
||||||
data-container="body"
|
bs-tooltip>V1ID</span>
|
||||||
bs-tooltip>V1ID</span>
|
|
||||||
|
|
||||||
<span class="id-label cas" ng-if="hasSHA256(manifestDigest)"
|
<span class="id-label cas" ng-if="hasSHA256(manifestDigest)"
|
||||||
data-title="The content-addressable SHA256 hash of this tag."
|
data-title="The content-addressable SHA256 hash of this tag."
|
||||||
data-container="body"
|
data-container="body"
|
||||||
bs-tooltip>SHA256</span>
|
ng-click="showCopyBox()"
|
||||||
|
bs-tooltip>SHA256</span>
|
||||||
|
|
||||||
<span ng-if="!hasSHA256(manifestDigest)">{{ imageId.substr(0, 12) }}</span>
|
<a bo-href-i="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ imageId }}"
|
||||||
<span ng-if="hasSHA256(manifestDigest)">{{ getShortDigest(manifestDigest) }}</span>
|
class="image-link-element" bindonce>
|
||||||
</a>
|
<span ng-if="!hasSHA256(manifestDigest)">{{ imageId.substr(0, 12) }}</span>
|
||||||
|
<span ng-if="hasSHA256(manifestDigest)">{{ getShortDigest(manifestDigest) }}</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="modal fade co-dialog" ng-if="showingCopyBox">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" ng-click="hideCopyBox()"
|
||||||
|
aria-hidden="true">×</button>
|
||||||
|
<h4 class="modal-title"><span ng-if="hasSHA256(manifestDigest)">Manifest SHA256</span><span ng-if="!hasSHA256(manifestDigest)">V1 ID</span></h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="copy-box" hovering-message="true" value="hasSHA256(manifestDigest) ? manifestDigest : imageId"></div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer" ng-show="!working">
|
||||||
|
<button type="button" class="btn btn-default" ng-click="hideCopyBox()">Close</button>
|
||||||
|
</div>
|
||||||
|
</div><!-- /.modal-content -->
|
||||||
|
</div><!-- /.modal-dialog -->
|
||||||
|
</div><!-- /.modal -->
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -13,7 +13,9 @@ angular.module('quay').directive('imageLink', function () {
|
||||||
'imageId': '=imageId',
|
'imageId': '=imageId',
|
||||||
'manifestDigest': '=?manifestDigest'
|
'manifestDigest': '=?manifestDigest'
|
||||||
},
|
},
|
||||||
controller: function($scope, $element) {
|
controller: function($scope, $element, $timeout) {
|
||||||
|
$scope.showingCopyBox = false;
|
||||||
|
|
||||||
$scope.hasSHA256 = function(digest) {
|
$scope.hasSHA256 = function(digest) {
|
||||||
return digest && digest.indexOf('sha256:') == 0;
|
return digest && digest.indexOf('sha256:') == 0;
|
||||||
};
|
};
|
||||||
|
@ -21,6 +23,24 @@ angular.module('quay').directive('imageLink', function () {
|
||||||
$scope.getShortDigest = function(digest) {
|
$scope.getShortDigest = function(digest) {
|
||||||
return digest.substr('sha256:'.length).substr(0, 12);
|
return digest.substr('sha256:'.length).substr(0, 12);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$scope.showCopyBox = function() {
|
||||||
|
$scope.showingCopyBox = true;
|
||||||
|
|
||||||
|
// Necessary to wait for digest cycle to complete.
|
||||||
|
$timeout(function() {
|
||||||
|
$element.find('.modal').modal('show');
|
||||||
|
}, 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.hideCopyBox = function() {
|
||||||
|
$element.find('.modal').modal('hide');
|
||||||
|
|
||||||
|
// Wait for the modal to hide before removing from the DOM.
|
||||||
|
$timeout(function() {
|
||||||
|
$scope.showingCopyBox = false;
|
||||||
|
}, 10);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
return directiveDefinitionObject;
|
return directiveDefinitionObject;
|
||||||
|
|
Reference in a new issue