From 96534c44b7f9cbd60aad84771d9d2002192372dd Mon Sep 17 00:00:00 2001
From: Ricardo Gonzalez <rickgc@gmail.com>
Date: Sun, 11 Oct 2020 17:45:10 +0100
Subject: [PATCH 1/2] Improve humanizeHours

---
 webapp/frontend/package-lock.json             | 10 ++++++++
 webapp/frontend/package.json                  |  2 ++
 .../modules/dashboard/dashboard.component.ts  | 22 +++++++-----------
 .../app/modules/detail/detail.component.html  |  2 +-
 .../app/modules/detail/detail.component.ts    | 23 ++++++++-----------
 5 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/webapp/frontend/package-lock.json b/webapp/frontend/package-lock.json
index 03eb54d..f2ac183 100644
--- a/webapp/frontend/package-lock.json
+++ b/webapp/frontend/package-lock.json
@@ -1922,6 +1922,11 @@
             "integrity": "sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==",
             "dev": true
         },
+        "@types/humanize-duration": {
+            "version": "3.18.1",
+            "resolved": "https://registry.npmjs.org/@types/humanize-duration/-/humanize-duration-3.18.1.tgz",
+            "integrity": "sha512-MUgbY3CF7hg/a/jogixmAufLjJBQT7WEf8Q+kYJkOc47ytngg1IuZobCngdTjAgY83JWEogippge5O5fplaQlw=="
+        },
         "@types/jasmine": {
             "version": "3.5.10",
             "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.5.10.tgz",
@@ -6064,6 +6069,11 @@
                 }
             }
         },
+        "humanize-duration": {
+            "version": "3.24.0",
+            "resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.24.0.tgz",
+            "integrity": "sha512-B3udnqisaDeRsvUSb+5n2hjxhABI9jotB+i1IEhgHhguTeM5LxIUKoVIu7UpeyaPOygr/Fnv7UhOi45kYYG+tg=="
+        },
         "humanize-ms": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
diff --git a/webapp/frontend/package.json b/webapp/frontend/package.json
index fb8c724..748b322 100644
--- a/webapp/frontend/package.json
+++ b/webapp/frontend/package.json
@@ -39,9 +39,11 @@
         "@fullcalendar/moment": "4.4.0",
         "@fullcalendar/rrule": "4.4.0",
         "@fullcalendar/timegrid": "4.4.0",
+        "@types/humanize-duration": "^3.18.1",
         "apexcharts": "3.19.0",
         "crypto-js": "3.3.0",
         "highlight.js": "10.0.1",
+        "humanize-duration": "^3.24.0",
         "lodash": "4.17.15",
         "moment": "2.24.0",
         "ng-apexcharts": "1.2.3",
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
index b244655..0d44110 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -8,6 +8,7 @@ import { DashboardService } from 'app/modules/dashboard/dashboard.service';
 import * as moment from "moment";
 import {MatDialog} from '@angular/material/dialog';
 import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component';
+import  humanizeDuration from 'humanize-duration'
 
 @Component({
     selector       : 'example',
@@ -184,23 +185,16 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
         return item.id || index;
     }
 
-    humanizeHours(hours: number): string {
+    humanizeHours(hours: number, full: boolean = false): string {
+        let duration: string = ''
         if(!hours){
             return '--'
         }
-
-        var value: number
-        let unit = ""
-        if(hours > (24*365)){ //more than a year
-            value = Math.round((hours/(24*365)) * 10)/10
-            unit = "years"
-        } else if (hours > 24){
-            value = Math.round((hours/24) *10 )/10
-            unit = "days"
-        } else{
-            value = hours
-            unit = "hours"
+        if(!full){
+            duration = humanizeDuration(hours * 60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h', 'm', 's'] });
+        } else {
+            duration = humanizeDuration(hours * 60 * 60 * 1000, { conjunction: " and ", serialComma: false });
         }
-        return `${value} ${unit}`
+        return duration
     }
 }
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.html b/webapp/frontend/src/app/modules/detail/detail.component.html
index 7706f90..3b3e322 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.html
+++ b/webapp/frontend/src/app/modules/detail/detail.component.html
@@ -97,7 +97,7 @@
                         <div class="text-secondary text-md">Power Cycle Count</div>
                     </div>
                     <div class="my-2 col-span-2 lt-md:col-span-1">
-                        <div matTooltip="{{data.data.smart_results[0]?.power_on_hours}} hours">{{humanizeHours(data.data.smart_results[0]?.power_on_hours)}}</div>
+                        <div matTooltip="{{humanizeHours(data.data.smart_results[0]?.power_on_hours, true)}}">{{humanizeHours(data.data.smart_results[0]?.power_on_hours)}}</div>
                         <div class="text-secondary text-md">Powered On</div>
                     </div>
                     <div class="my-2 col-span-2 lt-md:col-span-1">
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.ts b/webapp/frontend/src/app/modules/detail/detail.component.ts
index 43a3684..cd84d38 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.ts
+++ b/webapp/frontend/src/app/modules/detail/detail.component.ts
@@ -8,6 +8,7 @@ import {takeUntil} from "rxjs/operators";
 import {fadeOut} from "../../../@treo/animations/fade";
 import {DetailSettingsComponent} from "app/layout/common/detail-settings/detail-settings.component";
 import {MatDialog} from "@angular/material/dialog";
+import humanizeDuration from 'humanize-duration';
 
 @Component({
   selector: 'detail',
@@ -320,23 +321,17 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
         // return item.id || index;
     }
 
-    humanizeHours(hours: number): string {
+
+    humanizeHours(hours: number, full: boolean = false): string {
+        let duration: string = ''
         if(!hours){
             return '--'
         }
-
-        var value: number
-        let unit = ""
-        if(hours > (24*365)){ //more than a year
-            value = Math.round((hours/(24*365)) * 10)/10
-            unit = "years"
-        } else if (hours > 24){
-            value = Math.round((hours/24) *10 )/10
-            unit = "days"
-        } else{
-            value = hours
-            unit = "hours"
+        if(!full){
+            duration = humanizeDuration(hours * 60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h', 'm', 's'] });
+        } else {
+            duration = humanizeDuration(hours * 60 * 60 * 1000, { conjunction: " and ", serialComma: false });
         }
-        return `${value} ${unit}`
+        return duration
     }
 }

From 78d0dd8f3b4482dfc3f1dbebe4b32d411aeb3bff Mon Sep 17 00:00:00 2001
From: Ricardo Gonzalez <rickgc@gmail.com>
Date: Fri, 16 Oct 2020 21:52:03 +0100
Subject: [PATCH 2/2] Use humanizeDuration directly in the template

---
 .../app/modules/dashboard/dashboard.component.html |  3 ++-
 .../app/modules/dashboard/dashboard.component.ts   | 14 ++------------
 .../src/app/modules/detail/detail.component.html   |  4 ++--
 .../src/app/modules/detail/detail.component.ts     | 13 +------------
 4 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
index 68d42d7..dbb43d4 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
@@ -105,7 +105,8 @@
                             </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">{{ humanizeHours(disk.smart_results[0]?.power_on_hours) }}</div>
+                                <div class="mt-2 font-medium text-3xl leading-none" *ngIf="disk.smart_results[0]?.power_on_hours; else unknownPoweredOn">{{ humanizeDuration(disk.smart_results[0]?.power_on_hours * 60 * 60 * 1000, { 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>
                     </div>
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
index 0d44110..f6d867c 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -185,16 +185,6 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
         return item.id || index;
     }
 
-    humanizeHours(hours: number, full: boolean = false): string {
-        let duration: string = ''
-        if(!hours){
-            return '--'
-        }
-        if(!full){
-            duration = humanizeDuration(hours * 60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h', 'm', 's'] });
-        } else {
-            duration = humanizeDuration(hours * 60 * 60 * 1000, { conjunction: " and ", serialComma: false });
-        }
-        return duration
-    }
+    readonly humanizeDuration = humanizeDuration;
+
 }
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.html b/webapp/frontend/src/app/modules/detail/detail.component.html
index 3b3e322..073ba30 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.html
+++ b/webapp/frontend/src/app/modules/detail/detail.component.html
@@ -96,8 +96,8 @@
                         <div>{{data.data.smart_results[0]?.power_cycle_count}}</div>
                         <div class="text-secondary text-md">Power Cycle Count</div>
                     </div>
-                    <div class="my-2 col-span-2 lt-md:col-span-1">
-                        <div matTooltip="{{humanizeHours(data.data.smart_results[0]?.power_on_hours, true)}}">{{humanizeHours(data.data.smart_results[0]?.power_on_hours)}}</div>
+                    <div *ngIf="data.data.smart_results[0]?.power_on_hours"  class="my-2 col-span-2 lt-md:col-span-1">
+                        <div matTooltip="{{humanizeDuration(data.data.smart_results[0]?.power_on_hours * 60 * 60 * 1000, { conjunction: ' and ', serialComma: false })}}">{{humanizeDuration(data.data.smart_results[0]?.power_on_hours *60 * 60 * 1000, { 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">
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.ts b/webapp/frontend/src/app/modules/detail/detail.component.ts
index cd84d38..a4321ec 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.ts
+++ b/webapp/frontend/src/app/modules/detail/detail.component.ts
@@ -321,17 +321,6 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
         // return item.id || index;
     }
 
+    readonly humanizeDuration = humanizeDuration;
 
-    humanizeHours(hours: number, full: boolean = false): string {
-        let duration: string = ''
-        if(!hours){
-            return '--'
-        }
-        if(!full){
-            duration = humanizeDuration(hours * 60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h', 'm', 's'] });
-        } else {
-            duration = humanizeDuration(hours * 60 * 60 * 1000, { conjunction: " and ", serialComma: false });
-        }
-        return duration
-    }
 }