From 7f3107a88629b7c18a29672bb924b52d659ad8d7 Mon Sep 17 00:00:00 2001
From: Aashish Sharma
 <aasharma@li-e74156cc-2f67-11b2-a85c-e98659a63c5c.ibm.com>
Date: Wed, 17 May 2023 19:10:35 +0530
Subject: [PATCH] mgr/dashboard: show the host's IP address on Hosts page

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

Signed-off-by: Aashish Sharma <aasharma@redhat.com>
(cherry picked from commit ef9d53027ad472d8ee5e0e8524fce6ce7a40af89)
---
 .../src/app/ceph/cluster/hosts/hosts.component.html   | 11 +++++++++++
 .../app/ceph/cluster/hosts/hosts.component.spec.ts    |  2 +-
 .../src/app/ceph/cluster/hosts/hosts.component.ts     |  5 ++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

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 297085aca972e..1aeaef1f95fb3 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
@@ -61,6 +61,17 @@
   </span>
 </ng-template>
 
+<ng-template #hostNameTpl
+             let-row="row">
+  <span [ngClass]="row">
+    {{ row.hostname }}
+  </span><br>
+  <span class="text-muted fst-italic"
+        *ngIf="row.addr">
+    ({{ row.addr }})
+  </span>
+</ng-template>
+
 <ng-template #maintenanceConfirmTpl>
   <div *ngFor="let msg of errorMessage; let last=last">
     <ul *ngIf="!last || errorMessage.length === '1'">
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 03a61e0834d03..2e76d1f43ed63 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
@@ -114,7 +114,7 @@ describe('HostsComponent', () => {
     const spans = fixture.debugElement.nativeElement.querySelectorAll(
       '.datatable-body-cell-label span'
     );
-    expect(spans[0].textContent).toBe(hostname);
+    expect(spans[0].textContent.trim()).toBe(hostname);
   });
 
   it('should show the exact count of the repeating daemons', () => {
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 b7cad7e3c3378..3bdda8aca3ef4 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
@@ -56,6 +56,8 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
   orchTmpl: TemplateRef<any>;
   @ViewChild('flashTmpl', { static: true })
   flashTmpl: TemplateRef<any>;
+  @ViewChild('hostNameTpl', { static: true })
+  hostNameTpl: TemplateRef<any>;
 
   @Input()
   hiddenColumns: string[] = [];
@@ -193,7 +195,8 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
       {
         name: $localize`Hostname`,
         prop: 'hostname',
-        flexGrow: 1
+        flexGrow: 1,
+        cellTemplate: this.hostNameTpl
       },
       {
         name: $localize`Service Instances`,
-- 
2.39.5