Skip to content

Commit 2a5c73f

Browse files
author
Dnyaneshwari
committed
mgr/dashboard: Carbonize Administration module > Create Realm/Zone group/Zone
Fixes: https://tracker.ceph.com/issues/73544 Signed-off-by: Dnyaneshwari Talwekar <[email protected]>
1 parent 2af1d1c commit 2a5c73f

File tree

4 files changed

+141
-80
lines changed

4 files changed

+141
-80
lines changed

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
33
import { AbstractControl, UntypedFormControl, Validators } from '@angular/forms';
44
import { ActivatedRoute, Router } from '@angular/router';
55

6-
import { NgbActiveModal, NgbModalRef, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
6+
import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
77
import { ListItem } from 'carbon-components-angular';
88
import _ from 'lodash';
99
import { forkJoin, merge, Observable, Subject, Subscription } from 'rxjs';
1010
import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
1111
import { Pool } from '~/app/ceph/pool/pool';
1212
import { CreateRgwServiceEntitiesComponent } from '~/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component';
13-
import { RgwRealm, RgwZonegroup, RgwZone } from '~/app/ceph/rgw/models/rgw-multisite';
13+
import { RgwRealm, RgwZonegroup, RgwZone, RgwEntities } from '~/app/ceph/rgw/models/rgw-multisite';
1414

1515
import { CephServiceService } from '~/app/shared/api/ceph-service.service';
1616
import { HostService } from '~/app/shared/api/host.service';
@@ -36,7 +36,7 @@ import { CdValidators } from '~/app/shared/forms/cd-validators';
3636
import { FinishedTask } from '~/app/shared/models/finished-task';
3737
import { Host } from '~/app/shared/models/host.interface';
3838
import { CephServiceSpec } from '~/app/shared/models/service.interface';
39-
import { ModalService } from '~/app/shared/services/modal.service';
39+
import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
4040
import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
4141
import { TimerService } from '~/app/shared/services/timer.service';
4242

@@ -88,7 +88,6 @@ export class ServiceFormComponent extends CdForm implements OnInit {
8888
realmList: RgwRealm[] = [];
8989
zonegroupList: RgwZonegroup[] = [];
9090
zoneList: RgwZone[] = [];
91-
bsModalRef: NgbModalRef;
9291
defaultZonegroup: RgwZonegroup;
9392
showRealmCreationForm = false;
9493
defaultsInfo: { defaultRealmName: string; defaultZonegroupName: string; defaultZoneName: string };
@@ -125,7 +124,7 @@ export class ServiceFormComponent extends CdForm implements OnInit {
125124
public rgwMultisiteService: RgwMultisiteService,
126125
private route: ActivatedRoute,
127126
public activeModal: NgbActiveModal,
128-
public modalService: ModalService
127+
public modalService: ModalCdsService
129128
) {
130129
super();
131130
this.resource = $localize`service`;
@@ -1364,11 +1363,10 @@ export class ServiceFormComponent extends CdForm implements OnInit {
13641363
}
13651364

13661365
createMultisiteSetup() {
1367-
this.bsModalRef = this.modalService.show(CreateRgwServiceEntitiesComponent, {
1368-
size: 'lg'
1369-
});
1370-
this.bsModalRef.componentInstance.submitAction.subscribe(() => {
1371-
this.setRgwFields();
1366+
const modalRef = this.modalService.show(CreateRgwServiceEntitiesComponent);
1367+
const modalComponent = modalRef as CreateRgwServiceEntitiesComponent;
1368+
modalComponent.submitAction.subscribe((item: RgwEntities) => {
1369+
this.setRgwFields(item.realm_name, item.zonegroup_name, item.zone_name);
13721370
});
13731371
}
13741372
}

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.html‎

Lines changed: 111 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,117 @@
1-
<cd-modal [modalRef]="activeModal">
2-
<ng-container i18n="form title"
3-
class="modal-title">Create Realm/Zone Group/Zone
4-
</ng-container>
5-
6-
<ng-container class="modal-content">
7-
<form name="createMultisiteEntitiesForm"
8-
#formDir="ngForm"
9-
[formGroup]="createMultisiteEntitiesForm"
10-
novalidate>
11-
<div class="modal-body">
1+
<cds-modal size="sm"
2+
[open]="open"
3+
[hasScrollingContent]="false"
4+
(overlaySelected)="closeModal()">
5+
<cds-modal-header (closeSelect)="closeModal()">
6+
<h3 cdsModalHeaderHeading
7+
i18n>Create Realm/Zone Group/Zone</h3>
8+
<cd-help-text [formAllFieldsRequired]="true"></cd-help-text>
9+
</cds-modal-header>
10+
<form
11+
name="createMultisiteEntitiesForm"
12+
#formDir="ngForm"
13+
[formGroup]="createMultisiteEntitiesForm"
14+
novalidate
15+
>
16+
<div cdsModalContent>
1217
<cd-alert-panel type="info"
13-
spacingClass="mb-3">The realm/zone group/zone created will be set as default and master.
18+
spacingClass="mt-3"
19+
i18n>The realm/zone group/zone created will be set as default and master.
1420
</cd-alert-panel>
15-
<div class="form-group row">
16-
<label class="cd-col-form-label required"
17-
for="realmName"
18-
i18n>Realm Name</label>
19-
<div class="cd-col-form-input">
20-
<input class="form-control"
21-
type="text"
22-
placeholder="Realm name..."
23-
id="realmName"
24-
name="realmName"
25-
formControlName="realmName">
26-
<span class="invalid-feedback"
27-
*ngIf="createMultisiteEntitiesForm.showError('realmName', formDir, 'required')"
28-
i18n>This field is required.</span>
29-
</div>
21+
<div class="form-item">
22+
<cds-text-label
23+
labelInputID="realmName"
24+
[invalid]="createMultisiteEntitiesForm.controls.realmName.invalid &&
25+
createMultisiteEntitiesForm.controls.realmName.dirty"
26+
[invalidText]="realmNameError"
27+
i18n
28+
>Realm Name
29+
<input
30+
cdsText
31+
type="text"
32+
id="realmName"
33+
formControlName="realmName"
34+
[invalid]="
35+
createMultisiteEntitiesForm.controls.realmName.invalid &&
36+
createMultisiteEntitiesForm.controls.realmName.dirty"
37+
[autofocus]="true"
38+
modal-primary-focus
39+
/>
40+
</cds-text-label>
41+
<ng-template #realmNameError>
42+
<span
43+
class="invalid-feedback"
44+
*ngIf="createMultisiteEntitiesForm.showError('realmName', formDir, 'required')"
45+
i18n
46+
>This field is required.</span
47+
>
48+
</ng-template>
3049
</div>
31-
<div class="form-group row">
32-
<label class="cd-col-form-label required"
33-
for="zonegroupName"
34-
i18n>Zone Group Name</label>
35-
<div class="cd-col-form-input">
36-
<input class="form-control"
37-
type="text"
38-
placeholder="Zone group name..."
39-
id="zonegroupName"
40-
name="zonegroupName"
41-
formControlName="zonegroupName">
42-
<span class="invalid-feedback"
43-
*ngIf="createMultisiteEntitiesForm.showError('zonegroupName', formDir, 'required')"
44-
i18n>This field is required.</span>
45-
</div>
50+
51+
<div class="form-item">
52+
<cds-text-label
53+
labelInputID="zonegroupName"
54+
[invalid]="createMultisiteEntitiesForm.controls.zonegroupName.invalid &&
55+
createMultisiteEntitiesForm.controls.zonegroupName.dirty"
56+
[invalidText]="zoneGroupNameError"
57+
i18n
58+
>Zone Group Name
59+
<input
60+
cdsText
61+
type="text"
62+
placeholder="Zone group name..."
63+
id="zonegroupName"
64+
name="zonegroupName"
65+
formControlName="zonegroupName"
66+
[invalid]="createMultisiteEntitiesForm.controls.zonegroupName.invalid &&
67+
createMultisiteEntitiesForm.controls.zonegroupName.dirty"
68+
/>
69+
</cds-text-label>
70+
<ng-template #zoneGroupNameError>
71+
<span
72+
class="invalid-feedback"
73+
*ngIf="createMultisiteEntitiesForm.showError('zonegroupName', formDir, 'required')"
74+
i18n
75+
>This field is required.</span
76+
>
77+
</ng-template>
4678
</div>
47-
<div class="form-group row">
48-
<label class="cd-col-form-label required"
49-
for="zoneName"
50-
i18n>Zone Name</label>
51-
<div class="cd-col-form-input">
52-
<input class="form-control"
53-
type="text"
54-
placeholder="Zone name..."
55-
id="zoneName"
56-
name="zoneName"
57-
formControlName="zoneName">
58-
<span class="invalid-feedback"
59-
*ngIf="createMultisiteEntitiesForm.showError('zoneName', formDir, 'required')"
60-
i18n>This field is required.</span>
61-
</div>
79+
80+
<div class="form-item">
81+
<cds-text-label
82+
labelInputID="zoneName"
83+
[invalid]="createMultisiteEntitiesForm.controls.zoneName.invalid &&
84+
createMultisiteEntitiesForm.controls.zoneName.dirty"
85+
[invalidText]="zoneNameError"
86+
i18n
87+
>Zone Name
88+
<input
89+
cdsText
90+
type="text"
91+
placeholder="Zone name..."
92+
id="zoneName"
93+
name="zoneName"
94+
formControlName="zoneName"
95+
[invalid]="createMultisiteEntitiesForm.controls.zoneName.invalid &&
96+
createMultisiteEntitiesForm.controls.zoneName.dirty"
97+
/>
98+
</cds-text-label>
99+
<ng-template #zoneNameError>
100+
<span
101+
class="invalid-feedback"
102+
*ngIf="createMultisiteEntitiesForm.showError('zoneName', formDir, 'required')"
103+
i18n
104+
>This field is required.</span
105+
>
106+
</ng-template>
62107
</div>
63108
</div>
64-
<div class="modal-footer">
65-
<cd-form-button-panel (submitActionEvent)="submit()"
66-
[form]="createMultisiteEntitiesForm"></cd-form-button-panel>
67-
</div>
68-
</form>
69-
</ng-container>
70-
</cd-modal>
109+
110+
<cd-form-button-panel
111+
(submitActionEvent)="submit()"
112+
[form]="createMultisiteEntitiesForm"
113+
[modalForm]="true"
114+
>
115+
</cd-form-button-panel>
116+
</form>
117+
</cds-modal>

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, EventEmitter, Output } from '@angular/core';
1+
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
22
import { FormControl, Validators } from '@angular/forms';
33
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
44
import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
@@ -7,18 +7,19 @@ import { RgwZoneService } from '~/app/shared/api/rgw-zone.service';
77
import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
88
import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
99
import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
10-
import { ModalService } from '~/app/shared/services/modal.service';
1110
import { NotificationService } from '~/app/shared/services/notification.service';
1211
import { RgwRealm, RgwZonegroup, RgwZone, SystemKey } from '../models/rgw-multisite';
1312
import { NotificationType } from '~/app/shared/enum/notification-type.enum';
1413
import { Subscription } from 'rxjs';
14+
import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
15+
import { CdForm } from '~/app/shared/forms/cd-form';
1516

1617
@Component({
1718
selector: 'cd-create-rgw-service-entities',
1819
templateUrl: './create-rgw-service-entities.component.html',
1920
styleUrls: ['./create-rgw-service-entities.component.scss']
2021
})
21-
export class CreateRgwServiceEntitiesComponent {
22+
export class CreateRgwServiceEntitiesComponent extends CdForm implements OnInit {
2223
public sub = new Subscription();
2324
createMultisiteEntitiesForm: CdFormGroup;
2425
realm: RgwRealm;
@@ -36,9 +37,14 @@ export class CreateRgwServiceEntitiesComponent {
3637
public notificationService: NotificationService,
3738
public rgwZonegroupService: RgwZonegroupService,
3839
public rgwRealmService: RgwRealmService,
39-
public modalService: ModalService
40+
public modalService: ModalCdsService
4041
) {
42+
super();
43+
}
44+
45+
ngOnInit() {
4146
this.createForm();
47+
this.loadingReady();
4248
}
4349

4450
createForm() {
@@ -84,8 +90,12 @@ export class CreateRgwServiceEntitiesComponent {
8490
NotificationType.success,
8591
$localize`Realm/Zonegroup/Zone created successfully`
8692
);
87-
this.submitAction.emit();
88-
this.activeModal.close();
93+
this.submitAction.emit({
94+
realm: this.realm,
95+
zonegroup: this.zonegroup,
96+
zone: this.zone
97+
});
98+
this.closeModal();
8999
})
90100
.catch(() => {
91101
this.notificationService.show(

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ export class SystemKey {
5151
secret_key: string;
5252
}
5353

54+
export interface RgwEntities {
55+
realm_name: string;
56+
zonegroup_name: string;
57+
zone_name: string;
58+
}
59+
5460
export enum RgwMultisiteSyncPolicyStatus {
5561
ENABLED = 'enabled',
5662
FORBIDDEN = 'forbidden',

0 commit comments

Comments
 (0)