ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.ts

   1 import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
   2 import { Router } from '@angular/router';
   3
   4 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
   5 import { Observable, Subscriber, Subscription } from 'rxjs';
   6
   7 import { RbdMirroringService } from '~/app/shared/api/rbd-mirroring.service';
   8 import { TableStatusViewCache } from '~/app/shared/classes/table-status-view-cache';
   9 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  10 import { URLVerbs } from '~/app/shared/constants/app.constants';
  11 import { Icons } from '~/app/shared/enum/icons.enum';
  12 import { CdTableAction } from '~/app/shared/models/cd-table-action';
  13 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
  14 import { FinishedTask } from '~/app/shared/models/finished-task';
  15 import { Permission } from '~/app/shared/models/permissions';
  16 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  17 import { ModalService } from '~/app/shared/services/modal.service';
  18 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  19 import { PoolEditPeerModalComponent } from '../pool-edit-peer-modal/pool-edit-peer-modal.component';
  20
  21 const BASE_URL = '/block/mirroring';
  22 @Component({
  23   selector: 'cd-mirroring-pools',
  24   templateUrl: './pool-list.component.html',
  25   styleUrls: ['./pool-list.component.scss']
  26 })
  27 export class PoolListComponent implements OnInit, OnDestroy {
  28   @ViewChild('healthTmpl', { static: true })
  29   healthTmpl: TemplateRef<any>;
  30   @ViewChild('localTmpl', { static: true })
  31   localTmpl: TemplateRef<any>;
  32   @ViewChild('remoteTmpl', { static: true })
  33   remoteTmpl: TemplateRef<any>;
  34
  35   subs: Subscription;
  36
  37   permission: Permission;
  38   tableActions: CdTableAction[];
  39   selection = new CdTableSelection();
  40
  41   modalRef: NgbModalRef;
  42
  43   data: [];
  44   columns: {};
  45
  46   tableStatus = new TableStatusViewCache();
  47
  48   constructor(
  49     private authStorageService: AuthStorageService,
  50     private rbdMirroringService: RbdMirroringService,
  51     private modalService: ModalService,
  52     private taskWrapper: TaskWrapperService,
  53     private router: Router
  54   ) {
  55     this.data = [];
  56     this.permission = this.authStorageService.getPermissions().rbdMirroring;
  57
  58     const editModeAction: CdTableAction = {
  59       permission: 'update',
  60       icon: Icons.edit,
  61       click: () => this.editModeModal(),
  62       name: $localize`Edit Mode`,
  63       canBePrimary: () => true
  64     };
  65     const addPeerAction: CdTableAction = {
  66       permission: 'create',
  67       icon: Icons.add,
  68       name: $localize`Add Peer`,
  69       click: () => this.editPeersModal('add'),
  70       disable: () => !this.selection.first() || this.selection.first().mirror_mode === 'disabled',
  71       visible: () => !this.getPeerUUID(),
  72       canBePrimary: () => false
  73     };
  74     const editPeerAction: CdTableAction = {
  75       permission: 'update',
  76       icon: Icons.exchange,
  77       name: $localize`Edit Peer`,
  78       click: () => this.editPeersModal('edit'),
  79       visible: () => !!this.getPeerUUID()
  80     };
  81     const deletePeerAction: CdTableAction = {
  82       permission: 'delete',
  83       icon: Icons.destroy,
  84       name: $localize`Delete Peer`,
  85       click: () => this.deletePeersModal(),
  86       visible: () => !!this.getPeerUUID()
  87     };
  88     this.tableActions = [editModeAction, addPeerAction, editPeerAction, deletePeerAction];
  89   }
  90
  91   ngOnInit() {
  92     this.columns = [
  93       { prop: 'name', name: $localize`Name`, flexGrow: 2 },
  94       { prop: 'mirror_mode', name: $localize`Mode`, flexGrow: 2 },
  95       { prop: 'leader_id', name: $localize`Leader`, flexGrow: 2 },
  96       {
  97         prop: 'image_local_count',
  98         name: $localize`# Local`,
  99         headerTemplate: this.localTmpl,
 100         flexGrow: 2
 101       },
 102       {
 103         prop: 'image_remote_count',
 104         name: $localize`# Remote`,
 105         headerTemplate: this.remoteTmpl,
 106         flexGrow: 2
 107       },
 108       {
 109         prop: 'health',
 110         name: $localize`Health`,
 111         cellTemplate: this.healthTmpl,
 112         flexGrow: 1
 113       }
 114     ];
 115
 116     this.subs = this.rbdMirroringService.subscribeSummary((data) => {
 117       this.data = data.content_data.pools;
 118       this.tableStatus = new TableStatusViewCache(data.status);
 119     });
 120   }
 121
 122   ngOnDestroy(): void {
 123     this.subs.unsubscribe();
 124   }
 125
 126   refresh() {
 127     this.rbdMirroringService.refresh();
 128   }
 129
 130   editModeModal() {
 131     this.router.navigate([
 132       BASE_URL,
 133       { outlets: { modal: [URLVerbs.EDIT, this.selection.first().name] } }
 134     ]);
 135   }
 136
 137   editPeersModal(mode: string) {
 138     const initialState = {
 139       poolName: this.selection.first().name,
 140       mode: mode
 141     };
 142     if (mode === 'edit') {
 143       initialState['peerUUID'] = this.getPeerUUID();
 144     }
 145     this.modalRef = this.modalService.show(PoolEditPeerModalComponent, initialState);
 146   }
 147
 148   deletePeersModal() {
 149     const poolName = this.selection.first().name;
 150     const peerUUID = this.getPeerUUID();
 151
 152     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
 153       itemDescription: $localize`mirror peer`,
 154       itemNames: [`${poolName} (${peerUUID})`],
 155       submitActionObservable: () =>
 156         new Observable((observer: Subscriber<any>) => {
 157           this.taskWrapper
 158             .wrapTaskAroundCall({
 159               task: new FinishedTask('rbd/mirroring/peer/delete', {
 160                 pool_name: poolName
 161               }),
 162               call: this.rbdMirroringService.deletePeer(poolName, peerUUID)
 163             })
 164             .subscribe({
 165               error: (resp) => observer.error(resp),
 166               complete: () => {
 167                 this.rbdMirroringService.refresh();
 168                 observer.complete();
 169               }
 170             });
 171         })
 172     });
 173   }
 174
 175   getPeerUUID(): any {
 176     const selection = this.selection.first();
 177     const pool = this.data.find((o) => selection && selection.name === o['name']);
 178     if (pool && pool['peer_uuids']) {
 179       return pool['peer_uuids'][0];
 180     }
 181
 182     return undefined;
 183   }
 184
 185   updateSelection(selection: CdTableSelection) {
 186     this.selection = selection;
 187   }
 188 }