Add stop button for GC (#17037)

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

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

@@ -4,7 +4,21 @@
 <span class="refresh-btn" (click)="refresh()">
     <clr-icon shape="refresh"></clr-icon>
 </span>
-<clr-datagrid [clrDgLoading]="loading" (clrDgRefresh)="getJobs(true, $event)">
+<clr-datagrid
+    [(clrDgSelected)]="selectedRow"
+    [clrDgLoading]="loading"
+    (clrDgRefresh)="getJobs(true, $event)">
+    <clr-dg-action-bar>
+        <div class="btn-group">
+            <button
+                type="button"
+                class="btn btn-secondary"
+                [disabled]="!canStop()"
+                (click)="openStopExecutionsDialog()">
+                {{ 'REPLICATION.STOPJOB' | translate }}
+            </button>
+        </div>
+    </clr-dg-action-bar>
     <clr-dg-column [clrDgField]="'id'">{{
         'GC.JOB_ID' | translate
     }}</clr-dg-column>

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

@@ -1,7 +1,12 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ErrorHandler } from '../../../../../../shared/units/error-handler';
-import { Subscription, timer } from 'rxjs';
+import { forkJoin, Subscription, timer } from 'rxjs';
-import { REFRESH_TIME_DIFFERENCE } from '../../../../../../shared/entities/shared.const';
+import {
+    ConfirmationButtons,
+    ConfirmationState,
+    ConfirmationTargets,
+    REFRESH_TIME_DIFFERENCE,
+} from '../../../../../../shared/entities/shared.const';
 import { GcService } from '../../../../../../../../ng-swagger-gen/services/gc.service';
 import {
     CURRENT_BASE_HREF,
@@ -14,13 +19,15 @@ import { ClrDatagridStateInterface } from '@clr/angular';
 import { finalize } from 'rxjs/operators';
 import { GCHistory } from '../../../../../../../../ng-swagger-gen/models/gchistory';
 import { JOB_STATUS, NO, YES } from '../../../clearing-job-interfact';
+import { ConfirmationMessage } from '../../../../../global-confirmation-dialog/confirmation-message';
+import { ConfirmationDialogService } from '../../../../../global-confirmation-dialog/confirmation-dialog.service';
 
 @Component({
     selector: 'gc-history',
     templateUrl: './gc-history.component.html',
     styleUrls: ['./gc-history.component.scss'],
 })
-export class GcHistoryComponent implements OnDestroy {
+export class GcHistoryComponent implements OnInit, OnDestroy {
     jobs: Array<GCHistory> = [];
     loading: boolean = true;
     timerDelay: Subscription;
@@ -31,10 +38,62 @@ export class GcHistoryComponent implements OnDestroy {
     page: number = 1;
     total: number = 0;
     state: ClrDatagridStateInterface;
+    selectedRow: GCHistory[] = [];
+    isStopOnGoing: boolean = false;
+    subscription: Subscription;
     constructor(
         private gcService: GcService,
-        private errorHandler: ErrorHandler
+        private errorHandler: ErrorHandler,
+        private confirmationDialogService: ConfirmationDialogService
     ) {}
+    ngOnInit() {
+        if (!this.subscription) {
+            this.subscription =
+                this.confirmationDialogService.confirmationConfirm$.subscribe(
+                    message => {
+                        if (
+                            message &&
+                            message.state === ConfirmationState.CONFIRMED &&
+                            message.source === ConfirmationTargets.STOP_GC
+                        ) {
+                            this.stopGc(message.data);
+                        }
+                    }
+                );
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.timerDelay) {
+            this.timerDelay.unsubscribe();
+            this.timerDelay = null;
+        }
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+
+    stopGc(gCHistory: GCHistory[]) {
+        this.isStopOnGoing = true;
+        forkJoin(
+            gCHistory.map(item => {
+                return this.gcService.stopGC({
+                    gcId: item.id,
+                });
+            })
+        )
+            .pipe(finalize(() => (this.isStopOnGoing = false)))
+            .subscribe({
+                next: res => {
+                    this.errorHandler.info('CLEARANCES.STOP_GC_SUCCESS');
+                },
+                error: err => {
+                    this.errorHandler.error(err);
+                },
+            });
+    }
+
     refresh() {
         this.page = 1;
         this.total = 0;
@@ -82,7 +141,22 @@ export class GcHistoryComponent implements OnDestroy {
                         if (xHeader) {
                             this.total = parseInt(xHeader, 0);
                         }
-                        this.jobs = res.body;
+                        if (!withLoading) {
+                            if (res?.body?.length) {
+                                res.body.forEach(item => {
+                                    this.jobs.forEach(item2 => {
+                                        if (item2.id === item.id) {
+                                            item2.job_status = item.job_status;
+                                            item2.update_time =
+                                                item.update_time;
+                                        }
+                                    });
+                                });
+                            }
+                        } else {
+                            this.selectedRow = [];
+                            this.jobs = res.body;
+                        }
                     }
                     // to avoid some jobs not finished.
                     if (!this.timerDelay) {
@@ -125,14 +199,36 @@ export class GcHistoryComponent implements OnDestroy {
         return NO;
     }
 
-    ngOnDestroy() {
-        if (this.timerDelay) {
-            this.timerDelay.unsubscribe();
-            this.timerDelay = null;
-        }
-    }
-
     getLogLink(id): string {
         return `${CURRENT_BASE_HREF}/system/gc/${id}/log`;
     }
+    canStop(): boolean {
+        if (this.isStopOnGoing) {
+            return false;
+        }
+        if (this.selectedRow?.length) {
+            return (
+                this.selectedRow.filter(item => {
+                    return (
+                        item.job_status === JOB_STATUS.PENDING ||
+                        item.job_status === JOB_STATUS.RUNNING
+                    );
+                })?.length > 0
+            );
+        }
+        return false;
+    }
+
+    openStopExecutionsDialog() {
+        const executionIds = this.selectedRow.map(robot => robot.id).join(',');
+        let StopExecutionsMessage = new ConfirmationMessage(
+            'REPLICATION.STOP_TITLE',
+            'REPLICATION.STOP_SUMMARY',
+            executionIds,
+            this.selectedRow,
+            ConfirmationTargets.STOP_GC,
+            ConfirmationButtons.CONFIRM_CANCEL
+        );
+        this.confirmationDialogService.openComfirmDialog(StopExecutionsMessage);
+    }
 }

src/portal/src/app/shared/entities/shared.const.ts

@@ -54,6 +54,7 @@ export const enum ConfirmationTargets {
     WEBHOOK,
     ACCESSORY,
     ALL_ACCESSORIES,
+    STOP_GC,
 }
 
 export const enum ActionType {

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

@@ -1749,6 +1749,7 @@
         "FORWARD_ENDPOINT": "Audit Log Forward Endpoint",
         "FORWARD_ENDPOINT_TOOLTIP": "Forward audit logs to the syslog endpoint, for example: harbor-log:10514",
         "SKIP_DATABASE": "Skip Audit Log Database",
-        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured"
+        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured",
+        "STOP_GC_SUCCESS": "Trigger stop GC operation successfully"
     }
 }

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

@@ -1749,6 +1749,7 @@
         "FORWARD_ENDPOINT": "Audit Log Forward Endpoint",
         "FORWARD_ENDPOINT_TOOLTIP": "Forward audit logs to the syslog endpoint, for example: harbor-log:10514",
         "SKIP_DATABASE": "Skip Audit Log Database",
-        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured"
+        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured",
+        "STOP_GC_SUCCESS": "Trigger stop GC operation successfully"
     }
 }

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

@@ -1748,6 +1748,7 @@
         "FORWARD_ENDPOINT": "Audit Log Forward Endpoint",
         "FORWARD_ENDPOINT_TOOLTIP": "Forward audit logs to the syslog endpoint, for example: harbor-log:10514",
         "SKIP_DATABASE": "Skip Audit Log Database",
-        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured"
+        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured",
+        "STOP_GC_SUCCESS": "Trigger stop GC operation successfully"
     }
 }

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

@@ -1718,6 +1718,7 @@
         "FORWARD_ENDPOINT": "Audit Log Forward Endpoint",
         "FORWARD_ENDPOINT_TOOLTIP": "Forward audit logs to the syslog endpoint, for example: harbor-log:10514",
         "SKIP_DATABASE": "Skip Audit Log Database",
-        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured"
+        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured",
+        "STOP_GC_SUCCESS": "Trigger stop GC operation successfully"
     }
 }

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

@@ -1745,6 +1745,7 @@
         "FORWARD_ENDPOINT": "Audit Log Forward Endpoint",
         "FORWARD_ENDPOINT_TOOLTIP": "Forward audit logs to the syslog endpoint, for example: harbor-log:10514",
         "SKIP_DATABASE": "Skip Audit Log Database",
-        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured"
+        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured",
+        "STOP_GC_SUCCESS": "Trigger stop GC operation successfully"
     }
 }

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

@@ -1749,6 +1749,7 @@
         "FORWARD_ENDPOINT": "Audit Log Forward Endpoint",
         "FORWARD_ENDPOINT_TOOLTIP": "Forward audit logs to the syslog endpoint, for example: harbor-log:10514",
         "SKIP_DATABASE": "Skip Audit Log Database",
-        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured"
+        "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured",
+        "STOP_GC_SUCCESS": "Trigger stop GC operation successfully"
     }
 }

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

@@ -1747,6 +1747,7 @@
         "FORWARD_ENDPOINT": "日志转发端点",
         "FORWARD_ENDPOINT_TOOLTIP": "将日志转发到指定的 syslog 端点，例如：harbor-log:10514",
         "SKIP_DATABASE": "跳过日志数据库",
-        "SKIP_DATABASE_TOOLTIP": "开启此项将不会在数据库中记录日志，需先配置日志转发端点"
+        "SKIP_DATABASE_TOOLTIP": "开启此项将不会在数据库中记录日志，需先配置日志转发端点",
+        "STOP_GC_SUCCESS": "成功触发停止垃圾回收的操作"
     }
 }

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

@@ -1740,6 +1740,7 @@
     "FORWARD_ENDPOINT": "Audit Log Forward Endpoint",
     "FORWARD_ENDPOINT_TOOLTIP": "Forward audit logs to the syslog endpoint, for example: harbor-log:10514",
     "SKIP_DATABASE": "Skip Audit Log Database",
-    "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured"
+    "SKIP_DATABASE_TOOLTIP": "Skip to log audit log in the database, only available when audit log forward endpoint is configured",
+    "STOP_GC_SUCCESS": "Trigger stop GC operation successfully"
   }
 }