-<cd-modal [modalRef]="activeModal">
- <ng-container i18n="form title"
- class="modal-title">Delete Zone</ng-container>
+<cds-modal size="sm"
+ [open]="open"
+ (overlaySelected)="closeModal()">
+ <cds-modal-header (closeSelect)="closeModal()">
+ <h3 cdsModalHeaderHeading
+ i18n>Delete zone</h3>
+ </cds-modal-header>
- <ng-container class="modal-content">
- <form name="zoneForm"
- [formGroup]="zoneForm"
- novalidate>
- <div class="modal-body ms-4">
- <label i18n>
- This will delete your <strong>{{zone?.name}}</strong> Zone.
+ <ng-container>
+ <section cdsModalContent>
+ <form [formGroup]="zoneForm"
+ novalidate>
+ <label class="cds--label-description"
+ i18n>
+ This will delete your <strong>{{ zone?.name }}</strong> Zone.
</label>
- <ng-container *ngIf="includedPools.size">
- <label class="mt-3"
- i18n>
- Do you want to delete the associated pools with the <strong>{{zone?.name}}</strong> Zone?</label>
- <label class="mb-4"
- i18n>
- This will delete the following pools and any data stored in these pools:</label>
- <strong *ngFor="let pool of includedPools"
- class="block">{{ pool }}</strong>
- <div class="form-group">
- <div class="custom-control custom-checkbox mt-2">
- <input type="checkbox"
- class="custom-control-input"
- name="deletePools"
- id="deletePools"
- formControlName="deletePools"
- (change)="showDangerText()">
- <label class="custom-control-label"
- for="deletePools"
- i18n>Yes, I want to delete the pools.</label>
- </div>
- <div *ngIf="displayText"
- class="me-4">
- <cd-alert-panel type="danger"
- i18n>
- This will delete all the data in the pools!
- </cd-alert-panel>
- </div>
+ @if (includedPools.size) {
+ <label class="cds--label-description"
+ i18n>
+ Do you want to delete the associated pools with the
+ <strong>{{ zone?.name }}</strong> Zone?
+ </label>
+ <label class="cds--label-description"
+ i18n>
+ This will delete the following pools and any data stored in these pools:
+ </label>
+
+ <div class="scroll-list">
+ @for (pool of includedPools; track pool) {
+ <div>
+ <strong>{{ pool }}</strong>
</div>
- </ng-container>
- </div>
+ }
+ </div>
+
+ <div class="form-item">
+ <cds-checkbox id="deletePools"
+ formControlName="deletePools"
+ (checkedChange)="showDangerText()"
+ i18n>Yes, I want to delete the pools.
+ </cds-checkbox>
+ </div>
- <div class="modal-footer">
- <cd-form-button-panel (submitActionEvent)="submit()"
- [form]="zoneForm"
- [submitText]="actionLabels.DELETE">
- </cd-form-button-panel>
- </div>
- </form>
+ @if (displayText) {
+ <cd-alert-panel type="danger"
+ i18n>
+ This will delete all the data in the pools!
+ </cd-alert-panel>
+ }
+ }
+ </form>
+ </section>
</ng-container>
-</cd-modal>
+ <cd-form-button-panel (submitActionEvent)="submit()"
+ [form]="zoneForm"
+ [submitText]="actionLabels.DELETE"
+ [modalForm]="true">
+ </cd-form-button-panel>
+</cds-modal>
-.block {
- display: block;
-}
-
-#scroll {
- height: 100%;
- max-height: 10rem;
- overflow: auto;
+.scroll-list {
+ margin-bottom: var(--cds-spacing-05);
}
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrModule } from 'ngx-toastr';
import { SharedModule } from '~/app/shared/shared.module';
import { configureTestBed } from '~/testing/unit-test-helper';
-import { RgwZone } from '../rgw-multisite';
-
import { RgwMultisiteZoneDeletionFormComponent } from './rgw-multisite-zone-deletion-form.component';
describe('RgwMultisiteZoneDeletionFormComponent', () => {
configureTestBed({
declarations: [RgwMultisiteZoneDeletionFormComponent],
imports: [SharedModule, HttpClientTestingModule, ToastrModule.forRoot(), RouterTestingModule],
- providers: [NgbActiveModal]
+ providers: []
});
beforeEach(() => {
fixture = TestBed.createComponent(RgwMultisiteZoneDeletionFormComponent);
component = fixture.componentInstance;
- component.zone = new RgwZone();
+ component.zone = {
+ name: 'zone',
+ parent: 'parent',
+ second_parent: 'second_parent'
+ };
fixture.detectChanges();
});
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, Optional, AfterViewInit } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { PoolService } from '~/app/shared/api/pool.service';
import { RgwZoneService } from '~/app/shared/api/rgw-zone.service';
import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
import { NotificationType } from '~/app/shared/enum/notification-type.enum';
import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
import { NotificationService } from '~/app/shared/services/notification.service';
+import { CdForm } from '~/app/shared/forms/cd-form';
+import { RgwZoneTreeNode } from '../rgw-multisite';
@Component({
selector: 'cd-rgw-multisite-zone-deletion-form',
styleUrls: ['./rgw-multisite-zone-deletion-form.component.scss'],
standalone: false
})
-export class RgwMultisiteZoneDeletionFormComponent implements OnInit, AfterViewInit {
+export class RgwMultisiteZoneDeletionFormComponent extends CdForm implements OnInit, AfterViewInit {
zoneData$: any;
poolList$: any;
- zone: any;
+ zone: RgwZoneTreeNode;
zoneForm: CdFormGroup;
displayText: boolean = false;
includedPools: Set<string> = new Set<string>();
constructor(
- public activeModal: NgbActiveModal,
+ @Optional() @Inject('zone') public zoneInput: RgwZoneTreeNode,
public actionLabels: ActionLabelsI18n,
public notificationService: NotificationService,
private rgwZoneService: RgwZoneService,
private poolService: PoolService
) {
+ super();
+ this.zone = zoneInput;
this.createForm();
}
NotificationType.success,
$localize`Zone: '${this.zone.name}' deleted successfully`
);
- this.activeModal.close();
+ this.closeModal();
},
() => {
this.zoneForm.setErrors({ cdSubmitButton: true });
realm: string;
token: string;
}
+
+export interface RgwZoneTreeNode {
+ name: string;
+ parent: string;
+ second_parent: string;
+}
zonegroup: node.data
});
} else if (node?.data?.type === 'zone') {
- this.modalRef = this.modalService.show(RgwMultisiteZoneDeletionFormComponent, {
+ this.cdsModalService.show(RgwMultisiteZoneDeletionFormComponent, {
zone: node.data
});
}
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
-import { RgwRealm, RgwZone, RgwZonegroup } from '~/app/ceph/rgw/models/rgw-multisite';
+import {
+ RgwRealm,
+ RgwZone,
+ RgwZonegroup,
+ RgwZoneTreeNode
+} from '~/app/ceph/rgw/models/rgw-multisite';
import { Icons } from '../enum/icons.enum';
import { USER } from '~/app/shared/constants/app.constants';
return this.http.get<object>(`${this.url}`);
}
- get(zone: RgwZone): Observable<object> {
+ get(zone: RgwZone | RgwZoneTreeNode): Observable<object> {
return this.http.get(`${this.url}/${zone.name}`);
}
projects / ceph.git / commitdiff