Implement updated UI for displaying the signing status of a tag, now that we support multiple delegations
The icon now represents the status of the multiple delegations, and we show each delegation in the "Expanded" view.
This commit is contained in:
Joseph Schorr
parent
7c6196f78a
commit
c33ed8f597
9 changed files with 368 additions and 99 deletions
|
|
@ -39,7 +39,7 @@ angular.module('quay').directive('repoPanelTags', function () {
|
|||
$scope.labelCache = {};
|
||||
|
||||
$scope.imageVulnerabilities = {};
|
||||
$scope.repoSignatureInfo = null;
|
||||
$scope.repoDelegationsInfo = null;
|
||||
|
||||
$scope.defcon1 = {};
|
||||
$scope.hasDefcon1 = false;
|
||||
|
|
@ -50,16 +50,16 @@ angular.module('quay').directive('repoPanelTags', function () {
|
|||
}
|
||||
|
||||
$scope.repoSignatureError = false;
|
||||
$scope.repoSignatureInfo = null;
|
||||
$scope.repoDelegationsInfo = null;
|
||||
|
||||
var params = {
|
||||
'repository': $scope.repository.namespace + '/' + $scope.repository.name
|
||||
};
|
||||
|
||||
ApiService.getRepoSignatures(null, params).then(function(resp) {
|
||||
$scope.repoSignatureInfo = resp;
|
||||
$scope.repoDelegationsInfo = resp;
|
||||
}, function() {
|
||||
$scope.repoSignatureInfo = {'error': true};
|
||||
$scope.repoDelegationsInfo = {'error': true};
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<span class="tag-signing-display-element">
|
||||
<span ng-switch on="$ctrl.signingStatus($ctrl.tag, $ctrl.signatures)">
|
||||
<span class="tag-signing-display-element" ng-class="{'extended': !$ctrl.compact}">
|
||||
<span class="indicator" ng-switch on="$ctrl.signingStatus($ctrl.tag, $ctrl.delegations)">
|
||||
<!-- Loading -->
|
||||
<span ng-switch-when="loading">
|
||||
<span class="cor-loader-inline"></span>
|
||||
|
|
@ -17,33 +17,80 @@
|
|||
<i class="fa shield-icon ci-shield-none"></i>
|
||||
</span>
|
||||
|
||||
<!-- Signature Valid -->
|
||||
<span class="signing-valid" ng-switch-when="valid-signature">
|
||||
<span ng-switch on="$ctrl.expirationStatus($ctrl.tag, $ctrl.signatures)">
|
||||
<!-- But expired -->
|
||||
<span class="expired" ng-switch-when="expired"
|
||||
data-title="This tag has a matching, but expired signature" bs-tooltip>
|
||||
<i class="fa shield-icon ci-shield-invalid-outline"></i>
|
||||
</span>
|
||||
<!-- Releases + all other targets signed -->
|
||||
<span class="signing-valid okay-release" ng-switch-when="all-signed"
|
||||
data-title="The tag has valid and matching signatures" bs-tooltip>
|
||||
<i class="fa shield-icon ci-shield-check-full"></i>
|
||||
|
||||
<!-- Expires soon -->
|
||||
<span class="expires-soon" ng-switch-when="expires-soon"
|
||||
data-title="This tag has a valid and matching signature, but it is expiring soon on {{ $ctrl.signatures.expiration }}" bs-tooltip>
|
||||
<i class="fa shield-icon ci-shield-check-outline"></i>
|
||||
</span>
|
||||
|
||||
<!-- Okay -->
|
||||
<span class="okay" ng-switch-when="okay"
|
||||
data-title="This tag has a valid and matching signature" bs-tooltip>
|
||||
<i class="fa shield-icon ci-shield-check-outline"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasExpiringSoon" class="expiring-soon"></span>
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasExpired" class="expired"></span>
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasInvalid" class="invalid"></span>
|
||||
</span>
|
||||
|
||||
<!-- Signature Invalid -->
|
||||
<span class="signing-invalid" ng-switch-when="invalid-signature"
|
||||
data-title="The signed digest for this tag does not match the one pushed.<br><br>Signed: {{ this.signedDigest.substr(0, 12) }}<br>Pushed: {{ this.pushedDigest.substr(0, 12) }}" data-html="true" bs-tooltip>
|
||||
<!-- Releases target signed -->
|
||||
<span class="signing-valid okay-release" ng-switch-when="release-signed"
|
||||
data-title="The tag has a valid and matching default signature" bs-tooltip>
|
||||
<i class="fa shield-icon ci-shield-check-outline"></i>
|
||||
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasExpiringSoon" class="expiring-soon"></span>
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasExpired" class="expired"></span>
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasInvalid" class="invalid"></span>
|
||||
</span>
|
||||
|
||||
<!-- Non-releases target signed -->
|
||||
<span class="signing-valid okay" ng-switch-when="non-release-signed"
|
||||
data-title="The tag has valid and matching non-default signatures" bs-tooltip>
|
||||
<i class="fa shield-icon ci-shield-check-outline"></i>
|
||||
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasExpiringSoon" class="expiring-soon"></span>
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasExpired" class="expired"></span>
|
||||
<span ng-if="$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).hasInvalid" class="invalid"></span>
|
||||
</span>
|
||||
|
||||
<!-- Non-releases target signed -->
|
||||
<span class="signing-valid partial-okay" ng-switch-when="one-valid-signed"
|
||||
data-title="The tag has at least one valid and matching non-default signature, but some are invalid or have expired" bs-tooltip>
|
||||
<i class="fa shield-icon ci-shield-check-outline"></i>
|
||||
</span>
|
||||
|
||||
<!-- All signatures are invalid -->
|
||||
<span class="signing-invalid" ng-switch-when="invalid-signed"
|
||||
data-title="There are no valid or non-expired signatures for this tag" bs-tooltip>
|
||||
<i class="fa shield-icon ci-shield-invalid-outline"></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- Delegations -->
|
||||
<div class="delegations" ng-if="!$ctrl.compact && !$ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).delegations.length">
|
||||
This tag has not been signed
|
||||
</div>
|
||||
<table class="delegations" ng-if="!$ctrl.compact && $ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).delegations.length">
|
||||
<tr ng-repeat="delegation in $ctrl.getSigningInfo($ctrl.tag, $ctrl.delegations).delegations">
|
||||
<td>
|
||||
<span class="delegation" ng-class="{'okay': delegation.hasMatchingHash && !delegation.isExpired && !delegation.isExpiringSoon, 'warning': delegation.hasMatchingHash && delegation.isExpiringSoon, 'error': !delegation.hasMatchingHash || delegation.isExpired}">
|
||||
<span class="delegation-name">{{ delegation.delegationName.substr('targets/'.length) }}</span>
|
||||
</span>
|
||||
<div class="delegation-info visible-xs" ng-if="!delegation.hasMatchingHash || delegation.isExpiringSoon || delegation.isExpired">
|
||||
<span class="failure-reason" ng-if="delegation.hasMatchingHash && delegation.isExpiringSoon">
|
||||
Expiring soon: {{ delegation.expiration.format("YYYY-MM-DD HH:mm:ss") }}
|
||||
</span>
|
||||
<span class="failure-reason" ng-if="delegation.hasMatchingHash && delegation.isExpired">Signature expired</span>
|
||||
<span class="failure-reason" ng-if="!delegation.hasMatchingHash">
|
||||
Signature has different hash: {{ delegation.delegationHash.substr(0, 12) }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden-xs">
|
||||
<span class="delegation-info" ng-if="!delegation.hasMatchingHash || delegation.isExpiringSoon || delegation.isExpired">
|
||||
<span class="failure-reason" ng-if="delegation.hasMatchingHash && delegation.isExpiringSoon">
|
||||
Expiring soon: {{ delegation.expiration.format("YYYY-MM-DD HH:mm:ss") }}
|
||||
</span>
|
||||
<span class="failure-reason" ng-if="delegation.hasMatchingHash && delegation.isExpired">Signature expired</span>
|
||||
<span class="failure-reason" ng-if="!delegation.hasMatchingHash">
|
||||
Signature has different hash: {{ delegation.delegationHash.substr(0, 12) }}
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</span>
|
||||
|
|
@ -1,7 +1,27 @@
|
|||
import { Input, Component, Inject } from 'ng-metadata/core';
|
||||
import { ApostilleSignatureDocument, ApostilleTagDocument } from '../../../types/common.types';
|
||||
import { ApostilleDelegationsSet, ApostilleSignatureDocument, ApostilleTagDocument } from '../../../types/common.types';
|
||||
import * as moment from "moment";
|
||||
|
||||
type tagSigningInfo = {
|
||||
delegations: delegationInfo[];
|
||||
delegationsByName: {[delegationName: string]: delegationInfo};
|
||||
|
||||
hasExpiringSoon: boolean;
|
||||
hasExpired: boolean;
|
||||
hasInvalid: boolean;
|
||||
}
|
||||
|
||||
type delegationInfo = {
|
||||
delegationName: string;
|
||||
delegationHash: string;
|
||||
expiration: moment.Moment;
|
||||
hasMatchingHash: boolean;
|
||||
isExpired: boolean;
|
||||
isExpiringSoon: boolean
|
||||
};
|
||||
|
||||
var RELEASES = 'targets/releases';
|
||||
|
||||
/**
|
||||
* A component that displays the signing status of a tag in the repository view.
|
||||
*/
|
||||
|
|
@ -10,11 +30,11 @@ import * as moment from "moment";
|
|||
templateUrl: '/static/js/directives/ui/tag-signing-display/tag-signing-display.component.html',
|
||||
})
|
||||
export class TagSigningDisplayComponent {
|
||||
@Input('<') public compact: boolean;
|
||||
@Input('<') public tag: any;
|
||||
@Input('<') public signatures: ApostilleSignatureDocument;
|
||||
@Input('<') public delegations: ApostilleDelegationsSet;
|
||||
|
||||
private signedDigest: string;
|
||||
private pushedDigest: string;
|
||||
private cachedSigningInfo: tagSigningInfo | null = null;
|
||||
|
||||
constructor(@Inject("$sanitize") private $sanitize: ng.sanitize.ISanitizeService) {}
|
||||
|
||||
|
|
@ -30,49 +50,115 @@ export class TagSigningDisplayComponent {
|
|||
return hexString;
|
||||
}
|
||||
|
||||
private expirationStatus(tag: any, signatures: ApostilleSignatureDocument): string {
|
||||
if (!signatures || !signatures.expiration) {
|
||||
return 'unknown';
|
||||
}
|
||||
private buildDelegationInfo(tag: any, delegationName: string, delegation: ApostilleSignatureDocument): delegationInfo {
|
||||
var digest_without_prefix = tag.manifest_digest.substr('sha256:'.length);
|
||||
var hex_signature = this.base64ToHex(delegation.targets[tag.name].hashes['sha256']);
|
||||
|
||||
var expires = moment(signatures.expiration);
|
||||
var expires = moment(delegation.expiration);
|
||||
var now = moment();
|
||||
|
||||
if (expires.isSameOrBefore(now)) {
|
||||
return 'expired';
|
||||
}
|
||||
|
||||
var withOneWeek = moment().add('1', 'w');
|
||||
if (expires.isSameOrBefore(withOneWeek)) {
|
||||
return 'expires-soon';
|
||||
}
|
||||
|
||||
return 'okay';
|
||||
return {
|
||||
'delegationName': delegationName,
|
||||
'hasMatchingHash': digest_without_prefix == hex_signature,
|
||||
'expiration': expires,
|
||||
'delegationHash': hex_signature,
|
||||
'isExpired': expires.isSameOrBefore(now),
|
||||
'isExpiringSoon': !expires.isSameOrBefore(now) && expires.isSameOrBefore(withOneWeek),
|
||||
}
|
||||
}
|
||||
|
||||
private signingStatus(tag: any, signatures: ApostilleSignatureDocument): string {
|
||||
if (!tag || !signatures) {
|
||||
private buildTagSigningInfo(tag: any, delegationSet: ApostilleDelegationsSet): tagSigningInfo {
|
||||
var info = {
|
||||
'delegations': [],
|
||||
'delegationsByName': {},
|
||||
'hasExpired': false,
|
||||
'hasExpiringSoon': false,
|
||||
'hasInvalid': false,
|
||||
}
|
||||
|
||||
// Find all delegations containing the tag as a target.
|
||||
Object.keys(delegationSet.delegations).forEach((delegationName) => {
|
||||
var delegation = delegationSet.delegations[delegationName];
|
||||
if (delegation.targets[tag.name]) {
|
||||
var delegationInfo = this.buildDelegationInfo(tag, delegationName, delegation)
|
||||
info.delegations.push(delegationInfo);
|
||||
info.delegationsByName[delegationName] = delegationInfo;
|
||||
|
||||
if (delegationInfo.isExpired) {
|
||||
info.hasExpired = true;
|
||||
}
|
||||
|
||||
if (delegationInfo.isExpiringSoon) {
|
||||
info.hasExpiringSoon = true;
|
||||
}
|
||||
|
||||
if (!delegationInfo.hasMatchingHash) {
|
||||
info.hasInvalid = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return info;
|
||||
}
|
||||
|
||||
private getSigningInfo(tag: any, delegationSet: ApostilleDelegationsSet): tagSigningInfo {
|
||||
if (!this.cachedSigningInfo) {
|
||||
this.cachedSigningInfo = this.buildTagSigningInfo(tag, delegationSet);
|
||||
}
|
||||
return this.cachedSigningInfo;
|
||||
}
|
||||
|
||||
private signingStatus(tag: any, delegationSet: ApostilleDelegationsSet): string {
|
||||
if (!tag || !delegationSet) {
|
||||
return 'loading';
|
||||
}
|
||||
|
||||
if (signatures.error || !signatures.tags) {
|
||||
return 'error';
|
||||
}
|
||||
|
||||
var tag_info = signatures.tags[tag.name];
|
||||
if (!tag_info || !tag.manifest_digest) {
|
||||
if (!tag.manifest_digest) {
|
||||
return 'not-signed';
|
||||
}
|
||||
|
||||
var digest_without_prefix = tag.manifest_digest.substr('sha256:'.length);
|
||||
var hex_signature = this.base64ToHex(tag_info.hashes['sha256']);
|
||||
|
||||
if (hex_signature == digest_without_prefix) {
|
||||
return 'valid-signature';
|
||||
} else {
|
||||
this.signedDigest = this.$sanitize(hex_signature);
|
||||
this.pushedDigest = this.$sanitize(digest_without_prefix);
|
||||
return 'invaid-signature';
|
||||
if (delegationSet.error) {
|
||||
return 'error';
|
||||
}
|
||||
|
||||
// Check if signed at all.
|
||||
var signingInfo = this.getSigningInfo(tag, delegationSet);
|
||||
if (!signingInfo.delegations.length) {
|
||||
return 'not-signed';
|
||||
}
|
||||
|
||||
// Check if all delegations are signed and valid.
|
||||
var allReleasesValid = true;
|
||||
var oneReleaseValid = false;
|
||||
|
||||
this.cachedSigningInfo.delegations.forEach(function(delegation) {
|
||||
var isValid = delegation.hasMatchingHash && !delegation.isExpired;
|
||||
if (isValid) {
|
||||
oneReleaseValid = true;
|
||||
}
|
||||
|
||||
allReleasesValid = allReleasesValid && isValid;
|
||||
});
|
||||
|
||||
// Check if the special RELEASES target is signed and valid.
|
||||
var releasesDelegation = this.cachedSigningInfo.delegationsByName[RELEASES];
|
||||
if (releasesDelegation && releasesDelegation.hasMatchingHash && !releasesDelegation.isExpired) {
|
||||
if (allReleasesValid && this.cachedSigningInfo.delegations.length > 1) {
|
||||
return 'all-signed';
|
||||
} else {
|
||||
return 'release-signed';
|
||||
}
|
||||
}
|
||||
|
||||
if (allReleasesValid) {
|
||||
return 'non-release-signed';
|
||||
}
|
||||
|
||||
if (oneReleaseValid) {
|
||||
return 'one-valid-signed';
|
||||
}
|
||||
|
||||
return 'invalid-signed';
|
||||
}
|
||||
}
|
||||
|
|
@ -105,6 +105,16 @@ export type Trigger = {
|
|||
};
|
||||
|
||||
|
||||
/**
|
||||
* Represents a set of apostille delegations.
|
||||
*/
|
||||
export type ApostilleDelegationsSet = {
|
||||
delegations: {[delegationName: string]: ApostilleSignatureDocument};
|
||||
|
||||
// The error that occurred, if any.
|
||||
error: string | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Represents an apostille signature document, with extra expiration information.
|
||||
*/
|
||||
|
|
@ -113,10 +123,7 @@ export type ApostilleSignatureDocument = {
|
|||
expiration: string
|
||||
|
||||
// Object of information for each tag.
|
||||
tags: {string: ApostilleTagDocument}
|
||||
|
||||
// If true, an error occurred while trying to load this document.
|
||||
error: boolean
|
||||
targets: {string: ApostilleTagDocument}
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
Reference in a new issue