Add pipe and implement to dashboard/device component

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

@@ -63,7 +63,7 @@
         </div>
         <div class="flex flex-col mx-6 my-3 xs:w-full">
             <div class="font-semibold text-xs text-hint uppercase tracking-wider leading-none">Powered On</div>
-            <div class="mt-2 font-medium text-3xl leading-none" *ngIf="deviceSummary.smart?.power_on_hours; else unknownPoweredOn">{{ humanizeDuration(deviceSummary.smart?.power_on_hours * 60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h'] }) }}</div>
+            <div class="mt-2 font-medium text-3xl leading-none" *ngIf="deviceSummary.smart?.power_on_hours; else unknownPoweredOn">{{ deviceSummary.smart?.power_on_hours | deviceHours:config.powered_on_hours_unit:{ round: true, largest: 1, units: ['y', 'd', 'h'] } }}</div>
             <ng-template #unknownPoweredOn><div class="mt-2 font-medium text-3xl leading-none">--</div></ng-template>
         </div>
     </div>

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

@@ -4,7 +4,6 @@ import {takeUntil} from 'rxjs/operators';
 import {AppConfig} from 'app/core/config/app.config';
 import {ScrutinyConfigService} from 'app/core/config/scrutiny-config.service';
 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';
@@ -34,8 +33,6 @@ export class DashboardDeviceComponent implements OnInit {
 
     private _unsubscribeAll: Subject<void>;
 
-    readonly humanizeDuration = humanizeDuration;
-
     deviceStatusForModelWithThreshold = DeviceStatusPipe.deviceStatusForModelWithThreshold
 
     ngOnInit(): void {

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

@@ -123,7 +123,7 @@
                         <div class="text-secondary text-md">Power Cycle Count</div>
                     </div>
                     <div *ngIf="smart_results[0]?.power_on_hours"  class="my-2 col-span-2 lt-md:col-span-1">
-                        <div matTooltip="{{humanizeDuration(smart_results[0]?.power_on_hours * 60 * 60 * 1000, { conjunction: ' and ', serialComma: false })}}">{{humanizeDuration(smart_results[0]?.power_on_hours *60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h'] })}}</div>
+                        <div matTooltip="{{humanizeDuration(smart_results[0]?.power_on_hours * 60 * 60 * 1000, { conjunction: ' and ', serialComma: false })}}">{{ smart_results[0]?.power_on_hours | deviceHours:config.powered_on_hours_unit:{ round: true, largest: 1, units: ['y', 'd', 'h'] } }}</div>
                         <div class="text-secondary text-md">Powered On</div>
                     </div>
                     <div class="my-2 col-span-2 lt-md:col-span-1">

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

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

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

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import humanizeDuration from 'humanize-duration';
+
+@Pipe({ name: 'deviceHours' })
+export class DeviceHoursPipe implements PipeTransform {
+    static format(hoursOfRunTime: number, unit: string, humanizeConfig: object): string {
+        if (unit === 'device_hours') {
+          return `${hoursOfRunTime} hours`;
+        }
+        return humanizeDuration(hoursOfRunTime * 60 * 60 * 1000, humanizeConfig);
+    }
+
+  transform(hoursOfRunTime: number, unit = 'humanize', humanizeConfig: any = {}): string {
+        return DeviceHoursPipe.format(hoursOfRunTime, unit, humanizeConfig)
+  }
+}

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

@@ -6,6 +6,7 @@ import { DeviceSortPipe } from './device-sort.pipe';
 import { TemperaturePipe } from './temperature.pipe';
 import { DeviceTitlePipe } from './device-title.pipe';
 import { DeviceStatusPipe } from './device-status.pipe';
+import { DeviceHoursPipe } from './device-hours.pipe';
 
 @NgModule({
     declarations: [
@@ -13,7 +14,8 @@ import { DeviceStatusPipe } from './device-status.pipe';
         DeviceSortPipe,
         TemperaturePipe,
         DeviceTitlePipe,
-        DeviceStatusPipe
+        DeviceStatusPipe,
+        DeviceHoursPipe
     ],
     imports: [
         CommonModule,
@@ -28,7 +30,8 @@ import { DeviceStatusPipe } from './device-status.pipe';
         DeviceSortPipe,
         DeviceTitlePipe,
         DeviceStatusPipe,
-        TemperaturePipe
+        TemperaturePipe,
+        DeviceHoursPipe
     ]
 })
 export class SharedModule