mgr/dashboard: Cluster Creation Create OSDs Section

Create OSDs section in cluster creation wizard

Fixes: https://tracker.ceph.com/issues/51991
Signed-off-by: Aashish Sharma <aasharma@redhat.com>

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/03-create-cluster-create-osds.e2e-spec.ts

@@ -22,6 +22,13 @@ describe('Create cluster create osds page', () => {
 
   describe('when Orchestrator is available', () => {
     it('should create OSDs', () => {
+      osds.navigateTo();
+      osds.getTableCount('total').as('initOSDCount');
+
+      createCluster.navigateTo();
+      createCluster.createCluster();
+      cy.get('button[aria-label="Next"]').click();
+
       createCluster.create('hdd');
 
       cy.get('button[aria-label="Next"]').click();
@@ -30,7 +37,6 @@ describe('Create cluster create osds page', () => {
       cy.wait(3000);
 
       osds.navigateTo();
-      osds.getTableCount('total').as('initOSDCount');
 
       cy.get('@newOSDCount').then((newCount) => {
         cy.get('@initOSDCount').then((oldCount) => {

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/03-create-cluster-review.e2e-spec.ts

@@ -10,6 +10,7 @@ describe('Create Cluster Review page', () => {
     createCluster.createCluster();
 
     cy.get('button[aria-label="Next"]').click();
+    cy.get('button[aria-label="Next"]').click();
   });
 
   describe('navigation link and title test', () => {

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/04-cluster-check.e2e-spec.ts

@@ -13,6 +13,7 @@ describe('when cluster creation is completed', () => {
     createCluster.navigateTo();
     createCluster.createCluster();
 
+    cy.get('button[aria-label="Next"]').click();
     cy.get('button[aria-label="Next"]').click();
     cy.get('button[aria-label="Next"]').click();
 

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

@@ -36,7 +36,6 @@ import { BlankLayoutComponent } from './core/layouts/blank-layout/blank-layout.c
 import { LoginLayoutComponent } from './core/layouts/login-layout/login-layout.component';
 import { WorkbenchLayoutComponent } from './core/layouts/workbench-layout/workbench-layout.component';
 import { ApiDocsComponent } from './core/navigation/api-docs/api-docs.component';
-import { LoadingPanelComponent } from './shared/components/loading-panel/loading-panel.component';
 import { ActionLabels, URLVerbs } from './shared/constants/app.constants';
 import { BreadcrumbsResolver, IBreadcrumb } from './shared/models/breadcrumbs';
 import { AuthGuardService } from './shared/services/auth-guard.service';
@@ -381,7 +380,6 @@ const routes: Routes = [
       preloadingStrategy: PreloadAllModules
     })
   ],
-  entryComponents: [LoadingPanelComponent],
   exports: [RouterModule],
   providers: [StartCaseBreadcrumbsResolver, PerformanceCounterBreadcrumbsResolver]
 })

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

@@ -44,6 +44,15 @@
         </div>
         <div *ngSwitchCase="'2'"
              class="ml-5">
+          <h4 class="title"
+              i18n>Create OSDs</h4>
+          <br>
+          <div class="alignForm">
+            <cd-osd-form [clusterCreation]="true"></cd-osd-form>
+          </div>
+        </div>
+        <div *ngSwitchCase="'3'"
+             class="ml-5">
           <cd-create-cluster-review></cd-create-cluster-review>
         </div>
       </ng-container>

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

@@ -24,3 +24,7 @@ cd-hosts {
     display: none;
   }
 }
+
+.alignForm {
+  margin-left: -1%;
+}

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

@@ -9,6 +9,7 @@ import { CephModule } from '~/app/ceph/ceph.module';
 import { CoreModule } from '~/app/core/core.module';
 import { HostService } from '~/app/shared/api/host.service';
 import { ConfirmationModalComponent } from '~/app/shared/components/confirmation-modal/confirmation-modal.component';
+import { LoadingPanelComponent } from '~/app/shared/components/loading-panel/loading-panel.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';
@@ -24,16 +25,19 @@ describe('CreateClusterComponent', () => {
   let modalServiceShowSpy: jasmine.Spy;
   const projectConstants: typeof AppConstants = AppConstants;
 
-  configureTestBed({
-    imports: [
-      HttpClientTestingModule,
-      RouterTestingModule,
-      ToastrModule.forRoot(),
-      SharedModule,
-      CoreModule,
-      CephModule
-    ]
-  });
+  configureTestBed(
+    {
+      imports: [
+        HttpClientTestingModule,
+        RouterTestingModule,
+        ToastrModule.forRoot(),
+        SharedModule,
+        CoreModule,
+        CephModule
+      ]
+    },
+    [LoadingPanelComponent]
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CreateClusterComponent);
@@ -91,7 +95,7 @@ describe('CreateClusterComponent', () => {
     component.onNextStep();
     fixture.detectChanges();
     expect(wizardStepServiceSpy).toHaveBeenCalledTimes(1);
-    expect(hostServiceSpy).toBeCalledTimes(2);
+    expect(hostServiceSpy).toBeCalledTimes(1);
   });
 
   it('should show the button labels correctly', () => {
@@ -102,6 +106,13 @@ describe('CreateClusterComponent', () => {
     let cancelBtnLabel = component.showCancelButtonLabel();
     expect(cancelBtnLabel).toEqual('Cancel');
 
+    component.onNextStep();
+    fixture.detectChanges();
+    submitBtnLabel = component.showSubmitButtonLabel();
+    expect(submitBtnLabel).toEqual('Next');
+    cancelBtnLabel = component.showCancelButtonLabel();
+    expect(cancelBtnLabel).toEqual('Back');
+
     // Last page of the wizard
     component.onNextStep();
     fixture.detectChanges();

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

@@ -34,7 +34,7 @@ export class CreateClusterComponent implements OnDestroy {
   currentStepSub: Subscription;
   permissions: Permissions;
   projectConstants: typeof AppConstants = AppConstants;
-  stepTitles = ['Add Hosts', 'Review'];
+  stepTitles = ['Add Hosts', 'Create OSDs', 'Review'];
   startClusterCreation = false;
   observables: any = [];
   modalRef: NgbModalRef;

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.ts

@@ -73,7 +73,7 @@ export class HostFormComponent extends CdForm implements OnInit {
         validators: [CdValidators.ip()]
       }),
       labels: new FormControl([]),
-      maintenance: new FormControl(false)
+      maintenance: new FormControl({ value: false, disabled: this.pageURL !== 'hosts' })
     });
   }
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts

@@ -115,15 +115,17 @@ export class HostsComponent extends ListWithDetails implements OnInit {
         icon: Icons.enter,
         click: () => this.hostMaintenance(),
         disable: (selection: CdTableSelection) =>
-          this.getDisable('maintenance', selection) || this.isExecuting || this.enableButton
+          this.getDisable('maintenance', selection) || this.isExecuting || this.enableButton,
+        visible: () => !this.clusterCreation
       },
       {
         name: this.actionLabels.EXIT_MAINTENANCE,
         permission: 'update',
         icon: Icons.exit,
         click: () => this.hostMaintenance(),
         disable: (selection: CdTableSelection) =>
-          this.getDisable('maintenance', selection) || this.isExecuting || !this.enableButton
+          this.getDisable('maintenance', selection) || this.isExecuting || this.enableButton,
+        visible: () => !this.clusterCreation
       }
     ];
   }
@@ -183,6 +185,13 @@ export class HostsComponent extends ListWithDetails implements OnInit {
     this.orchService.status().subscribe((status: OrchestratorStatus) => {
       this.orchStatus = status;
     });
+
+    if (this.clusterCreation) {
+      const hiddenColumns = ['services', 'ceph_version'];
+      this.columns = this.columns.filter((col: any) => {
+        return !hiddenColumns.includes(col.prop);
+      });
+    }
   }
 
   updateSelection(selection: CdTableSelection) {

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

@@ -191,4 +191,4 @@ describe('InventoryDevicesComponent', () => {
       await testTableActions(true, [], expectResults);
     });
   });
-});
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/services/wizard-steps.service.ts

@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core';
 
 import { BehaviorSubject, Observable } from 'rxjs';
 
+import { InventoryDevice } from '~/app/ceph/cluster/inventory/inventory-devices/inventory-device.model';
+import { DriveGroup } from '~/app/ceph/cluster/osd/osd-form/drive-group.model';
 import { WizardStepModel } from '~/app/shared/models/wizard-steps';
 
 const initialStep = [{ stepIndex: 1, isComplete: false }];
@@ -12,9 +14,9 @@ const initialStep = [{ stepIndex: 1, isComplete: false }];
 export class WizardStepsService {
   steps$: BehaviorSubject<WizardStepModel[]>;
   currentStep$: BehaviorSubject<WizardStepModel> = new BehaviorSubject<WizardStepModel>(null);
-  sharedData: any;
-  osdDevices: any;
-  osdCapacity: any;
+  sharedData = new DriveGroup();
+  osdDevices: InventoryDevice[] = [];
+  osdCapacity = 0;
 
   constructor() {
     this.steps$ = new BehaviorSubject<WizardStepModel[]>(initialStep);