From: Pere Diaz Bou <pere-altea@hotmail.com>
Date: Wed, 17 May 2023 13:35:17 +0000 (+0200)
Subject: mgr/dashboard: add not avaialable with unpresent host facts
X-Git-Tag: v19.0.0~665^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=2b480ca6a8e348d7d2a4f192b707cdf35134f5f6;p=ceph-ci.git

mgr/dashboard: add not avaialable with unpresent host facts

Some of the facts that are retrieved from hosts might be empty, so
instead of displayed empty cells we display a "-" with a hover
explaining that it wasn't retrievable from the orchestrator.

Fixes: https://tracker.ceph.com/issues/61221
Signed-off-by: Pere Diaz Bou <pere-altea@hotmail.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
index 1aeaef1f95f..92e4309b277 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
@@ -82,10 +82,31 @@
                 *ngIf="showSubmit">Are you sure you want to continue?</ng-container>
 </ng-template>
 
+
+<ng-template #hostMetricTmpl
+             let-value="value">
+  <div *ngIf="validValue(value)">
+    <span>{{ value }}</span>
+  </div>
+  <div *ngIf="!validValue(value)">
+    <span ngbTooltip="Not available. Data could not be fetched from Ceph">-</span>
+  </div>
+</ng-template>
+
+<ng-template #hostDimlessTmpl
+             let-value="value">
+  <div *ngIf="!validValue(value)">
+    <span ngbTooltip="Not available. Data could not be fetched from Ceph">-</span>
+  </div>
+  <div *ngIf="validValue(value)">
+    <span>{{ value | dimlessBinary }}</span>
+  </div>
+</ng-template>
+
 <ng-template #orchTmpl>
   <span i18n
         i18n-ngbTooltip
-        ngbTooltip="Data will be available only if Orchestrator is available.">N/A</span>
+        ngbTooltip="Data will be available only if Orchestrator is available.">-</span>
 </ng-template>
 
 <ng-template #flashTmpl>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
index 2e76d1f43ed..1678316ba05 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
@@ -213,7 +213,7 @@ describe('HostsComponent', () => {
     const spans = fixture.debugElement.nativeElement.querySelectorAll(
       '.datatable-body-cell-label span'
     );
-    expect(spans[7].textContent).toBe('N/A');
+    expect(spans[7].textContent).toBe('-');
   });
 
   it('should test if host facts are unavailable if get_fatcs orch feature is not available', () => {
@@ -238,7 +238,7 @@ describe('HostsComponent', () => {
     const spans = fixture.debugElement.nativeElement.querySelectorAll(
       '.datatable-body-cell-label span'
     );
-    expect(spans[7].textContent).toBe('N/A');
+    expect(spans[7].textContent).toBe('-');
   });
 
   it('should test if memory/raw capacity columns shows N/A if facts are available but in fetching state', () => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
index 3bdda8aca3e..d69dc59a117 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
@@ -26,7 +26,6 @@ import { FinishedTask } from '~/app/shared/models/finished-task';
 import { OrchestratorFeature } from '~/app/shared/models/orchestrator.enum';
 import { OrchestratorStatus } from '~/app/shared/models/orchestrator.interface';
 import { Permissions } from '~/app/shared/models/permissions';
-import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
 import { EmptyPipe } from '~/app/shared/pipes/empty.pipe';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { ModalService } from '~/app/shared/services/modal.service';
@@ -50,6 +49,10 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
   table: TableComponent;
   @ViewChild('servicesTpl', { static: true })
   public servicesTpl: TemplateRef<any>;
+  @ViewChild('hostMetricTmpl', { static: true })
+  public hostMetricTmpl: TemplateRef<any>;
+  @ViewChild('hostDimlessTmpl', { static: true })
+  public hostDimlessTmpl: TemplateRef<any>;
   @ViewChild('maintenanceConfirmTpl', { static: true })
   maintenanceConfirmTpl: TemplateRef<any>;
   @ViewChild('orchTmpl', { static: true })
@@ -108,7 +111,6 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
 
   constructor(
     private authStorageService: AuthStorageService,
-    private dimlessBinary: DimlessBinaryPipe,
     private emptyPipe: EmptyPipe,
     private hostService: HostService,
     private actionLabels: ActionLabelsI18n,
@@ -233,39 +235,44 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
       {
         name: $localize`CPUs`,
         prop: 'cpu_count',
+        cellTemplate: this.hostMetricTmpl,
         flexGrow: 0.3
       },
       {
         name: $localize`Cores`,
         prop: 'cpu_cores',
+        cellTemplate: this.hostMetricTmpl,
         flexGrow: 0.3
       },
       {
         name: $localize`Total Memory`,
         prop: 'memory_total_bytes',
-        pipe: this.dimlessBinary,
+        cellTemplate: this.hostDimlessTmpl,
         flexGrow: 0.4
       },
       {
         name: $localize`Raw Capacity`,
         prop: 'raw_capacity',
-        pipe: this.dimlessBinary,
+        cellTemplate: this.hostDimlessTmpl,
         flexGrow: 0.5
       },
       {
         name: $localize`HDDs`,
         prop: 'hdd_count',
+        cellTemplate: this.hostMetricTmpl,
         flexGrow: 0.3
       },
       {
         name: $localize`Flash`,
         prop: 'flash_count',
         headerTemplate: this.flashTmpl,
+        cellTemplate: this.hostMetricTmpl,
         flexGrow: 0.3
       },
       {
         name: $localize`NICs`,
         prop: 'nic_count',
+        cellTemplate: this.hostMetricTmpl,
         flexGrow: 0.3
       }
     ];
@@ -513,4 +520,15 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
         }
       );
   }
+
+  validValue(value: any) {
+    // Check if value is a number(int or float) and that it isn't null
+    return (
+      Number(value) == value &&
+      value % 1 == 0 &&
+      value !== undefined &&
+      value !== null &&
+      value !== ''
+    );
+  }
 }