1 files changed, 98 insertions, 0 deletions
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
new file mode 100644
index 000000000..d7ab567cf
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html
@@ -0,0 +1,98 @@
+<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" -->
+      <img [src]="projectConstants.cephLogo"
+           alt="Ceph"
+           class="img-fluid mx-auto d-block">
+      <h3 class="text-center m-2"
+          i18n>Welcome to {{ projectConstants.projectName }}</h3>
+
+      <div class="m-4">
+        <h4 class="text-center"
+            i18n>Please expand your cluster first</h4>
+        <div class="offset-md-2">
+          <button class="btn btn-accent m-2"
+                  name="expand-cluster"
+                  (click)="createCluster()"
+                  aria-label="Expand Cluster"
+                  i18n>Expand Cluster</button>
+          <button class="btn btn-light"
+                  name="skip-cluster-creation"
+                  aria-label="Skip"
+                  (click)="skipClusterCreation()"
+                  i18n>Skip</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="card"
+     *ngIf="startClusterCreation">
+  <div class="card-header"
+       i18n>Expand 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 [hiddenColumns]="['services']"
+                    [hideTitle]="true"
+                    [hideSubmitBtn]="true"
+                    [hasTableDetails]="false"
+                    [showGeneralActionsOnly]="true"></cd-hosts>
+        </div>
+        <div *ngSwitchCase="'2'"
+             class="ml-5">
+          <h4 class="title"
+              i18n>Create OSDs</h4>
+          <div class="alignForm">
+            <cd-osd-form [hideTitle]="true"
+                         [hideSubmitBtn]="true"
+                         (emitDriveGroup)="setDriveGroup($event)"
+                         (emitDeploymentOption)="setDeploymentOptions($event)"
+                         (emitMode)="setDeploymentMode($event)"></cd-osd-form>
+          </div>
+        </div>
+        <div *ngSwitchCase="'3'"
+             class="ml-5">
+          <h4 class="title"
+              i18n>Create Services</h4>
+          <br>
+          <cd-services [hasDetails]="false"
+                       [hiddenServices]="['mon', 'mgr', 'crash', 'agent']"
+                       [hiddenColumns]="['status.running', 'status.size', 'status.last_refresh']"
+                       [routedModal]="false"></cd-services>
+        </div>
+        <div *ngSwitchCase="'4'"
+             class="ml-5">
+          <cd-create-cluster-review></cd-create-cluster-review>
+        </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>
+
+<ng-template #skipConfirmTpl>
+  <span i18n>You are about to skip the cluster expansion process.
+             You’ll need to <strong>navigate through the menu to add hosts and services.</strong></span>
+
+  <div class="mt-4"
+       i18n>Are you sure you want to continue?</div>
+</ng-template>