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

Rename image-link into manifest-link, and change to typescript, in prep for the UI changes to link to manifests

Browse source
This commit is contained in:
Joseph Schorr 2018-03-28 13:56:09 -04:00
parent 58c2ddac98
commit d41dcaae23
12 changed files with 122 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

47
static/js/directives/ui/image-link.js
View file

@ -1,47 +0,0 @@
/**
* An element which displays a link to a repository image.
*/
angular.module('quay').directive('imageLink', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/image-link.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'repository': '=repository',
'imageId': '=imageId',
'manifestDigest': '=?manifestDigest'
},
controller: function($scope, $element, $timeout) {
$scope.showingCopyBox = false;
$scope.hasSHA256 = function(digest) {
return digest && digest.indexOf('sha256:') == 0;
};
$scope.getShortDigest = function(digest) {
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;
});

37
static/js/directives/ui/manifest-link/manifest-link.component.html Normal file
View file

@ -0,0 +1,37 @@
<span class="manifest-link">
<span class="id-label" ng-if="!$ctrl.hasSHA256($ctrl.manifestDigest)"
data-title="The Docker V1 ID for this image. This ID is not content addressable nor is it stable across pulls."
data-container="body"
ng-click="$ctrl.showCopyBox()"
bs-tooltip>V1ID</span>
<span class="id-label cas" ng-if="$ctrl.hasSHA256($ctrl.manifestDigest)"
data-title="The content-addressable SHA256 hash of this tag."
data-container="body"
ng-click="$ctrl.showCopyBox()"
bs-tooltip>SHA256</span>
<a bo-href-i="/repository/{{ $ctrl.repository.namespace }}/{{ $ctrl.repository.name }}/image/{{ $ctrl.imageId }}"
class="image-link-element" bindonce>
<span ng-if="!$ctrl.hasSHA256($ctrl.manifestDigest)">{{ $ctrl.imageId.substr(0, 12) }}</span>
<span ng-if="$ctrl.hasSHA256($ctrl.manifestDigest)">{{ $ctrl.getShortDigest($ctrl.manifestDigest) }}</span>
</a>
<div class="modal fade co-dialog" ng-if="$ctrl.showingCopyBox">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="$ctrl.hideCopyBox()"
aria-hidden="true">&times;</button>
<h4 class="modal-title"><span ng-if="$ctrl.hasSHA256($ctrl.manifestDigest)">Manifest SHA256</span><span ng-if="!$ctrl.hasSHA256($ctrl.manifestDigest)">V1 ID</span></h4>
</div>
<div class="modal-body">
<div class="copy-box" hovering-message="true" value="$ctrl.hasSHA256($ctrl.manifestDigest) ? $ctrl.manifestDigest : $ctrl.imageId"></div>
</div>
<div class="modal-footer" ng-show="!working">
<button type="button" class="btn btn-default" ng-click="$ctrl.hideCopyBox()">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</span>

48
static/js/directives/ui/manifest-link/manifest-link.component.ts Normal file
View file

@ -0,0 +1,48 @@
import { Input, Component, Inject } from 'ng-metadata/core';
import { Repository } from '../../../types/common.types';
/**
* A component that links to a manifest view.
*/
@Component({
selector: 'manifest-link',
templateUrl: '/static/js/directives/ui/manifest-link/manifest-link.component.html'
})
export class ManifestLinkComponent {
@Input('<') public repository: Repository;
@Input('<') public manifestDigest: string;
@Input('<') public imageId: string;
private showingCopyBox: boolean = false;
constructor(@Inject('$timeout') private $timeout, @Inject('$element') private $element) {
}
private hasSHA256(digest: string) {
return digest && digest.indexOf('sha256:') == 0;
}
private getShortDigest(digest: string) {
return digest.substr('sha256:'.length).substr(0, 12);
}
private showCopyBox() {
this.showingCopyBox = true;
// Necessary to wait for digest cycle to complete.
this.$timeout(() => {
this.$element.find('.modal').modal('show');
}, 10);
};
private hideCopyBox() {
this.$element.find('.modal').modal('hide');
// Wait for the modal to hide before removing from the DOM.
this.$timeout(() => {
this.showingCopyBox = false;
}, 10);
};
}