Fix some UI issues (#18371)

1. Fixes #17892
2. Redirect to default page when redirectUrl starts with /account/sign-in

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

src/portal/src/app/account/sign-in/sign-in.component.ts

@@ -259,7 +259,10 @@ export class SignInComponent implements AfterViewChecked, OnInit {
                 this.remeberMe();
 
                 // Redirect to the right router-guard
-                if (this.redirectUrl === '') {
+                if (
+                    !this.redirectUrl ||
+                    this.redirectUrl.startsWith(CommonRoutes.EMBEDDED_SIGN_IN)
+                ) {
                     // Routing to the default location
                     this.router.navigateByUrl(CommonRoutes.HARBOR_DEFAULT);
                 } else {

src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.spec.ts

@@ -10,10 +10,6 @@ import { CreateEditRuleComponent } from './create-edit-rule.component';
 import { DatePickerComponent } from '../../../../../shared/components/datetime-picker/datetime-picker.component';
 import { FilterComponent } from '../../../../../shared/components/filter/filter.component';
 import { InlineAlertComponent } from '../../../../../shared/components/inline-alert/inline-alert.component';
-import {
-    ReplicationJob,
-    ReplicationJobItem,
-} from '../../../../../shared/services';
 import { ErrorHandler } from '../../../../../shared/units/error-handler';
 import { ReplicationService } from '../../../../../shared/services';
 import { LabelPieceComponent } from '../../../../../shared/components/label/label-piece/label-piece.component';
@@ -24,6 +20,7 @@ import { SharedTestingModule } from '../../../../../shared/shared.module';
 import { RegistryService } from '../../../../../../../ng-swagger-gen/services/registry.service';
 import { Registry } from '../../../../../../../ng-swagger-gen/models/registry';
 import { ReplicationPolicy } from '../../../../../../../ng-swagger-gen/models/replication-policy';
+import { ReplicationExecution } from '../../../../../../../ng-swagger-gen/models/replication-execution';
 
 describe('CreateEditRuleComponent (inline template)', () => {
     let mockRules: ReplicationPolicy[] = [
@@ -44,7 +41,7 @@ describe('CreateEditRuleComponent (inline template)', () => {
             speed: -1,
         },
     ];
-    let mockJobs: ReplicationJobItem[] = [
+    let mockJobs: ReplicationExecution[] = [
         {
             id: 1,
             status: 'stopped',
@@ -80,7 +77,7 @@ describe('CreateEditRuleComponent (inline template)', () => {
         },
     ];
 
-    let mockJob: ReplicationJob = {
+    let mockJob: any = {
         metadata: { xTotalCount: 3 },
         data: mockJobs,
     };

src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.html

@@ -1,5 +1,6 @@
 <div class="list-rule">
     <clr-datagrid
+        #datagrid
         (clrDgRefresh)="clrLoad($event)"
         [clrDgLoading]="loading"
         [(clrDgSingleSelected)]="selectedRow"
@@ -91,65 +92,47 @@
             </clr-dropdown>
         </clr-dg-action-bar>
         <clr-dg-column>
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[0] }"
-                (clrDgHiddenChange)="columnHiddenChange(0)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[0] }">
                 {{ 'REPLICATION.NAME' | translate }}
             </ng-template>
         </clr-dg-column>
         <clr-dg-column class="status-width">
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[1] }"
-                (clrDgHiddenChange)="columnHiddenChange(1)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[1] }">
                 {{ 'REPLICATION.STATUS' | translate }}
             </ng-template>
         </clr-dg-column>
         <clr-dg-column class="col-width">
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[2] }"
-                (clrDgHiddenChange)="columnHiddenChange(2)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[2] }">
                 {{ 'REPLICATION.SRC_REGISTRY' | translate }}
             </ng-template>
         </clr-dg-column>
         <clr-dg-column class="col-width">
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[3] }"
-                (clrDgHiddenChange)="columnHiddenChange(3)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[3] }">
                 {{ 'REPLICATION.REPLICATION_MODE' | translate }}
             </ng-template>
         </clr-dg-column>
         <clr-dg-column class="min-width">
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[4] }"
-                (clrDgHiddenChange)="columnHiddenChange(4)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[4] }">
                 {{ 'REPLICATION.DESTINATION_NAMESPACE' | translate }}
             </ng-template>
         </clr-dg-column>
         <clr-dg-column>
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[5] }"
-                (clrDgHiddenChange)="columnHiddenChange(5)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[5] }">
                 {{ 'REPLICATION.DES_REPO_FLATTENING' | translate }}
             </ng-template>
         </clr-dg-column>
         <clr-dg-column>
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[6] }"
-                (clrDgHiddenChange)="columnHiddenChange(6)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[6] }">
                 {{ 'REPLICATION.REPLICATION_TRIGGER' | translate }}
             </ng-template></clr-dg-column
         >
         <clr-dg-column [clrDgSortBy]="'speed'">
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[7] }"
-                (clrDgHiddenChange)="columnHiddenChange(7)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[7] }">
                 {{ 'REPLICATION.BANDWIDTH' | translate }}
             </ng-template>
         </clr-dg-column>
         <clr-dg-column [clrDgField]="'description'">
-            <ng-template
-                [clrDgHideableColumn]="{ hidden: hiddenArray[8] }"
-                (clrDgHiddenChange)="columnHiddenChange(8)">
+            <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[8] }">
                 {{ 'REPLICATION.DESCRIPTION' | translate }}
             </ng-template>
         </clr-dg-column>

src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.ts

@@ -12,10 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import {
-    AfterViewInit,
     Component,
+    ElementRef,
     EventEmitter,
     Input,
+    OnDestroy,
     OnInit,
     Output,
     ViewChild,
@@ -46,7 +47,7 @@ import {
     OperationState,
 } from '../../../../../shared/components/operation/operate';
 import { OperationService } from '../../../../../shared/components/operation/operation.service';
-import { ClrDatagridStateInterface } from '@clr/angular';
+import { ClrDatagrid, ClrDatagridStateInterface } from '@clr/angular';
 import { errorHandler } from '../../../../../shared/units/shared.utils';
 import { ConfirmationAcknowledgement } from '../../../../global-confirmation-dialog/confirmation-state-message';
 import { ConfirmationMessage } from '../../../../global-confirmation-dialog/confirmation-message';
@@ -67,7 +68,7 @@ import { JobType } from '../../../job-service-dashboard/job-service-dashboard.in
     templateUrl: './list-replication-rule.component.html',
     styleUrls: ['./list-replication-rule.component.scss'],
 })
-export class ListReplicationRuleComponent implements OnInit, AfterViewInit {
+export class ListReplicationRuleComponent implements OnInit, OnDestroy {
     @Input() selectedId: number | string;
     @Input() withReplicationJob: boolean;
     @Input() hasCreateReplicationPermission: boolean;
@@ -101,17 +102,15 @@ export class ListReplicationRuleComponent implements OnInit, AfterViewInit {
         PageSizeMapKeys.LIST_REPLICATION_RULE_COMPONENT,
         [false, false, false, false, false, false, false, true, true]
     );
-    copiedHiddenArray: boolean[] = [];
-    private _hasViewInit: boolean = false;
+    @ViewChild('datagrid')
+    datagrid: ClrDatagrid;
     constructor(
         private replicationService: ReplicationService,
         private translateService: TranslateService,
         private errorHandlerEntity: ErrorHandler,
         private operationService: OperationService,
         private scheduleService: ScheduleService
-    ) {
-        this.copiedHiddenArray = clone(this.hiddenArray);
-    }
+    ) {}
 
     ngOnInit() {
         this.scheduleService
@@ -121,8 +120,14 @@ export class ListReplicationRuleComponent implements OnInit, AfterViewInit {
             });
     }
 
-    ngAfterViewInit() {
-        this._hasViewInit = true;
+    ngOnDestroy(): void {
+        this.datagrid['columnsService']?.columns?.forEach((item, index) => {
+            this.hiddenArray[index] = !!item?._value?.hidden;
+        });
+        setHiddenArrayToLocalStorage(
+            PageSizeMapKeys.LIST_REPLICATION_RULE_COMPONENT,
+            this.hiddenArray
+        );
     }
 
     getTriggerTypeI18n(t: ReplicationTrigger) {
@@ -397,14 +402,4 @@ export class ListReplicationRuleComponent implements OnInit, AfterViewInit {
         }
         return 'REPLICATION.UNLIMITED';
     }
-
-    columnHiddenChange(index: number) {
-        if (this._hasViewInit) {
-            this.copiedHiddenArray[index] = !this.copiedHiddenArray[index];
-            setHiddenArrayToLocalStorage(
-                PageSizeMapKeys.LIST_REPLICATION_RULE_COMPONENT,
-                this.copiedHiddenArray
-            );
-        }
-    }
 }

src/portal/src/app/base/left-side-nav/replication/replication/replication-tasks/replication-tasks.component.ts

@@ -6,7 +6,6 @@ import { Subscription, timer } from 'rxjs';
 import { ErrorHandler } from '../../../../../shared/units/error-handler';
 import {
     ClrDatagridComparatorInterface,
-    ReplicationJob,
     ReplicationTasks,
 } from '../../../../../shared/services';
 import {
@@ -55,9 +54,9 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
     timerDelay: Subscription;
     executionId: string;
     startTimeComparator: ClrDatagridComparatorInterface<ReplicationTask> =
-        new CustomComparator<ReplicationJob>('start_time', 'date');
+        new CustomComparator<ReplicationExecution>('start_time', 'date');
     endTimeComparator: ClrDatagridComparatorInterface<ReplicationTask> =
-        new CustomComparator<ReplicationJob>('end_time', 'date');
+        new CustomComparator<ReplicationExecution>('end_time', 'date');
     tasksTimeout: any;
     constructor(
         private translate: TranslateService,

src/portal/src/app/base/left-side-nav/replication/replication/replication.component.html

@@ -194,7 +194,6 @@
     </div>
     <hbr-create-edit-rule
         *ngIf="isSystemAdmin"
-        [withAdmiral]="withAdmiral"
         (goToRegistry)="goRegistry()"
         (reload)="reloadRules($event)"></hbr-create-edit-rule>
     <confirmation-dialog

src/portal/src/app/base/left-side-nav/replication/replication/replication.component.spec.ts

@@ -8,10 +8,9 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ConfirmationDialogComponent } from '../../../../shared/components/confirmation-dialog';
 import { ReplicationComponent } from './replication.component';
 import { CronScheduleComponent } from '../../../../shared/components/cron-schedule';
-import { ReplicationJob, Endpoint } from '../../../../shared/services';
+import { Endpoint } from '../../../../shared/services';
 import { CronTooltipComponent } from '../../../../shared/components/cron-schedule';
 import { ErrorHandler } from '../../../../shared/units/error-handler';
-import { ReplicationJobItem } from '../../../../shared/services';
 import { OperationService } from '../../../../shared/components/operation/operation.service';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of, Subscription } from 'rxjs';
@@ -20,6 +19,7 @@ import { delay } from 'rxjs/operators';
 import { SharedTestingModule } from '../../../../shared/shared.module';
 import { ReplicationPolicy } from '../../../../../../ng-swagger-gen/models/replication-policy';
 import { ReplicationService } from 'ng-swagger-gen/services/replication.service';
+import { ReplicationExecution } from '../../../../../../ng-swagger-gen/models/replication-execution';
 
 describe('Replication Component (inline template)', () => {
     let mockRules: ReplicationPolicy[] = [
@@ -51,7 +51,7 @@ describe('Replication Component (inline template)', () => {
         },
     ];
 
-    let mockJobs: ReplicationJobItem[] = [
+    let mockJobs: ReplicationExecution[] = [
         {
             id: 1,
             status: 'stopped',
@@ -116,7 +116,7 @@ describe('Replication Component (inline template)', () => {
         },
     ];
 
-    let mockJob: ReplicationJob = {
+    let mockJob: any = {
         metadata: { xTotalCount: 3 },
         data: mockJobs,
     };
@@ -190,7 +190,7 @@ describe('Replication Component (inline template)', () => {
     });
     it('function "getDuration" should work', () => {
         // ms level
-        const item: ReplicationJobItem = {
+        const item: any = {
             start_time: 1589340503637,
             end_time: 1589340503638,
             id: 3,

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

@@ -39,11 +39,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { ListReplicationRuleComponent } from './list-replication-rule/list-replication-rule.component';
 import { CreateEditRuleComponent } from './create-edit-rule/create-edit-rule.component';
 import { ErrorHandler } from '../../../../shared/units/error-handler';
-import {
-    Comparator,
-    ReplicationJob,
-    ReplicationJobItem,
-} from '../../../../shared/services';
+import { Comparator } from '../../../../shared/services';
 
 import {
     calculatePage,
@@ -78,6 +74,7 @@ import { ConfirmationAcknowledgement } from '../../../global-confirmation-dialog
 import { ReplicationService } from 'ng-swagger-gen/services/replication.service';
 import { ReplicationPolicy } from '../../../../../../ng-swagger-gen/models/replication-policy';
 import { ReplicationExecutionFilter } from '../replication';
+import { ReplicationExecution } from '../../../../../../ng-swagger-gen/models/replication-execution';
 
 const ONE_HOUR_SECONDS: number = 3600;
 const ONE_MINUTE_SECONDS: number = 60;
@@ -126,11 +123,11 @@ export class ReplicationComponent implements OnInit, OnDestroy {
     currentRuleStatus: { key: string; description: string };
     currentTerm: string;
     defaultFilter = 'trigger';
-    selectedRow: ReplicationJobItem[] = [];
+    selectedRow: ReplicationExecution[] = [];
     isStopOnGoing: boolean;
     hiddenJobList = true;
 
-    jobs: ReplicationJobItem[];
+    jobs: ReplicationExecution[];
 
     @ViewChild(ListReplicationRuleComponent)
     listReplicationRule: ListReplicationRuleComponent;
@@ -144,10 +141,10 @@ export class ReplicationComponent implements OnInit, OnDestroy {
     @ViewChild('StopConfirmDialog')
     StopConfirmDialog: ConfirmationDialogComponent;
 
-    creationTimeComparator: Comparator<ReplicationJob> =
-        new CustomComparator<ReplicationJob>('start_time', 'date');
-    updateTimeComparator: Comparator<ReplicationJob> =
-        new CustomComparator<ReplicationJob>('end_time', 'date');
+    creationTimeComparator: Comparator<ReplicationExecution> =
+        new CustomComparator<ReplicationExecution>('start_time', 'date');
+    updateTimeComparator: Comparator<ReplicationExecution> =
+        new CustomComparator<ReplicationExecution>('end_time', 'date');
 
     // Server driven pagination
     currentPage: number = 1;
@@ -290,7 +287,6 @@ export class ReplicationComponent implements OnInit, OnDestroy {
         if (withLoading) {
             this.jobsLoading = true;
         }
-        this.selectedRow = [];
         this.replicationService
             .listReplicationExecutionsResponse(params)
             .subscribe(
@@ -299,7 +295,26 @@ export class ReplicationComponent implements OnInit, OnDestroy {
                         response.headers.get('x-total-count'),
                         10
                     );
-                    this.jobs = response.body as ReplicationJobItem[];
+                    if (withLoading) {
+                        this.jobs = response.body;
+                    } else {
+                        // Do not update reference of this.jobs on refresh, otherwise datagrid will refresh
+                        this.jobs?.forEach(item1 => {
+                            response.body?.forEach(item2 => {
+                                if (item1.id === item2.id) {
+                                    item1.status = item2.status;
+                                    item1.status_text = item2.status_text;
+                                    item1.failed = item2.failed;
+                                    item1.in_progress = item2.in_progress;
+                                    item1.stopped = item2.stopped;
+                                    item1.succeed = item2.succeed;
+                                    item1.total = item2.total;
+                                    item1.start_time = item2.start_time;
+                                    item1.end_time = item2.end_time;
+                                }
+                            });
+                        });
+                    }
                     if (!this.timerDelay) {
                         this.timerDelay = timer(
                             REFRESH_TIME_DIFFERENCE,
@@ -320,11 +335,14 @@ export class ReplicationComponent implements OnInit, OnDestroy {
                         });
                     }
                     // Do filtering and sorting
-                    this.jobs = doFiltering<ReplicationJobItem>(
+                    this.jobs = doFiltering<ReplicationExecution>(
+                        this.jobs,
+                        state
+                    );
+                    this.jobs = doSorting<ReplicationExecution>(
                         this.jobs,
                         state
                     );
-                    this.jobs = doSorting<ReplicationJobItem>(this.jobs, state);
 
                     this.jobsLoading = false;
                 },
@@ -461,7 +479,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
         this.hiddenJobList = true;
     }
 
-    openStopExecutionsDialog(targets: ReplicationJobItem[]) {
+    openStopExecutionsDialog(targets: ReplicationExecution[]) {
         let ExecutionId = targets.map(robot => robot.id).join(',');
         let StopExecutionsMessage = new ConfirmationMessage(
             'REPLICATION.STOP_TITLE',
@@ -497,7 +515,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
         }
     }
 
-    StopExecutions(targets: ReplicationJobItem[]): void {
+    StopExecutions(targets: ReplicationExecution[]): void {
         if (targets && targets.length < 1) {
             return;
         }
@@ -527,7 +545,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
         }
     }
 
-    StopOperate(targets: ReplicationJobItem): any {
+    StopOperate(targets: ReplicationExecution): any {
         let operMessage = new OperateInfo();
         operMessage.name = 'OPERATION.STOP_EXECUTIONS';
         operMessage.data.id = targets.id;
@@ -578,6 +596,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
     }
 
     refreshJobs() {
+        this.selectedRow = [];
         this.currentTerm = '';
         this.currentPage = 1;
         let st: ClrDatagridStateInterface = {
@@ -594,7 +613,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
         this.isOpenFilterTag = isOpen;
     }
 
-    getDuration(j: ReplicationJobItem) {
+    getDuration(j: ReplicationExecution) {
         if (!j) {
             return;
         }

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html

@@ -8,6 +8,7 @@
 <div class="row tag-row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <clr-datagrid
+            #datagrid
             [clrDgLoading]="loading"
             (clrDgRefresh)="clrDgRefresh($event)"
             [(clrDgSelected)]="selectedRow">
@@ -137,78 +138,58 @@
 
             <clr-dg-column class="flex-max-width" [clrDgSortBy]="'digest'"
                 ><ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[0] }"
-                    (clrDgHiddenChange)="columnHiddenChange(0)">
+                    [clrDgHideableColumn]="{ hidden: hiddenArray[0] }">
                     {{ 'REPOSITORY.ARTIFACTS_COUNT' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column class="pull-command-column">
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[1] }"
-                    (clrDgHiddenChange)="columnHiddenChange(1)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[1] }">
                     {{ 'REPOSITORY.PULL_COMMAND' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column *ngIf="depth">
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[2] }"
-                    (clrDgHiddenChange)="columnHiddenChange(2)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[2] }">
                     {{ 'REPOSITORY.PLATFORM' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column>
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[3] }"
-                    (clrDgHiddenChange)="columnHiddenChange(3)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[3] }">
                     {{ 'REPOSITORY.TAGS' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column class="co-signed-column">
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[4] }"
-                    (clrDgHiddenChange)="columnHiddenChange(4)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[4] }">
                     {{ 'ACCESSORY.CO_SIGNED' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column [clrDgSortBy]="'size'">
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[5] }"
-                    (clrDgHiddenChange)="columnHiddenChange(5)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[5] }">
                     {{ 'REPOSITORY.SIZE' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column class="vul-column">
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[6] }"
-                    (clrDgHiddenChange)="columnHiddenChange(6)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[6] }">
                     {{ 'REPOSITORY.VULNERABILITY' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column class="annotations-column">
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[7] }"
-                    (clrDgHiddenChange)="columnHiddenChange(7)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[7] }">
                     {{ 'ARTIFACT.ANNOTATION' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column>
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[8] }"
-                    (clrDgHiddenChange)="columnHiddenChange(8)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[8] }">
                     {{ 'REPOSITORY.LABELS' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column [clrDgSortBy]="pushComparator">
-                <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[9] }"
-                    (clrDgHiddenChange)="columnHiddenChange(9)">
+                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[9] }">
                     {{ 'REPOSITORY.PUSH_TIME' | translate }}
                 </ng-template>
             </clr-dg-column>
             <clr-dg-column [clrDgSortBy]="pullComparator">
                 <ng-template
-                    [clrDgHideableColumn]="{ hidden: hiddenArray[10] }"
-                    (clrDgHiddenChange)="columnHiddenChange(10)">
+                    [clrDgHideableColumn]="{ hidden: hiddenArray[10] }">
                     {{ 'REPOSITORY.PULL_TIME' | translate }}
                 </ng-template>
             </clr-dg-column>

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -11,13 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import {
-    AfterViewInit,
-    Component,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { forkJoin, Observable, of, Subscription } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
@@ -104,9 +98,7 @@ const FALSE: string = 'false';
     templateUrl: './artifact-list-tab.component.html',
     styleUrls: ['./artifact-list-tab.component.scss'],
 })
-export class ArtifactListTabComponent
-    implements OnInit, OnDestroy, AfterViewInit
-{
+export class ArtifactListTabComponent implements OnInit, OnDestroy {
     projectId: number;
     projectName: string;
     repoName: string;
@@ -187,9 +179,9 @@ export class ArtifactListTabComponent
             false,
         ]
     );
-    copiedHiddenArray: boolean[] = [];
-    private _hasViewInit: boolean = false;
     deleteAccessorySub: Subscription;
+    @ViewChild('datagrid')
+    datagrid;
     constructor(
         private errorHandlerService: ErrorHandler,
         private artifactService: ArtifactService,
@@ -201,9 +193,7 @@ export class ArtifactListTabComponent
         private router: Router,
         private appConfigService: AppConfigService,
         private artifactListPageService: ArtifactListPageService
-    ) {
-        this.copiedHiddenArray = clone(this.hiddenArray);
-    }
+    ) {}
     initRouterData() {
         this.projectId =
             this.activatedRoute.snapshot?.parent?.parent?.params['id'];
@@ -253,10 +243,6 @@ export class ArtifactListTabComponent
         }
     }
 
-    ngAfterViewInit() {
-        this._hasViewInit = true;
-    }
-
     ngOnDestroy() {
         if (this.updateArtifactSub) {
             this.updateArtifactSub.unsubscribe();
@@ -266,6 +252,21 @@ export class ArtifactListTabComponent
             this.deleteAccessorySub.unsubscribe();
             this.deleteAccessorySub = null;
         }
+        this.datagrid['columnsService']?.columns?.forEach((item, index) => {
+            if (this.depth) {
+                this.hiddenArray[index] = !!item?._value?.hidden;
+            } else {
+                if (index < 2) {
+                    this.hiddenArray[index] = !!item?._value?.hidden;
+                } else {
+                    this.hiddenArray[index + 1] = !!item?._value?.hidden;
+                }
+            }
+        });
+        setHiddenArrayToLocalStorage(
+            PageSizeMapKeys.ARTIFACT_LIST_TAB_COMPONENT,
+            this.hiddenArray
+        );
     }
     get withNotary(): boolean {
         return this.appConfigService.getConfig()?.with_notary;
@@ -1063,14 +1064,4 @@ export class ArtifactListTabComponent
     isEllipsisActive(ele: HTMLSpanElement): boolean {
         return ele?.offsetWidth < ele?.scrollWidth;
     }
-
-    columnHiddenChange(index: number) {
-        if (this._hasViewInit) {
-            this.copiedHiddenArray[index] = !this.copiedHiddenArray[index];
-            setHiddenArrayToLocalStorage(
-                PageSizeMapKeys.ARTIFACT_LIST_TAB_COMPONENT,
-                this.copiedHiddenArray
-            );
-        }
-    }
 }

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

@@ -74,36 +74,6 @@ export class Trigger {
     }
 }
 
-/**
- * Interface for replication job.
- *
- **
- * interface ReplicationJob
- */
-export interface ReplicationJob {
-    metadata?: Metadata;
-    data: ReplicationJobItem[];
-}
-
-/**
- * Interface for replication job item.
- *
- **
- * interface ReplicationJob
- */
-export interface ReplicationJobItem extends Base {
-    [key: string]: any | any[];
-    id: number;
-    status: string;
-    policy_id: number;
-    trigger: string;
-    total: number;
-    failed: number;
-    succeed: number;
-    in_progress: number;
-    stopped: number;
-}
-
 /**
  * Interface for replication tasks item.
  *

src/portal/src/app/shared/services/replication.service.ts

@@ -8,15 +8,12 @@ import {
     HTTP_GET_OPTIONS_OBSERVE_RESPONSE,
     CURRENT_BASE_HREF,
 } from '../units/utils';
-import {
-    ReplicationJob,
-    ReplicationJobItem,
-    ReplicationTasks,
-} from './interface';
+import { ReplicationTasks } from './interface';
 import { RequestQueryParams } from './RequestQueryParams';
 import { map, catchError } from 'rxjs/operators';
 import { Observable, throwError as observableThrowError } from 'rxjs';
 import { ReplicationPolicy } from '../../../../ng-swagger-gen/models/replication-policy';
+import { ReplicationExecution } from '../../../../ng-swagger-gen/models/replication-execution';
 
 /**
  * Define the service methods to handle the replication (rule and job) related things.
@@ -163,7 +160,7 @@ export abstract class ReplicationService {
     abstract getExecutions(
         ruleId: number | string,
         queryParams?: RequestQueryParams
-    ): Observable<ReplicationJob>;
+    ): Observable<ReplicationExecution>;
 
     /**
      * Get the specified execution.
@@ -176,7 +173,7 @@ export abstract class ReplicationService {
      */
     abstract getExecutionById(
         executionId: number | string
-    ): Observable<ReplicationJob>;
+    ): Observable<ReplicationExecution>;
 
     /**
      * Get the log of the specified job.
@@ -410,7 +407,7 @@ export class ReplicationDefaultService extends ReplicationService {
     public getExecutions(
         ruleId: number | string,
         queryParams?: RequestQueryParams
-    ): Observable<ReplicationJob> {
+    ): Observable<ReplicationExecution> {
         if (!ruleId || ruleId <= 0) {
             return observableThrowError('Bad argument');
         }
@@ -421,13 +418,13 @@ export class ReplicationDefaultService extends ReplicationService {
         let url: string = `${this._replicateUrl}/executions`;
         queryParams = queryParams.set('policy_id', '' + ruleId);
         return this.http
-            .get<HttpResponse<ReplicationJobItem[]>>(
+            .get<HttpResponse<ReplicationExecution[]>>(
                 url,
                 buildHttpRequestOptionsWithObserveResponse(queryParams)
             )
             .pipe(
                 map(response => {
-                    let result: ReplicationJob = {
+                    let result: any = {
                         metadata: {
                             xTotalCount: 0,
                         },
@@ -441,7 +438,7 @@ export class ReplicationDefaultService extends ReplicationService {
                             result.metadata.xTotalCount = parseInt(xHeader, 0);
                         }
                     }
-                    result.data = response.body as ReplicationJobItem[];
+                    result.data = response.body as ReplicationExecution[];
                     if (result.metadata.xTotalCount === 0) {
                         if (result.data && result.data.length > 0) {
                             result.metadata.xTotalCount = result.data.length;
@@ -456,19 +453,19 @@ export class ReplicationDefaultService extends ReplicationService {
 
     public getExecutionById(
         executionId: number | string
-    ): Observable<ReplicationJob> {
+    ): Observable<ReplicationExecution> {
         if (!executionId || executionId <= 0) {
             return observableThrowError('Bad request argument.');
         }
         let requestUrl: string = `${this._replicateUrl}/executions/${executionId}`;
         return this.http
-            .get<HttpResponse<ReplicationJobItem[]>>(
+            .get<HttpResponse<ReplicationExecution[]>>(
                 requestUrl,
                 HTTP_GET_OPTIONS_OBSERVE_RESPONSE
             )
             .pipe(
                 map(response => {
-                    let result: ReplicationJob = {
+                    let result: any = {
                         metadata: {
                             xTotalCount: 0,
                         },
@@ -482,7 +479,7 @@ export class ReplicationDefaultService extends ReplicationService {
                             result.metadata.xTotalCount = parseInt(xHeader, 0);
                         }
                     }
-                    result.data = response.body as ReplicationJobItem[];
+                    result.data = response.body as ReplicationExecution[];
                     if (result.metadata.xTotalCount === 0) {
                         if (result.data && result.data.length > 0) {
                             result.metadata.xTotalCount = result.data.length;