mgr/dashboard:revamp on-borading screen

Signed-off-by: Aashish Sharma <aasharma@redhat.com>
(cherry picked from commit 045d4168649fabeb42bc6e8d6564b070d927ee8e)

Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
	src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html
	src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts

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 eb53bdfdd4e129f5f1c3f86072a4d1fef6a581fb..68576609cf5b2f1076e4b2870f4c015f0e0cd0a9 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',
@@ -74,6 +75,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 994575f3b2fab98f88f111c241d059a8d3d0df14..a2ec6cf0fa290bfcf58ce6a093a577c43794825e 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
@@ -45,6 +45,16 @@ import AdminIcon from '@carbon/icons/es/network--admin-control/20';
 import LockedIcon from '@carbon/icons/es/locked/16';
 import LogoutIcon from '@carbon/icons/es/logout/16';
 import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
+import CheckmarkFilledIcon from '@carbon/icons/es/checkmark--filled/16';
+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';
+
 
 @NgModule({
   imports: [
@@ -95,7 +105,16 @@ export class NavigationModule {
       ObservabilityIcon,
       AdminIcon,
       LockedIcon,
-      LogoutIcon
+      LogoutIcon,
+      CheckmarkFilledIcon,
+      ErrorFilledIcon,
+      InformationFilledIcon,
+      WarningFilledIcon,
+      NotificationFilledIcon,
+      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 f1182dd46d037e9c1cf9f5e4f0a73bfb1cde6292..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,3 +1,4 @@
 <svg  [cdsIcon]="icon"
       [size]="size"
-      [class]="type+'-icon'"></svg>
+      [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 ef3ad63500f27780dca4ca039aff3dbf326eebc3..179ed5f72e4feaa3dfa91d1668044eb570fc2fc0 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
@@ -9,6 +9,7 @@ import { ICON_TYPE, 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 ce453e48f213a28907a38b16cb756922e53ea16f..55d2f19cd2df96a392047693fa36ba3970cce24b 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,9 @@ export enum Icons {
   nfsExport = 'fa fa-server', // NFS export
   userAccessLocked = 'user--access-locked', // User access locked
   chevronDown = 'chevron--down',
+  connect = 'connect',
+  checkmarkOutline = 'checkmark--outline',
+  circleDash = 'circle-dash',
   /* Icons for special effect */
   large = 'fa fa-lg', // icon becomes 33% larger
   large2x = 'fa fa-2x', // icon becomes 50% larger