From 4dca4f0aa9ef55cf7046b2ab71c94ab7e7d0d579 Mon Sep 17 00:00:00 2001
From: Alex <admin@softwarenoob.com>
Date: Mon, 25 Oct 2021 00:41:01 +0300
Subject: [PATCH] change display format of the container uptime (#3706)

* change display format of the container uptime

Display `day, hour, min` if days is more than 0, otherwise default to existing `hour, min, sec`. Removes pads to make it more clean in this new format.

* clean the return
---
 .../components/server/ServerDetailsBlock.tsx      |  2 +-
 .../scripts/components/server/UptimeDuration.tsx  | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/resources/scripts/components/server/ServerDetailsBlock.tsx b/resources/scripts/components/server/ServerDetailsBlock.tsx
index a87dc3b0..e0706832 100644
--- a/resources/scripts/components/server/ServerDetailsBlock.tsx
+++ b/resources/scripts/components/server/ServerDetailsBlock.tsx
@@ -92,7 +92,7 @@ const ServerDetailsBlock = () => {
                 />
                 &nbsp;{!status ? 'Connecting...' : (isInstalling ? 'Installing' : (isTransferring) ? 'Transferring' : status)}
                 {stats.uptime > 0 &&
-                <span css={tw`ml-2`}>
+                <span css={tw`ml-2 lowercase`}>
                     (<UptimeDuration uptime={stats.uptime / 1000}/>)
                 </span>
                 }
diff --git a/resources/scripts/components/server/UptimeDuration.tsx b/resources/scripts/components/server/UptimeDuration.tsx
index 1406450f..98c613a7 100644
--- a/resources/scripts/components/server/UptimeDuration.tsx
+++ b/resources/scripts/components/server/UptimeDuration.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 
 export default ({ uptime }: { uptime: number }) => {
-    const hours = Math.floor(Math.floor(uptime) / 60 / 60);
+    const days = Math.floor(uptime / (24 * 60 * 60));
+    const hours = Math.floor(Math.floor(uptime) / 60 / 60 % 24);
     const remainder = Math.floor(uptime - (hours * 60 * 60));
-    const minutes = Math.floor(remainder / 60);
+    const minutes = Math.floor(remainder / 60 % 60);
     const seconds = remainder % 60;
 
-    return (
-        <>
-            {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}
-        </>
-    );
+    if (days > 0) {
+        return <>{days}d {hours}h {minutes}m</>;
+    }
+
+    return <>{hours}h {minutes}m {seconds}s</>;
 };