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(' - ')
-}

webapp/frontend/src/app/modules/dashboard/dashboard.component.ts

@@ -7,11 +7,11 @@ import {ApexOptions, ChartComponent} from 'ng-apexcharts';
 import { DashboardService } from 'app/modules/dashboard/dashboard.service';
 import {MatDialog} from '@angular/material/dialog';
 import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component';
-import {deviceDisplayTitle} from "app/layout/common/dashboard-device/dashboard-device.component";
 import {AppConfig} from "app/core/config/app.config";
 import {TreoConfigService} from "@treo/services/config";
 import {Router} from "@angular/router";
-import {TemperaturePipe} from "../../shared/temperature.pipe";
+import {TemperaturePipe} from "app/shared/temperature.pipe";
+import {DeviceTitlePipe} from "app/shared/device-title.pipe";
 
 @Component({
     selector       : 'example',
@@ -140,7 +140,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
                 continue
             }
 
-            let deviceName = this.deviceTitle(deviceSummary.device)
+            let deviceName = DeviceTitlePipe.deviceTitleWithFallback(deviceSummary.device, this.config.dashboardDisplay)
 
             var deviceSeriesMetadata = {
                 name: deviceName,
@@ -216,18 +216,6 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    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(' - ')
-    }
-
     deviceSummariesForHostGroup(hostGroupWWNs: string[]) {
         let deviceSummaries = []
         for(let wwn of hostGroupWWNs){

webapp/frontend/src/app/modules/detail/detail.component.html

@@ -4,7 +4,7 @@
 
         <div class="flex items-center justify-between w-full my-4 px-4 xs:pr-0">
             <div class="mr-6">
-                <h2 class="m-0">Drive Details</h2>
+                <h2 class="m-0">Drive Details - {{device | deviceTitle:config.dashboardDisplay}} </h2>
                 <div class="text-secondary tracking-tight">Dive into S.M.A.R.T data</div>
             </div>
             <!-- Action buttons -->
@@ -51,11 +51,8 @@
 
         <!-- Card -->
         <div class="flex flex-auto w-1/4 p-4 lt-md:w-full">
-            <treo-card class="flex flex-auto p-4 pt-6 flex-col flex-auto filter-list">
-                <div class="flex items-center justify-between">
-                    <div class="text-2xl font-semibold leading-tight">/dev/{{device?.device_name}}</div>
-                </div>
-                <div class="flex flex-col my-2 grid grid-cols-2">
+            <treo-card class="flex flex-auto p-4 flex-col flex-auto filter-list">
+                <div class="flex flex-col grid grid-cols-2">
                     <div *ngIf="device" class="my-2 col-span-2 lt-md:col-span-1">
                         <div>
                             <span class="inline-flex items-center font-bold text-xs px-2 py-2px rounded-full tracking-wide uppercase"
@@ -64,7 +61,7 @@
                                 <span class="w-2 h-2 rounded-full mr-2"
                                       [ngClass]="{'bg-red': device?.device_status != 0,
                                   'bg-green': device?.device_status == 0}"></span>
-                                <span class="pr-2px leading-relaxed whitespace-no-wrap">{{device?.device_status == 0 ? 'passed' : 'failed'}}</span>
+                                <span class="pr-2px leading-relaxed whitespace-no-wrap">{{device?.device_status | deviceStatus}}</span>
                             </span>
                         </div>
                         <div class="text-secondary text-md">Status</div>

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
     ]
 })