import { AbstractControl, UntypedFormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
-import { NgbActiveModal, NgbModalRef, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
import { ListItem } from 'carbon-components-angular';
import _ from 'lodash';
import { forkJoin, merge, Observable, Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
import { Pool } from '~/app/ceph/pool/pool';
import { CreateRgwServiceEntitiesComponent } from '~/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component';
-import { RgwRealm, RgwZonegroup, RgwZone } from '~/app/ceph/rgw/models/rgw-multisite';
+import { RgwRealm, RgwZonegroup, RgwZone, RgwEntities } from '~/app/ceph/rgw/models/rgw-multisite';
import { CephServiceService } from '~/app/shared/api/ceph-service.service';
import { HostService } from '~/app/shared/api/host.service';
import { FinishedTask } from '~/app/shared/models/finished-task';
import { Host } from '~/app/shared/models/host.interface';
import { CephServiceSpec } from '~/app/shared/models/service.interface';
-import { ModalService } from '~/app/shared/services/modal.service';
+import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
import { TimerService } from '~/app/shared/services/timer.service';
realmList: RgwRealm[] = [];
zonegroupList: RgwZonegroup[] = [];
zoneList: RgwZone[] = [];
- bsModalRef: NgbModalRef;
defaultZonegroup: RgwZonegroup;
showRealmCreationForm = false;
defaultsInfo: { defaultRealmName: string; defaultZonegroupName: string; defaultZoneName: string };
public rgwMultisiteService: RgwMultisiteService,
private route: ActivatedRoute,
public activeModal: NgbActiveModal,
- public modalService: ModalService
+ public modalService: ModalCdsService
) {
super();
this.resource = $localize`service`;
}
createMultisiteSetup() {
- this.bsModalRef = this.modalService.show(CreateRgwServiceEntitiesComponent, {
- size: 'lg'
- });
- this.bsModalRef.componentInstance.submitAction.subscribe(() => {
- this.setRgwFields();
+ const modalRef = this.modalService.show(CreateRgwServiceEntitiesComponent);
+ const modalComponent = modalRef as CreateRgwServiceEntitiesComponent;
+ modalComponent.submitAction.subscribe((item: RgwEntities) => {
+ this.setRgwFields(item.realm_name, item.zonegroup_name, item.zone_name);
});
}
}
-<cd-modal [modalRef]="activeModal">
- <ng-container i18n="form title"
- class="modal-title">Create Realm/Zone Group/Zone
- </ng-container>
-
- <ng-container class="modal-content">
- <form name="createMultisiteEntitiesForm"
- #formDir="ngForm"
- [formGroup]="createMultisiteEntitiesForm"
- novalidate>
- <div class="modal-body">
+<cds-modal size="sm"
+ [open]="open"
+ [hasScrollingContent]="false"
+ (overlaySelected)="closeModal()">
+ <cds-modal-header (closeSelect)="closeModal()">
+ <h3 cdsModalHeaderHeading
+ i18n>Create Realm/Zone Group/Zone</h3>
+ <cd-help-text [formAllFieldsRequired]="true"></cd-help-text>
+ </cds-modal-header>
+ <form
+ name="createMultisiteEntitiesForm"
+ #formDir="ngForm"
+ [formGroup]="createMultisiteEntitiesForm"
+ novalidate
+ >
+ <div cdsModalContent>
<cd-alert-panel type="info"
- spacingClass="mb-3">The realm/zone group/zone created will be set as default and master.
+ spacingClass="mt-3"
+ i18n>The realm/zone group/zone created will be set as default and master.
</cd-alert-panel>
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="realmName"
- i18n>Realm Name</label>
- <div class="cd-col-form-input">
- <input class="form-control"
- type="text"
- placeholder="Realm name..."
- id="realmName"
- name="realmName"
- formControlName="realmName">
- <span class="invalid-feedback"
- *ngIf="createMultisiteEntitiesForm.showError('realmName', formDir, 'required')"
- i18n>This field is required.</span>
- </div>
+ <div class="form-item">
+ <cds-text-label
+ labelInputID="realmName"
+ [invalid]="createMultisiteEntitiesForm.controls.realmName.invalid &&
+ createMultisiteEntitiesForm.controls.realmName.dirty"
+ [invalidText]="realmNameError"
+ i18n
+ >Realm Name
+ <input
+ cdsText
+ type="text"
+ id="realmName"
+ formControlName="realmName"
+ [invalid]="
+ createMultisiteEntitiesForm.controls.realmName.invalid &&
+ createMultisiteEntitiesForm.controls.realmName.dirty"
+ [autofocus]="true"
+ modal-primary-focus
+ />
+ </cds-text-label>
+ <ng-template #realmNameError>
+ <span
+ class="invalid-feedback"
+ *ngIf="createMultisiteEntitiesForm.showError('realmName', formDir, 'required')"
+ i18n
+ >This field is required.</span
+ >
+ </ng-template>
</div>
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="zonegroupName"
- i18n>Zone Group Name</label>
- <div class="cd-col-form-input">
- <input class="form-control"
- type="text"
- placeholder="Zone group name..."
- id="zonegroupName"
- name="zonegroupName"
- formControlName="zonegroupName">
- <span class="invalid-feedback"
- *ngIf="createMultisiteEntitiesForm.showError('zonegroupName', formDir, 'required')"
- i18n>This field is required.</span>
- </div>
+
+ <div class="form-item">
+ <cds-text-label
+ labelInputID="zonegroupName"
+ [invalid]="createMultisiteEntitiesForm.controls.zonegroupName.invalid &&
+ createMultisiteEntitiesForm.controls.zonegroupName.dirty"
+ [invalidText]="zoneGroupNameError"
+ i18n
+ >Zone Group Name
+ <input
+ cdsText
+ type="text"
+ placeholder="Zone group name..."
+ id="zonegroupName"
+ name="zonegroupName"
+ formControlName="zonegroupName"
+ [invalid]="createMultisiteEntitiesForm.controls.zonegroupName.invalid &&
+ createMultisiteEntitiesForm.controls.zonegroupName.dirty"
+ />
+ </cds-text-label>
+ <ng-template #zoneGroupNameError>
+ <span
+ class="invalid-feedback"
+ *ngIf="createMultisiteEntitiesForm.showError('zonegroupName', formDir, 'required')"
+ i18n
+ >This field is required.</span
+ >
+ </ng-template>
</div>
- <div class="form-group row">
- <label class="cd-col-form-label required"
- for="zoneName"
- i18n>Zone Name</label>
- <div class="cd-col-form-input">
- <input class="form-control"
- type="text"
- placeholder="Zone name..."
- id="zoneName"
- name="zoneName"
- formControlName="zoneName">
- <span class="invalid-feedback"
- *ngIf="createMultisiteEntitiesForm.showError('zoneName', formDir, 'required')"
- i18n>This field is required.</span>
- </div>
+
+ <div class="form-item">
+ <cds-text-label
+ labelInputID="zoneName"
+ [invalid]="createMultisiteEntitiesForm.controls.zoneName.invalid &&
+ createMultisiteEntitiesForm.controls.zoneName.dirty"
+ [invalidText]="zoneNameError"
+ i18n
+ >Zone Name
+ <input
+ cdsText
+ type="text"
+ placeholder="Zone name..."
+ id="zoneName"
+ name="zoneName"
+ formControlName="zoneName"
+ [invalid]="createMultisiteEntitiesForm.controls.zoneName.invalid &&
+ createMultisiteEntitiesForm.controls.zoneName.dirty"
+ />
+ </cds-text-label>
+ <ng-template #zoneNameError>
+ <span
+ class="invalid-feedback"
+ *ngIf="createMultisiteEntitiesForm.showError('zoneName', formDir, 'required')"
+ i18n
+ >This field is required.</span
+ >
+ </ng-template>
</div>
</div>
- <div class="modal-footer">
- <cd-form-button-panel (submitActionEvent)="submit()"
- [form]="createMultisiteEntitiesForm"></cd-form-button-panel>
- </div>
- </form>
- </ng-container>
-</cd-modal>
+
+ <cd-form-button-panel
+ (submitActionEvent)="submit()"
+ [form]="createMultisiteEntitiesForm"
+ [modalForm]="true"
+ >
+ </cd-form-button-panel>
+ </form>
+</cds-modal>
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
-import { ModalService } from '~/app/shared/services/modal.service';
import { NotificationService } from '~/app/shared/services/notification.service';
import { RgwRealm, RgwZonegroup, RgwZone, SystemKey } from '../models/rgw-multisite';
import { NotificationType } from '~/app/shared/enum/notification-type.enum';
import { Subscription } from 'rxjs';
+import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
+import { CdForm } from '~/app/shared/forms/cd-form';
@Component({
selector: 'cd-create-rgw-service-entities',
templateUrl: './create-rgw-service-entities.component.html',
styleUrls: ['./create-rgw-service-entities.component.scss']
})
-export class CreateRgwServiceEntitiesComponent {
+export class CreateRgwServiceEntitiesComponent extends CdForm implements OnInit {
public sub = new Subscription();
createMultisiteEntitiesForm: CdFormGroup;
realm: RgwRealm;
public notificationService: NotificationService,
public rgwZonegroupService: RgwZonegroupService,
public rgwRealmService: RgwRealmService,
- public modalService: ModalService
+ public modalService: ModalCdsService
) {
+ super();
+ }
+
+ ngOnInit() {
this.createForm();
+ this.loadingReady();
}
createForm() {
NotificationType.success,
$localize`Realm/Zonegroup/Zone created successfully`
);
- this.submitAction.emit();
- this.activeModal.close();
+ this.submitAction.emit({
+ realm: this.realm,
+ zonegroup: this.zonegroup,
+ zone: this.zone
+ });
+ this.closeModal();
})
.catch(() => {
this.notificationService.show(
projects / ceph.git / commitdiff