mgr/dashboard: fix weird data in osd details

The devices section in the OSD Details and Host Details shows more than
one daemon and device path in the column when you view the details of a
single osd details/host details. This is because more than one osd
is created on a device with same `deviceid`. I am not sure if this will
happen in the real environment but its mostly reproducible in
environments with QEMU emulated devices.

Fixes: https://tracker.ceph.com/issues/57803
Signed-off-by: Nizamudeen A <nia@redhat.com>

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

@@ -8,7 +8,9 @@
       <a ngbNavLink
          i18n>Devices</a>
       <ng-template ngbNavContent>
-        <cd-device-list [osdId]="osd?.id"></cd-device-list>
+        <cd-device-list [osdId]="osd?.id"
+                        [hostname]="selection?.host.name"
+                        [osdList]="true"></cd-device-list>
       </ng-template>
     </ng-container>
     <ng-container ngbNavItem="attributes">

src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.html

@@ -8,9 +8,36 @@
 
 <ng-template #deviceLocation
              let-value="value">
-  <span *ngFor="let location of value">{{location.dev}}</span>
+  <ng-container *ngFor="let location of value">
+    <cd-label *ngIf="location.host === hostname"
+              [value]="location.dev"></cd-label>
+  </ng-container>
 </ng-template>
 
+<ng-template #daemonName
+             let-value="value">
+  <ng-container [ngTemplateOutlet]="osdId !== null ? osdIdDaemon : readableDaemons"
+                [ngTemplateOutletContext]="{daemons: value}">
+  </ng-container>
+</ng-template>
+
+<ng-template #osdIdDaemon
+             let-daemons="daemons">
+  <ng-container *ngFor="let daemon of daemons">
+    <cd-label *ngIf="daemon.includes(osdId)"
+              [value]="daemon"></cd-label>
+  </ng-container>
+</ng-template>
+
+<ng-template #readableDaemons
+             let-daemons="daemons">
+  <ng-container *ngFor="let daemon of daemons">
+    <cd-label class="mr-1"
+              [value]="daemon"></cd-label>
+  </ng-container>
+</ng-template>
+
+
 <ng-template #lifeExpectancy
              let-value="value">
   <span *ngIf="!value.life_expectancy_enabled"

src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts

@@ -18,8 +18,13 @@ export class DeviceListComponent implements OnChanges, OnInit {
   @Input()
   osdId: number = null;
 
+  @Input()
+  osdList = false;
+
   @ViewChild('deviceLocation', { static: true })
   locationTemplate: TemplateRef<any>;
+  @ViewChild('daemonName', { static: true })
+  daemonNameTemplate: TemplateRef<any>;
   @ViewChild('lifeExpectancy', { static: true })
   lifeExpectancyTemplate: TemplateRef<any>;
   @ViewChild('lifeExpectancyTimestamp', { static: true })
@@ -69,16 +74,16 @@ export class DeviceListComponent implements OnChanges, OnInit {
         isHidden: true
       },
       { prop: 'location', name: $localize`Device Name`, cellTemplate: this.locationTemplate },
-      { prop: 'readableDaemons', name: $localize`Daemons` }
+      { prop: 'daemons', name: $localize`Daemons`, cellTemplate: this.daemonNameTemplate }
     ];
   }
 
   ngOnChanges() {
     const updateDevicesFn = (devices: CdDevice[]) => (this.devices = devices);
-    if (this.hostname) {
-      this.hostService.getDevices(this.hostname).subscribe(updateDevicesFn);
-    } else if (this.osdId !== null) {
+    if (this.osdList && this.osdId !== null) {
       this.osdService.getDevices(this.osdId).subscribe(updateDevicesFn);
+    } else if (this.hostname) {
+      this.hostService.getDevices(this.hostname).subscribe(updateDevicesFn);
     }
   }
 }