mgr/dashboard:revamp on-borading screen

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

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 2051e61568c454adae50c5a9b359bac4f7651b38..2d63b8ae1dca18dfbd41bc4e251c1e53b831aa10 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
@@ -1,33 +1,101 @@
-<div class="container h-75"
-     *ngIf="startClusterCreation">
-  <div class="h-100 justify-content-center align-items-center"
-       cdsRow>
-    <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="container-fluid">
+  @if (startClusterCreation) {
+  <div cdsRow
+       class="cds-ml-5 cds-mt-5">
+    <div cdsCol
+         [columnNumbers]="{'lg': 8, 'md': 8, 'sm': 4}">
+      <div class="mb-5">
+        <!-- htmllint img-req-src="false" -->
+        <img [src]="projectConstants.cephLogo"
+             alt="Ceph"
+             class="img-fluid">
+      </div>
+
+      <div class="mb-5">
+        <span class="cds--type-fluid-heading-05"
+              i18n>Welcome to {{ projectConstants.projectName }}
+        </span>
+      </div>
+
+      <div class="mb-5">
+        <span class="cds--type-fluid-heading-04"
+              i18n>Finish cluster setup!
+        </span>
+      </div>
+
+      <div class="mb-5">
+        <span class="cds--type-body-compact-01"
+              i18n>
+          <cd-icon type="success"
+                   [size]="icons.size20">
+          </cd-icon>
+          You've successfully initialised your ceph cluster
+        </span>
+      </div>
 
-      <div class="m-4">
-        <h4 class="text-center"
-            i18n>Please expand your cluster first</h4>
-        <div class="text-center">
-          <button cdsButton="primary"
-                  name="expand-cluster"
-                  (click)="createCluster()"
-                  aria-label="Expand Cluster"
-                  i18n>Expand Cluster</button>
-          <button cdsButton="secondary"
-                  name="skip-cluster-creation"
-                  aria-label="Skip"
-                  (click)="skipClusterCreation()"
-                  i18n>Skip</button>
+      <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-5">
+        <div class="mb-3">
+          <cd-icon type="checkmarkOutline"
+                   class="cds-info-color"
+                   [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"
+                   [size]="icons.size20">
+          </cd-icon>
+          <span class="cds--type-body-compact-01 cds-ml-3"
+                i18n>Add storage</span>
         </div>
+        <div>
+          <cd-icon type="circleDash"
+                   class="cds-info-color"
+                   [size]="icons.size20">
+          </cd-icon>
+          <span class="cds--type-body-compact-01 cds-ml-3"
+                i18n>Create data services (optional)</span>
+        </div>
+      </div>
+
+      <div class="mb-4">
+        <button cdsButton="primary"
+                class="me-3"
+                (click)="createCluster()"
+                aria-label="Add Storage"
+                i18n>
+          Add storage
+          <svg [cdsIcon]="icons.add"
+               [size]="icons.size20"
+               class="cds--btn__icon">
+          </svg>
+        </button>
+        <button cdsButton="tertiary"
+                (click)="skipClusterCreation()"
+                i18n>
+          Skip to 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>
+ }
 </div>
 
 <div cdsRow

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 4301c23d8e4431357f27cbdbd983ffea9b7db305..08711c4ff5a024d2768d29641d45e1f7642137f7 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
@@ -54,11 +54,12 @@ describe('CreateClusterComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have project name as heading in welcome screen', () => {
+  it('should have project name in welcome screen', () => {
     component.startClusterCreation = true;
     fixture.detectChanges();
-    const heading = fixture.debugElement.query(By.css('h3')).nativeElement;
-    expect(heading.innerHTML).toBe(`Welcome to ${projectConstants.projectName}`);
+
+    const nativeEl = fixture.debugElement.nativeElement;
+    expect(nativeEl.textContent).toContain(`Welcome to ${projectConstants.projectName}`);
   });
 
   // @TODO: Opening modals in unit testing is broken since carbon.

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 e61ef3ee6e71e4db685c314bf0228d68a56953c7..19c6143fabc52a91eaefd9f46d90cfc865894732 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
@@ -35,6 +35,7 @@ import { DriveGroup } from '../osd/osd-form/drive-group.model';
 import { Location } from '@angular/common';
 import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
 import { Step } from 'carbon-components-angular';
+import { Icons } from '~/app/shared/enum/icons.enum';
 
 @Component({
   selector: 'cd-create-cluster',
@@ -75,6 +76,7 @@ export class CreateClusterComponent implements OnInit, OnDestroy, AfterViewInit
   selectedOption = {};
   simpleDeployment = true;
   stepsToSkip: { [steps: string]: boolean } = {};
+  icons = Icons;
 
   @Output()
   submitAction = new EventEmitter();

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 9b642e8f35fed2243b93c446f525d9615ad2cae7..b481d6e5fae237e23b10c5083e5c3f72bfc66416 100644 (file)
--- 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
@@ -59,6 +59,9 @@ import ErrorFilledIcon from '@carbon/icons/es/error--filled/16';
 import InformationFilledIcon from '@carbon/icons/es/information--filled/16';
 import WarningFilledIcon from '@carbon/icons/es/warning--filled/16';
 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 CloseIcon from '@carbon/icons/es/close/16';
 import { NotificationPanelComponent } from './notification-panel/notification-panel/notification-panel.component';
@@ -142,7 +145,10 @@ export class NavigationModule {
       WarningFilledIcon,
       NotificationFilledIcon,
       NotificationNewIcon,
-      CloseIcon
+      CloseIcon,
+      CircleDashIcon20,
+      CheckmarkOutlineIcon20,
+      ArrowRightIcon
     ]);
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html
index a6e092b14144376b1588ae143893e6f21aed998a..a6b1b21a7db5bcd96ef15df050387a8600a9a94d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html
@@ -1,4 +1,4 @@
 <svg  [cdsIcon]="icon"
       [size]="size"
-      [class]="type+'-icon'">
+      [class]="type+'-icon '+class">
 </svg>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts
index 5af1ff726544850b155a0231ff5a2d380f7cc9f7..bbed643e0f5d436eb291f25dbf83e6d187b8cf51 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts
@@ -11,6 +11,7 @@ import { ICON_TYPE, Icons, IconSize } from '../../enum/icons.enum';
 export class IconComponent implements OnInit {
   @Input() type!: keyof typeof ICON_TYPE;
   @Input() size: IconSize = IconSize.size16;
+  @Input() class: string = '';
 
   icon: string;
 

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 1e6b926ed88cec17ea244d43f6d4c92119f149ee..7602b745d3beb7b11676ac0c1f9730f8db21f0c2 100644 (file)
--- 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
@@ -87,6 +87,8 @@ export enum Icons {
   userAccessLocked = 'user--access-locked', // User access locked
   chevronDown = 'chevron--down',
   connect = 'connect',
+  checkmarkOutline = 'checkmark--outline',
+  circleDash = 'circle-dash',
   /* Icons for special effect */
   size16 = '16',
   size20 = '20',