mirror of
https://github.com/goharbor/harbor.git
synced 2025-02-23 07:11:36 +01:00
Improve UI for add robot page
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
parent
890200ea19
commit
2fdb01ef1a
@ -6,7 +6,7 @@
|
||||
<form #robotForm="ngForm">
|
||||
<section class="form-block">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-3 permission permission-dark">
|
||||
<div class="clr-col-4 permission permission-dark">
|
||||
<label class="col-md-3 required">
|
||||
{{'ROBOT_ACCOUNT.NAME' | translate}}
|
||||
</label>
|
||||
@ -34,7 +34,27 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-row mt-1">
|
||||
<div class="clr-col-3 permission permission-dark">
|
||||
<div class="clr-col-4 permission permission-dark">
|
||||
<label class="col-md-3">{{'ROBOT_ACCOUNT.EXPIRES_AT' | translate}}
|
||||
<clr-tooltip>
|
||||
<clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
|
||||
<clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
|
||||
<span>{{'ROBOT_ACCOUNT.EXPIRATION_TOOLTIP' | translate}}</span>
|
||||
</clr-tooltip-content>
|
||||
</clr-tooltip>
|
||||
</label>
|
||||
</div>
|
||||
<div class="clr-col padding-left-0 date">
|
||||
<input class="input-width-date" type="date" readonly clrDate name="expiresAt"
|
||||
[(clrDate)]="expiresDate" placeholder="{{expiresDatePlaceholder}}">
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox name="neverExpired" [(ngModel)]="isNeverExpired" (change)="switch()" />
|
||||
<label>{{"ROBOT_ACCOUNT.NEVER_EXPIRED" | translate}}</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-row mt-1">
|
||||
<div class="clr-col-4 permission permission-dark">
|
||||
<label class="col-md-3">{{'REPLICATION.DESCRIPTION' |translate}}</label>
|
||||
</div>
|
||||
<div class="clr-col padding-left-0">
|
||||
@ -48,7 +68,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-row mt-1">
|
||||
<div class="clr-col-3 permission permission-dark">
|
||||
<div class="clr-col-4 permission permission-dark">
|
||||
<label class="col-md-3">
|
||||
{{'ROBOT_ACCOUNT.PERMISSIONS' | translate}}
|
||||
</label>
|
||||
|
@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
.permission{
|
||||
padding-top: 5px;
|
||||
padding-top: 0.1rem;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
@ -47,3 +47,9 @@
|
||||
.w-90{
|
||||
width: 90%;
|
||||
}
|
||||
.date {
|
||||
margin-top: -0.9rem;
|
||||
}
|
||||
.input-width-date {
|
||||
width: 265px;
|
||||
}
|
@ -19,7 +19,8 @@ import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.
|
||||
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
||||
import { AppConfigService } from "../../../app-config.service";
|
||||
import { ErrorHandler } from "../../../../lib/utils/error-handler";
|
||||
|
||||
const ONE_THOUSAND: number = 1000;
|
||||
const NEVER_EXPIRED: number = -1;
|
||||
@Component({
|
||||
selector: "add-robot",
|
||||
templateUrl: "./add-robot.component.html",
|
||||
@ -50,6 +51,9 @@ export class AddRobotComponent implements OnInit, OnDestroy {
|
||||
@Output() create = new EventEmitter<boolean>();
|
||||
@ViewChild("robotForm", {static: true}) currentForm: NgForm;
|
||||
@ViewChild("copyAlert", {static: false}) copyAlert: InlineAlertComponent;
|
||||
private _expiresDate: Date;
|
||||
isNeverExpired: boolean = false;
|
||||
expiresDatePlaceholder: string = ' ';
|
||||
constructor(
|
||||
private robotService: RobotService,
|
||||
private translate: TranslateService,
|
||||
@ -114,6 +118,9 @@ export class AddRobotComponent implements OnInit, OnDestroy {
|
||||
this.isRobotNameValid = true;
|
||||
this.robot = new Robot();
|
||||
this.nameTooltipText = "ROBOT_ACCOUNT.ROBOT_NAME";
|
||||
this.isNeverExpired = false;
|
||||
this.expiresDate = null;
|
||||
this.expiresDatePlaceholder = ' ';
|
||||
this.copyAlert.close();
|
||||
}
|
||||
|
||||
@ -137,6 +144,18 @@ export class AddRobotComponent implements OnInit, OnDestroy {
|
||||
this.robot.access.isPullImage = true;
|
||||
this.robot.access.isPushOrPullImage = false;
|
||||
}
|
||||
if (this.isNeverExpired) {
|
||||
this.robot.expires_at = NEVER_EXPIRED;
|
||||
} else {
|
||||
if (this.expiresDate) {
|
||||
if (this.expiresDate <= new Date()) {
|
||||
this.copyAlert.showInlineError("ROBOT_ACCOUNT.INVALID_VALUE");
|
||||
return;
|
||||
} else {
|
||||
this.robot.expires_at = Math.floor(this.expiresDate.getTime() / ONE_THOUSAND);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.isSubmitOnGoing = true;
|
||||
this.robotService
|
||||
.addRobotAccount(
|
||||
@ -214,4 +233,23 @@ export class AddRobotComponent implements OnInit, OnDestroy {
|
||||
closeModal() {
|
||||
this.copyToken = false;
|
||||
}
|
||||
switch() {
|
||||
if (this.isNeverExpired) {
|
||||
this.expiresDate = null;
|
||||
this.translate.get('ROBOT_ACCOUNT.NEVER_EXPIRED').subscribe(value => {
|
||||
this.expiresDatePlaceholder = value;
|
||||
});
|
||||
} else {
|
||||
this.expiresDatePlaceholder = ' ';
|
||||
}
|
||||
}
|
||||
get expiresDate(): Date {
|
||||
return this._expiresDate;
|
||||
}
|
||||
set expiresDate(date: Date) {
|
||||
if (date) {
|
||||
this.isNeverExpired = false;
|
||||
}
|
||||
this._expiresDate = date;
|
||||
}
|
||||
}
|
||||
|
@ -54,7 +54,7 @@
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{r.description}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{r.creation_time | date: 'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{r.expires_at * 1000 | date: 'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{r.expires_at === -1?("ROBOT_ACCOUNT.NEVER_EXPIRED" | translate):(r.expires_at * 1000 | date: 'short')}}</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
<clr-dg-footer>
|
||||
<span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}}
|
||||
|
@ -47,6 +47,7 @@ export class RobotService {
|
||||
|
||||
let param = {
|
||||
name: robot.name,
|
||||
expires_at: +robot.expires_at,
|
||||
description: robot.description,
|
||||
access
|
||||
};
|
||||
|
@ -5,6 +5,7 @@ export class Robot {
|
||||
description: string;
|
||||
expires_at: number;
|
||||
disabled: boolean;
|
||||
creation_time?: Date;
|
||||
access: {
|
||||
isPullImage: boolean;
|
||||
isPushOrPullImage: boolean;
|
||||
|
@ -349,7 +349,11 @@
|
||||
"DELETION_TITLE": "Confirm removal of robot accounts",
|
||||
"DELETION_SUMMARY": "Do you want to delete robot accounts {{param}}?",
|
||||
"PULL_IS_MUST": "Pull permission is checked by default and can not be modified.",
|
||||
"EXPORT_TO_FILE": "export to file"
|
||||
"EXPORT_TO_FILE": "export to file",
|
||||
"EXPIRES_AT": "Expires At",
|
||||
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
|
||||
"INVALID_VALUE": "The value of the expiration time is invalid",
|
||||
"NEVER_EXPIRED": "Never Expired"
|
||||
},
|
||||
"WEBHOOK": {
|
||||
"EDIT_BUTTON": "EDIT",
|
||||
|
@ -350,7 +350,11 @@
|
||||
"DELETION_TITLE": "Confirm removal of robot accounts",
|
||||
"DELETION_SUMMARY": "Do you want to delete robot accounts {{param}}?",
|
||||
"PULL_IS_MUST": "Pull permission is checked by default and can not be modified.",
|
||||
"EXPORT_TO_FILE": "export to file"
|
||||
"EXPORT_TO_FILE": "export to file",
|
||||
"EXPIRES_AT": "Expires At",
|
||||
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
|
||||
"INVALID_VALUE": "The value of the expiration time is invalid",
|
||||
"NEVER_EXPIRED": "Never Expired"
|
||||
},
|
||||
"WEBHOOK": {
|
||||
"EDIT_BUTTON": "EDIT",
|
||||
|
@ -341,7 +341,11 @@
|
||||
"DELETION_TITLE": "confirmer l'enlèvement des comptes du robot ",
|
||||
"DELETION_SUMMARY": "Voulez-vous supprimer la règle {{param}}?",
|
||||
"PULL_IS_MUST": "Pull permission is checked by default and can not be modified.",
|
||||
"EXPORT_TO_FILE": "export to file"
|
||||
"EXPORT_TO_FILE": "export to file",
|
||||
"EXPIRES_AT": "Expires At",
|
||||
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
|
||||
"INVALID_VALUE": "The value of the expiration time is invalid",
|
||||
"NEVER_EXPIRED": "Never Expired"
|
||||
},
|
||||
"WEBHOOK": {
|
||||
"EDIT_BUTTON": "EDIT",
|
||||
|
@ -347,7 +347,11 @@
|
||||
"DELETION_TITLE": "Confirmar a remoção do robô Contas",
|
||||
"DELETION_SUMMARY": "Você quer remover a regra {{param}}?",
|
||||
"PULL_IS_MUST": "Pull permission is checked by default and can not be modified.",
|
||||
"EXPORT_TO_FILE": "export to file"
|
||||
"EXPORT_TO_FILE": "export to file",
|
||||
"EXPIRES_AT": "Expires At",
|
||||
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
|
||||
"INVALID_VALUE": "The value of the expiration time is invalid",
|
||||
"NEVER_EXPIRED": "Never Expired"
|
||||
},
|
||||
"GROUP": {
|
||||
"GROUP": "Grupo",
|
||||
|
@ -349,7 +349,11 @@
|
||||
"DELETION_TITLE": "Robot hesaplarının kaldırılmasını onaylayın",
|
||||
"DELETION_SUMMARY": "Robot hesaplarını silmek istiyor musunuz {{param}}?",
|
||||
"PULL_IS_MUST": "Çekme izni varsayılan olarak kontrol edilir ve değiştirilemez.",
|
||||
"EXPORT_TO_FILE": "dosyayı dışarı aktar"
|
||||
"EXPORT_TO_FILE": "dosyayı dışarı aktar",
|
||||
"EXPIRES_AT": "Expires At",
|
||||
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
|
||||
"INVALID_VALUE": "The value of the expiration time is invalid",
|
||||
"NEVER_EXPIRED": "Never Expired"
|
||||
},
|
||||
"WEBHOOK": {
|
||||
"EDIT_BUTTON": "DÜZENLE",
|
||||
|
@ -348,7 +348,11 @@
|
||||
"DELETION_TITLE": "删除账户确认",
|
||||
"DELETION_SUMMARY": "你确认删除机器人账户 {{param}}?",
|
||||
"PULL_IS_MUST": "拉取权限默认选中且不可修改。",
|
||||
"EXPORT_TO_FILE": "导出到文件中"
|
||||
"EXPORT_TO_FILE": "导出到文件中",
|
||||
"EXPIRES_AT": "到期日",
|
||||
"EXPIRATION_TOOLTIP": "如不设置,将会使用系统设置中的过期时间。",
|
||||
"INVALID_VALUE": "无效的过期日期",
|
||||
"NEVER_EXPIRED": "永不过期"
|
||||
},
|
||||
"WEBHOOK": {
|
||||
"EDIT_BUTTON": "编辑",
|
||||
|
Loading…
Reference in New Issue
Block a user