Merge pull request #41720 from rhcs-dashboard/create-cluster-add-hosts

mgr/dashboard: Cluster Creation Add Host Section

src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/hosts.po.ts

@@ -2,7 +2,7 @@ import { PageHelper } from '../page-helper.po';
 
 const pages = {
   index: { url: '#/hosts', id: 'cd-hosts' },
-  create: { url: '#/hosts/create', id: 'cd-host-form' }
+  add: { url: '#/hosts/(modal:add)', id: 'cd-host-form' }
 };
 
 export class HostsPageHelper extends PageHelper {
@@ -49,21 +49,20 @@ export class HostsPageHelper extends PageHelper {
     });
   }
 
-  @PageHelper.restrictTo(pages.create.url)
+  @PageHelper.restrictTo(pages.add.url)
   add(hostname: string, exist?: boolean, maintenance?: boolean) {
-    cy.get(`${this.pages.create.id}`).within(() => {
+    cy.get(`${this.pages.add.id}`).within(() => {
       cy.get('#hostname').type(hostname);
       if (maintenance) {
         cy.get('label[for=maintenance]').click();
       }
+      if (exist) {
+        cy.get('#hostname').should('have.class', 'ng-invalid');
+      }
       cy.get('cd-submit-button').click();
     });
-    if (exist) {
-      cy.get('#hostname').should('have.class', 'ng-invalid');
-    } else {
-      // back to host list
-      cy.get(`${this.pages.index.id}`);
-    }
+    // back to host list
+    cy.get(`${this.pages.index.id}`);
   }
 
   @PageHelper.restrictTo(pages.index.url)

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/01-hosts.e2e-spec.ts

@@ -17,7 +17,7 @@ describe('Hosts page', () => {
 
     it('should not add an exsiting host', function () {
       const hostname = Cypress._.sample(this.hosts).name;
-      hosts.navigateTo('create');
+      hosts.navigateTo('add');
       hosts.add(hostname, true);
     });
 
@@ -26,7 +26,7 @@ describe('Hosts page', () => {
       hosts.delete(host);
 
       // add it back
-      hosts.navigateTo('create');
+      hosts.navigateTo('add');
       hosts.add(host);
       hosts.checkExist(host, true);
     });

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/01-hosts.e2e-spec.ts

@@ -4,7 +4,7 @@ describe('Hosts page', () => {
   const hosts = new HostsPageHelper();
   const hostnames = ['ceph-node-00.cephlab.com', 'ceph-node-01.cephlab.com'];
   const addHost = (hostname: string, exist?: boolean, maintenance?: boolean) => {
-    hosts.navigateTo('create');
+    hosts.navigateTo('add');
     hosts.add(hostname, exist, maintenance);
     hosts.checkExist(hostname, true);
   };
@@ -37,7 +37,7 @@ describe('Hosts page', () => {
     });
 
     it('should not add an existing host', function () {
-      hosts.navigateTo('create');
+      hosts.navigateTo('add');
       hosts.add(hostnames[0], true);
     });
 

src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts

@@ -94,6 +94,13 @@ const routes: Routes = [
         path: 'create-cluster',
         component: CreateClusterComponent,
         canActivate: [ModuleStatusGuardService],
+        children: [
+          {
+            path: URLVerbs.ADD,
+            component: HostFormComponent,
+            outlet: 'modal'
+          }
+        ],
         data: {
           moduleStatusGuardConfig: {
             apiPath: 'orchestrator',
@@ -105,13 +112,13 @@ const routes: Routes = [
       },
       {
         path: 'hosts',
+        component: HostsComponent,
         data: { breadcrumbs: 'Cluster/Hosts' },
         children: [
-          { path: '', component: HostsComponent },
           {
-            path: URLVerbs.CREATE,
+            path: URLVerbs.ADD,
             component: HostFormComponent,
-            data: { breadcrumbs: ActionLabels.CREATE }
+            outlet: 'modal'
           }
         ]
       },

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts

@@ -106,7 +106,6 @@ import { TelemetryComponent } from './telemetry/telemetry.component';
     OsdCreationPreviewModalComponent,
     RulesListComponent,
     ActiveAlertListComponent,
-    HostFormComponent,
     ServiceDetailsComponent,
     ServiceDaemonListComponent,
     TelemetryComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html

@@ -1,4 +1,5 @@
-<div class="container h-75">
+<div class="container h-75"
+     *ngIf="!startClusterCreation">
   <div class="row h-100 justify-content-center align-items-center">
     <div class="blank-page">
       <!-- htmllint img-req-src="false" -->
@@ -14,16 +15,51 @@
         <div class="offset-md-3">
           <button class="btn btn-accent m-3"
                   name="create-cluster"
-                  [routerLink]="'/dashboard'"
                   (click)="createCluster()"
                   i18n>Create Cluster</button>
           <button class="btn btn-light"
                   name="skip-cluster-creation"
-                  [routerLink]="'/dashboard'"
                   (click)="skipClusterCreation()"
                   i18n>Skip</button>
         </div>
       </div>
     </div>
   </div>
 </div>
+
+<div class="card"
+     *ngIf="startClusterCreation">
+  <div class="card-header"
+       i18n>Create Cluster</div>
+  <div class="container-fluid">
+    <cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
+    <div class="card-body vertical-line">
+      <ng-container [ngSwitch]="currentStep?.stepIndex">
+        <div *ngSwitchCase="'1'"
+             class="ml-5">
+          <h4 class="title"
+              i18n>Add Hosts</h4>
+          <br>
+          <cd-hosts [clusterCreation]="true"></cd-hosts>
+        </div>
+        <div *ngSwitchCase="'2'"
+             class="ml-5">
+          <h4 class="title"
+              i18n>Review</h4>
+          <br>
+          <p>To be implemented</p>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-accent m-2 float-right"
+            (click)="onNextStep()"
+            aria-label="Next"
+            i18n>{{ showSubmitButtonLabel() }}</button>
+    <cd-back-button class="m-2 float-right"
+                    aria-label="Close"
+                    (backAction)="onPreviousStep()"
+                    [name]="showCancelButtonLabel()"></cd-back-button>
+  </div>
+</div>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss

@@ -0,0 +1,21 @@
+@use './src/styles/vendor/variables' as vv;
+
+.container-fluid {
+  align-items: flex-start;
+  display: flex;
+  width: 100%;
+}
+
+.card-body {
+  max-width: 90%;
+}
+
+.vertical-line {
+  border-left: 1px solid vv.$gray-400;
+}
+
+cd-hosts {
+  ::ng-deep .nav {
+    display: none;
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts

@@ -5,7 +5,11 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 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 { WizardStepsService } from '~/app/shared/services/wizard-steps.service';
 import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed } from '~/testing/unit-test-helper';
 import { CreateClusterComponent } from './create-cluster.component';
@@ -14,16 +18,26 @@ describe('CreateClusterComponent', () => {
   let component: CreateClusterComponent;
   let fixture: ComponentFixture<CreateClusterComponent>;
   let clusterService: ClusterService;
+  let wizardStepService: WizardStepsService;
+  let hostService: HostService;
 
   configureTestBed({
-    declarations: [CreateClusterComponent],
-    imports: [HttpClientTestingModule, RouterTestingModule, ToastrModule.forRoot(), SharedModule]
+    imports: [
+      HttpClientTestingModule,
+      RouterTestingModule,
+      ToastrModule.forRoot(),
+      SharedModule,
+      CoreModule,
+      CephModule
+    ]
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CreateClusterComponent);
     component = fixture.componentInstance;
     clusterService = TestBed.inject(ClusterService);
+    wizardStepService = TestBed.inject(WizardStepsService);
+    hostService = TestBed.inject(HostService);
     fixture.detectChanges();
   });
 
@@ -42,4 +56,55 @@ describe('CreateClusterComponent', () => {
     component.skipClusterCreation();
     expect(clusterServiceSpy).toHaveBeenCalledTimes(1);
   });
+
+  it('should show the wizard when cluster creation is started', () => {
+    component.createCluster();
+    fixture.detectChanges();
+    const nativeEl = fixture.debugElement.nativeElement;
+    expect(nativeEl.querySelector('cd-wizard')).not.toBe(null);
+  });
+
+  it('should have title Add Hosts', () => {
+    component.createCluster();
+    fixture.detectChanges();
+    const heading = fixture.debugElement.query(By.css('.title')).nativeElement;
+    expect(heading.innerHTML).toBe('Add Hosts');
+  });
+
+  it('should show the host list when cluster creation as first step', () => {
+    component.createCluster();
+    fixture.detectChanges();
+    const nativeEl = fixture.debugElement.nativeElement;
+    expect(nativeEl.querySelector('cd-hosts')).not.toBe(null);
+  });
+
+  it('should move to next step and show the second page', () => {
+    const wizardStepServiceSpy = spyOn(wizardStepService, 'moveToNextStep').and.callThrough();
+    const hostServiceSpy = spyOn(hostService, 'list').and.callThrough();
+    component.createCluster();
+    fixture.detectChanges();
+    component.onNextStep();
+    fixture.detectChanges();
+    const heading = fixture.debugElement.query(By.css('.title')).nativeElement;
+    expect(wizardStepServiceSpy).toHaveBeenCalledTimes(1);
+    expect(hostServiceSpy).toBeCalledTimes(1);
+    expect(heading.innerHTML).toBe('Review');
+  });
+
+  it('should show the button labels correctly', () => {
+    component.createCluster();
+    fixture.detectChanges();
+    let submitBtnLabel = component.showSubmitButtonLabel();
+    expect(submitBtnLabel).toEqual('Next');
+    let cancelBtnLabel = component.showCancelButtonLabel();
+    expect(cancelBtnLabel).toEqual('Cancel');
+
+    // Last page of the wizard
+    component.onNextStep();
+    fixture.detectChanges();
+    submitBtnLabel = component.showSubmitButtonLabel();
+    expect(submitBtnLabel).toEqual('Create Cluster');
+    cancelBtnLabel = component.showCancelButtonLabel();
+    expect(cancelBtnLabel).toEqual('Back');
+  });
 });