From d110eba34009500e3cd64a6aae9d3628bba27fa5 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Stephan=20M=C3=BCller?= Date: Wed, 18 Apr 2018 16:54:12 +0200 Subject: [PATCH] mgr/dashboard: Replaces delete-confirmation-modal MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit This replaces usage of "delete-confirmation-modal" with the use of "delete-modal". Signed-off-by: Stephan Müller --- .../block/rbd-list/rbd-list.component.spec.ts | 35 +++++++++++++++- .../ceph/block/rbd-list/rbd-list.component.ts | 15 ++++--- .../rbd-snapshot-list.component.spec.ts | 34 ++++++++++++++- .../rbd-snapshot-list.component.ts | 20 +++++---- .../rollback-confimation-modal.component.ts | 4 ++ .../shared/components/components.module.ts | 9 ---- .../delete-confirmation-modal.component.html | 25 ----------- .../delete-confirmation-modal.component.scss | 0 ...elete-confirmation-modal.component.spec.ts | 41 ------------------- .../delete-confirmation-modal.component.ts | 35 ---------------- .../deletion-modal.component.ts | 4 +- 11 files changed, 91 insertions(+), 131 deletions(-) delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.html delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.scss delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.ts diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts index fa6c5bd186785..97518ebf15dbe 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts @@ -1,17 +1,20 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { ToastModule } from 'ng2-toastr'; import { AlertModule, - BsDropdownModule, + BsDropdownModule, BsModalRef, ModalModule, TabsModule, TooltipModule } from 'ngx-bootstrap'; +import { Observable } from 'rxjs/Observable'; +import { RbdService } from '../../../shared/api/rbd.service'; import { ComponentsModule } from '../../../shared/components/components.module'; +import { NotificationService } from '../../../shared/services/notification.service'; import { SharedModule } from '../../../shared/shared.module'; import { RbdDetailsComponent } from '../rbd-details/rbd-details.component'; import { RbdSnapshotListComponent } from '../rbd-snapshot-list/rbd-snapshot-list.component'; @@ -49,4 +52,32 @@ describe('RbdListComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + describe('api delete request', () => { + let called; + let rbdService: RbdService; + let notificationService: NotificationService; + + beforeEach(() => { + called = false; + rbdService = new RbdService(null); + notificationService = new NotificationService(null, null); + component = new RbdListComponent(rbdService, null, null, null, null, notificationService, + null, null); + spyOn(rbdService, 'delete').and.returnValue(Observable.throw({status: 500})); + spyOn(notificationService, 'notifyTask').and.stub(); + component.modalRef = new BsModalRef(); + component.modalRef.content = { + stopLoadingSpinner: () => called = true + }; + }); + + it('should make sure that if the deletion fails stopLoadingSpinner is called', + fakeAsync(() => { + expect(called).toBe(false); + component.deleteRbd('sth', 'test'); + tick(500); + expect(called).toBe(true); + })); + }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts index f90014efd5870..6ac2fbb02abab 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts @@ -5,8 +5,8 @@ import { BsModalRef, BsModalService } from 'ngx-bootstrap'; import { RbdService } from '../../../shared/api/rbd.service'; import { - DeleteConfirmationComponent -} from '../../../shared/components/delete-confirmation-modal/delete-confirmation-modal.component'; + DeletionModalComponent +} from '../../../shared/components/deletion-modal/deletion-modal.component'; import { CellTemplate } from '../../../shared/enum/cell-template.enum'; import { NotificationType } from '../../../shared/enum/notification-type.enum'; import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum'; @@ -235,6 +235,7 @@ export class RbdListComponent implements OnInit, OnDestroy { this.modalRef.hide(); this.loadImages(null); }).catch((resp) => { + this.modalRef.content.stopLoadingSpinner(); finishedTask.success = false; finishedTask.exception = resp.error; this.notificationService.notifyTask(finishedTask); @@ -244,10 +245,12 @@ export class RbdListComponent implements OnInit, OnDestroy { deleteRbdModal() { const poolName = this.selection.first().pool_name; const imageName = this.selection.first().name; - this.modalRef = this.modalService.show(DeleteConfirmationComponent); - this.modalRef.content.itemName = `${poolName}/${imageName}`; - this.modalRef.content.onSubmit.subscribe(() => { - this.deleteRbd(poolName, imageName); + this.modalRef = this.modalService.show(DeletionModalComponent); + this.modalRef.content.setUp({ + metaType: 'RBD', + pattern: `${poolName}/${imageName}`, + deletionMethod: () => this.deleteRbd(poolName, imageName), + modalRef: this.modalRef }); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts index e4ce344660172..c17eace27f826 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts @@ -1,13 +1,16 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { ToastModule } from 'ng2-toastr'; -import { ModalModule } from 'ngx-bootstrap'; +import { BsModalRef, ModalModule } from 'ngx-bootstrap'; +import { Observable } from 'rxjs/Observable'; import { ApiModule } from '../../../shared/api/api.module'; +import { RbdService } from '../../../shared/api/rbd.service'; import { ComponentsModule } from '../../../shared/components/components.module'; import { DataTableModule } from '../../../shared/datatable/datatable.module'; import { AuthStorageService } from '../../../shared/services/auth-storage.service'; +import { NotificationService } from '../../../shared/services/notification.service'; import { ServicesModule } from '../../../shared/services/services.module'; import { RbdSnapshotListComponent } from './rbd-snapshot-list.component'; @@ -41,4 +44,31 @@ describe('RbdSnapshotListComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + describe('api delete request', () => { + let called; + let rbdService: RbdService; + let notificationService: NotificationService; + + beforeEach(() => { + called = false; + rbdService = new RbdService(null); + notificationService = new NotificationService(null, null); + component = new RbdSnapshotListComponent(null, null, null, rbdService, null, null, + notificationService); + spyOn(rbdService, 'deleteSnapshot').and.returnValue(Observable.throw({status: 500})); + spyOn(notificationService, 'notifyTask').and.stub(); + component.modalRef = new BsModalRef(); + component.modalRef.content = { + stopLoadingSpinner: () => called = true + }; + }); + + it('should call stopLoadingSpinner if the request fails', fakeAsync(() => { + expect(called).toBe(false); + component._asyncTask('deleteSnapshot', 'rbd/snap/delete', 'someName'); + tick(500); + expect(called).toBe(true); + })); + }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts index 9730579ed83b0..4b5abeb17a485 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts @@ -15,8 +15,8 @@ import { RbdService } from '../../../shared/api/rbd.service'; import { - DeleteConfirmationComponent -} from '../../../shared/components/delete-confirmation-modal/delete-confirmation-modal.component'; + DeletionModalComponent +} from '../../../shared/components/deletion-modal/deletion-modal.component'; import { CellTemplate } from '../../../shared/enum/cell-template.enum'; import { CdTableColumn } from '../../../shared/models/cd-table-column'; import { CdTableSelection } from '../../../shared/models/cd-table-selection'; @@ -185,7 +185,7 @@ export class RbdSnapshotListComponent implements OnInit, OnChanges { }); } - private asyncTask(task: string, taskName: string, snapshotName: string) { + _asyncTask(task: string, taskName: string, snapshotName: string) { const finishedTask = new FinishedTask(); finishedTask.name = taskName; finishedTask.metadata = { @@ -207,7 +207,7 @@ export class RbdSnapshotListComponent implements OnInit, OnChanges { }); }) .catch((resp) => { - this.modalRef.hide(); + this.modalRef.content.stopLoadingSpinner(); finishedTask.success = false; finishedTask.exception = resp.error; this.notificationService.notifyTask(finishedTask); @@ -219,16 +219,18 @@ export class RbdSnapshotListComponent implements OnInit, OnChanges { this.modalRef = this.modalService.show(RollbackConfirmationModalComponent); this.modalRef.content.snapName = `${this.poolName}/${this.rbdName}@${snapshotName}`; this.modalRef.content.onSubmit.subscribe((itemName: string) => { - this.asyncTask('rollbackSnapshot', 'rbd/snap/rollback', snapshotName); + this._asyncTask('rollbackSnapshot', 'rbd/snap/rollback', snapshotName); }); } deleteSnapshotModal() { const snapshotName = this.selection.selected[0].name; - this.modalRef = this.modalService.show(DeleteConfirmationComponent); - this.modalRef.content.itemName = snapshotName; - this.modalRef.content.onSubmit.subscribe((itemName: string) => { - this.asyncTask('deleteSnapshot', 'rbd/snap/delete', snapshotName); + this.modalRef = this.modalService.show(DeletionModalComponent); + this.modalRef.content.setUp({ + metaType: 'RBD snapshot', + pattern: snapshotName, + deletionMethod: () => this._asyncTask('deleteSnapshot', 'rbd/snap/delete', snapshotName), + modalRef: this.modalRef }); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.ts index 596c6e942794e..b95d7e47046f7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.ts @@ -32,4 +32,8 @@ export class RollbackConfirmationModalComponent implements OnInit { submit() { this.onSubmit.next(this.snapName); } + + stopLoadingSpinner() { + this.rollbackForm.setErrors({'cdSubmitButton': true}); + } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts index 63840d6f2bb9e..2a7c42c149749 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts @@ -6,9 +6,6 @@ import { ChartsModule } from 'ng2-charts/ng2-charts'; import { AlertModule, ModalModule, PopoverModule, TooltipModule } from 'ngx-bootstrap'; import { PipesModule } from '../pipes/pipes.module'; -import { - DeleteConfirmationComponent -} from './delete-confirmation-modal/delete-confirmation-modal.component'; import { DeletionModalComponent } from './deletion-modal/deletion-modal.component'; import { HelperComponent } from './helper/helper.component'; import { ModalComponent } from './modal/modal.component'; @@ -36,13 +33,9 @@ import { ViewCacheComponent } from './view-cache/view-cache.component'; HelperComponent, SubmitButtonComponent, UsageBarComponent, - DeleteConfirmationComponent, ModalComponent, DeletionModalComponent ], - entryComponents: [ - DeletionModalComponent - ], providers: [], exports: [ ViewCacheComponent, @@ -50,10 +43,8 @@ import { ViewCacheComponent } from './view-cache/view-cache.component'; HelperComponent, SubmitButtonComponent, UsageBarComponent, - DeleteConfirmationComponent ], entryComponents: [ - DeleteConfirmationComponent, ModalComponent, DeletionModalComponent ] diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.html deleted file mode 100644 index 259bd1e260fb2..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.html +++ /dev/null @@ -1,25 +0,0 @@ -
-

Delete

- -
-
-
- Are you sure you want to delete {{ itemName }}? -
-
-
- - Delete - - -
-
-
- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.scss deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts deleted file mode 100644 index 7c55986f52a96..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { ReactiveFormsModule } from '@angular/forms'; - -import { ToastModule } from 'ng2-toastr'; -import { BsModalRef, BsModalService } from 'ngx-bootstrap'; - -import { ApiModule } from '../../../shared/api/api.module'; -import { ServicesModule } from '../../../shared/services/services.module'; -import { SubmitButtonComponent } from '../submit-button/submit-button.component'; -import { DeleteConfirmationComponent } from './delete-confirmation-modal.component'; - -describe('RbdSnapshotFormComponent', () => { - let component: DeleteConfirmationComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - ReactiveFormsModule, - HttpClientTestingModule, - ServicesModule, - ApiModule, - ToastModule.forRoot() - ], - declarations: [ DeleteConfirmationComponent, SubmitButtonComponent ], - providers: [ BsModalRef, BsModalService ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DeleteConfirmationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.ts deleted file mode 100644 index adcf2c8aa4529..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormGroup } from '@angular/forms'; - -import { BsModalRef } from 'ngx-bootstrap'; -import { Subject } from 'rxjs/Subject'; - -@Component({ - selector: 'cd-delete-confirmation-modal', - templateUrl: './delete-confirmation-modal.component.html', - styleUrls: ['./delete-confirmation-modal.component.scss'] -}) -export class DeleteConfirmationComponent implements OnInit { - - itemName: string; - - deleteForm: FormGroup; - - public onSubmit: Subject; - - constructor(public modalRef: BsModalRef) { - this.createForm(); - } - - createForm() { - this.deleteForm = new FormGroup({}); - } - - ngOnInit() { - this.onSubmit = new Subject(); - } - - submit() { - this.onSubmit.next(this.itemName); - } -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.ts index d27963cfe5f4d..56543ba6224c9 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.ts @@ -3,7 +3,7 @@ import { } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { BsModalRef, BsModalService } from 'ngx-bootstrap'; +import { BsModalRef } from 'ngx-bootstrap'; import { Observable } from 'rxjs/Observable'; import { SubmitButtonComponent } from '../submit-button/submit-button.component'; @@ -95,6 +95,6 @@ export class DeletionModalComponent implements OnInit { } stopLoadingSpinner() { - this.submitButton.loading = false; + this.deletionForm.setErrors({'cdSubmitButton': true}); } } -- 2.47.3