git.apps.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 import {
   2   Component,
   3   Input,
   4   OnChanges,
   5   OnDestroy,
   6   OnInit,
   7   SimpleChanges,
   8   ViewChild
   9 } from '@angular/core';
  10 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
  11 import { BehaviorSubject, Observable, Subscription, of, timer } from 'rxjs';
  12 import { finalize, map, shareReplay, switchMap } from 'rxjs/operators';
  13 import { CephfsSnapshotScheduleService } from '~/app/shared/api/cephfs-snapshot-schedule.service';
  14 import { CdForm } from '~/app/shared/forms/cd-form';
  15 import { CdTableAction } from '~/app/shared/models/cd-table-action';
  16 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
  17 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
  18 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
  19 import { Permissions } from '~/app/shared/models/permissions';
  20 import { SnapshotSchedule } from '~/app/shared/models/snapshot-schedule';
  21 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  22 import { ModalService } from '~/app/shared/services/modal.service';
  23 import { Icons } from '~/app/shared/enum/icons.enum';
  24 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
  25 import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
  26 import { NotificationService } from '~/app/shared/services/notification.service';
  27 import { BlockUI, NgBlockUI } from 'ng-block-ui';
  28 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
  29 import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants';
  30 import { CephfsSnapshotscheduleFormComponent } from '../cephfs-snapshotschedule-form/cephfs-snapshotschedule-form.component';
  31 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  32 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  33 import { FinishedTask } from '~/app/shared/models/finished-task';
  34
  35 @Component({
  36   selector: 'cd-cephfs-snapshotschedule-list',
  37   templateUrl: './cephfs-snapshotschedule-list.component.html',
  38   styleUrls: ['./cephfs-snapshotschedule-list.component.scss']
  39 })
  40 export class CephfsSnapshotscheduleListComponent
  41   extends CdForm
  42   implements OnInit, OnChanges, OnDestroy {
  43   @Input() fsName!: string;
  44   @Input() id!: number;
  45
  46   @ViewChild('pathTpl', { static: true })
  47   pathTpl: any;
  48
  49   @ViewChild('retentionTpl', { static: true })
  50   retentionTpl: any;
  51
  52   @ViewChild('subvolTpl', { static: true })
  53   subvolTpl: any;
  54
  55   @BlockUI()
  56   blockUI: NgBlockUI;
  57
  58   snapshotSchedules$!: Observable<SnapshotSchedule[]>;
  59   subject$ = new BehaviorSubject<SnapshotSchedule[]>([]);
  60   snapScheduleModuleStatus$ = new BehaviorSubject<boolean>(false);
  61   moduleServiceListSub!: Subscription;
  62   columns: CdTableColumn[] = [];
  63   tableActions$ = new BehaviorSubject<CdTableAction[]>([]);
  64   context!: CdTableFetchDataContext;
  65   selection = new CdTableSelection();
  66   permissions!: Permissions;
  67   modalRef!: NgbModalRef;
  68   errorMessage: string = '';
  69   selectedName: string = '';
  70   icons = Icons;
  71   tableActions: CdTableAction[] = [
  72     {
  73       name: this.actionLabels.CREATE,
  74       permission: 'create',
  75       icon: Icons.add,
  76       click: () => this.openModal(false)
  77     },
  78     {
  79       name: this.actionLabels.EDIT,
  80       permission: 'update',
  81       icon: Icons.edit,
  82       click: () => this.openModal(true)
  83     },
  84     {
  85       name: this.actionLabels.DELETE,
  86       permission: 'delete',
  87       icon: Icons.trash,
  88       click: () => this.deleteSnapshotSchedule()
  89     }
  90   ];
  91
  92   MODULE_NAME = 'snap_schedule';
  93   ENABLE_MODULE_TIMER = 2 * 1000;
  94
  95   constructor(
  96     private snapshotScheduleService: CephfsSnapshotScheduleService,
  97     private authStorageService: AuthStorageService,
  98     private modalService: ModalService,
  99     private mgrModuleService: MgrModuleService,
 100     private notificationService: NotificationService,
 101     private actionLabels: ActionLabelsI18n,
 102     private taskWrapper: TaskWrapperService
 103   ) {
 104     super();
 105     this.permissions = this.authStorageService.getPermissions();
 106   }
 107
 108   ngOnChanges(changes: SimpleChanges): void {
 109     if (changes.fsName) {
 110       this.subject$.next([]);
 111     }
 112   }
 113
 114   ngOnInit(): void {
 115     this.moduleServiceListSub = this.mgrModuleService
 116       .list()
 117       .pipe(
 118         map((modules: any[]) => modules.find((module) => module?.['name'] === this.MODULE_NAME))
 119       )
 120       .subscribe({
 121         next: (module: any) => this.snapScheduleModuleStatus$.next(module?.enabled)
 122       });
 123
 124     this.snapshotSchedules$ = this.subject$.pipe(
 125       switchMap(() =>
 126         this.snapScheduleModuleStatus$.pipe(
 127           switchMap((status) => {
 128             if (!status) {
 129               return of([]);
 130             }
 131             return this.snapshotScheduleService
 132               .getSnapshotScheduleList('/', this.fsName)
 133               .pipe(map((list) => list.map((l) => ({ ...l, path: `${l.path}@${l.schedule}` }))));
 134           }),
 135           shareReplay(1)
 136         )
 137       )
 138     );
 139
 140     this.columns = [
 141       { prop: 'path', name: $localize`Path`, flexGrow: 3, cellTemplate: this.pathTpl },
 142       { prop: 'subvol', name: $localize`Subvolume`, cellTemplate: this.subvolTpl },
 143       { prop: 'scheduleCopy', name: $localize`Repeat interval` },
 144       { prop: 'schedule', isHidden: true },
 145       { prop: 'retentionCopy', name: $localize`Retention policy`, cellTemplate: this.retentionTpl },
 146       { prop: 'retention', isHidden: true },
 147       { prop: 'created_count', name: $localize`Created Count` },
 148       { prop: 'pruned_count', name: $localize`Deleted Count` },
 149       { prop: 'start', name: $localize`Start time`, cellTransformation: CellTemplate.timeAgo },
 150       { prop: 'created', name: $localize`Created`, cellTransformation: CellTemplate.timeAgo }
 151     ];
 152
 153     this.tableActions$.next(this.tableActions);
 154   }
 155
 156   ngOnDestroy(): void {
 157     this.moduleServiceListSub.unsubscribe();
 158   }
 159
 160   fetchData() {
 161     this.subject$.next([]);
 162   }
 163
 164   updateSelection(selection: CdTableSelection) {
 165     this.selection = selection;
 166     if (!this.selection.hasSelection) return;
 167     const isActive = this.selection.first()?.active;
 168
 169     this.tableActions$.next([
 170       ...this.tableActions,
 171       {
 172         name: isActive ? this.actionLabels.DEACTIVATE : this.actionLabels.ACTIVATE,
 173         permission: 'update',
 174         icon: isActive ? Icons.warning : Icons.success,
 175         click: () =>
 176           isActive ? this.deactivateSnapshotSchedule() : this.activateSnapshotSchedule()
 177       }
 178     ]);
 179   }
 180
 181   openModal(edit = false) {
 182     this.modalService.show(
 183       CephfsSnapshotscheduleFormComponent,
 184       {
 185         fsName: this.fsName,
 186         id: this.id,
 187         path: this.selection?.first()?.path,
 188         schedule: this.selection?.first()?.schedule,
 189         retention: this.selection?.first()?.retention,
 190         start: this.selection?.first()?.start,
 191         status: this.selection?.first()?.status,
 192         isEdit: edit
 193       },
 194       { size: 'lg' }
 195     );
 196   }
 197
 198   enableSnapshotSchedule() {
 199     let $obs;
 200     const fnWaitUntilReconnected = () => {
 201       timer(this.ENABLE_MODULE_TIMER).subscribe(() => {
 202         // Trigger an API request to check if the connection is
 203         // re-established.
 204         this.mgrModuleService.list().subscribe(
 205           () => {
 206             // Resume showing the notification toasties.
 207             this.notificationService.suspendToasties(false);
 208             // Unblock the whole UI.
 209             this.blockUI.stop();
 210             // Reload the data table content.
 211             this.notificationService.show(
 212               NotificationType.success,
 213               $localize`Enabled Snapshot Schedule Module`
 214             );
 215             // Reload the data table content.
 216           },
 217           () => {
 218             fnWaitUntilReconnected();
 219           }
 220         );
 221       });
 222     };
 223
 224     if (!this.snapScheduleModuleStatus$.value) {
 225       $obs = this.mgrModuleService
 226         .enable(this.MODULE_NAME)
 227         .pipe(finalize(() => this.snapScheduleModuleStatus$.next(true)));
 228     }
 229     $obs.subscribe(
 230       () => undefined,
 231       () => {
 232         // Suspend showing the notification toasties.
 233         this.notificationService.suspendToasties(true);
 234         // Block the whole UI to prevent user interactions until
 235         // the connection to the backend is reestablished
 236         this.blockUI.start($localize`Reconnecting, please wait ...`);
 237         fnWaitUntilReconnected();
 238       }
 239     );
 240   }
 241
 242   deactivateSnapshotSchedule() {
 243     const { path, start, fs, schedule, subvol, group } = this.selection.first();
 244
 245     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
 246       itemDescription: $localize`snapshot schedule`,
 247       actionDescription: this.actionLabels.DEACTIVATE,
 248       submitActionObservable: () =>
 249         this.taskWrapper.wrapTaskAroundCall({
 250           task: new FinishedTask('cephfs/snapshot/schedule/deactivate', {
 251             path
 252           }),
 253           call: this.snapshotScheduleService.deactivate({
 254             path,
 255             schedule,
 256             start,
 257             fs,
 258             subvol,
 259             group
 260           })
 261         })
 262     });
 263   }
 264
 265   activateSnapshotSchedule() {
 266     const { path, start, fs, schedule, subvol, group } = this.selection.first();
 267
 268     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
 269       itemDescription: $localize`snapshot schedule`,
 270       actionDescription: this.actionLabels.ACTIVATE,
 271       submitActionObservable: () =>
 272         this.taskWrapper.wrapTaskAroundCall({
 273           task: new FinishedTask('cephfs/snapshot/schedule/activate', {
 274             path
 275           }),
 276           call: this.snapshotScheduleService.activate({
 277             path,
 278             schedule,
 279             start,
 280             fs,
 281             subvol,
 282             group
 283           })
 284         })
 285     });
 286   }
 287
 288   deleteSnapshotSchedule() {
 289     const { path, start, fs, schedule, subvol, group } = this.selection.first();
 290
 291     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
 292       itemDescription: $localize`snapshot schedule`,
 293       submitActionObservable: () =>
 294         this.taskWrapper.wrapTaskAroundCall({
 295           task: new FinishedTask('cephfs/snapshot/schedule/' + URLVerbs.DELETE, {
 296             path
 297           }),
 298           call: this.snapshotScheduleService.delete({
 299             path,
 300             schedule,
 301             start,
 302             fs,
 303             subvol,
 304             group
 305           })
 306         })
 307     });
 308   }
 309 }