Fix some UI issues (#16979)

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

src/portal/.stylelintrc.json

@@ -6,9 +6,17 @@
     "stylelint-config-prettier-scss"
   ],
   "rules": {
-    "selector-pseudo-element-no-unknown": [true, {
+    "selector-pseudo-element-no-unknown": [
-      "ignorePseudoElements": ["ng-deep"]
+      true,
-    }],
+      {
+        "ignorePseudoElements": [
+          "ng-deep"
+        ]
+      }
+    ],
     "no-empty-source": null
-  }
+  },
+  "ignoreFiles": [
+    "src/**/*.html"
+  ]
 }

src/portal/src/app/base/left-side-nav/clearing-job/audit-log-purge/set-job/set-job.component.html

@@ -44,9 +44,7 @@
     </div>
     <div class="cron-selection">
         <cron-selection
-            [externalValidation]="
+            [externalValidation]="isValid()"
-                !(purgeForm.invalid || !(selectedOperations?.length > 0))
-            "
             [labelCurrent]="getLabelCurrent"
             [labelEdit]="getLabelCurrent"
             [originCron]="originCron"

src/portal/src/app/base/left-side-nav/clearing-job/audit-log-purge/set-job/set-job.component.ts

@@ -16,6 +16,7 @@ import {
 } from '../../clearing-job-interfact';
 import { clone } from '../../../../../shared/units/utils';
 import { PurgeHistoryComponent } from '../history/purge-history.component';
+import { NgForm } from '@angular/forms';
 
 const ONE_MINUTE: number = 60000;
 const ONE_DAY: number = 24;
@@ -31,7 +32,7 @@ export class SetJobComponent implements OnInit, OnDestroy {
     getLabelCurrent = 'CLEARANCES.SCHEDULE_TO_PURGE';
     loadingGcStatus = false;
     @ViewChild(CronScheduleComponent)
-    CronScheduleComponent: CronScheduleComponent;
+    cronScheduleComponent: CronScheduleComponent;
     dryRunOnGoing: boolean = false;
     lastCompletedTime: string;
     loadingLastCompletedTime: boolean = false;
@@ -45,6 +46,8 @@ export class SetJobComponent implements OnInit, OnDestroy {
     selectedOperations: string[] = clone(RETENTION_OPERATIONS);
     @ViewChild(PurgeHistoryComponent)
     purgeHistoryComponent: PurgeHistoryComponent;
+    @ViewChild('purgeForm')
+    purgeForm: NgForm;
     constructor(
         private purgeService: PurgeService,
         private errorHandler: ErrorHandler
@@ -80,10 +83,10 @@ export class SetJobComponent implements OnInit, OnDestroy {
                         this.statusTimeout = setTimeout(() => {
                             this.getStatus();
                         }, REFRESH_STATUS_TIME_DIFFERENCE);
-                    } else {
+                        return;
+                    }
+                }
                 this.loadingLastCompletedTime = false;
-                    }
-                }
             });
     }
     getCurrentSchedule(withLoading: boolean) {
@@ -108,11 +111,9 @@ export class SetJobComponent implements OnInit, OnDestroy {
     }
 
     initSchedule(purgeHistory: ExecHistory) {
-        if ((purgeHistory?.schedule as any)?.next_scheduled_time) {
+        this.nextScheduledTime = purgeHistory?.schedule?.next_scheduled_time
-            this.nextScheduledTime = (
+            ? purgeHistory?.schedule?.next_scheduled_time
-                purgeHistory.schedule as any
+            : null;
-            )?.next_scheduled_time;
-        }
         if (purgeHistory && purgeHistory.schedule) {
             this.originCron = {
                 type: purgeHistory.schedule.type,
@@ -244,7 +245,7 @@ export class SetJobComponent implements OnInit, OnDestroy {
                         this.errorHandler.info(
                             'CLEARANCES.PURGE_SCHEDULE_RESET'
                         );
-                        this.CronScheduleComponent.resetSchedule();
+                        this.cronScheduleComponent.resetSchedule();
                         this.getCurrentSchedule(false); // refresh schedule
                     },
                     error: error => {
@@ -272,7 +273,7 @@ export class SetJobComponent implements OnInit, OnDestroy {
                         this.errorHandler.info(
                             'CLEARANCES.PURGE_SCHEDULE_RESET'
                         );
-                        this.CronScheduleComponent.resetSchedule();
+                        this.cronScheduleComponent.resetSchedule();
                         this.getCurrentSchedule(false); // refresh schedule
                     },
                     error: error => {
@@ -304,4 +305,12 @@ export class SetJobComponent implements OnInit, OnDestroy {
         this.getStatus();
         this.purgeHistoryComponent?.refresh();
     }
+    isValid(): boolean {
+        if (this.cronScheduleComponent?.scheduleType === ScheduleType.NONE) {
+            return true;
+        }
+        return !(
+            this.purgeForm?.invalid || !(this.selectedOperations?.length > 0)
+        );
+    }
 }

src/portal/src/app/base/left-side-nav/clearing-job/gc-page/gc/gc.component.ts

@@ -25,7 +25,7 @@ export class GcComponent implements OnInit, OnDestroy {
     getLabelCurrent = 'GC.CURRENT_SCHEDULE';
     loadingGcStatus = false;
     @ViewChild(CronScheduleComponent)
-    CronScheduleComponent: CronScheduleComponent;
+    cronScheduleComponent: CronScheduleComponent;
     shouldDeleteUntagged: boolean;
     dryRunOnGoing: boolean = false;
 
@@ -41,7 +41,7 @@ export class GcComponent implements OnInit, OnDestroy {
     ) {}
 
     ngOnInit() {
-        this.getCurrentSchedule();
+        this.getCurrentSchedule(true);
         this.getStatus();
     }
     ngOnDestroy() {
@@ -70,14 +70,16 @@ export class GcComponent implements OnInit, OnDestroy {
                         this.statusTimeout = setTimeout(() => {
                             this.getStatus();
                         }, REFRESH_STATUS_TIME_DIFFERENCE);
-                    } else {
+                        return;
+                    }
+                }
                 this.loadingLastCompletedTime = false;
-                    }
-                }
             });
     }
-    getCurrentSchedule() {
+    getCurrentSchedule(withLoading: boolean) {
+        if (withLoading) {
             this.loadingGcStatus = true;
+        }
         this.gcService
             .getGCSchedule()
             .pipe(
@@ -96,11 +98,9 @@ export class GcComponent implements OnInit, OnDestroy {
     }
 
     private initSchedule(gcHistory: GCHistory) {
-        if ((gcHistory?.schedule as any)?.next_scheduled_time) {
+        this.nextScheduledTime = gcHistory?.schedule?.next_scheduled_time
-            this.nextScheduledTime = (
+            ? gcHistory?.schedule?.next_scheduled_time
-                gcHistory.schedule as any
+            : null;
-            )?.next_scheduled_time;
-        }
         if (gcHistory && gcHistory.schedule) {
             this.originCron = {
                 type: gcHistory.schedule.type,
@@ -199,8 +199,8 @@ export class GcComponent implements OnInit, OnDestroy {
                 .subscribe(
                     response => {
                         this.errorHandler.info('GC.MSG_SCHEDULE_RESET');
-                        this.CronScheduleComponent.resetSchedule();
+                        this.cronScheduleComponent.resetSchedule();
-                        this.getCurrentSchedule(); // refresh schedule
+                        this.getCurrentSchedule(false); // refresh schedule
                     },
                     error => {
                         this.errorHandler.error(error);
@@ -223,8 +223,8 @@ export class GcComponent implements OnInit, OnDestroy {
                 .subscribe(
                     response => {
                         this.errorHandler.info('GC.MSG_SCHEDULE_RESET');
-                        this.CronScheduleComponent.resetSchedule();
+                        this.cronScheduleComponent.resetSchedule();
-                        this.getCurrentSchedule(); // refresh schedule
+                        this.getCurrentSchedule(false); // refresh schedule
                     },
                     error => {
                         this.errorHandler.error(error);

src/portal/src/app/base/left-side-nav/config/security/security.component.ts

@@ -122,6 +122,9 @@ export class SecurityComponent implements OnInit, OnDestroy {
         this.systemInfoService.getSystemAllowlist().subscribe(
             systemAllowlist => {
                 this.onGoing = false;
+                if (!systemAllowlist) {
+                    systemAllowlist = {};
+                }
                 if (!systemAllowlist.items) {
                     systemAllowlist.items = [];
                 }

src/portal/src/app/base/left-side-nav/projects/create-project/create-project.component.ts

@@ -306,6 +306,9 @@ export class CreateProjectComponent
             +this.storageLimit === QuotaUnlimited
                 ? this.storageLimit
                 : getByte(+this.storageLimit, this.storageLimitUnit);
+        const registryId: number = this.enableProxyCache
+            ? +this.project.registry_id
+            : null;
         this.projectService
             .createProject({
                 project: {
@@ -314,7 +317,7 @@ export class CreateProjectComponent
                         public: this.project.metadata.public ? 'true' : 'false',
                     },
                     storage_limit: +storageByte,
-                    registry_id: +this.project.registry_id,
+                    registry_id: registryId,
                 },
             })
             .subscribe(

src/portal/src/app/base/project/tag-feature-integration/tag-retention/tag-retention.component.ts

@@ -340,12 +340,13 @@ export class TagRetentionComponent implements OnInit, OnDestroy {
                             }
                         }
                         // data grid will be re-rendered if reassign "this.executionList"
-                        // so only refresh the status property
+                        // so only refresh the status and the end_time property
                         if (res?.body?.length) {
                             res.body.forEach(item => {
                                 this.executionList.forEach(item2 => {
                                     if (item2.id === item.id) {
                                         item2.status = item.status;
+                                        item2.end_time = item.end_time;
                                     }
                                 });
                             });

src/portal/src/app/shared/services/interface.ts

@@ -434,10 +434,10 @@ export interface ProjectRootInterface {
     LABEL: string;
 }
 export interface SystemCVEAllowlist {
-    id: number;
+    id?: number;
-    project_id: number;
+    project_id?: number;
-    expires_at: number;
+    expires_at?: number;
-    items: Array<{ cve_id: string }>;
+    items?: Array<{ cve_id: string }>;
 }
 export interface QuotaHardInterface {
     storage_per_project: number;