Create a setting for user to indicate humanized or hours on dashboard/device detail

webapp/backend/pkg/database/scrutiny_repository_migrations.go

@@ -332,6 +332,12 @@ func (sr *scrutinyRepository) Migrate(ctx context.Context) error {
 						SettingDataType:       "string",
 						SettingValueString:    "smooth",
 					},
+					{
+						SettingKeyName:        "powered_on_hours_unit",
+						SettingKeyDescription: "Presentation format for device powered on time ('humanize' | 'device_hours')",
+						SettingDataType:       "string",
+						SettingValueString:    "humanize",
+					},
 
 					{
 						SettingKeyName:        "metrics.notify_level",

webapp/backend/pkg/models/settings.go

@@ -8,13 +8,14 @@ package models
 //}
 
 type Settings struct {
-	Theme            string `json:"theme" mapstructure:"theme"`
-	Layout           string `json:"layout" mapstructure:"layout"`
-	DashboardDisplay string `json:"dashboard_display" mapstructure:"dashboard_display"`
-	DashboardSort    string `json:"dashboard_sort" mapstructure:"dashboard_sort"`
-	TemperatureUnit  string `json:"temperature_unit" mapstructure:"temperature_unit"`
-	FileSizeSIUnits  bool   `json:"file_size_si_units" mapstructure:"file_size_si_units"`
-	LineStroke       string `json:"line_stroke" mapstructure:"line_stroke"`
+	Theme              string `json:"theme" mapstructure:"theme"`
+	Layout             string `json:"layout" mapstructure:"layout"`
+	DashboardDisplay   string `json:"dashboard_display" mapstructure:"dashboard_display"`
+	DashboardSort      string `json:"dashboard_sort" mapstructure:"dashboard_sort"`
+	TemperatureUnit    string `json:"temperature_unit" mapstructure:"temperature_unit"`
+	FileSizeSIUnits    bool   `json:"file_size_si_units" mapstructure:"file_size_si_units"`
+	LineStroke         string `json:"line_stroke" mapstructure:"line_stroke"`
+	PoweredOnHoursUnit string `json:"powered_on_hours_unit" mapstructure:"powered_on_hours_unit"`
 
 	Metrics struct {
 		NotifyLevel            int  `json:"notify_level" mapstructure:"notify_level"`

webapp/frontend/src/app/core/config/app.config.ts

@@ -12,6 +12,8 @@ export type TemperatureUnit = 'celsius' | 'fahrenheit'
 
 export type LineStroke = 'smooth' | 'straight' | 'stepline'
 
+export type DevicePoweredOnUnit = 'humanize' | 'device_hours'
+
 
 export enum MetricsNotifyLevel {
     Warn = 1,
@@ -47,6 +49,8 @@ export interface AppConfig {
 
     file_size_si_units?: boolean;
 
+    powered_on_hours_unit?: DevicePoweredOnUnit;
+
     line_stroke?: LineStroke;
 
     // Settings from Scrutiny API
@@ -77,6 +81,7 @@ export const appConfig: AppConfig = {
 
     temperature_unit: 'celsius',
     file_size_si_units: false,
+    powered_on_hours_unit: 'humanize',
 
     line_stroke: 'smooth',
 

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/layout/common/dashboard-settings/dashboard-settings.component.html

@@ -54,6 +54,14 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         </div>
 
         <div class="flex flex-col mt-5 gt-md:flex-row">
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
+                <mat-label>Powered On Format</mat-label>
+                <mat-select [(ngModel)]="poweredOnHoursUnit">
+                    <mat-option value="humanize">Humanize</mat-option>
+                    <mat-option value="device_hours">Device Hours</mat-option>
+                </mat-select>
+            </mat-form-field>
+
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Line stroke</mat-label>
                 <mat-select [(ngModel)]="lineStroke">

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

@@ -7,7 +7,8 @@ import {
     MetricsStatusThreshold,
     TemperatureUnit,
     LineStroke,
-    Theme
+    Theme,
+    DevicePoweredOnUnit
 } from 'app/core/config/app.config';
 import {ScrutinyConfigService} from 'app/core/config/scrutiny-config.service';
 import {Subject} from 'rxjs';
@@ -24,6 +25,7 @@ export class DashboardSettingsComponent implements OnInit {
     dashboardSort: string;
     temperatureUnit: string;
     fileSizeSIUnits: boolean;
+    poweredOnHoursUnit: string;
     lineStroke: string;
     theme: string;
     statusThreshold: number;
@@ -51,6 +53,7 @@ export class DashboardSettingsComponent implements OnInit {
                 this.dashboardSort = config.dashboard_sort;
                 this.temperatureUnit = config.temperature_unit;
                 this.fileSizeSIUnits = config.file_size_si_units;
+                this.poweredOnHoursUnit = config.powered_on_hours_unit;
                 this.lineStroke = config.line_stroke;
                 this.theme = config.theme;
 
@@ -68,6 +71,7 @@ export class DashboardSettingsComponent implements OnInit {
             dashboard_sort: this.dashboardSort as DashboardSort,
             temperature_unit: this.temperatureUnit as TemperatureUnit,
             file_size_si_units: this.fileSizeSIUnits,
+            powered_on_hours_unit: this.poweredOnHoursUnit as DevicePoweredOnUnit,
             line_stroke: this.lineStroke as LineStroke,
             theme: this.theme as Theme,
             metrics: {

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

@@ -123,7 +123,7 @@ <h2 class="m-0">Drive Details - {{device | deviceTitle:config.dashboard_display}
                         <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,14 +6,16 @@ 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: [
         FileSizePipe,
         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