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
This commit is contained in:
Alex 2021-10-25 00:41:01 +03:00 committed by GitHub
parent c4ab318d5a
commit 4dca4f0aa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 8 deletions

View file

@ -92,7 +92,7 @@ const ServerDetailsBlock = () => {
/> />
 {!status ? 'Connecting...' : (isInstalling ? 'Installing' : (isTransferring) ? 'Transferring' : status)}  {!status ? 'Connecting...' : (isInstalling ? 'Installing' : (isTransferring) ? 'Transferring' : status)}
{stats.uptime > 0 && {stats.uptime > 0 &&
<span css={tw`ml-2`}> <span css={tw`ml-2 lowercase`}>
(<UptimeDuration uptime={stats.uptime / 1000}/>) (<UptimeDuration uptime={stats.uptime / 1000}/>)
</span> </span>
} }

View file

@ -1,14 +1,15 @@
import React from 'react'; import React from 'react';
export default ({ uptime }: { uptime: number }) => { 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 remainder = Math.floor(uptime - (hours * 60 * 60));
const minutes = Math.floor(remainder / 60); const minutes = Math.floor(remainder / 60 % 60);
const seconds = remainder % 60; const seconds = remainder % 60;
return ( if (days > 0) {
<> return <>{days}d {hours}h {minutes}m</>;
{hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')} }
</>
); return <>{hours}h {minutes}m {seconds}s</>;
}; };