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

   1 import { Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
   2 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
   3 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
   4 import { Icons } from '~/app/shared/enum/icons.enum';
   5 import { CdTableAction } from '~/app/shared/models/cd-table-action';
   6 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
   7 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
   8 import { Permission } from '~/app/shared/models/permissions';
   9 import { ModalService } from '~/app/shared/services/modal.service';
  10 import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
  11 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  12 import { FinishedTask } from '~/app/shared/models/finished-task';
  13 import { Observable, Subscriber, forkJoin as observableForkJoin } from 'rxjs';
  14 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  15 import { TableComponent } from '~/app/shared/datatable/table/table.component';
  16 import { RgwMultisiteSyncFlowModalComponent } from '../rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component';
  17 import { FlowType } from '../models/rgw-multisite';
  18
  19 @Component({
  20   selector: 'cd-rgw-multisite-sync-policy-details',
  21   templateUrl: './rgw-multisite-sync-policy-details.component.html',
  22   styleUrls: ['./rgw-multisite-sync-policy-details.component.scss']
  23 })
  24 export class RgwMultisiteSyncPolicyDetailsComponent implements OnChanges {
  25   @Input()
  26   expandedRow: any;
  27   @Input()
  28   permission: Permission;
  29
  30   @ViewChild(TableComponent)
  31   table: TableComponent;
  32   @ViewChild('deleteTpl', { static: true })
  33   deleteTpl: TemplateRef<any>;
  34
  35   flowType = FlowType;
  36   modalRef: NgbModalRef;
  37   symmetricalFlowData: any = [];
  38   directionalFlowData: any = [];
  39   symmetricalFlowCols: CdTableColumn[];
  40   directionalFlowCols: CdTableColumn[];
  41   symFlowTableActions: CdTableAction[];
  42   dirFlowTableActions: CdTableAction[];
  43   symFlowSelection = new CdTableSelection();
  44   dirFlowSelection = new CdTableSelection();
  45
  46   constructor(
  47     private actionLabels: ActionLabelsI18n,
  48     private modalService: ModalService,
  49     private rgwMultisiteService: RgwMultisiteService,
  50     private taskWrapper: TaskWrapperService
  51   ) {
  52     this.symmetricalFlowCols = [
  53       {
  54         name: 'Name',
  55         prop: 'id',
  56         flexGrow: 1
  57       },
  58       {
  59         name: 'Zones',
  60         prop: 'zones',
  61         flexGrow: 1
  62       }
  63     ];
  64     this.directionalFlowCols = [
  65       {
  66         name: 'Source Zone',
  67         prop: 'source_zone',
  68         flexGrow: 1
  69       },
  70       {
  71         name: 'Destination Zone',
  72         prop: 'dest_zone',
  73         flexGrow: 1
  74       }
  75     ];
  76     const symAddAction: CdTableAction = {
  77       permission: 'create',
  78       icon: Icons.add,
  79       name: this.actionLabels.CREATE,
  80       click: () => this.openModal(FlowType.symmetrical),
  81       canBePrimary: (selection: CdTableSelection) => !selection.hasSelection
  82     };
  83     const symEditAction: CdTableAction = {
  84       permission: 'update',
  85       icon: Icons.edit,
  86       name: this.actionLabels.EDIT,
  87       click: () => this.openModal(FlowType.symmetrical, true)
  88     };
  89     const symDeleteAction: CdTableAction = {
  90       permission: 'delete',
  91       icon: Icons.destroy,
  92       disable: () => !this.symFlowSelection.hasSelection,
  93       name: this.actionLabels.DELETE,
  94       click: () => this.deleteFlow(FlowType.symmetrical),
  95       canBePrimary: (selection: CdTableSelection) => selection.hasMultiSelection
  96     };
  97     this.symFlowTableActions = [symAddAction, symEditAction, symDeleteAction];
  98     const dirAddAction: CdTableAction = {
  99       permission: 'create',
 100       icon: Icons.add,
 101       name: this.actionLabels.CREATE,
 102       click: () => this.openModal(FlowType.directional),
 103       canBePrimary: (selection: CdTableSelection) => !selection.hasSelection
 104     };
 105     const dirEditAction: CdTableAction = {
 106       permission: 'update',
 107       icon: Icons.edit,
 108       name: this.actionLabels.EDIT,
 109       click: () => this.openModal(FlowType.directional, true),
 110       disable: () => true // TODO: disabling 'edit' as we are not getting flow ID from backend which is needed for edit
 111     };
 112     const dirDeleteAction: CdTableAction = {
 113       permission: 'delete',
 114       icon: Icons.destroy,
 115       disable: () => true, // TODO: disabling 'delete' as we are not getting flow ID from backend which is needed for deletion
 116       name: this.actionLabels.DELETE,
 117       click: () => this.deleteFlow(FlowType.directional),
 118       canBePrimary: (selection: CdTableSelection) => selection.hasMultiSelection
 119     };
 120     this.dirFlowTableActions = [dirAddAction, dirEditAction, dirDeleteAction];
 121   }
 122
 123   ngOnChanges(changes: SimpleChanges): void {
 124     if (changes.expandedRow.currentValue && changes.expandedRow.currentValue.groupName) {
 125       this.symmetricalFlowData = [];
 126       this.directionalFlowData = [];
 127       this.loadFlowData();
 128     }
 129   }
 130
 131   loadFlowData(context?: any) {
 132     if (this.expandedRow) {
 133       this.rgwMultisiteService
 134         .getSyncPolicyGroup(this.expandedRow.groupName, this.expandedRow.bucket)
 135         .subscribe(
 136           (policy: any) => {
 137             this.symmetricalFlowData = policy.data_flow[FlowType.symmetrical] || [];
 138             this.directionalFlowData = policy.data_flow[FlowType.directional] || [];
 139           },
 140           () => {
 141             if (context) {
 142               context.error();
 143             }
 144           }
 145         );
 146     }
 147   }
 148
 149   updateSelection(selection: any, type: FlowType) {
 150     if (type === FlowType.directional) {
 151       this.dirFlowSelection = selection;
 152     } else {
 153       this.symFlowSelection = selection;
 154     }
 155   }
 156
 157   async openModal(flowType: FlowType, edit = false) {
 158     const action = edit ? 'edit' : 'create';
 159     const initialState = {
 160       groupType: flowType,
 161       groupExpandedRow: this.expandedRow,
 162       flowSelectedRow:
 163         flowType === FlowType.symmetrical
 164           ? this.symFlowSelection.first()
 165           : this.dirFlowSelection.first(),
 166       action: action
 167     };
 168
 169     this.modalRef = this.modalService.show(RgwMultisiteSyncFlowModalComponent, initialState, {
 170       size: 'lg'
 171     });
 172
 173     try {
 174       const res = await this.modalRef.result;
 175       if (res === 'success') {
 176         this.loadFlowData();
 177       }
 178     } catch (err) {}
 179   }
 180
 181   deleteFlow(flowType: FlowType) {
 182     let selection = this.symFlowSelection;
 183     if (flowType === FlowType.directional) {
 184       selection = this.dirFlowSelection;
 185     }
 186     const flowIds = selection.selected.map((flow: any) => flow.id);
 187     this.modalService.show(CriticalConfirmationModalComponent, {
 188       itemDescription: selection.hasSingleSelection ? $localize`Flow` : $localize`Flows`,
 189       itemNames: flowIds,
 190       bodyTemplate: this.deleteTpl,
 191       submitActionObservable: () => {
 192         return new Observable((observer: Subscriber<any>) => {
 193           this.taskWrapper
 194             .wrapTaskAroundCall({
 195               task: new FinishedTask('rgw/multisite/sync-flow/delete', {
 196                 flow_ids: flowIds
 197               }),
 198               call: observableForkJoin(
 199                 selection.selected.map((flow: any) => {
 200                   return this.rgwMultisiteService.removeSyncFlow(
 201                     flow.id,
 202                     flowType,
 203                     this.expandedRow.groupName,
 204                     this.expandedRow.bucket
 205                   );
 206                 })
 207               )
 208             })
 209             .subscribe({
 210               error: (error: any) => {
 211                 // Forward the error to the observer.
 212                 observer.error(error);
 213                 // Reload the data table content because some deletions might
 214                 // have been executed successfully in the meanwhile.
 215                 this.table.refreshBtn();
 216               },
 217               complete: () => {
 218                 // Notify the observer that we are done.
 219                 observer.complete();
 220                 // Reload the data table content.
 221                 this.table.refreshBtn();
 222               }
 223             });
 224         });
 225       }
 226     });
 227   }
 228 }