Merge pull request #12642 from AllForNothing/cron

Improve cron component and create project component

src/portal/src/app/project/create-project/create-project.component.html

@@ -78,7 +78,7 @@
                     </select>
                 </div>
             </div>
-            <div class="clr-form-control mt-0" *ngIf="isSystemAdmin && enableProxyCache">
+            <div class="clr-form-control mt-0" [style.visibility]="(isSystemAdmin && enableProxyCache) ? 'visible' : 'hidden'">
                 <label for="create_project_storage_limit" class="clr-control-label"></label>
                 <div class="clr-control-container input-width">
                     <div class="space-between" *ngIf=" enableProxyCache && !registries.length" >
@@ -87,7 +87,7 @@
                     </div>
                 </div>
             </div>
-            <div class="clr-form-control mt-05" *ngIf="isSystemAdmin && enableProxyCache">
+            <div class="clr-form-control mt-05" [style.visibility]="(isSystemAdmin && enableProxyCache) ? 'visible' : 'hidden'">
                 <label for="create_project_storage_limit" class="clr-control-label"></label>
                 <div class="clr-control-container">
                     <div class="clr-input-wrapper">

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

@@ -247,7 +247,7 @@
         "QUOTA_UNLIMIT_TIP": "For unlimited quota enter '-1'.",
         "TYPE": "Type",
         "PROXY_CACHE": "Proxy Cache",
-        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry.Harbor can only act a proxy for DockerHub and Harbor registries.",
+        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry. Harbor can only act a proxy for DockerHub and Harbor registries.",
         "ENDPOINT": "Endpoint",
         "PROXY_CACHE_ENDPOINT": "Proxy Cache Endpoint"
     },

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

@@ -248,7 +248,7 @@
         "QUOTA_UNLIMIT_TIP": "For unlimited quota enter '-1'.",
         "TYPE": "Type",
         "PROXY_CACHE": "Proxy Cache",
-        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry.Harbor can only act a proxy for DockerHub and Harbor registries.",
+        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry. Harbor can only act a proxy for DockerHub and Harbor registries.",
         "ENDPOINT": "Endpoint",
         "PROXY_CACHE_ENDPOINT": "Proxy Cache Endpoint"
     },

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

@@ -241,7 +241,7 @@
         "QUOTA_UNLIMIT_TIP": "For unlimited quota enter '-1'.",
         "TYPE": "Type",
         "PROXY_CACHE": "Proxy Cache",
-        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry.Harbor can only act a proxy for DockerHub and Harbor registries.",
+        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry. Harbor can only act a proxy for DockerHub and Harbor registries.",
         "ENDPOINT": "Endpoint",
         "PROXY_CACHE_ENDPOINT": "Proxy Cache Endpoint"
     },

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

@@ -245,7 +245,7 @@
         "QUOTA_UNLIMIT_TIP": "For unlimited quota enter '-1'.",
         "TYPE": "Type",
         "PROXY_CACHE": "Proxy Cache",
-        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry.Harbor can only act a proxy for DockerHub and Harbor registries.",
+        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry. Harbor can only act a proxy for DockerHub and Harbor registries.",
         "ENDPOINT": "Endpoint",
         "PROXY_CACHE_ENDPOINT": "Proxy Cache Endpoint"
     },

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

@@ -247,7 +247,7 @@
         "QUOTA_UNLIMIT_TIP": "Bu kotayı sınırsız istiyorsanız, lütfen -1 girin.",
         "TYPE": "Type",
         "PROXY_CACHE": "Proxy Cache",
-        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry.Harbor can only act a proxy for DockerHub and Harbor registries.",
+        "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry. Harbor can only act a proxy for DockerHub and Harbor registries.",
         "ENDPOINT": "Endpoint",
         "PROXY_CACHE_ENDPOINT": "Proxy Cache Endpoint"
     },

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

@@ -244,7 +244,7 @@
     "QUOTA_UNLIMIT_TIP": "如果你想要對存儲不設置上限,請輸入-1。",
     "TYPE": "Type",
     "PROXY_CACHE": "Proxy Cache",
-    "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry.Harbor can only act a proxy for DockerHub and Harbor registries.",
+    "PROXY_CACHE_TOOLTIP": "Enable this to allow this project to act as a pull-through cache for a particular namespace within a target registry. Harbor can only act a proxy for DockerHub and Harbor registries.",
     "ENDPOINT": "Endpoint",
     "PROXY_CACHE_ENDPOINT": "Proxy Cache Endpoint"
   },

src/portal/src/lib/components/cron-schedule/cron-schedule.component.html

@@ -24,7 +24,7 @@
             {{ "BUTTON.EDIT" | translate }}
         </button>
     </div>
-    <div class="normal-wrapper-box" *ngIf="isEditMode">
+    <div class="normal-wrapper-box" *ngIf="isEditMode"  [ngClass]="{'mb-05' : dateInvalid}">
         <span class="font-style" [style.width]="labelWidth">{{ labelEdit | translate }}</span>
         <div class="select select-schedule clr-select-wrapper">
             <select name="selectPolicy" id="selectPolicy" [(ngModel)]="scheduleType">
@@ -37,19 +37,20 @@
         </div>
         <span class="required" [hidden]="scheduleType!==SCHEDULE_TYPE.CUSTOM">{{ "SCHEDULE.CRON" | translate }}</span>
         <div [hidden]="scheduleType!==SCHEDULE_TYPE.CUSTOM" class="cron-input">
-            <label for="targetCron" aria-haspopup="true" role="tooltip" [class.clr-error]="dateInvalid"
+            <div class="height-1rem clr-input-wrapper">
-                   class="tooltip tooltip-validation tooltip-md tooltip-top-left cron-label">
+                <label for="targetCron" aria-haspopup="true" role="tooltip" [class.clr-error]="dateInvalid"
-                <input type="text" (blur)="blurInvalid()" (input)="inputInvalid()" name="targetCron" id="targetCron"
+                       class="tooltip tooltip-validation tooltip-md tooltip-top-left cron-label">
-                       #cronStringInput="ngModel" required class="clr-input form-control ml-1" [(ngModel)]="cronString">
+                    <input type="text" (blur)="blurInvalid()" (input)="inputInvalid($event)" name="targetCron" id="targetCron"
-                <clr-control-error *ngIf="dateInvalid">{{'TOOLTIP.CRON_REQUIRED' | translate}}</clr-control-error>
+                           #cronStringInput="ngModel" required class="clr-input form-control ml-1" [(ngModel)]="cronString">
-            </label>
+                    <clr-tooltip>
-            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true"
+                        <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
-               class="tooltip tooltip-lg tooltip-right top-7 cron-tooltip">
+                        <clr-tooltip-content clrPosition="bottom-right" clrSize="lg" *clrIfOpen>
-                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
+                            <cron-tooltip></cron-tooltip>
-                <div class="tooltip-content table-box">
+                        </clr-tooltip-content>
-                    <cron-tooltip></cron-tooltip>
+                    </clr-tooltip>
-                </div>
+                    <clr-control-error class="ml-1" *ngIf="dateInvalid">{{'TOOLTIP.CRON_REQUIRED' | translate}}</clr-control-error>
-            </a>
+                </label>
+            </div>
         </div>
         <button class="btn btn-link " (click)="save()" id="config-save">
             {{ "BUTTON.SAVE" | translate }}
@@ -97,7 +98,7 @@
         <div [ngClass]="{'mt-1': dateInvalid}" *ngIf="scheduleType===SCHEDULE_TYPE.CUSTOM" class="clr-control-container" [class.clr-error]="dateInvalid">
             <div class="clr-input-wrapper">
                 <label class="required ml-1">{{ "SCHEDULE.CRON" | translate }}</label>
-                <input autocomplete="off" type="text" (blur)="blurInvalid()" (input)="inputInvalid()" name="targetCron" id="inline-target"
+                <input autocomplete="off" type="text" (blur)="blurInvalid()" (input)="inputInvalid($event)" name="targetCron" id="inline-target"
                        #cronStringInput="ngModel" required class="clr-input" [(ngModel)]="cronString">
                 <clr-tooltip>
                     <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>

src/portal/src/lib/components/cron-schedule/cron-schedule.component.scss

@@ -27,3 +27,6 @@ span.required {
 .mt-05 {
   margin-top: 0.5rem;
 }
+.mb-05 {
+  margin-bottom: 0.5rem;
+}

src/portal/src/lib/components/cron-schedule/cron-schedule.component.ts

@@ -18,6 +18,7 @@ const SCHEDULE_TYPE = {
   HOURLY: "Hourly",
   CUSTOM: "Custom"
 };
+const PREFIX: string = '0 ';
 @Component({
   selector: "cron-selection",
   templateUrl: "./cron-schedule.component.html",
@@ -58,16 +59,17 @@ export class CronScheduleComponent implements OnChanges {
     this.isEditMode = true;
     this.scheduleType = this.originScheduleType;
     if (this.scheduleType && this.scheduleType === SCHEDULE_TYPE.CUSTOM) {
-      this.cronString = this.oriCron;
+      this.cronString = this.oriCron || PREFIX;
       this.dateInvalid = !cronRegex(this.cronString);
     } else {
-      this.cronString = "";
+      this.cronString = PREFIX;
       this.dateInvalid = false;
     }
   }
 
-  inputInvalid() {
+  inputInvalid(e: any) {
     this.dateInvalid = !cronRegex(this.cronString);
+    this.setPrefix(e);
   }
 
   blurInvalid() {
@@ -107,4 +109,12 @@ export class CronScheduleComponent implements OnChanges {
     scheduleTerm = scheduleTerm.replace(/\s+/g, " ").trim();
     this.inputvalue.emit(scheduleTerm);
   }
+   // set prefix '0 ', so user can not set item of 'seconds'
+  setPrefix(e: any) {
+    if (e && e.target) {
+      if (!e.target.value || (e.target.value && e.target.value.indexOf(PREFIX)) !== 0) {
+        e.target.value = PREFIX;
+      }
+    }
+  }
 }