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/shared/device-sort.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {deviceDisplayTitle} from "app/layout/common/dashboard-device/dashboard-device.component";
+import {DeviceTitlePipe} from "./device-title.pipe";
 
 @Pipe({
   name: 'deviceSort'
@@ -26,8 +26,8 @@ export class DeviceSortPipe implements PipeTransform {
     titleCompareFn(dashboardDisplay: string) {
         return function (a: any, b: any){
             let _dashboardDisplay = dashboardDisplay
-            let left = deviceDisplayTitle(a.device, _dashboardDisplay) || deviceDisplayTitle(a.device, 'name')
-            let right = deviceDisplayTitle(b.device, _dashboardDisplay) || deviceDisplayTitle(b.device, 'name')
+            let left = DeviceTitlePipe.deviceTitleForType(a.device, _dashboardDisplay) || DeviceTitlePipe.deviceTitleForType(a.device, 'name')
+            let right = DeviceTitlePipe.deviceTitleForType(b.device, _dashboardDisplay) || DeviceTitlePipe.deviceTitleForType(b.device, 'name')
 
             if( left < right )
                 return -1;
@@ -47,8 +47,8 @@ export class DeviceSortPipe implements PipeTransform {
     }
 
 
-  transform(deviceSummaries: Array<unknown>, sortBy = 'status', dashboardDisplay = "name"): Array<unknown> {
-    let compareFn = undefined
+  transform(deviceSummaries: Array<unknown>, sortBy = 'status', dashboardDisplay = 'name'): Array<unknown> {
+    let compareFn: any
     switch (sortBy) {
         case 'status':
             compareFn = this.statusCompareFn

webapp/frontend/src/app/shared/device-status.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DeviceStatusPipe } from './device-status.pipe';
+
+describe('DeviceStatusPipe', () => {
+  it('create an instance', () => {
+    const pipe = new DeviceStatusPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

webapp/frontend/src/app/shared/device-status.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'deviceStatus'
+})
+export class DeviceStatusPipe implements PipeTransform {
+
+  transform(deviceStatusFlag: number): string {
+      if(deviceStatusFlag === 0){
+          return 'passed'
+      } else if(deviceStatusFlag === 3){
+          return 'failed: both'
+      } else if(deviceStatusFlag === 2) {
+          return 'failed: scrutiny'
+      } else if(deviceStatusFlag === 1) {
+          return 'failed: smart'
+      }
+    return 'unknown'
+  }
+
+}

webapp/frontend/src/app/shared/device-title.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DeviceTitlePipe } from './device-title.pipe';
+
+describe('DeviceTitlePipe', () => {
+  it('create an instance', () => {
+    const pipe = new DeviceTitlePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

webapp/frontend/src/app/shared/device-title.pipe.ts

@@ -0,0 +1,54 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'deviceTitle'
+})
+export class DeviceTitlePipe implements PipeTransform {
+
+    static deviceTitleForType(device: any, titleType: string): string {
+        const titleParts = []
+        switch(titleType){
+            case 'name':
+                titleParts.push(`/dev/${device.device_name}`)
+                if (device.device_type && device.device_type !== 'scsi' && device.device_type !== 'ata'){
+                    titleParts.push(device.device_type)
+                }
+                titleParts.push(device.model_name)
+
+                break;
+            case 'serial_id':
+                if(!device.device_serial_id) return ''
+                titleParts.push(`/by-id/${device.device_serial_id}`)
+                break;
+            case 'uuid':
+                if(!device.device_uuid) return ''
+                titleParts.push(`/by-uuid/${device.device_uuid}`)
+                break;
+            case 'label':
+                if(device.label){
+                    titleParts.push(device.label)
+                } else if(device.device_label){
+                    titleParts.push(`/by-label/${device.device_label}`)
+                }
+                break;
+        }
+        return titleParts.join(' - ')
+    }
+
+    static deviceTitleWithFallback(device, titleType: string): string {
+        console.log(`Displaying Device ${device.wwn} with: ${titleType}`)
+        const titleParts = []
+        if (device.host_id) titleParts.push(device.host_id)
+
+        // add device identifier (fallback to generated device name)
+        titleParts.push(DeviceTitlePipe.deviceTitleForType(device, titleType) || DeviceTitlePipe.deviceTitleForType(device, 'name'))
+
+        return titleParts.join(' - ')
+    }
+
+
+    transform(device: any, titleType: string = 'name'): string {
+        return DeviceTitlePipe.deviceTitleWithFallback(device, titleType)
+    }
+
+}

webapp/frontend/src/app/shared/shared.module.ts

@@ -4,12 +4,16 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {FileSizePipe} from './file-size.pipe';
 import { DeviceSortPipe } from './device-sort.pipe';
 import { TemperaturePipe } from './temperature.pipe';
+import { DeviceTitlePipe } from './device-title.pipe';
+import { DeviceStatusPipe } from './device-status.pipe';
 
 @NgModule({
     declarations: [
         FileSizePipe,
         DeviceSortPipe,
-        TemperaturePipe
+        TemperaturePipe,
+        DeviceTitlePipe,
+        DeviceStatusPipe
     ],
     imports: [
         CommonModule,
@@ -22,6 +26,8 @@ import { TemperaturePipe } from './temperature.pipe';
         ReactiveFormsModule,
         FileSizePipe,
         DeviceSortPipe,
+        DeviceTitlePipe,
+        DeviceStatusPipe,
         TemperaturePipe
     ]
 })