using device title pipe to consistently set the device name based on configuration setting.

adding device status pipe to set the device status in a more readable way.

webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html

@@ -15,7 +15,7 @@
     <div class="flex items-center">
         <div class="flex flex-col">
             <a [routerLink]="'/device/'+ deviceSummary.device.wwn"
-               class="font-bold text-md text-secondary uppercase tracking-wider">{{deviceTitle(deviceSummary.device)}}</a>
+               class="font-bold text-md text-secondary uppercase tracking-wider">{{deviceSummary.device | deviceTitle:config.dashboardDisplay}}</a>
             <div [ngClass]="classDeviceLastUpdatedOn(deviceSummary)" class="font-medium text-sm" *ngIf="deviceSummary.smart">
                 Last Updated on {{deviceSummary.smart.collector_date | date:'MMMM dd, yyyy - HH:mm' }}
             </div>

webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts

@@ -7,6 +7,7 @@ import {Subject} from "rxjs";
 import  humanizeDuration from 'humanize-duration'
 import {MatDialog} from '@angular/material/dialog';
 import {DashboardDeviceDeleteDialogComponent} from "app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component";
+import {DeviceTitlePipe} from "app/shared/device-title.pipe";
 
 @Component({
   selector: 'app-dashboard-device',
@@ -64,18 +65,6 @@ export class DashboardDeviceComponent implements OnInit {
         }
     }
 
-    deviceTitle(disk){
-
-        console.log(`Displaying Device ${disk.wwn} with: ${this.config.dashboardDisplay}`)
-        let titleParts = []
-        if (disk.host_id) titleParts.push(disk.host_id)
-
-        //add device identifier (fallback to generated device name)
-        titleParts.push(deviceDisplayTitle(disk, this.config.dashboardDisplay) || deviceDisplayTitle(disk, 'name'))
-
-        return titleParts.join(' - ')
-    }
-
     deviceStatusString(deviceStatus){
         if(deviceStatus == 0){
             return "passed"
@@ -91,7 +80,7 @@ export class DashboardDeviceComponent implements OnInit {
     openDeleteDialog(): void {
         const dialogRef = this.dialog.open(DashboardDeviceDeleteDialogComponent, {
             // width: '250px',
-            data: {wwn: this.deviceWWN, title: this.deviceTitle(this.deviceSummary.device)}
+            data: {wwn: this.deviceWWN, title: DeviceTitlePipe.deviceTitleWithFallback(this.deviceSummary.device, this.config.dashboardDisplay)}
         });
 
         dialogRef.afterClosed().subscribe(result => {
@@ -102,33 +91,3 @@ export class DashboardDeviceComponent implements OnInit {
         });
     }
 }
-
-export function deviceDisplayTitle(disk, titleType: string){
-    let titleParts = []
-    switch(titleType){
-        case 'name':
-            titleParts.push(`/dev/${disk.device_name}`)
-            if (disk.device_type && disk.device_type != 'scsi' && disk.device_type != 'ata'){
-                titleParts.push(disk.device_type)
-            }
-            titleParts.push(disk.model_name)
-
-            break;
-        case 'serial_id':
-            if(!disk.device_serial_id) return ''
-            titleParts.push(`/by-id/${disk.device_serial_id}`)
-            break;
-        case 'uuid':
-            if(!disk.device_uuid) return ''
-            titleParts.push(`/by-uuid/${disk.device_uuid}`)
-            break;
-        case 'label':
-            if(disk.label){
-                titleParts.push(disk.label)
-            } else if(disk.device_label){
-                titleParts.push(`/by-label/${disk.device_label}`)
-            }
-            break;
-    }
-    return titleParts.join(' - ')
-}