mgr/dashboard: add option to skip the create OSDs step

Fixes: https://tracker.ceph.com/issues/59319
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit caa0c456b1d0c33f6abb847b3c9259501d587004)

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 d738c4f2ca52b4e30ca8a4ebf432397a85fc147c..272b5b0b9161770a13b8278b580d5a8bf82557fd 100644 (file)
--- 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
@@ -85,6 +85,12 @@
                     aria-label="Close"
                     (backAction)="onPreviousStep()"
                     [name]="showCancelButtonLabel()"></cd-back-button>
+    <button class="btn btn-light m-2 me-4 float-end"
+            id="skipStepBtn"
+            (click)="onSkip()"
+            aria-label="Skip this step"
+            *ngIf="stepTitles[currentStep.stepIndex - 1] === 'Create OSDs'"
+            i18n>Skip</button>
   </div>
 </div>
 

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 0563c4a803a951952c741a86786a58369e39b88d..ca3435536067b50c06456f115bd3c0cc0e6da96f 100644 (file)
--- 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
@@ -151,4 +151,28 @@ describe('CreateClusterComponent', () => {
     component.onSubmit();
     expect(hostServiceSpy).toHaveBeenCalledTimes(1);
   });
+
+  it('should show skip button in the Create OSDs Steps', () => {
+    component.createCluster();
+    fixture.detectChanges();
+
+    component.onNextStep();
+    fixture.detectChanges();
+    const skipBtn = fixture.debugElement.query(By.css('#skipStepBtn')).nativeElement;
+    expect(skipBtn).not.toBe(null);
+    expect(skipBtn.innerHTML).toBe('Skip');
+  });
+
+  it('should skip the Create OSDs Steps', () => {
+    component.createCluster();
+    fixture.detectChanges();
+
+    component.onNextStep();
+    fixture.detectChanges();
+    const skipBtn = fixture.debugElement.query(By.css('#skipStepBtn')).nativeElement;
+    skipBtn.click();
+    fixture.detectChanges();
+
+    expect(component.stepsToSkip['Create OSDs']).toBe(true);
+  });
 });

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 02333c39bf6170a958580108aa88abac9606cda1..65eb2e4a6aaf4e70dbca46e4b66cef25ccc7040b 100644 (file)
--- 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
@@ -52,6 +52,7 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
   deploymentOption: DeploymentOptions;
   selectedOption = {};
   simpleDeployment = true;
+  stepsToSkip: { [steps: string]: boolean } = {};
 
   @Output()
   submitAction = new EventEmitter();
@@ -82,6 +83,10 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
       this.deploymentOption = options;
       this.selectedOption = { option: options.recommended_option };
     });
+
+    this.stepTitles.forEach((stepTitle) => {
+      this.stepsToSkip[stepTitle] = false;
+    });
   }
 
   createCluster() {
@@ -113,71 +118,75 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
   }
 
   onSubmit() {
-    this.hostService.list('false').subscribe((hosts) => {
-      hosts.forEach((host) => {
-        const index = host['labels'].indexOf('_no_schedule', 0);
-        if (index > -1) {
-          host['labels'].splice(index, 1);
-          this.observables.push(this.hostService.update(host['hostname'], true, host['labels']));
-        }
-      });
-      forkJoin(this.observables)
-        .pipe(
-          finalize(() =>
-            this.clusterService.updateStatus('POST_INSTALLED').subscribe(() => {
-              this.notificationService.show(
-                NotificationType.success,
-                $localize`Cluster expansion was successful`
-              );
-              this.router.navigate(['/dashboard']);
-            })
-          )
-        )
-        .subscribe({
-          error: (error) => error.preventDefault()
+    if (!this.stepsToSkip['Add Hosts']) {
+      this.hostService.list('false').subscribe((hosts) => {
+        hosts.forEach((host) => {
+          const index = host['labels'].indexOf('_no_schedule', 0);
+          if (index > -1) {
+            host['labels'].splice(index, 1);
+            this.observables.push(this.hostService.update(host['hostname'], true, host['labels']));
+          }
         });
-    });
-
-    if (this.driveGroup) {
-      const user = this.authStorageService.getUsername();
-      this.driveGroup.setName(`dashboard-${user}-${_.now()}`);
-      this.driveGroups.push(this.driveGroup.spec);
+        forkJoin(this.observables)
+          .pipe(
+            finalize(() =>
+              this.clusterService.updateStatus('POST_INSTALLED').subscribe(() => {
+                this.notificationService.show(
+                  NotificationType.success,
+                  $localize`Cluster expansion was successful`
+                );
+                this.router.navigate(['/dashboard']);
+              })
+            )
+          )
+          .subscribe({
+            error: (error) => error.preventDefault()
+          });
+      });
     }
 
-    if (this.simpleDeployment) {
-      const title = this.deploymentOption?.options[this.selectedOption['option']].title;
-      const trackingId = $localize`${title} deployment`;
-      this.taskWrapper
-        .wrapTaskAroundCall({
-          task: new FinishedTask('osd/' + URLVerbs.CREATE, {
-            tracking_id: trackingId
-          }),
-          call: this.osdService.create([this.selectedOption], trackingId, 'predefined')
-        })
-        .subscribe({
-          error: (error) => error.preventDefault(),
-          complete: () => {
-            this.submitAction.emit();
-          }
-        });
-    } else {
-      if (this.osdService.osdDevices['totalDevices'] > 0) {
-        this.driveGroup.setFeature('encrypted', this.selectedOption['encrypted']);
-        const trackingId = _.join(_.map(this.driveGroups, 'service_id'), ', ');
+    if (!this.stepsToSkip['Create OSDs']) {
+      if (this.driveGroup) {
+        const user = this.authStorageService.getUsername();
+        this.driveGroup.setName(`dashboard-${user}-${_.now()}`);
+        this.driveGroups.push(this.driveGroup.spec);
+      }
+
+      if (this.simpleDeployment) {
+        const title = this.deploymentOption?.options[this.selectedOption['option']].title;
+        const trackingId = $localize`${title} deployment`;
         this.taskWrapper
           .wrapTaskAroundCall({
             task: new FinishedTask('osd/' + URLVerbs.CREATE, {
               tracking_id: trackingId
             }),
-            call: this.osdService.create(this.driveGroups, trackingId)
+            call: this.osdService.create([this.selectedOption], trackingId, 'predefined')
           })
           .subscribe({
             error: (error) => error.preventDefault(),
             complete: () => {
               this.submitAction.emit();
-              this.osdService.osdDevices = [];
             }
           });
+      } else {
+        if (this.osdService.osdDevices['totalDevices'] > 0) {
+          this.driveGroup.setFeature('encrypted', this.selectedOption['encrypted']);
+          const trackingId = _.join(_.map(this.driveGroups, 'service_id'), ', ');
+          this.taskWrapper
+            .wrapTaskAroundCall({
+              task: new FinishedTask('osd/' + URLVerbs.CREATE, {
+                tracking_id: trackingId
+              }),
+              call: this.osdService.create(this.driveGroups, trackingId)
+            })
+            .subscribe({
+              error: (error) => error.preventDefault(),
+              complete: () => {
+                this.submitAction.emit();
+                this.osdService.osdDevices = [];
+              }
+            });
+        }
       }
     }
   }
@@ -213,6 +222,12 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
     }
   }
 
+  onSkip() {
+    const stepTitle = this.stepTitles[this.currentStep.stepIndex - 1];
+    this.stepsToSkip[stepTitle] = true;
+    this.onNextStep();
+  }
+
   showSubmitButtonLabel() {
     return !this.wizardStepsService.isLastStep()
       ? this.actionLabels.NEXT