Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-09-29 13:57:33 +02:00
Code Issues Projects Releases Wiki Activity

Refactor Chart Summary Commands UI

Browse Source 
1. Add Clipboard after command
2. Change the layout of command table
This commit is contained in:
Deng, Qian 2018-08-07 15:28:46 +08:00
parent 2e99719d07
commit 173100be6d
8 changed files with 92 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html
View File

@ -24,7 +24,7 @@
<tr *ngFor="let src of summary.sources; let i = index">
<td class="left" *ngIf="i === 0">{{'HELM_CHART.SRC_REPO' | translate }}</td>
<td class="left" *ngIf="i !== 0"></td>
<td class="left text-wrapper" >
<td class="left text-wrapper">
<a href="{{src}}">{{src}}</a>
</td>
</tr>
@ -48,28 +48,62 @@
</div>
<div class="col-md-12 content-group">
<div>
<label>{{'HELM_CHART.ADD_REPO' | translate }}</label>
<label>{{'HELM_CHART.COMMAND' | translate }}</label>
</div>
<table class="table">
<tbody>
<tr>
<td class="left">{{addCMD}}</td>
<td class="left cmd-title">{{'HELM_CHART.ADD_REPO' | translate }}</td>
<td class="left cmd-content">
<input class="cmd-content" type="text"
[(ngModel)]="addCMD" #addCMDInput readonly/>
</td>
<td class="left">
<span>
<clr-icon shape="copy" size="24"
[class.is-success]="isCopied('add')"
[ngxClipboard]="addCMDInput"
(cbOnSuccess)="onCopySuccess($event, 'add')"
></clr-icon>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 content-group">
<div>
<label>{{'HELM_CHART.INSTALL_CHART' | translate }}</label>
</div>
<table class="table">
<tbody>
<tr>
<td class="left">{{installCMD}}</td>
<td class="left cmd-title">{{'HELM_CHART.INSTALL_CHART' | translate }}</td>
<td class="left">
<input class="cmd-content" type="text"
[(ngModel)]="installCMD" #installCMDInput readonly/>
</td>
<td class="left">
<span>
<clr-icon shape="copy" size="24"
[class.is-success]="isCopied('install')"
[ngxClipboard]="installCMDInput"
(cbOnSuccess)="onCopySuccess($event, 'install')"
></clr-icon>
</span>
</td>
</tr>
<tr *ngIf="prov_ready">
<td class="left cmd-title">{{'HELM_CHART.VERIFY_CHART' | translate }}</td>
<td class="left">
<input class="cmd-content" type="text"
[(ngModel)]="verifyCMD" #verifyCMDInput readonly/>
</td>
<td class="left">
<span>
<clr-icon shape="copy" size="24"
[class.is-success]="isCopied('verify')"
[ngxClipboard]="verifyCMDInput"
(cbOnSuccess)="onCopySuccess($event, 'verify')"
></clr-icon>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 content-group">
<div>
<label>{{'HELM_CHART.SECURITY' | translate }}</label>
@ -78,14 +112,14 @@
<tbody>
<tr>
<td class="left">{{'HELM_CHART.SIGNED' | translate }}</td>
<div *ngIf="security?.signature?.signed;then signed_content else unsignd_content"></div>
<ng-template #signed_content>
<div *ngIf="prov_ready;then signedContent else unsignedContent"></div>
<ng-template #signedContent>
<td class="left">
<span class="content-icon">
<clr-icon shape="shield-check" class="is-success"></clr-icon>
</span>&nbsp;{{'HELM_CHART.SIGNED' | translate }}</td>
</ng-template>
<ng-template #unsignd_content>
<ng-template #unsignedContent>
<td class="left">
<span class="content-icon">
<clr-icon shape="shield-x" class="is-error"></clr-icon>

9
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.scss
View File

@ -25,4 +25,13 @@
word-break: break-all;
}
}
.cmd-title {
white-space: nowrap;
vertical-align: middle;
}
.cmd-content {
width: 100%;
}
}

23
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.ts
View File

@ -22,17 +22,36 @@ export class ChartDetailSummaryComponent implements OnInit {
@Input() chartVersion: string;
@Input() readme: string;
copiedCMD = '';
constructor() {}
ngOnInit(): void {
}
isCopied(cmd: string) {
return this.copiedCMD === cmd;
}
onCopySuccess(e: Event, cmd: string) {
this.copiedCMD = cmd;
}
public get addCMD() {
return `helm repo add REPO_NAME ${this.repoURL}/chartrepo/${this.projectName}`;
return `helm repo add --ca-file <ca file> --cert-file <cert file> --key-file <key file> --username <username> --password <password> <repo name> ${this.repoURL}/chartrepo/${this.projectName}`;
}
public get installCMD() {
return `helm install --version ${this.chartVersion} REPO_NAME/${this.chartName}`;
return `helm install --ca-file <ca file> --cert-file <cert file> --key-file <key file> --username=<username> --password=<password> --version ${this.chartVersion} <repo name>/${this.chartName}`;
}
public get verifyCMD() {
return `helm verify --keyring <key path> ${this.chartName}-${this.chartVersion}.tgz`;
}
public get prov_ready() {
return this.security && this.security.signature && this.security.signature.signed;
}
}

1
src/ui_ng/lib/src/helm-chart/helm-chart.component.ts
View File

@ -75,7 +75,6 @@ export class HelmChartComponent implements OnInit {
.catch(error => this.errorHandler.error(error));
this.lastFilteredChartName = "";
this.refresh();
}
updateFilterValue(value: string) {

4
src/ui_ng/src/i18n/lang/en-us-lang.json
View File

@ -516,7 +516,9 @@
"NO_README": "No readme file provided by this chart.",
"SECURITY": "Security",
"ACTIVE": "Active",
"DEPRECATED": "Deprecated"
"DEPRECATED": "Deprecated",
"VERIFY_CHART": "Verify Chart",
"COMMAND": "Commands"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "Some changes are not saved yet. Do you want to cancel?"

4
src/ui_ng/src/i18n/lang/es-es-lang.json
View File

@ -515,7 +515,9 @@
"NO_README": "No readme file provided by this chart.",
"SECURITY": "Security",
"ACTIVE": "Active",
"DEPRECATED": "Deprecated"
"DEPRECATED": "Deprecated",
"VERIFY_CHART": "Verify Chart",
"COMMAND": "Commands"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "Algunos cambios no se han guardado aún. ¿Quiere cancelar?"

4
src/ui_ng/src/i18n/lang/fr-fr-lang.json
View File

@ -490,7 +490,9 @@
"ITEMS": "items",
"SECURITY": "Security",
"ACTIVE": "Active",
"DEPRECATED": "Deprecated"
"DEPRECATED": "Deprecated",
"VERIFY_CHART": "Verify Chart",
"COMMAND": "Commands"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "Certaines modifications ne sont pas encore enregistrées. Voulez-vous annuler ?"

4
src/ui_ng/src/i18n/lang/zh-cn-lang.json
View File

@ -515,7 +515,9 @@
"NO_README": "此Chart未提供README文件",
"SECURITY": "安全",
"ACTIVE": "正常",
"DEPRECATED": "废弃"
"DEPRECATED": "废弃",
"VERIFY_CHART": "验证Chart",
"COMMAND": "命令"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "表单内容改变，确认是否取消?"