From 48b74ffbbc3eba2dda633487b0c87ea3aebaef4d Mon Sep 17 00:00:00 2001 From: Tiago Melo Date: Mon, 18 Jun 2018 16:15:07 +0100 Subject: [PATCH] mgr/dashboard: Add shared Confirmation Modal Replaced 'FlattenConfirmationModalComponent' and 'RollbackConfirmationModalComponent' with the new generic modal. Any new confirmation modals should use the new component. Signed-off-by: Tiago Melo --- .../src/app/ceph/block/block.module.ts | 19 +-- .../flatten-confimation-modal.component.html | 30 ----- ...latten-confimation-modal.component.spec.ts | 40 ------ .../flatten-confimation-modal.component.ts | 35 ----- .../block/rbd-list/rbd-list.component.html | 60 +++++++-- .../ceph/block/rbd-list/rbd-list.component.ts | 120 ++++++++++-------- .../rbd-snapshot-list.component.html | 82 +++++++++--- .../rbd-snapshot-list.component.ts | 21 ++- .../rollback-confimation-modal.component.html | 27 ---- .../rollback-confimation-modal.component.scss | 0 ...llback-confimation-modal.component.spec.ts | 40 ------ .../rollback-confimation-modal.component.ts | 39 ------ .../shared/components/components.module.ts | 7 +- .../confirmation-modal.component.html | 27 ++++ .../confirmation-modal.component.scss} | 0 .../confirmation-modal.component.spec.ts | 31 +++++ .../confirmation-modal.component.ts | 38 ++++++ 17 files changed, 297 insertions(+), 319 deletions(-) delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.html delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.spec.ts delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.ts delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.html delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.scss delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.spec.ts delete mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html rename src/pybind/mgr/dashboard/frontend/src/app/{ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.scss => shared/components/confirmation-modal/confirmation-modal.component.scss} (100%) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.ts diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts index 477b80d4a0b63..78b2c4a013dc6 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts @@ -7,9 +7,6 @@ import { BsDropdownModule, ModalModule, TabsModule, TooltipModule } from 'ngx-bo import { ProgressbarModule } from 'ngx-bootstrap/progressbar'; import { SharedModule } from '../../shared/shared.module'; -import { - FlattenConfirmationModalComponent -} from './flatten-confirmation-modal/flatten-confimation-modal.component'; import { IscsiComponent } from './iscsi/iscsi.component'; import { MirrorHealthColorPipe } from './mirror-health-color.pipe'; import { MirroringComponent } from './mirroring/mirroring.component'; @@ -18,17 +15,9 @@ import { RbdFormComponent } from './rbd-form/rbd-form.component'; import { RbdListComponent } from './rbd-list/rbd-list.component'; import { RbdSnapshotFormComponent } from './rbd-snapshot-form/rbd-snapshot-form.component'; import { RbdSnapshotListComponent } from './rbd-snapshot-list/rbd-snapshot-list.component'; -import { - RollbackConfirmationModalComponent -} from './rollback-confirmation-modal/rollback-confimation-modal.component'; @NgModule({ - entryComponents: [ - RbdDetailsComponent, - RbdSnapshotFormComponent, - RollbackConfirmationModalComponent, - FlattenConfirmationModalComponent - ], + entryComponents: [RbdDetailsComponent, RbdSnapshotFormComponent], imports: [ CommonModule, FormsModule, @@ -49,9 +38,7 @@ import { RbdDetailsComponent, RbdFormComponent, RbdSnapshotListComponent, - RbdSnapshotFormComponent, - RollbackConfirmationModalComponent, - FlattenConfirmationModalComponent + RbdSnapshotFormComponent ] }) -export class BlockModule { } +export class BlockModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.html deleted file mode 100644 index 36d06d833a8f1..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.html +++ /dev/null @@ -1,30 +0,0 @@ -
-

RBD flatten

- -
-
-
- You are about to flatten {{ child }}. -
-
- All blocks will be copied from parent {{ parent }} to child {{ child }}. -
-
-
- - Flatten - - -
-
-
- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.spec.ts deleted file mode 100644 index e4f094f71ecf5..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { 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 { SharedModule } from '../../../shared/shared.module'; -import { configureTestBed } from '../../../shared/unit-test-helper'; -import { FlattenConfirmationModalComponent } from './flatten-confimation-modal.component'; - -describe('FlattenConfirmationModalComponent', () => { - let component: FlattenConfirmationModalComponent; - let fixture: ComponentFixture; - - configureTestBed({ - imports: [ - ReactiveFormsModule, - HttpClientTestingModule, - SharedModule, - ServicesModule, - ApiModule, - ToastModule.forRoot() - ], - declarations: [FlattenConfirmationModalComponent], - providers: [BsModalRef, BsModalService] - }); - - beforeEach(() => { - fixture = TestBed.createComponent(FlattenConfirmationModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.ts deleted file mode 100644 index bf9cd1647bf5f..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-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'; - -@Component({ - selector: 'cd-flatten-confimation-modal', - templateUrl: './flatten-confimation-modal.component.html', - styleUrls: ['./flatten-confimation-modal.component.scss'] -}) -export class FlattenConfirmationModalComponent implements OnInit { - child: string; - parent: string; - - flattenForm: FormGroup; - - public onSubmit: Subject; - - constructor(public modalRef: BsModalRef) { - this.createForm(); - } - - createForm() { - this.flattenForm = new FormGroup({}); - } - - ngOnInit() { - this.onSubmit = new Subject(); - } - - submit() { - this.onSubmit.next(); - } -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html index 1a3bbd06d9f7e..896d225724e02 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html @@ -20,43 +20,70 @@ selectionType="single" (updateSelection)="updateSelection($event)">
-
+
- -
@@ -67,7 +94,8 @@ -
+
{{ value.pool_name }}/{{ value.image_name }}@{{ value.snap_name }} - + + + You are about to flatten + {{ value.child }}. +
+
All blocks will be copied from parent + {{ value.parent }} to child + {{ value.child }}. + 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 e31f15c9e034b..2587f086db2e3 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 @@ -4,9 +4,8 @@ import * as _ from 'lodash'; import { BsModalRef, BsModalService } from 'ngx-bootstrap'; import { RbdService } from '../../../shared/api/rbd.service'; -import { - DeletionModalComponent -} from '../../../shared/components/deletion-modal/deletion-modal.component'; +import { ConfirmationModalComponent } from '../../../shared/components/confirmation-modal/confirmation-modal.component'; +import { DeletionModalComponent } from '../../../shared/components/deletion-modal/deletion-modal.component'; import { CellTemplate } from '../../../shared/enum/cell-template.enum'; import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum'; import { CdTableColumn } from '../../../shared/models/cd-table-column'; @@ -17,9 +16,6 @@ import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe'; import { DimlessPipe } from '../../../shared/pipes/dimless.pipe'; import { SummaryService } from '../../../shared/services/summary.service'; import { TaskWrapperService } from '../../../shared/services/task-wrapper.service'; -import { - FlattenConfirmationModalComponent -} from '../flatten-confirmation-modal/flatten-confimation-modal.component'; import { RbdParentModel } from '../rbd-form/rbd-parent.model'; import { RbdModel } from './rbd-model'; @@ -29,11 +25,12 @@ import { RbdModel } from './rbd-model'; styleUrls: ['./rbd-list.component.scss'] }) export class RbdListComponent implements OnInit, OnDestroy { - @ViewChild('usageTpl') usageTpl: TemplateRef; @ViewChild('parentTpl') parentTpl: TemplateRef; @ViewChild('nameTpl') nameTpl: TemplateRef; + @ViewChild('flattenTpl') flattenTpl: TemplateRef; + images: any; executingTasks: ExecutingTask[] = []; columns: CdTableColumn[]; @@ -45,13 +42,14 @@ export class RbdListComponent implements OnInit, OnDestroy { modalRef: BsModalRef; - constructor(private rbdService: RbdService, - private dimlessBinaryPipe: DimlessBinaryPipe, - private dimlessPipe: DimlessPipe, - private summaryService: SummaryService, - private modalService: BsModalService, - private taskWrapper: TaskWrapperService) { - } + constructor( + private rbdService: RbdService, + private dimlessBinaryPipe: DimlessBinaryPipe, + private dimlessPipe: DimlessPipe, + private summaryService: SummaryService, + private modalService: BsModalService, + private taskWrapper: TaskWrapperService + ) {} ngOnInit() { this.columns = [ @@ -115,7 +113,6 @@ export class RbdListComponent implements OnInit, OnDestroy { this.loadImages(data.executing_tasks); }); }); - } ngOnDestroy() { @@ -128,12 +125,11 @@ export class RbdListComponent implements OnInit, OnDestroy { if (executingTasks === null) { executingTasks = this.executingTasks; } - this.rbdService.list() - .subscribe( + this.rbdService.list().subscribe( (resp: any[]) => { let images = []; const viewCacheStatusMap = {}; - resp.forEach(pool => { + resp.forEach((pool) => { if (_.isUndefined(viewCacheStatusMap[pool.status])) { viewCacheStatusMap[pool.status] = []; } @@ -144,33 +140,43 @@ export class RbdListComponent implements OnInit, OnDestroy { _.forEach(viewCacheStatusMap, (value, key) => { viewCacheStatusList.push({ status: parseInt(key, 10), - statusFor: (value.length > 1 ? 'pools ' : 'pool ') + - '' + value.join(', ') + '' + statusFor: + (value.length > 1 ? 'pools ' : 'pool ') + + '' + + value.join(', ') + + '' }); }); this.viewCacheStatusList = viewCacheStatusList; - images.forEach(image => { - image.executingTasks = this._getExecutingTasks(executingTasks, - image.pool_name, image.name); + images.forEach((image) => { + image.executingTasks = this._getExecutingTasks( + executingTasks, + image.pool_name, + image.name + ); }); this.images = this.merge(images, executingTasks); this.executingTasks = executingTasks; }, () => { - this.viewCacheStatusList = [{status: ViewCacheStatus.ValueException}]; + this.viewCacheStatusList = [{ status: ViewCacheStatus.ValueException }]; } ); } _getExecutingTasks(executingTasks: ExecutingTask[], poolName, imageName): ExecutingTask[] { const result: ExecutingTask[] = []; - executingTasks.forEach(executingTask => { - if (executingTask.name === 'rbd/snap/create' || + executingTasks.forEach((executingTask) => { + if ( + executingTask.name === 'rbd/snap/create' || executingTask.name === 'rbd/snap/delete' || executingTask.name === 'rbd/snap/edit' || - executingTask.name === 'rbd/snap/rollback') { - if (poolName === executingTask.metadata['pool_name'] && - imageName === executingTask.metadata['image_name']) { + executingTask.name === 'rbd/snap/rollback' + ) { + if ( + poolName === executingTask.metadata['pool_name'] && + imageName === executingTask.metadata['image_name'] + ) { result.push(executingTask); } } @@ -182,34 +188,31 @@ export class RbdListComponent implements OnInit, OnDestroy { const resultRBDs = _.clone(rbds); executingTasks.forEach((executingTask) => { const rbdExecuting = resultRBDs.find((rbd) => { - return rbd.pool_name === executingTask.metadata['pool_name'] && - rbd.name === executingTask.metadata['image_name']; + return ( + rbd.pool_name === executingTask.metadata['pool_name'] && + rbd.name === executingTask.metadata['image_name'] + ); }); if (rbdExecuting) { if (executingTask.name === 'rbd/delete') { rbdExecuting.cdExecuting = 'deleting'; - } else if (executingTask.name === 'rbd/edit') { rbdExecuting.cdExecuting = 'updating'; - } else if (executingTask.name === 'rbd/flatten') { rbdExecuting.cdExecuting = 'flattening'; } - } else if (executingTask.name === 'rbd/create') { const rbdModel = new RbdModel(); rbdModel.name = executingTask.metadata['image_name']; rbdModel.pool_name = executingTask.metadata['pool_name']; rbdModel.cdExecuting = 'creating'; this.pushIfNotExists(resultRBDs, rbdModel); - } else if (executingTask.name === 'rbd/clone') { const rbdModel = new RbdModel(); rbdModel.name = executingTask.metadata['child_image_name']; rbdModel.pool_name = executingTask.metadata['child_pool_name']; rbdModel.cdExecuting = 'cloning'; this.pushIfNotExists(resultRBDs, rbdModel); - } else if (executingTask.name === 'rbd/copy') { const rbdModel = new RbdModel(); rbdModel.name = executingTask.metadata['dest_image_name']; @@ -255,32 +258,39 @@ export class RbdListComponent implements OnInit, OnDestroy { } flattenRbd(poolName, imageName) { - this.taskWrapper.wrapTaskAroundCall({ - task: new FinishedTask('rbd/flatten', { - pool_name: poolName, - image_name: imageName - }), - tasks: this.executingTasks, - call: this.rbdService.flatten(poolName, imageName) - }).subscribe( - undefined, - undefined, - () => { + this.taskWrapper + .wrapTaskAroundCall({ + task: new FinishedTask('rbd/flatten', { + pool_name: poolName, + image_name: imageName + }), + tasks: this.executingTasks, + call: this.rbdService.flatten(poolName, imageName) + }) + .subscribe(undefined, undefined, () => { this.modalRef.hide(); this.loadImages(null); - } - ); + }); } flattenRbdModal() { const poolName = this.selection.first().pool_name; const imageName = this.selection.first().name; - this.modalRef = this.modalService.show(FlattenConfirmationModalComponent); const parent: RbdParentModel = this.selection.first().parent; - this.modalRef.content.parent = `${parent.pool_name}/${parent.image_name}@${parent.snap_name}`; - this.modalRef.content.child = `${poolName}/${imageName}`; - this.modalRef.content.onSubmit.subscribe(() => { - this.flattenRbd(poolName, imageName); - }); + + const initialState = { + titleText: 'RBD flatten', + buttonText: 'Flatten', + bodyTpl: this.flattenTpl, + bodyData: { + parent: `${parent.pool_name}/${parent.image_name}@${parent.snap_name}`, + child: `${poolName}/${imageName}` + }, + onSubmit: () => { + this.flattenRbd(poolName, imageName); + } + }; + + this.modalRef = this.modalService.show(ConfirmationModalComponent, { initialState }); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.html index 603afdb0d32d7..3f50579a371ef 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.html @@ -4,54 +4,92 @@ (updateSelection)="updateSelection($event)" [columns]="columns">
-
+
- -
@@ -60,6 +98,14 @@ - PROTECTED - UNPROTECTED + PROTECTED + UNPROTECTED + + + + You are about to rollback + {{ value.snapName }}. 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 2e3ecbaec5514..aa3a2f1b614e4 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 @@ -4,6 +4,7 @@ import * as _ from 'lodash'; import { BsModalRef, BsModalService } from 'ngx-bootstrap'; import { RbdService } from '../../../shared/api/rbd.service'; +import { ConfirmationModalComponent } from '../../../shared/components/confirmation-modal/confirmation-modal.component'; import { 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'; @@ -15,7 +16,6 @@ import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe'; import { NotificationService } from '../../../shared/services/notification.service'; import { TaskManagerService } from '../../../shared/services/task-manager.service'; import { RbdSnapshotFormComponent } from '../rbd-snapshot-form/rbd-snapshot-form.component'; -import { RollbackConfirmationModalComponent } from '../rollback-confirmation-modal/rollback-confimation-modal.component'; import { RbdSnapshotModel } from './rbd-snapshot.model'; @Component({ @@ -31,6 +31,7 @@ export class RbdSnapshotListComponent implements OnInit, OnChanges { @ViewChild('nameTpl') nameTpl: TemplateRef; @ViewChild('protectTpl') protectTpl: TemplateRef; + @ViewChild('rollbackTpl') rollbackTpl: TemplateRef; data: RbdSnapshotModel[]; @@ -209,11 +210,19 @@ export class RbdSnapshotListComponent implements OnInit, OnChanges { rollbackModal() { const snapshotName = this.selection.selected[0].name; - 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); - }); + const initialState = { + titleText: 'RBD snapshot rollback', + buttonText: 'Rollback', + bodyTpl: this.rollbackTpl, + bodyData: { + snapName: `${this.poolName}/${this.rbdName}@${snapshotName}` + }, + onSubmit: () => { + this._asyncTask('rollbackSnapshot', 'rbd/snap/rollback', snapshotName); + } + }; + + this.modalRef = this.modalService.show(ConfirmationModalComponent, { initialState }); } deleteSnapshotModal() { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.html deleted file mode 100644 index e1ef7d46c7846..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.html +++ /dev/null @@ -1,27 +0,0 @@ -
-

RBD snapshot rollback

- -
-
-
- You are about to rollback {{ snapName }}. -
-
-
- - Rollback - - -
-
-
- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.scss deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.spec.ts deleted file mode 100644 index 82e29241d896d..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { 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 { SharedModule } from '../../../shared/shared.module'; -import { configureTestBed } from '../../../shared/unit-test-helper'; -import { RollbackConfirmationModalComponent } from './rollback-confimation-modal.component'; - -describe('RollbackConfirmationModalComponent', () => { - let component: RollbackConfirmationModalComponent; - let fixture: ComponentFixture; - - configureTestBed({ - imports: [ - ReactiveFormsModule, - HttpClientTestingModule, - SharedModule, - ServicesModule, - ApiModule, - ToastModule.forRoot() - ], - declarations: [RollbackConfirmationModalComponent], - providers: [BsModalRef, BsModalService] - }); - - beforeEach(() => { - fixture = TestBed.createComponent(RollbackConfirmationModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 deleted file mode 100644 index bef646f920488..0000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rollback-confirmation-modal/rollback-confimation-modal.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormGroup } from '@angular/forms'; - -import { BsModalRef } from 'ngx-bootstrap'; -import { Subject } from 'rxjs'; - -@Component({ - selector: 'cd-rollback-confimation-modal', - templateUrl: './rollback-confimation-modal.component.html', - styleUrls: ['./rollback-confimation-modal.component.scss'] -}) -export class RollbackConfirmationModalComponent implements OnInit { - - snapName: string; - - rollbackForm: FormGroup; - - public onSubmit: Subject; - - constructor(public modalRef: BsModalRef) { - this.createForm(); - } - - createForm() { - this.rollbackForm = new FormGroup({}); - } - - ngOnInit() { - this.onSubmit = new Subject(); - } - - 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 ff6f46268e77d..8c6e87be16a63 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,6 +6,7 @@ import { ChartsModule } from 'ng2-charts/ng2-charts'; import { AlertModule, ModalModule, PopoverModule, TooltipModule } from 'ngx-bootstrap'; import { PipesModule } from '../pipes/pipes.module'; +import { ConfirmationModalComponent } from './confirmation-modal/confirmation-modal.component'; import { DeletionModalComponent } from './deletion-modal/deletion-modal.component'; import { ErrorPanelComponent } from './error-panel/error-panel.component'; import { HelperComponent } from './helper/helper.component'; @@ -40,7 +41,8 @@ import { ViewCacheComponent } from './view-cache/view-cache.component'; LoadingPanelComponent, InfoPanelComponent, ModalComponent, - DeletionModalComponent + DeletionModalComponent, + ConfirmationModalComponent ], providers: [], exports: [ @@ -56,7 +58,8 @@ import { ViewCacheComponent } from './view-cache/view-cache.component'; ], entryComponents: [ ModalComponent, - DeletionModalComponent + DeletionModalComponent, + ConfirmationModalComponent ] }) export class ComponentsModule { } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html new file mode 100644 index 0000000000000..c8a49017b0bc4 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html @@ -0,0 +1,27 @@ + + {{ titleText }} + +
+
+ +
+
+
+ + {{ buttonText }} + + +
+
+
+ + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.scss similarity index 100% rename from src/pybind/mgr/dashboard/frontend/src/app/ceph/block/flatten-confirmation-modal/flatten-confimation-modal.component.scss rename to src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.scss diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts new file mode 100644 index 0000000000000..cb0ea160d4c8b --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts @@ -0,0 +1,31 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; + +import { BsModalRef } from 'ngx-bootstrap'; + +import { ModalComponent } from '../modal/modal.component'; +import { SubmitButtonComponent } from '../submit-button/submit-button.component'; +import { ConfirmationModalComponent } from './confirmation-modal.component'; + +describe('ConfirmationModalComponent', () => { + let component: ConfirmationModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ConfirmationModalComponent, SubmitButtonComponent, ModalComponent], + imports: [ReactiveFormsModule], + providers: [BsModalRef] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmationModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.ts new file mode 100644 index 0000000000000..bbb155bc011f8 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit, TemplateRef } from '@angular/core'; +import { FormGroup } from '@angular/forms'; + +import { BsModalRef } from 'ngx-bootstrap'; + +@Component({ + selector: 'cd-confirmation-modal', + templateUrl: './confirmation-modal.component.html', + styleUrls: ['./confirmation-modal.component.scss'] +}) +export class ConfirmationModalComponent implements OnInit { + bodyData: object; + bodyTpl: TemplateRef; + buttonText: string; + onSubmit: Function; + titleText: string; + + bodyContext: object; + confirmationForm: FormGroup; + + constructor(public modalRef: BsModalRef) { + this.confirmationForm = new FormGroup({}); + } + + ngOnInit() { + this.bodyContext = { + $implicit: this.bodyData + }; + } + + submit() { + this.onSubmit(); + } + + stopLoadingSpinner() { + this.confirmationForm.setErrors({ cdSubmitButton: true }); + } +} -- 2.39.5