Improve UI for add robot page

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/project/robot-account/add-robot/add-robot.component.html

@@ -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>

src/portal/src/app/project/robot-account/add-robot/add-robot.component.scss

@@ -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;
+}

src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts

@@ -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;
+  }
 }

src/portal/src/app/project/robot-account/robot-account.component.html

@@ -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}}

src/portal/src/app/project/robot-account/robot-account.service.ts

@@ -47,6 +47,7 @@ export class RobotService {
 
     let param = {
       name: robot.name,
+      expires_at: +robot.expires_at,
       description: robot.description,
       access
     };

src/portal/src/app/project/robot-account/robot.ts

@@ -5,6 +5,7 @@ export class Robot {
   description: string;
   expires_at: number;
   disabled: boolean;
+  creation_time?: Date;
   access: {
     isPullImage: boolean;
     isPushOrPullImage: boolean;

src/portal/src/i18n/lang/en-us-lang.json

@@ -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",

src/portal/src/i18n/lang/es-es-lang.json

@@ -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",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -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",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -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",

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -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",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -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": "编辑",