change display format of the container uptime (pterodactyl#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

Author: trenutoo

resources/scripts/components/server/ServerDetailsBlock.tsx

@@ -92,7 +92,7 @@ const ServerDetailsBlock = () => {
                 />
                  {!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>
                 }

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</>;
 };