From 130a3b09da320b4f226ea84ce22985e663998f08 Mon Sep 17 00:00:00 2001 From: Nizamudeen A Date: Tue, 13 Jul 2021 13:30:47 +0530 Subject: [PATCH] mgr/dashboard: Cluster Creation Workflow followups 1. Fix bug in the modal where going forward one step on the wizard and coming back opens up the add host modal. 2. Rename Create Cluster to Expand Cluster as per the discussions 3. A skip confirmation modal to warn the user when he tries to skip the cluster creation 4. Adapted all the tests 5. Did some UI improvements like fixing and aligning the styles, colors.. Fixes: https://tracker.ceph.com/issues/51640 Signed-off-by: Nizamudeen A --- .../rados/dashboard/tasks/dashboard.yaml | 1 + src/pybind/mgr/dashboard/controllers/host.py | 2 +- .../frontend/src/app/app-routing.module.ts | 11 +---- .../src/app/ceph/cluster/cluster.module.ts | 4 +- .../create-cluster.component.html | 20 ++++++--- .../create-cluster.component.scss | 7 ++- .../create-cluster.component.spec.ts | 25 ++++++----- .../create-cluster.component.ts | 44 ++++++++++++++----- .../hosts/host-form/host-form.component.html | 3 +- .../host-form/host-form.component.spec.ts | 4 +- .../hosts/host-form/host-form.component.ts | 15 +++++-- .../app/ceph/cluster/hosts/hosts.component.ts | 8 +++- .../core/auth/login/login.component.spec.ts | 2 +- .../app/core/auth/login/login.component.ts | 4 +- .../components/wizard/wizard.component.html | 36 +++++++-------- .../components/wizard/wizard.component.scss | 20 ++++++--- .../components/wizard/wizard.component.ts | 2 - .../shared/services/task-message.service.ts | 4 +- 18 files changed, 132 insertions(+), 80 deletions(-) diff --git a/qa/suites/rados/dashboard/tasks/dashboard.yaml b/qa/suites/rados/dashboard/tasks/dashboard.yaml index 052e2cc388142..b85e2f8c06f4a 100644 --- a/qa/suites/rados/dashboard/tasks/dashboard.yaml +++ b/qa/suites/rados/dashboard/tasks/dashboard.yaml @@ -39,6 +39,7 @@ tasks: - tasks.mgr.dashboard.test_auth - tasks.mgr.dashboard.test_cephfs - tasks.mgr.dashboard.test_cluster_configuration + - tasks.mgr.dashboard.test_cluster - tasks.mgr.dashboard.test_crush_rule - tasks.mgr.dashboard.test_erasure_code_profile - tasks.mgr.dashboard.test_ganesha diff --git a/src/pybind/mgr/dashboard/controllers/host.py b/src/pybind/mgr/dashboard/controllers/host.py index fddeb2e5d7f02..d21a16100d6ca 100644 --- a/src/pybind/mgr/dashboard/controllers/host.py +++ b/src/pybind/mgr/dashboard/controllers/host.py @@ -284,7 +284,7 @@ def list(self, sources=None): @raise_if_no_orchestrator([OrchFeature.HOST_LIST, OrchFeature.HOST_CREATE]) @handle_orchestrator_error('host') - @host_task('create', {'hostname': '{hostname}'}) + @host_task('add', {'hostname': '{hostname}'}) @EndpointDoc('', parameters={ 'hostname': (str, 'Hostname'), diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts index 4ef4178e28500..c289d455dffdb 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts @@ -91,23 +91,16 @@ const routes: Routes = [ // Cluster { - path: 'create-cluster', + path: 'expand-cluster', component: CreateClusterComponent, canActivate: [ModuleStatusGuardService], - children: [ - { - path: URLVerbs.ADD, - component: HostFormComponent, - outlet: 'modal' - } - ], data: { moduleStatusGuardConfig: { apiPath: 'orchestrator', redirectTo: 'dashboard', backend: 'cephadm' }, - breadcrumbs: 'Create Cluster' + breadcrumbs: 'Expand Cluster' } }, { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts index 0c02772509360..185c34b27504d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts @@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router'; import { TreeModule } from '@circlon/angular-tree-component'; import { + NgbActiveModal, NgbDatepickerModule, NgbDropdownModule, NgbNavModule, @@ -114,6 +115,7 @@ import { TelemetryComponent } from './telemetry/telemetry.component'; OsdFlagsIndivModalComponent, PlacementPipe, CreateClusterComponent - ] + ], + providers: [NgbActiveModal] }) export class ClusterModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html index 04c8d6158d80c..fb006ec1beb10 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html @@ -11,12 +11,12 @@

Please proceed to complete the cluster creation

-
- + i18n>Expand Cluster
@@ -63,3 +63,11 @@ [name]="showCancelButtonLabel()">
+ + + You are about to skip the cluster expansion process. + You’ll need to navigate through the menu to add hosts and services. + +
Are you sure you want to continue?
+ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss index bcbfa374927dd..580c5219e9f2c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss @@ -3,17 +3,22 @@ .container-fluid { align-items: flex-start; display: flex; + padding-left: 0; width: 100%; } .card-body { - max-width: 90%; + max-width: 85%; } .vertical-line { border-left: 1px solid vv.$gray-400; } +cd-wizard { + width: 15%; +} + cd-hosts { ::ng-deep .nav { display: none; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts index a6e67167be4ef..1ebdfb3a59d2f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts @@ -7,8 +7,10 @@ import { ToastrModule } from 'ngx-toastr'; import { CephModule } from '~/app/ceph/ceph.module'; import { CoreModule } from '~/app/core/core.module'; -import { ClusterService } from '~/app/shared/api/cluster.service'; import { HostService } from '~/app/shared/api/host.service'; +import { ConfirmationModalComponent } from '~/app/shared/components/confirmation-modal/confirmation-modal.component'; +import { AppConstants } from '~/app/shared/constants/app.constants'; +import { ModalService } from '~/app/shared/services/modal.service'; import { WizardStepsService } from '~/app/shared/services/wizard-steps.service'; import { SharedModule } from '~/app/shared/shared.module'; import { configureTestBed } from '~/testing/unit-test-helper'; @@ -17,9 +19,10 @@ import { CreateClusterComponent } from './create-cluster.component'; describe('CreateClusterComponent', () => { let component: CreateClusterComponent; let fixture: ComponentFixture; - let clusterService: ClusterService; let wizardStepService: WizardStepsService; let hostService: HostService; + let modalServiceShowSpy: jasmine.Spy; + const projectConstants: typeof AppConstants = AppConstants; configureTestBed({ imports: [ @@ -35,9 +38,12 @@ describe('CreateClusterComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(CreateClusterComponent); component = fixture.componentInstance; - clusterService = TestBed.inject(ClusterService); wizardStepService = TestBed.inject(WizardStepsService); hostService = TestBed.inject(HostService); + modalServiceShowSpy = spyOn(TestBed.inject(ModalService), 'show').and.returnValue({ + // mock the close function, it might be called if there are async tests. + close: jest.fn() + }); fixture.detectChanges(); }); @@ -45,16 +51,15 @@ describe('CreateClusterComponent', () => { expect(component).toBeTruthy(); }); - it('should have the heading "Welcome to Ceph Dashboard"', () => { + it('should have project name as heading in welcome screen', () => { const heading = fixture.debugElement.query(By.css('h3')).nativeElement; - expect(heading.innerHTML).toBe('Welcome to Ceph Dashboard'); + expect(heading.innerHTML).toBe(`Welcome to ${projectConstants.projectName}`); }); - it('should call updateStatus when cluster creation is skipped', () => { - const clusterServiceSpy = spyOn(clusterService, 'updateStatus').and.callThrough(); - expect(clusterServiceSpy).not.toHaveBeenCalled(); + it('should show confirmation modal when cluster creation is skipped', () => { component.skipClusterCreation(); - expect(clusterServiceSpy).toHaveBeenCalledTimes(1); + expect(modalServiceShowSpy.calls.any()).toBeTruthy(); + expect(modalServiceShowSpy.calls.first().args[0]).toBe(ConfirmationModalComponent); }); it('should show the wizard when cluster creation is started', () => { @@ -103,7 +108,7 @@ describe('CreateClusterComponent', () => { component.onNextStep(); fixture.detectChanges(); submitBtnLabel = component.showSubmitButtonLabel(); - expect(submitBtnLabel).toEqual('Create Cluster'); + expect(submitBtnLabel).toEqual('Expand Cluster'); cancelBtnLabel = component.showCancelButtonLabel(); expect(cancelBtnLabel).toEqual('Back'); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts index bdd854767aef6..b47a63e8cec00 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts @@ -1,16 +1,19 @@ -import { Component, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, TemplateRef, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { forkJoin, Subscription } from 'rxjs'; import { finalize } from 'rxjs/operators'; import { ClusterService } from '~/app/shared/api/cluster.service'; import { HostService } from '~/app/shared/api/host.service'; +import { ConfirmationModalComponent } from '~/app/shared/components/confirmation-modal/confirmation-modal.component'; import { ActionLabelsI18n, AppConstants } from '~/app/shared/constants/app.constants'; import { NotificationType } from '~/app/shared/enum/notification-type.enum'; import { Permissions } from '~/app/shared/models/permissions'; import { WizardStepModel } from '~/app/shared/models/wizard-steps'; import { AuthStorageService } from '~/app/shared/services/auth-storage.service'; +import { ModalService } from '~/app/shared/services/modal.service'; import { NotificationService } from '~/app/shared/services/notification.service'; import { WizardStepsService } from '~/app/shared/services/wizard-steps.service'; @@ -20,14 +23,16 @@ import { WizardStepsService } from '~/app/shared/services/wizard-steps.service'; styleUrls: ['./create-cluster.component.scss'] }) export class CreateClusterComponent implements OnDestroy { + @ViewChild('skipConfirmTpl', { static: true }) + skipConfirmTpl: TemplateRef; currentStep: WizardStepModel; currentStepSub: Subscription; permissions: Permissions; projectConstants: typeof AppConstants = AppConstants; - hosts: Array = []; stepTitles = ['Add Hosts', 'Review']; startClusterCreation = false; observables: any = []; + modalRef: NgbModalRef; constructor( private authStorageService: AuthStorageService, @@ -36,7 +41,8 @@ export class CreateClusterComponent implements OnDestroy { private hostService: HostService, private notificationService: NotificationService, private actionLabels: ActionLabelsI18n, - private clusterService: ClusterService + private clusterService: ClusterService, + private modalService: ModalService ) { this.permissions = this.authStorageService.getPermissions(); this.currentStepSub = this.stepsService.getCurrentStep().subscribe((step: WizardStepModel) => { @@ -50,13 +56,27 @@ export class CreateClusterComponent implements OnDestroy { } skipClusterCreation() { - this.clusterService.updateStatus('POST_INSTALLED').subscribe(() => { - this.notificationService.show( - NotificationType.info, - $localize`Cluster creation skipped by user` - ); - this.router.navigate(['/dashboard']); - }); + const modalVariables = { + titleText: $localize`Warning`, + buttonText: $localize`Continue`, + warning: true, + bodyTpl: this.skipConfirmTpl, + showSubmit: true, + onSubmit: () => { + this.clusterService.updateStatus('POST_INSTALLED').subscribe({ + error: () => this.modalRef.close(), + complete: () => { + this.notificationService.show( + NotificationType.info, + $localize`Cluster expansion skipped by user` + ); + this.router.navigate(['/dashboard']); + this.modalRef.close(); + } + }); + } + }; + this.modalRef = this.modalService.show(ConfirmationModalComponent, modalVariables); } onSubmit() { @@ -66,7 +86,7 @@ export class CreateClusterComponent implements OnDestroy { this.clusterService.updateStatus('POST_INSTALLED').subscribe(() => { this.notificationService.show( NotificationType.success, - $localize`Cluster creation was successful` + $localize`Cluster expansion was successful` ); this.router.navigate(['/dashboard']); }) @@ -101,7 +121,7 @@ export class CreateClusterComponent implements OnDestroy { } showSubmitButtonLabel() { - return !this.stepsService.isLastStep() ? this.actionLabels.NEXT : $localize`Create Cluster`; + return !this.stepsService.isLastStep() ? this.actionLabels.NEXT : $localize`Expand Cluster`; } showCancelButtonLabel() { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html index a35f25c47024a..a3477b9bd4102 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html @@ -1,4 +1,5 @@ - + {{ action | titlecase }} {{ resource | upperFirst }} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.spec.ts index 95e6179ca0718..ed3daf1e4b49b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.spec.ts @@ -3,6 +3,7 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin import { ReactiveFormsModule } from '@angular/forms'; import { RouterTestingModule } from '@angular/router/testing'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { ToastrModule } from 'ngx-toastr'; import { LoadingPanelComponent } from '~/app/shared/components/loading-panel/loading-panel.component'; @@ -24,7 +25,8 @@ describe('HostFormComponent', () => { ReactiveFormsModule, ToastrModule.forRoot() ], - declarations: [HostFormComponent] + declarations: [HostFormComponent], + providers: [NgbActiveModal] }, [LoadingPanelComponent] ); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.ts index acb1b1731ee37..2fc8b13b540e6 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.ts @@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; import { Router } from '@angular/router'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + import { HostService } from '~/app/shared/api/host.service'; import { SelectMessages } from '~/app/shared/components/select/select-messages.model'; import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants'; @@ -36,7 +38,8 @@ export class HostFormComponent extends CdForm implements OnInit { private router: Router, private actionLabels: ActionLabelsI18n, private hostService: HostService, - private taskWrapper: TaskWrapperService + private taskWrapper: TaskWrapperService, + public activeModal: NgbActiveModal ) { super(); this.resource = $localize`host`; @@ -44,7 +47,9 @@ export class HostFormComponent extends CdForm implements OnInit { } ngOnInit() { - this.pageURL = this.router.url.includes('hosts') ? 'hosts' : 'create-cluster'; + if (this.router.url.includes('hosts')) { + this.pageURL = 'hosts'; + } this.createForm(); this.hostService.list().subscribe((resp: any[]) => { this.hostnames = resp.map((host) => { @@ -80,7 +85,7 @@ export class HostFormComponent extends CdForm implements OnInit { this.allLabels = this.hostForm.get('labels').value; this.taskWrapper .wrapTaskAroundCall({ - task: new FinishedTask('host/' + URLVerbs.CREATE, { + task: new FinishedTask('host/' + URLVerbs.ADD, { hostname: hostname }), call: this.hostService.create(hostname, this.addr, this.allLabels, this.status) @@ -90,7 +95,9 @@ export class HostFormComponent extends CdForm implements OnInit { this.hostForm.setErrors({ cdSubmitButton: true }); }, complete: () => { - this.router.navigate([this.pageURL, { outlets: { modal: null } }]); + this.pageURL === 'hosts' + ? this.router.navigate([this.pageURL, { outlets: { modal: null } }]) + : this.activeModal.close(); } }); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts index 25a413f2ef0db..01abf43ec2ec0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts @@ -30,6 +30,7 @@ import { ModalService } from '~/app/shared/services/modal.service'; import { NotificationService } from '~/app/shared/services/notification.service'; import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service'; import { URLBuilderService } from '~/app/shared/services/url-builder.service'; +import { HostFormComponent } from './host-form/host-form.component'; const BASE_URL = 'hosts'; @@ -61,6 +62,7 @@ export class HostsComponent extends ListWithDetails implements OnInit { errorMessage: string; enableButton: boolean; pageURL: string; + bsModalRef: NgbModalRef; icons = Icons; @@ -133,12 +135,14 @@ export class HostsComponent extends ListWithDetails implements OnInit { } ngOnInit() { - this.clusterCreation ? (this.pageURL = 'create-cluster') : (this.pageURL = BASE_URL); this.tableActions.unshift({ name: this.actionLabels.ADD, permission: 'create', icon: Icons.add, - click: () => this.router.navigate([this.pageURL, { outlets: { modal: [URLVerbs.ADD] } }]), + click: () => + this.clusterCreation + ? (this.bsModalRef = this.modalService.show(HostFormComponent)) + : this.router.navigate([BASE_URL, { outlets: { modal: [URLVerbs.ADD] } }]), disable: (selection: CdTableSelection) => this.getDisable('add', selection) }); this.columns = [ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.spec.ts index 3cbfab4ebaac3..fc02e9bdeeefb 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.spec.ts @@ -53,6 +53,6 @@ describe('LoginComponent', () => { component.login(); expect(routerNavigateSpy).toHaveBeenCalledTimes(1); - expect(routerNavigateSpy).toHaveBeenCalledWith(['/create-cluster']); + expect(routerNavigateSpy).toHaveBeenCalledWith(['/expand-cluster']); }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.ts index 77bafd99c82e0..a98548f94c766 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.ts @@ -65,10 +65,10 @@ export class LoginComponent implements OnInit { login() { this.authService.login(this.model).subscribe(() => { - const urlPath = this.postInstalled ? '/' : '/create-cluster'; + const urlPath = this.postInstalled ? '/' : '/expand-cluster'; let url = _.get(this.route.snapshot.queryParams, 'returnUrl', urlPath); if (!this.postInstalled && this.route.snapshot.queryParams['returnUrl'] === '/dashboard') { - url = '/create-cluster'; + url = '/expand-cluster'; } this.router.navigate([url]); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html index a81d9f978bb68..25aa3e1df855e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html @@ -1,21 +1,19 @@ -
-
- -
- -
- +
+
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.scss index 76821c5969ac3..80e3550cd68a5 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.scss @@ -1,10 +1,7 @@ @use './src/styles/vendor/variables' as vv; -.wizard-step-container { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; +.card-body { + padding-left: 0; } span.circle-step { @@ -17,4 +14,17 @@ span.circle-step { margin-right: 5px; text-align: center; width: 1.6em; + + &.active { + background-color: vv.$primary; + } +} + +.nav-pills .nav-link { + background-color: vv.$white; + color: vv.$gray-800; + + &.active { + color: vv.$primary; + } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts index 6aa6500499cb1..d46aa480e7918 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts @@ -16,7 +16,6 @@ export class WizardComponent implements OnInit, OnDestroy { stepsTitle: string[]; steps: Observable; - currentSteps: Observable; currentStep: WizardStepModel; currentStepSub: Subscription; @@ -25,7 +24,6 @@ export class WizardComponent implements OnInit, OnDestroy { ngOnInit(): void { this.stepsService.setTotalSteps(this.stepsTitle.length); this.steps = this.stepsService.getSteps(); - this.currentSteps = this.stepsService.getCurrentStep(); this.currentStepSub = this.stepsService.getCurrentStep().subscribe((step: WizardStepModel) => { this.currentStep = step; }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-message.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-message.service.ts index c39bb0c26b695..44eb9bd30978a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-message.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/task-message.service.ts @@ -114,9 +114,7 @@ export class TaskMessageService { messages = { // Host tasks - 'host/create': this.newTaskMessage(this.commonOperations.create, (metadata) => - this.host(metadata) - ), + 'host/add': this.newTaskMessage(this.commonOperations.add, (metadata) => this.host(metadata)), 'host/delete': this.newTaskMessage(this.commonOperations.delete, (metadata) => this.host(metadata) ),