Merge pull request #43838 from rhcs-dashboard/fix-53128-master

mgr/dashboard: Cluster Expansion - Review Section: fixes and improvements

Reviewed-by: Alfonso Martínez <almartin@redhat.com>
Reviewed-by: Avan Thakkar <athakkar@redhat.com>
Reviewed-by: Ernesto Puerta <epuertat@redhat.com>
Reviewed-by: Nizamudeen A <nia@redhat.com>

src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/05-create-cluster-review.e2e-spec.ts

@@ -34,39 +34,28 @@ describe('Create Cluster Review page', () => {
       createCluster.getStatusTables().should('contain.text', 'Memory');
     });
 
-    it('should check Hosts by Services and Host Details tables are present', () => {
+    it('should check Host Details table is present', () => {
       // check for there to be two tables
-      createCluster.getDataTables().should('have.length', 2);
-
-      // check for table header 'Hosts by Services'
-      createCluster.getLegends().its(1).should('have.text', 'Hosts by Services');
-
-      // check for table header 'Host Details'
-      createCluster.getLegends().its(2).should('have.text', 'Host Details');
-
-      // verify correct columns on Hosts by Services table
-      createCluster.getDataTableHeaders(0).contains('Services');
-
-      createCluster.getDataTableHeaders(0).contains('Number of Hosts');
+      createCluster.getDataTables().should('have.length', 1);
 
       // verify correct columns on Host Details table
-      createCluster.getDataTableHeaders(1).contains('Hostname');
+      createCluster.getDataTableHeaders(0).contains('Hostname');
 
-      createCluster.getDataTableHeaders(1).contains('Labels');
+      createCluster.getDataTableHeaders(0).contains('Labels');
 
-      createCluster.getDataTableHeaders(1).contains('CPUs');
+      createCluster.getDataTableHeaders(0).contains('CPUs');
 
-      createCluster.getDataTableHeaders(1).contains('Cores');
+      createCluster.getDataTableHeaders(0).contains('Cores');
 
-      createCluster.getDataTableHeaders(1).contains('Total Memory');
+      createCluster.getDataTableHeaders(0).contains('Total Memory');
 
-      createCluster.getDataTableHeaders(1).contains('Raw Capacity');
+      createCluster.getDataTableHeaders(0).contains('Raw Capacity');
 
-      createCluster.getDataTableHeaders(1).contains('HDDs');
+      createCluster.getDataTableHeaders(0).contains('HDDs');
 
-      createCluster.getDataTableHeaders(1).contains('Flash');
+      createCluster.getDataTableHeaders(0).contains('Flash');
 
-      createCluster.getDataTableHeaders(1).contains('NICs');
+      createCluster.getDataTableHeaders(0).contains('NICs');
     });
 
     it('should check default host name is present', () => {

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

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-lg-4">
+  <div class="col-lg-3">
     <fieldset>
       <legend class="cd-header"
               i18n>Cluster Resources</legend>
@@ -10,10 +10,21 @@
           <td>{{ hostsCount }}</td>
         </tr>
         <tr>
-          <td i18n
-              class="bold">Storage Capacity</td>
-          <td><span i18n>Number of devices: {{ totalDevices }}. Raw capacity:
-            {{ totalCapacity | dimlessBinary }}.</span></td>
+          <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>
         <tr>
           <td i18n
@@ -29,22 +40,15 @@
     </fieldset>
   </div>
 
-  <div class="col-lg-8">
-    <legend i18n
-            class="cd-header">Hosts by Services</legend>
-    <cd-table [data]="hostsByService['data']"
-              [columns]="hostsByService['columns']"
-              [toolHeader]="false">
-    </cd-table>
-  </div>
+<div class="col-lg-9">
+  <legend i18n
+          class="cd-header">Host Details</legend>
+  <cd-hosts [hiddenColumns]="['services', 'status']"
+            [hideToolHeader]="true"
+            [hideTitle]="true"
+            [hideSubmitBtn]="true"
+            [hasTableDetails]="false"
+            [showGeneralActionsOnly]="true">
+  </cd-hosts>
+</div>
 </div>
-
-<legend i18n
-        class="cd-header">Host Details</legend>
-<cd-hosts [hiddenColumns]="['services', 'status']"
-          [hideToolHeader]="true"
-          [hideTitle]="true"
-          [hideSubmitBtn]="true"
-          [hasTableDetails]="false"
-          [showGeneralActionsOnly]="true">
-</cd-hosts>

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

@@ -3,11 +3,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import _ from 'lodash';
 import { ToastrModule } from 'ngx-toastr';
-import { of } from 'rxjs';
 
 import { CephModule } from '~/app/ceph/ceph.module';
 import { CoreModule } from '~/app/core/core.module';
-import { CephServiceService } from '~/app/shared/api/ceph-service.service';
 import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed } from '~/testing/unit-test-helper';
 import { CreateClusterReviewComponent } from './create-cluster-review.component';
@@ -15,8 +13,6 @@ import { CreateClusterReviewComponent } from './create-cluster-review.component'
 describe('CreateClusterReviewComponent', () => {
   let component: CreateClusterReviewComponent;
   let fixture: ComponentFixture<CreateClusterReviewComponent>;
-  let cephServiceService: CephServiceService;
-  let serviceListSpy: jasmine.Spy;
 
   configureTestBed({
     imports: [HttpClientTestingModule, SharedModule, ToastrModule.forRoot(), CephModule, CoreModule]
@@ -25,31 +21,9 @@ describe('CreateClusterReviewComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(CreateClusterReviewComponent);
     component = fixture.componentInstance;
-    cephServiceService = TestBed.inject(CephServiceService);
-    serviceListSpy = spyOn(cephServiceService, 'list');
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should verify host metadata calculations', () => {
-    const hostnames = ['ceph.test1', 'ceph.test2'];
-    const payload = [
-      {
-        hostname: hostnames[0],
-        service_type: ['mgr', 'mon']
-      },
-      {
-        hostname: hostnames[1],
-        service_type: ['mgr', 'alertmanager']
-      }
-    ];
-    serviceListSpy.and.callFake(() => of(payload));
-    fixture.detectChanges();
-    expect(serviceListSpy).toHaveBeenCalled();
-
-    expect(component.serviceCount).toBe(2);
-    expect(component.uniqueServices.size).toBe(2);
-  });
 });

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

@@ -5,7 +5,6 @@ import _ from 'lodash';
 import { CephServiceService } from '~/app/shared/api/ceph-service.service';
 import { HostService } from '~/app/shared/api/host.service';
 import { OsdService } from '~/app/shared/api/osd.service';
-import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
 import { CephServiceSpec } from '~/app/shared/models/service.interface';
 import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
 import { WizardStepsService } from '~/app/shared/services/wizard-steps.service';
@@ -17,12 +16,7 @@ import { WizardStepsService } from '~/app/shared/services/wizard-steps.service';
 })
 export class CreateClusterReviewComponent implements OnInit {
   hosts: object[] = [];
-  hostsByService: object;
   hostsCount: number;
-  serviceCount: number;
-  serviceOccurrences = {};
-  hostsCountPerService: object[] = [];
-  uniqueServices: Set<string> = new Set();
   totalDevices: number;
   totalCapacity = 0;
   services: Array<CephServiceSpec> = [];
@@ -45,45 +39,6 @@ export class CreateClusterReviewComponent implements OnInit {
     let dbDevices = 0;
     let dbDeviceCapacity = 0;
 
-    this.hostsByService = {
-      columns: [
-        {
-          prop: 'service_type',
-          name: $localize`Services`,
-          flexGrow: 1,
-          cellTransformation: CellTemplate.badge,
-          customTemplateConfig: {
-            class: 'badge-dark'
-          }
-        },
-        {
-          name: $localize`Number of Hosts`,
-          prop: 'hosts_per_service',
-          flexGrow: 1
-        }
-      ]
-    };
-
-    this.cephServiceService.list().subscribe((resp: Array<CephServiceSpec>) => {
-      this.services = resp;
-      this.serviceCount = this.services.length;
-
-      _.forEach(this.services, (serviceKey) => {
-        this.serviceOccurrences[serviceKey['service_type']] =
-          (this.serviceOccurrences[serviceKey['service_type']] || 0) + 1;
-        this.uniqueServices.add(serviceKey['service_type']);
-      });
-
-      this.uniqueServices.forEach((serviceType) => {
-        this.hostsCountPerService.push({
-          service_type: serviceType,
-          hosts_per_service: this.serviceOccurrences[serviceType]
-        });
-      });
-
-      this.hostsByService['data'] = [...this.hostsCountPerService];
-    });
-
     this.hostService.list('true').subscribe((resp: object[]) => {
       this.hosts = resp;
       this.hostsCount = this.hosts.length;

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

@@ -72,7 +72,7 @@
 <ng-template #orchTmpl>
   <span i18n
         i18n-ngbTooltip
-        ngbTooltip="Data will be available only if Orchestrator is available.">Unavailable</span>
+        ngbTooltip="Data will be available only if Orchestrator is available.">N/A</span>
 </ng-template>
 
 <ng-template #flashTmpl>

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

@@ -175,7 +175,7 @@ describe('HostsComponent', () => {
     const spans = fixture.debugElement.nativeElement.querySelectorAll(
       '.datatable-body-cell-label span'
     );
-    expect(spans[7].textContent).toBe('Unavailable');
+    expect(spans[7].textContent).toBe('N/A');
   });
 
   it('should test if host facts are unavailable if get_fatcs orch feature is not available', () => {
@@ -200,7 +200,7 @@ describe('HostsComponent', () => {
     const spans = fixture.debugElement.nativeElement.querySelectorAll(
       '.datatable-body-cell-label span'
     );
-    expect(spans[7].textContent).toBe('Unavailable');
+    expect(spans[7].textContent).toBe('N/A');
   });
 
   it('should show force maintenance modal when it is safe to stop host', () => {