4 files changed, 117 insertions, 0 deletions
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
new file mode 100644
index 000000000..25aa3e1df
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.html
@@ -0,0 +1,19 @@
+<div class="card-body">
+  <div class="row m-7">
+    <nav class="col">
+      <ul class="nav nav-pills flex-column"
+          *ngFor="let step of steps | async; let i = index;">
+        <li class="nav-item">
+          <a class="nav-link"
+             (click)="onStepClick(step)"
+             [ngClass]="{active: currentStep.stepIndex === step.stepIndex}">
+            <span class="circle-step"
+                  [ngClass]="{active: currentStep.stepIndex === step.stepIndex}"
+                  i18n>{{ step.stepIndex }}</span>
+            <span i18n>{{ stepsTitle[i] }}</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>
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
new file mode 100644
index 000000000..071b02e4a
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.scss
@@ -0,0 +1,34 @@
+@use './src/styles/vendor/variables' as vv;
+
+::ng-deep cd-wizard {
+  width: 15%;
+}
+
+.card-body {
+  padding-left: 0;
+}
+
+span.circle-step {
+  background: vv.$gray-500;
+  border-radius: 0.8em;
+  color: vv.$white;
+  display: inline-block;
+  font-weight: bold;
+  line-height: 1.6em;
+  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.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.spec.ts
new file mode 100644
index 000000000..b42578fb7
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/wizard/wizard.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SharedModule } from '~/app/shared/shared.module';
+import { configureTestBed } from '~/testing/unit-test-helper';
+import { WizardComponent } from './wizard.component';
+
+describe('WizardComponent', () => {
+  let component: WizardComponent;
+  let fixture: ComponentFixture<WizardComponent>;
+
+  configureTestBed({
+    imports: [SharedModule]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WizardComponent);
+    component = fixture.componentInstance;
+    component.stepsTitle = ['Add Hosts', 'Review'];
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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();
+  }
+}