mgr/dashboard: Expand Cluster improvements

worked on expand cluster screen hide/show and persisting osd form values

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

Signed-off-by: Naman Munet <[email protected]>

Author: Naman Munet

src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/create-cluster.po.ts

@@ -4,7 +4,7 @@ import { HostsPageHelper } from './hosts.po';
 import { ServicesPageHelper } from './services.po';
 
 const pages = {
-  index: { url: '#/expand-cluster', id: 'cd-create-cluster' }
+  index: { url: '#/expand-cluster?welcome=true', id: 'cd-create-cluster' }
 };
 export class CreateClusterWizardHelper extends PageHelper {
   pages = pages;
@@ -28,7 +28,7 @@ export class CreateClusterWizardHelper extends PageHelper {
 
 export class CreateClusterHostPageHelper extends HostsPageHelper {
   pages = {
-    index: { url: '#/expand-cluster', id: 'cd-wizard' },
+    index: { url: '#/expand-cluster?welcome=true', id: 'cd-wizard' },
     add: { url: '', id: 'cd-host-form' }
   };
 
@@ -42,7 +42,7 @@ export class CreateClusterHostPageHelper extends HostsPageHelper {
 
 export class CreateClusterServicePageHelper extends ServicesPageHelper {
   pages = {
-    index: { url: '#/expand-cluster', id: 'cd-wizard' },
+    index: { url: '#/expand-cluster?welcome=true', id: 'cd-wizard' },
     create: { url: '', id: 'cd-service-form' }
   };
 

src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/osds.po.ts

@@ -15,6 +15,11 @@ export class OSDsPageHelper extends PageHelper {
 
   create(deviceType: 'hdd' | 'ssd', hostname?: string, expandCluster = false) {
     cy.get('[aria-label="toggle advanced mode"]').click();
+    cy.get('[aria-label="toggle advanced mode"]').then(($button) => {
+      if ($button.hasClass('collapsed')) {
+        cy.wrap($button).click();
+      }
+    });
     // Click Primary devices Add button
     cy.get('cd-osd-devices-selection-groups[name="Primary"]').as('primaryGroups');
     cy.get('@primaryGroups').find('button').click();

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/urls.po.ts

@@ -3,7 +3,7 @@ import { PageHelper } from '../page-helper.po';
 export class UrlsCollection extends PageHelper {
   pages = {
     // Cluster expansion
-    welcome: { url: '#/expand-cluster', id: 'cd-create-cluster' },
+    welcome: { url: '#/expand-cluster?welcome=true', id: 'cd-create-cluster' },
 
     // Landing page
     dashboard: { url: '#/dashboard', id: 'cd-dashboard' },

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster-review.component.html

@@ -9,20 +9,20 @@
               class="bold">Hosts</td>
           <td>{{ hostsCount }}</td>
         </tr>
-        <tr>
+        <tr *ngIf="!isSimpleDeployment; else simpleDeploymentTextTpl">
           <td>
-          <dl>
-            <dt>
-              <p i18n>Storage Capacity</p>
-            </dt>
-            <dd>
-              <p i18n>Number of devices</p>
-            </dd>
-            <dd>
-              <p i18n>Raw capacity</p>
-            </dd>
-          </dl>
-        </td>
+            <dl>
+              <dt>
+                <p i18n>Storage Capacity</p>
+              </dt>
+              <dd>
+                <p i18n>Number of devices</p>
+              </dd>
+              <dd>
+                <p i18n>Raw capacity</p>
+              </dd>
+            </dl>
+          </td>
           <td class="pt-5"><p>{{ totalDevices }}</p><p>
             {{ totalCapacity | dimlessBinary }}</p></td>
         </tr>
@@ -40,13 +40,28 @@
     </fieldset>
   </div>
 
-<div class="col-lg-9">
+  <div class="col-lg-9">
   <legend i18n
           class="cd-header">Host Details</legend>
   <cd-hosts [hiddenColumns]="['services', 'status']"
             [hideToolHeader]="true"
             [hasTableDetails]="false"
-            [showGeneralActionsOnly]="true">
-  </cd-hosts>
-</div>
+            [showGeneralActionsOnly]="true"
+            [showExpandClusterBtn]="false">
+    </cd-hosts>
+  </div>
 </div>
+<ng-template #simpleDeploymentTextTpl>
+  <tr>
+    <td>
+      <dl>
+        <dt>
+          <p i18n>Storage Capacity</p>
+        </dt>
+        <dd>
+          <p i18n>{{deploymentDescText}}</p>
+        </dd>
+      </dl>
+    </td>
+  </tr>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster-review.component.ts

@@ -23,6 +23,8 @@ export class CreateClusterReviewComponent implements OnInit {
   services: Array<CephServiceSpec> = [];
   totalCPUs = 0;
   totalMemory = 0;
+  deploymentDescText: string;
+  isSimpleDeployment = true;
 
   constructor(
     public wizardStepsService: WizardStepsService,
@@ -40,6 +42,7 @@ export class CreateClusterReviewComponent implements OnInit {
     let dbDevices = 0;
     let dbDeviceCapacity = 0;
 
+    this.isSimpleDeployment = this.osdService.isDeployementModeSimple;
     const hostContext = new CdTableFetchDataContext(() => undefined);
     this.hostService.list(hostContext.toParams(), 'true').subscribe((resp: object[]) => {
       this.hosts = resp;
@@ -67,6 +70,21 @@ export class CreateClusterReviewComponent implements OnInit {
       dbDeviceCapacity = this.osdService.osdDevices['db']['capacity'];
     }
 
+    if (this.isSimpleDeployment) {
+      this.osdService.getDeploymentOptions().subscribe((optionsObj) => {
+        if (!_.isEmpty(optionsObj)) {
+          Object.keys(optionsObj.options).forEach((option) => {
+            if (
+              this.osdService.selectedFormValues &&
+              this.osdService.selectedFormValues.get('deploymentOption').value === option
+            ) {
+              this.deploymentDescText = optionsObj.options[option].desc;
+            }
+          });
+        }
+      });
+    }
+
     this.totalDevices = dataDevices + walDevices + dbDevices;
     this.osdService.osdDevices['totalDevices'] = this.totalDevices;
     this.totalCapacity = dataDeviceCapacity + walDeviceCapacity + dbDeviceCapacity;

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html

@@ -1,5 +1,5 @@
 <div class="container h-75"
-     *ngIf="!startClusterCreation">
+     *ngIf="startClusterCreation">
   <div class="row h-100 justify-content-center align-items-center">
     <div class="blank-page">
       <!-- htmllint img-req-src="false" -->
@@ -30,7 +30,7 @@
 </div>
 
 <div class="card"
-     *ngIf="startClusterCreation">
+     *ngIf="!startClusterCreation">
   <div class="card-header"
        i18n>Expand Cluster</div>
   <div class="container-fluid">
@@ -45,7 +45,8 @@
           <cd-hosts [hiddenColumns]="['services']"
                     [hideMaintenance]="true"
                     [hasTableDetails]="false"
-                    [showGeneralActionsOnly]="true"></cd-hosts>
+                    [showGeneralActionsOnly]="true"
+                    [showExpandClusterBtn]="false"></cd-hosts>
         </div>
         <div *ngSwitchCase="'2'"
              class="ms-5">

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts

@@ -59,6 +59,8 @@ describe('CreateClusterComponent', () => {
   });
 
   it('should have project name as heading 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}`);
   });

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts

@@ -7,7 +7,7 @@ import {
   TemplateRef,
   ViewChild
 } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import _ from 'lodash';
@@ -68,7 +68,8 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
     private clusterService: ClusterService,
     private modalService: ModalService,
     private taskWrapper: TaskWrapperService,
-    private osdService: OsdService
+    private osdService: OsdService,
+    private route: ActivatedRoute
   ) {
     this.permissions = this.authStorageService.getPermissions();
     this.currentStepSub = this.wizardStepsService
@@ -80,6 +81,14 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      // reading 'welcome' value true/false to toggle expand-cluster wizand view and welcome view
+      const showWelcomeScreen = params['welcome'];
+      if (showWelcomeScreen) {
+        this.startClusterCreation = showWelcomeScreen;
+      }
+    });
+
     this.osdService.getDeploymentOptions().subscribe((options) => {
       this.deploymentOption = options;
       this.selectedOption = { option: options.recommended_option, encrypted: false };
@@ -91,7 +100,7 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
   }
 
   createCluster() {
-    this.startClusterCreation = true;
+    this.startClusterCreation = false;
   }
 
   skipClusterCreation() {
@@ -244,5 +253,6 @@ export class CreateClusterComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.currentStepSub.unsubscribe();
+    this.osdService.selectedFormValues = null;
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html

@@ -26,6 +26,12 @@
                             id="host-actions"
                             [tableActions]="tableActions">
           </cd-table-actions>
+          <cd-table-actions [permission]="permissions.hosts"
+                            [selection]="selection"
+                            btnColor="light"
+                            class="btn-group"
+                            [tableActions]="expandClusterActions">
+          </cd-table-actions>
         </div>
         <cd-host-details cdTableDetail
                          [permissions]="permissions"

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts

@@ -78,12 +78,16 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
   @Input()
   showGeneralActionsOnly = false;
 
+  @Input()
+  showExpandClusterBtn = true;
+
   permissions: Permissions;
   columns: Array<CdTableColumn> = [];
   hosts: Array<object> = [];
   isLoadingHosts = false;
   cdParams = { fromLink: '/hosts' };
   tableActions: CdTableAction[];
+  expandClusterActions: CdTableAction[];
   selection = new CdTableSelection();
   modalRef: NgbModalRef;
   isExecuting = false;
@@ -125,6 +129,16 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
   ) {
     super();
     this.permissions = this.authStorageService.getPermissions();
+    this.expandClusterActions = [
+      {
+        name: this.actionLabels.EXPAND_CLUSTER,
+        permission: 'create',
+        icon: Icons.expand,
+        routerLink: '/expand-cluster',
+        disable: (selection: CdTableSelection) => this.getDisable('add', selection),
+        visible: () => this.showExpandClusterBtn
+      }
+    ];
     this.tableActions = [
       {
         name: this.actionLabels.ADD,