1 files changed, 39 insertions, 0 deletions
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
new file mode 100644
index 000000000..d46aa480e
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.ts
@@ -0,0 +1,39 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+
+import * as _ from 'lodash';
+import { Observable, Subscription } from 'rxjs';
+
+import { WizardStepModel } from '~/app/shared/models/wizard-steps';
+import { WizardStepsService } from '~/app/shared/services/wizard-steps.service';
+
+@Component({
+  selector: 'cd-wizard',
+  templateUrl: './wizard.component.html',
+  styleUrls: ['./wizard.component.scss']
+})
+export class WizardComponent implements OnInit, OnDestroy {
+  @Input()
+  stepsTitle: string[];
+
+  steps: Observable<WizardStepModel[]>;
+  currentStep: WizardStepModel;
+  currentStepSub: Subscription;
+
+  constructor(private stepsService: WizardStepsService) {}
+
+  ngOnInit(): void {
+    this.stepsService.setTotalSteps(this.stepsTitle.length);
+    this.steps = this.stepsService.getSteps();
+    this.currentStepSub = this.stepsService.getCurrentStep().subscribe((step: WizardStepModel) => {
+      this.currentStep = step;
+    });
+  }
+
+  onStepClick(step: WizardStepModel) {
+    this.stepsService.setCurrentStep(step);
+  }
+
+  ngOnDestroy(): void {
+    this.currentStepSub.unsubscribe();
+  }
+}