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
  31   subs: Subscription;
  32
  33   permission: Permission;
  34   tableActions: CdTableAction[];
  35   selection = new CdTableSelection();
  36
  37   modalRef: NgbModalRef;
  38
  39   data: [];
  40   columns: {};
  41
  42   tableStatus = new TableStatusViewCache();
  43
  44   constructor(
  45     private authStorageService: AuthStorageService,
  46     private rbdMirroringService: RbdMirroringService,
  47     private modalService: ModalService,
  48     private taskWrapper: TaskWrapperService,
  49     private router: Router
  50   ) {
  51     this.data = [];
  52     this.permission = this.authStorageService.getPermissions().rbdMirroring;
  53
  54     const editModeAction: CdTableAction = {
  55       permission: 'update',
  56       icon: Icons.edit,
  57       click: () => this.editModeModal(),
  58       name: $localize`Edit Mode`,
  59       canBePrimary: () => true
  60     };
  61     const addPeerAction: CdTableAction = {
  62       permission: 'create',
  63       icon: Icons.add,
  64       name: $localize`Add Peer`,
  65       click: () => this.editPeersModal('add'),
  66       disable: () => !this.selection.first() || this.selection.first().mirror_mode === 'disabled',
  67       visible: () => !this.getPeerUUID(),
  68       canBePrimary: () => false
  69     };
  70     const editPeerAction: CdTableAction = {
  71       permission: 'update',
  72       icon: Icons.exchange,
  73       name: $localize`Edit Peer`,
  74       click: () => this.editPeersModal('edit'),
  75       visible: () => !!this.getPeerUUID()
  76     };
  77     const deletePeerAction: CdTableAction = {
  78       permission: 'delete',
  79       icon: Icons.destroy,
  80       name: $localize`Delete Peer`,
  81       click: () => this.deletePeersModal(),
  82       visible: () => !!this.getPeerUUID()
  83     };
  84     this.tableActions = [editModeAction, addPeerAction, editPeerAction, deletePeerAction];
  85   }
  86
  87   ngOnInit() {
  88     this.columns = [
  89       { prop: 'name', name: $localize`Name`, flexGrow: 2 },
  90       { prop: 'mirror_mode', name: $localize`Mode`, flexGrow: 2 },
  91       { prop: 'leader_id', name: $localize`Leader`, flexGrow: 2 },
  92       { prop: 'image_local_count', name: $localize`# Local`, flexGrow: 2 },
  93       { prop: 'image_remote_count', name: $localize`# Remote`, flexGrow: 2 },
  94       {
  95         prop: 'health',
  96         name: $localize`Health`,
  97         cellTemplate: this.healthTmpl,
  98         flexGrow: 1
  99       }
 100     ];
 101
 102     this.subs = this.rbdMirroringService.subscribeSummary((data) => {
 103       this.data = data.content_data.pools;
 104       this.tableStatus = new TableStatusViewCache(data.status);
 105     });
 106   }
 107
 108   ngOnDestroy(): void {
 109     this.subs.unsubscribe();
 110   }
 111
 112   refresh() {
 113     this.rbdMirroringService.refresh();
 114   }
 115
 116   editModeModal() {
 117     this.router.navigate([
 118       BASE_URL,
 119       { outlets: { modal: [URLVerbs.EDIT, this.selection.first().name] } }
 120     ]);
 121   }
 122
 123   editPeersModal(mode: string) {
 124     const initialState = {
 125       poolName: this.selection.first().name,
 126       mode: mode
 127     };
 128     if (mode === 'edit') {
 129       initialState['peerUUID'] = this.getPeerUUID();
 130     }
 131     this.modalRef = this.modalService.show(PoolEditPeerModalComponent, initialState);
 132   }
 133
 134   deletePeersModal() {
 135     const poolName = this.selection.first().name;
 136     const peerUUID = this.getPeerUUID();
 137
 138     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
 139       itemDescription: $localize`mirror peer`,
 140       itemNames: [`${poolName} (${peerUUID})`],
 141       submitActionObservable: () =>
 142         new Observable((observer: Subscriber<any>) => {
 143           this.taskWrapper
 144             .wrapTaskAroundCall({
 145               task: new FinishedTask('rbd/mirroring/peer/delete', {
 146                 pool_name: poolName
 147               }),
 148               call: this.rbdMirroringService.deletePeer(poolName, peerUUID)
 149             })
 150             .subscribe({
 151               error: (resp) => observer.error(resp),
 152               complete: () => {
 153                 this.rbdMirroringService.refresh();
 154                 observer.complete();
 155               }
 156             });
 157         })
 158     });
 159   }
 160
 161   getPeerUUID(): any {
 162     const selection = this.selection.first();
 163     const pool = this.data.find((o) => selection && selection.name === o['name']);
 164     if (pool && pool['peer_uuids']) {
 165       return pool['peer_uuids'][0];
 166     }
 167
 168     return undefined;
 169   }
 170
 171   updateSelection(selection: CdTableSelection) {
 172     this.selection = selection;
 173   }
 174 }