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

   1 import { Component, OnInit } from '@angular/core';
   2 import { UntypedFormControl, Validators } from '@angular/forms';
   3 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
   4 import { RgwDaemonService } from '~/app/shared/api/rgw-daemon.service';
   5 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
   6 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
   7 import { NotificationService } from '~/app/shared/services/notification.service';
   8 import { catchError, switchMap } from 'rxjs/operators';
   9 import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
  10 import { RgwDaemon } from '../models/rgw-daemon';
  11 import { FlowType, RgwZonegroup } from '../models/rgw-multisite';
  12 import { of } from 'rxjs';
  13 import { SelectOption } from '~/app/shared/components/select/select-option.model';
  14 import _ from 'lodash';
  15 import { Icons } from '~/app/shared/enum/icons.enum';
  16 import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
  17 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
  18 import { ZoneData } from '../models/rgw-multisite-zone-selector';
  19
  20 @Component({
  21   selector: 'cd-rgw-multisite-sync-flow-modal',
  22   templateUrl: './rgw-multisite-sync-flow-modal.component.html',
  23   styleUrls: ['./rgw-multisite-sync-flow-modal.component.scss']
  24 })
  25 export class RgwMultisiteSyncFlowModalComponent implements OnInit {
  26   action: string;
  27   editing: boolean = false;
  28   groupType: FlowType;
  29   groupExpandedRow: any;
  30   flowSelectedRow: any;
  31   syncPolicyDirectionalFlowForm: CdFormGroup;
  32   syncPolicySymmetricalFlowForm: CdFormGroup;
  33   syncPolicyPipeForm: CdFormGroup;
  34   currentFormGroupContext: CdFormGroup;
  35   flowType = FlowType;
  36   icons = Icons;
  37   zones = new ZoneData(false, 'Filter Zones');
  38   sourceZones = new ZoneData(false, 'Filter Zones');
  39   destinationZones = new ZoneData(true, 'Filter or Add Zones');
  40
  41   constructor(
  42     public activeModal: NgbActiveModal,
  43     public actionLabels: ActionLabelsI18n,
  44     public notificationService: NotificationService,
  45     private rgwDaemonService: RgwDaemonService,
  46     private rgwZonegroupService: RgwZonegroupService,
  47     private rgwMultisiteService: RgwMultisiteService
  48   ) {}
  49
  50   ngOnInit(): void {
  51     if (this.action === 'edit') {
  52       this.editing = true;
  53     }
  54     if (this.groupType === FlowType.symmetrical) {
  55       this.createSymmetricalFlowForm();
  56       this.currentFormGroupContext = _.cloneDeep(this.syncPolicySymmetricalFlowForm);
  57     } else if (this.groupType === FlowType.directional) {
  58       this.createDirectionalFlowForm();
  59       this.currentFormGroupContext = _.cloneDeep(this.syncPolicyDirectionalFlowForm);
  60     }
  61     this.currentFormGroupContext.get('bucket_name').disable();
  62     if (this.editing) {
  63       this.currentFormGroupContext.patchValue({
  64         flow_id: this.flowSelectedRow.id,
  65         bucket_name: this.groupExpandedRow.bucket || ''
  66       });
  67     }
  68
  69     this.rgwDaemonService.selectedDaemon$
  70       .pipe(
  71         switchMap((daemon: RgwDaemon) => {
  72           if (daemon) {
  73             const zonegroupObj = new RgwZonegroup();
  74             zonegroupObj.name = daemon?.zonegroup_name;
  75             return this.rgwZonegroupService.get(zonegroupObj).pipe(
  76               catchError(() => {
  77                 return of([]);
  78               })
  79             );
  80           } else {
  81             return of([]);
  82           }
  83         })
  84       )
  85       .subscribe((zonegroupData: any) => {
  86         if (zonegroupData && zonegroupData?.zones?.length > 0) {
  87           const zones: any = [];
  88           zonegroupData.zones.forEach((zone: any) => {
  89             zones.push(new SelectOption(false, zone.name, ''));
  90           });
  91           this.zones.data.available = [...zones];
  92           this.sourceZones.data.available = [...zones];
  93           if (this.editing) {
  94             if (this.groupType === FlowType.symmetrical) {
  95               this.zones.data.selected = this.flowSelectedRow.zones;
  96             } else {
  97               this.destinationZones.data.selected = [this.flowSelectedRow.dest_zone];
  98               this.sourceZones.data.selected = [this.flowSelectedRow.source_zone];
  99             }
 100             this.zoneSelection();
 101           }
 102         }
 103       });
 104   }
 105
 106   createSymmetricalFlowForm() {
 107     this.syncPolicySymmetricalFlowForm = new CdFormGroup({
 108       ...this.commonFormControls(FlowType.symmetrical),
 109       zones: new UntypedFormControl([], {
 110         validators: [Validators.required]
 111       })
 112     });
 113   }
 114
 115   createDirectionalFlowForm() {
 116     this.syncPolicyDirectionalFlowForm = new CdFormGroup({
 117       ...this.commonFormControls(FlowType.directional),
 118       source_zone: new UntypedFormControl('', {
 119         validators: [Validators.required]
 120       }),
 121       destination_zone: new UntypedFormControl('', {
 122         validators: [Validators.required]
 123       })
 124     });
 125   }
 126
 127   commonFormControls(flowType: FlowType) {
 128     return {
 129       bucket_name: new UntypedFormControl(this.groupExpandedRow?.bucket),
 130       group_id: new UntypedFormControl(this.groupExpandedRow?.groupName, {
 131         validators: [Validators.required]
 132       }),
 133       flow_id: new UntypedFormControl('', {
 134         validators: [Validators.required]
 135       }),
 136       flow_type: new UntypedFormControl(flowType, {
 137         validators: [Validators.required]
 138       })
 139     };
 140   }
 141
 142   zoneSelection() {
 143     if (this.groupType === FlowType.symmetrical) {
 144       this.currentFormGroupContext.patchValue({
 145         zones: this.zones.data.selected
 146       });
 147     } else {
 148       this.currentFormGroupContext.patchValue({
 149         source_zone: this.sourceZones.data.selected,
 150         destination_zone: this.destinationZones.data.selected
 151       });
 152     }
 153   }
 154
 155   submit() {
 156     if (this.currentFormGroupContext.invalid) {
 157       return;
 158     }
 159     // Ensure that no validation is pending
 160     if (this.currentFormGroupContext.pending) {
 161       this.currentFormGroupContext.setErrors({ cdSubmitButton: true });
 162       return;
 163     }
 164     this.rgwMultisiteService
 165       .createEditSyncFlow(this.currentFormGroupContext.getRawValue())
 166       .subscribe(
 167         () => {
 168           const action = this.editing ? 'Modified' : 'Created';
 169           this.notificationService.show(
 170             NotificationType.success,
 171             $localize`${action} Sync Flow '${this.currentFormGroupContext.getValue('flow_id')}'`
 172           );
 173           this.activeModal.close('success');
 174         },
 175         () => {
 176           // Reset the 'Submit' button.
 177           this.currentFormGroupContext.setErrors({ cdSubmitButton: true });
 178           this.activeModal.dismiss();
 179         }
 180       );
 181   }
 182 }