From: Aashish Sharma <aashish@li-e9bf2ecc-2ad7-11b2-a85c-baf05c5182ab.ibm.com>
Date: Wed, 4 Mar 2026 09:58:17 +0000 (+0530)
Subject: mgr/dashboard: update onboarding screen as per design
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=cc8e8f02ce2b2198e5b26f86810d3a70adfd29f1;p=ceph.git

mgr/dashboard: update onboarding screen as per design

Fixes: https://tracker.ceph.com/issues/75317

Signed-off-by: Aashish Sharma <aasharma@redhat.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index fadb8312a7c..d636b5dc996 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -23,7 +23,9 @@ import {
   NumberModule,
   FileUploaderModule,
   TabsModule,
-  RadioModule
+  RadioModule,
+  TilesModule,
+  LayerModule
 } from 'carbon-components-angular';
 import Analytics from '@carbon/icons/es/analytics/16';
 import CloseFilled from '@carbon/icons/es/close--filled/16';
@@ -133,7 +135,9 @@ import { TextLabelListComponent } from '~/app/shared/components/text-label-list/
     LayoutModule,
     NumberModule,
     FileUploaderModule,
-    RadioModule
+    RadioModule,
+    TilesModule,
+    LayerModule
   ],
   declarations: [
     MonitorComponent,
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 2d63b8ae1dc..f9ae6adb4a5 100644
--- 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
@@ -3,7 +3,7 @@
   <div cdsRow
        class="cds-ml-5 cds-mt-5">
     <div cdsCol
-         [columnNumbers]="{'lg': 8, 'md': 8, 'sm': 4}">
+         [columnNumbers]="{'lg': 13, 'md': 8, 'sm': 8}">
       <div class="mb-5">
         <!-- htmllint img-req-src="false" -->
         <img [src]="projectConstants.cephLogo"
@@ -17,9 +17,9 @@
         </span>
       </div>
 
-      <div class="mb-5">
+      <div class="mb-2">
         <span class="cds--type-fluid-heading-04"
-              i18n>Finish cluster setup!
+              i18n>Your Ceph cluster is initialized and running.
         </span>
       </div>
 
@@ -29,38 +29,108 @@
           <cd-icon type="success"
                    [size]="icons.size20">
           </cd-icon>
-          You've successfully initialised your ceph cluster
+          The cluster control plane is ready.
+        </span>
+      </div>
+
+      <div class="mb-2">
+        <span class="cds--type-fluid-heading-03"
+              i18n>
+          <cd-icon type="ibmCloudBareMetalServer"
+                   [size]="icons.size20">
+          </cd-icon>
+          Add storage to begin using your cluster.
         </span>
       </div>
 
-      <div class="mb-4 cds--type-body-compact-01"
-           i18n>A few setup steps are still pending before the cluster can store data and serve workloads. You can complete these now or skip and configure services later</div>
+      <div class="mb-2">
+        <span class="cds--type-body-01"
+              i18n>Set up storage for your cluster to run workloads and store data. You can configure storage and data services now, or skip and configure them later.</span>
+      </div>
 
-      <div class="mb-5">
-        <div class="mb-3">
-          <cd-icon type="checkmarkOutline"
-                   class="cds-info-color"
+      <cds-tile class="storage-requirements-header"
+                [cdsLayer]="1">
+        <div cdsStack="horizontal"
+             gap="3">
+          <span class="cds--type-heading-compact-02"
+                i18n>
+            Storage requirements
+          </span>
+          <cd-icon type="infoCircle"
                    [size]="icons.size20">
           </cd-icon>
-          <span class="cds--type-body-compact-01 cds-ml-3"
-                i18n>Add hosts</span>
         </div>
-        <div class="mb-3">
-          <cd-icon type="circleDash"
-                   class="cds-info-color"
+      </cds-tile>
+
+      <cds-tile class="storage-requirements-body mb-3"
+                [cdsLayer]="2">
+        <div cdsStack="horizontal"
+             gap="4">
+          <cd-icon type="ibmCloudDedicatedHost"
                    [size]="icons.size20">
           </cd-icon>
-          <span class="cds--type-body-compact-01 cds-ml-3"
-                i18n>Add storage</span>
+          <div cdsStack="vertical"
+               gap="1">
+            <span class="cds--type-heading-compact-01"
+                  i18n>
+              Hosts
+            </span>
+            <span class="cds--type-body-compact-01 text-secondary"
+                  i18n>
+              Minimum 3 hosts required
+            </span>
+          </div>
         </div>
-        <div>
-          <cd-icon type="circleDash"
-                   class="cds-info-color"
+
+        <hr/>
+
+        <div cdsStack="horizontal" gap="4">
+          <cd-icon type="vmdkDisk"
                    [size]="icons.size20">
           </cd-icon>
-          <span class="cds--type-body-compact-01 cds-ml-3"
-                i18n>Create data services (optional)</span>
+
+          <div cdsStack="vertical" gap="1">
+            <span class="cds--type-heading-compact-01"
+                  i18n>
+              Disks
+            </span>
+
+            <span class="cds--type-body-compact-01 text-secondary"
+                  i18n>
+              At least 1 disk per host
+            </span>
+          </div>
+        </div>
+
+        <hr/>
+
+        <div cdsStack="horizontal"
+             gap="4">
+          <cd-icon type="clusterIcon"
+                  [size]="icons.size20">
+          </cd-icon>
+
+          <div cdsStack="vertical" gap="1">
+            <span class="cds--type-heading-compact-01"
+                  i18n>
+              Data services (optional)
+            </span>
+
+            <span class="cds--type-body-compact-01 text-secondary"
+                  i18n>
+              Configure Object, Block, or File services
+            </span>
+          </div>
         </div>
+      </cds-tile>
+
+      <div class="mb-3">
+        <cd-alert-panel type="info"
+                        [showTitle]="false">
+          <span class="cds--type-body-compact-01">
+              The cluster cannot store data until storage is added. If storage is already configured, continue to the cluster overview.
+          </span>
+        </cd-alert-panel>
       </div>
 
       <div class="mb-4">
@@ -78,21 +148,13 @@
         <button cdsButton="tertiary"
                 (click)="skipClusterCreation()"
                 i18n>
-          Skip to cluster overview
+          View cluster overview
           <svg [cdsIcon]="icons.right"
                [size]="icons.size20"
                class="cds--btn__icon">
           </svg>
         </button>
       </div>
-
-      <div class="cds--type-label-01"
-           i18n>
-        <cd-icon type="infoCircle"
-                 [size]="icons.size20">
-        </cd-icon>
-        Skipping setup does not affect the cluster. The cluster will remain available, but it cannot store data until storage is added
-      </div>
     </div>
   </div>
  }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss
index 313f3193bfb..45e0c3bda73 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss
@@ -20,3 +20,12 @@ cd-osd-form {
     margin-left: -1.5rem;
   }
 }
+
+.storage-requirements-body {
+  border: 1px solid var(--cds-border-subtle);
+}
+
+.storage-requirements-header {
+  border: 1px solid var(--cds-border-subtle);
+  border-bottom: 0;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index b481d6e5fae..3122c0f8664 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -62,6 +62,9 @@ import NotificationFilledIcon from '@carbon/icons/es/notification--filled/16';
 import CircleDashIcon20 from '@carbon/icons/es/circle-dash/20';
 import CheckmarkOutlineIcon20 from '@carbon/icons/es/checkmark--outline/20';
 import ArrowRightIcon from '@carbon/icons/es/arrow--right/20';
+import IbmCloudBareMetalServerIcon from '@carbon/icons/es/ibm-cloud--bare-metal-server/20';
+import IbmCloudDedicatedHostIcon from '@carbon/icons/es/ibm-cloud--dedicated-host/20';
+import VmdkDiskIcon from '@carbon/icons/es/vmdk-disk/20';
 
 import CloseIcon from '@carbon/icons/es/close/16';
 import { NotificationPanelComponent } from './notification-panel/notification-panel/notification-panel.component';
@@ -137,6 +140,8 @@ export class NavigationModule {
       FileIcon,
       ObservabilityIcon,
       AdminIcon,
+      IbmCloudBareMetalServerIcon,
+      IbmCloudDedicatedHostIcon,
       LockedIcon,
       LogoutIcon,
       CheckmarkFilledIcon,
@@ -148,7 +153,8 @@ export class NavigationModule {
       CloseIcon,
       CircleDashIcon20,
       CheckmarkOutlineIcon20,
-      ArrowRightIcon
+      ArrowRightIcon,
+      VmdkDiskIcon
     ]);
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
index 3514bec48ff..290da0e09cb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
@@ -90,6 +90,9 @@ export enum Icons {
   checkmarkOutline = 'checkmark--outline',
   circleDash = 'circle-dash',
   datastore = 'datastore',
+  ibmCloudBareMetalServer = 'ibm-cloud--bare-metal-server',
+  ibmCloudDedicatedHost = 'ibm-cloud--dedicated-host',
+  clusterIcon = 'web-services--cluster',
   /* Icons for special effect */
   size16 = '16',
   size20 = '20',