Merge pull request #2480 from bluewave-labs/fix/time-format

fix: update time format function, resolves #2477

client/src/Pages/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx

@@ -5,13 +5,8 @@ import { getHumanReadableDuration } from "../../../../../Utils/timeUtils";
 import { useTranslation } from "react-i18next";
 
 const PageSpeedStatusBoxes = ({ shouldRender, monitor }) => {
-	const { time: uptimeDuration, units: uptimeUnits } = getHumanReadableDuration(
-		monitor?.uptimeDuration
-	);
-
-	const { time: lastCheckTime, units: lastCheckUnits } = getHumanReadableDuration(
-		monitor?.lastChecked
-	);
+	const uptimeDuration = getHumanReadableDuration(monitor?.uptimeDuration);
+	const time = getHumanReadableDuration(monitor?.lastChecked);
 
 	const { t } = useTranslation();
 
@@ -22,7 +17,6 @@ const PageSpeedStatusBoxes = ({ shouldRender, monitor }) => {
 				subHeading={
 					<>
 						{uptimeDuration}
-						<Typography component="span">{uptimeUnits}</Typography>
 						<Typography component="span">{t("ago")}</Typography>
 					</>
 				}
@@ -31,8 +25,7 @@ const PageSpeedStatusBoxes = ({ shouldRender, monitor }) => {
 				heading="last check"
 				subHeading={
 					<>
-						{lastCheckTime}
-						<Typography component="span">{lastCheckUnits}</Typography>
+						{time}
 						<Typography component="span">{t("ago")}</Typography>
 					</>
 				}

client/src/Pages/Uptime/Details/Components/UptimeStatusBoxes/index.jsx

@@ -24,30 +24,22 @@ const UptimeStatusBoxes = ({
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp;
 	const timeSinceLastCheck = Date.now() - timeOfLastCheck;
 
-	const { time: streakTime, units: streakUnits } =
-		getHumanReadableDuration(timeSinceLastFailure);
+	const streakTime = getHumanReadableDuration(timeSinceLastFailure);
 
-	const { time: lastCheckTime, units: lastCheckUnits } =
-		getHumanReadableDuration(timeSinceLastCheck);
+	const lastCheckTime = getHumanReadableDuration(timeSinceLastCheck);
 	return (
 		<StatusBoxes shouldRender={!isLoading}>
 			<StatBox
 				gradient={true}
 				status={determineState(monitor)}
 				heading={"active for"}
-				subHeading={
-					<>
-						{streakTime}
-						<Typography component="span">{streakUnits}</Typography>
-					</>
-				}
+				subHeading={streakTime}
 			/>
 			<StatBox
 				heading="last check"
 				subHeading={
 					<>
 						{lastCheckTime}
-						<Typography component="span">{lastCheckUnits}</Typography>
 						<Typography component="span">{"ago"}</Typography>
 					</>
 				}
@@ -80,7 +72,7 @@ const UptimeStatusBoxes = ({
 };
 
 UptimeStatusBoxes.propTypes = {
-	shouldRender: PropTypes.bool,
+	isLoading: PropTypes.bool,
 	monitor: PropTypes.object,
 	monitorStats: PropTypes.object,
 	certificateExpiry: PropTypes.string,

client/src/Utils/timeUtils.js

@@ -79,22 +79,35 @@ export const formatDurationSplit = (ms) => {
 
 export const getHumanReadableDuration = (ms) => {
 	const durationObj = dayjs.duration(ms);
-	if (durationObj.asDays() >= 1) {
-		const days = Math.floor(durationObj.asDays());
-		return { time: days, units: days === 1 ? "day" : "days" };
-	} else if (durationObj.asHours() >= 1) {
-		const hoursRounded = Math.round(durationObj.asHours() * 10) / 10;
-		const hours = Number.isInteger(hoursRounded)
-			? Math.floor(hoursRounded)
-			: hoursRounded;
-		return { time: hours, units: hours <= 1 ? "hour" : "hours" };
-	} else if (durationObj.asMinutes() >= 1) {
-		const minutes = Math.floor(durationObj.asMinutes());
-		return { time: minutes, units: minutes === 1 ? "minute" : "minutes" };
-	} else {
-		const seconds = Math.floor(durationObj.asSeconds());
-		return { time: seconds, units: seconds === 1 ? "second" : "seconds" };
+
+	const parts = {
+		days: Math.floor(durationObj.asDays()),
+		hours: durationObj.hours(),
+		minutes: durationObj.minutes(),
+		seconds: durationObj.seconds(),
+	};
+
+	const result = [];
+
+	if (parts.days > 0) {
+		result.push(`${parts.days}d`);
 	}
+	if (parts.hours > 0) {
+		result.push(`${parts.hours}h`);
+	}
+	if (result.length < 2 && parts.minutes > 0) {
+		result.push(`${parts.minutes}m`);
+	}
+	if (result.length < 2 && parts.seconds > 0) {
+		result.push(`${parts.seconds}s`);
+	}
+
+	if (result.length === 0) {
+		// fallback for durations < 1s
+		return "0s";
+	}
+
+	return result.join(" ");
 };
 
 export const formatDate = (date, customOptions) => {