Add UI for viewing and changing trust setting in repo

This commit is contained in:
Joseph Schorr 2017-04-17 19:17:00 -04:00
parent dec14647a8
commit 14054a237a
7 changed files with 161 additions and 23 deletions

View file

@ -0,0 +1,16 @@
.repository-signing-config-element td {
vertical-align: top;
}
.repository-signing-config-element .status-icon {
font-size: 48px;
margin-right: 10px;
}
.repository-signing-config-element .status-icon.ci-shield-check-outline {
color: #2FC98E;
}
.repository-signing-config-element .status-icon.ci-shield-none {
color: #9B9B9B;
}

View file

@ -18,6 +18,11 @@
</div>
</div>
<!-- Signing and Trust -->
<div ng-if="repository.kind == 'image'">
<repository-signing-config repository="repository"></repository-signing-config>
</div>
<!-- Events and Notifications -->
<div ng-if="repository.kind == 'image'">
<div class="repository-events-table" repository="repository"

View file

@ -0,0 +1,65 @@
<div class="repository-signing-config-element" quay-require="['SIGNING']">
<div class="repository-events-table-element">
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa ci-shield-check-full"></i> Trust and Signing
</div>
<div class="panel-body">
<table>
<tr>
<td>
<i class="fa status-icon"
ng-class="{'ci-shield-check-outline': $ctrl.repository.trust_enabled, 'ci-shield-none': !$ctrl.repository.trust_enabled}"></i>
</td>
<td>
<div ng-if="$ctrl.repository.trust_enabled">
<h4>Content Trust Enabled</h4>
<p>
Content Trust and Signing is enabled on this repository and all tag operations must be signed via Docker Content Trust.
</p>
<p>
Note that due to this feature being enabled, all UI-based tag operations and all build support is <strong>disabled on this repository</strong>.
</p>
<button class="btn btn-danger" ng-click="$ctrl.askChangeTrust(false)">Disable Content Trust</button>
</div>
<div ng-if="!$ctrl.repository.trust_enabled">
<h4>Content Trust Disabled</h4>
<p>
Content Trust and Signing is disabled on this repository.
</p>
<button class="btn btn-default" ng-click="$ctrl.askChangeTrust(true)">Enable Content Trust</button>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- Change trust dialogs -->
<div class="cor-confirm-dialog"
dialog-context="$ctrl.enableTrustInfo"
dialog-action="$ctrl.changeTrust(true, callback)"
dialog-title="Enable Content Trust"
dialog-action-title="Enable Trust">
<p>Click "Enable Trust" to enable content trust on this repository.</p>
<p>Please note that at this time, having content trust will <strong>disable</strong> the following
features under the repository:
<ul>
<li>Any tag operations in the UI (Add Tag, Delete Tag, Restore Tag)
<li>All build triggers and ability to invoke builds
</ul>
</p>
</div>
<div class="cor-confirm-dialog"
dialog-context="$ctrl.disableTrustInfo"
dialog-action="$ctrl.changeTrust(false, callback)"
dialog-title="Disable Content Trust"
dialog-action-title="Disable Trust and Delete Data">
<div class="co-alert co-alert-warning">
<strong>Warning:</strong> Disabling content trust will prevent users from pushing signed
manifests to this repository and will <strong>delete all existing signing and trust data</strong>.
</div>
</div>
</div>

View file

@ -0,0 +1,44 @@
import { Input, Component, Inject } from 'ng-metadata/core';
import { Repository } from '../../../types/common.types';
/**
* A component that displays the configuration and options for repository signing.
*/
@Component({
selector: 'repository-signing-config',
templateUrl: '/static/js/directives/ui/repository-signing-config/repository-signing-config.component.html',
})
export class RepositorySigningConfigComponent {
@Input('<') public repository: Repository;
private enableTrustInfo: {[key: string]: string} = null;
private disableTrustInfo: {[key: string]: string} = null;
constructor (@Inject("ApiService") private ApiService: any) {
}
private askChangeTrust(newState: boolean) {
if (newState) {
this.enableTrustInfo = {};
} else {
this.disableTrustInfo = {};
}
}
private changeTrust(newState: boolean, callback: (success: boolean) => void) {
var params = {
'repository': this.repository.namespace + '/' + this.repository.name,
};
var data = {
'trust_enabled': newState,
};
var errorDisplay = this.ApiService.errorDisplay('Could not just change trust', callback);
this.ApiService.changeRepoTrust(data, params).then((resp) => {
this.repository.trust_enabled = newState;
callback(true);
}, errorDisplay);
}
}

View file

@ -1,25 +1,7 @@
import { Input, Component, Inject } from 'ng-metadata/core';
import { ApostilleSignatureDocument, ApostilleTagDocument } from '../../../types/common.types';
import * as moment from "moment";
interface ApostilleSignatureDocument {
// When the signed document expires.
expiration: string
// Object of information for each tag.
tags: {string: ApostilleTagDocument}
// If true, an error occurred while trying to load this document.
error: boolean
}
interface ApostilleTagDocument {
// The length of the document.
length: number
// The hashes for the tag.
hashes: {string: string}
}
/**
* A component that displays the signing status of a tag in the repository view.
*/
@ -29,14 +11,12 @@ interface ApostilleTagDocument {
})
export class TagSigningDisplayComponent {
@Input('<') public tag: any;
@Input('=') public signatures: ApostilleSignatureDocument;
@Input('<') public signatures: ApostilleSignatureDocument;
private signedDigest: string;
private pushedDigest: string;
constructor (@Inject("$sanitize") private $sanitize: ng.sanitize.ISanitizeService) {
}
constructor(@Inject("$sanitize") private $sanitize: ng.sanitize.ISanitizeService) {}
private base64ToHex(base64String: string): string {
// Based on: http://stackoverflow.com/questions/39460182/decode-base64-to-hexadecimal-string-with-javascript

View file

@ -15,6 +15,7 @@ import { CorTableComponent } from './directives/ui/cor-table/cor-table.component
import { CorTableColumn } from './directives/ui/cor-table/cor-table-col.component';
import { ChannelIconComponent } from './directives/ui/channel-icon/channel-icon.component';
import { TagSigningDisplayComponent } from './directives/ui/tag-signing-display/tag-signing-display.component';
import { RepositorySigningConfigComponent } from './directives/ui/repository-signing-config/repository-signing-config.component';
import { BuildServiceImpl } from './services/build/build.service.impl';
import { AvatarServiceImpl } from './services/avatar/avatar.service.impl';
import { DockerfileServiceImpl } from './services/dockerfile/dockerfile.service.impl';
@ -46,6 +47,7 @@ import { QuayRequireDirective } from './directives/structural/quay-require/quay-
ChannelIconComponent,
QuayRequireDirective,
TagSigningDisplayComponent,
RepositorySigningConfigComponent,
],
providers: [
ViewArrayImpl,

View file

@ -79,6 +79,7 @@ export type Repository = {
private: boolean;
url: string;
namespace?: string;
trust_enabled: boolean;
}
@ -101,4 +102,29 @@ export type Namespace = {
export type Trigger = {
id: number;
service: any;
};
/**
* Represents an apostille signature document, with extra expiration information.
*/
export type ApostilleSignatureDocument = {
// When the signed document expires.
expiration: string
// Object of information for each tag.
tags: {string: ApostilleTagDocument}
// If true, an error occurred while trying to load this document.
error: boolean
};
/**
* An apostille document containing signatures for a tag.
*/
export type ApostilleTagDocument = {
// The length of the document.
length: number
// The hashes for the tag.
hashes: {string: string}
};