From e768b1c83a01572d835b82760a4fd0f15f8a578a Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Fri, 15 Dec 2023 14:08:37 -0800 Subject: [PATCH] Unify uptime formatting (#2483) --- next-i18next.config.js | 17 ++++++++++++++ public/locales/en/common.json | 14 ++++++----- src/components/widgets/resources/uptime.jsx | 19 +++++++-------- src/widgets/fritzbox/component.jsx | 26 +-------------------- src/widgets/uptimerobot/component.jsx | 22 ++--------------- 5 files changed, 36 insertions(+), 62 deletions(-) diff --git a/next-i18next.config.js b/next-i18next.config.js index e5bc98bd3..6790e14d9 100644 --- a/next-i18next.config.js +++ b/next-i18next.config.js @@ -84,6 +84,22 @@ function prettyBytes(number, options) { return `${prefix + numberString} ${unit}`; } +function uptime(uptimeInSeconds, i18next) { + const mo = Math.floor(uptimeInSeconds / (3600 * 24 * 31)); + const d = Math.floor((uptimeInSeconds % (3600 * 24 * 31)) / (3600 * 24)); + const h = Math.floor((uptimeInSeconds % (3600 * 24)) / 3600); + const m = Math.floor((uptimeInSeconds % 3600) / 60); + const s = Math.floor(uptimeInSeconds % 60); + + const moDisplay = mo > 0 ? mo + i18next.t("common.months") : ""; + const dDisplay = d > 0 ? d + i18next.t("common.days") : ""; + const hDisplay = h > 0 && mo === 0 ? h + i18next.t("common.hours") : ""; + const mDisplay = m > 0 && mo === 0 && d === 0 ? m + i18next.t("common.minutes") : ""; + const sDisplay = s > 0 && mo === 0 && d === 0 && h === 0 ? s + i18next.t("common.seconds") : ""; + + return (moDisplay + dDisplay + hDisplay + mDisplay + sDisplay).replace(/,\s*$/, ""); +} + module.exports = { i18n: { defaultLocale: "en", @@ -126,6 +142,7 @@ module.exports = { i18next.services.formatter.add("date", (value, lng, options) => new Intl.DateTimeFormat(lng, { ...options }).format(new Date(value)), ); + i18next.services.formatter.add("uptime", (value, lng) => uptime(value, i18next)); }, type: "3rdParty", }, diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 8512181da..1f800bf2b 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -11,7 +11,13 @@ "percent": "{{value, percent}}", "number": "{{value, number}}", "ms": "{{value, number}}", - "date": "{{value, date}}" + "date": "{{value, date}}", + "uptime": "{{value, uptime}}", + "months": "mo", + "days": "d", + "hours": "h", + "minutes": "m", + "seconds": "s" }, "widget": { "missing_type": "Missing Widget Type: {{type}}", @@ -40,11 +46,7 @@ "load": "Load", "temp": "TEMP", "max": "Max", - "uptime": "UP", - "months": "mo", - "days": "d", - "hours": "h", - "minutes": "m" + "uptime": "UP" }, "unifi": { "users": "Users", diff --git a/src/components/widgets/resources/uptime.jsx b/src/components/widgets/resources/uptime.jsx index 72b4865f0..025d1aa53 100644 --- a/src/components/widgets/resources/uptime.jsx +++ b/src/components/widgets/resources/uptime.jsx @@ -20,17 +20,14 @@ export default function Uptime({ refresh = 1500 }) { return ; } - const mo = Math.floor(data.uptime / (3600 * 24 * 31)); - const d = Math.floor((data.uptime % (3600 * 24 * 31)) / (3600 * 24)); - const h = Math.floor((data.uptime % (3600 * 24)) / 3600); - const m = Math.floor((data.uptime % 3600) / 60); - - let uptime; - if (mo > 0) uptime = `${mo}${t("resources.months")} ${d}${t("resources.days")}`; - else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`; - else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`; - const percent = Math.round((new Date().getSeconds() / 60) * 100).toString(); - return ; + return ( + + ); } diff --git a/src/widgets/fritzbox/component.jsx b/src/widgets/fritzbox/component.jsx index e4234cd0b..5939f9edc 100644 --- a/src/widgets/fritzbox/component.jsx +++ b/src/widgets/fritzbox/component.jsx @@ -6,30 +6,6 @@ import useWidgetAPI from "utils/proxy/use-widget-api"; export const fritzboxDefaultFields = ["connectionStatus", "uptime", "maxDown", "maxUp"]; -const formatUptime = (uptimeInSeconds) => { - const days = Math.floor(uptimeInSeconds / (3600 * 24)); - const hours = Math.floor((uptimeInSeconds % (3600 * 24)) / 3600); - const minutes = Math.floor((uptimeInSeconds % 3600) / 60); - const seconds = Math.floor(uptimeInSeconds) % 60; - const format = (num) => String(num).padStart(2, "0"); - - let uptimeStr = ""; - if (days) { - uptimeStr += `${days}d`; - } - if (uptimeInSeconds >= 3600) { - uptimeStr += `${format(hours)}h`; - } - if (uptimeInSeconds >= 60) { - uptimeStr += `${format(minutes)}m`; - } - if (!days) { - uptimeStr += `${format(seconds)}s `; - } - - return uptimeStr; -}; - export default function Component({ service }) { const { t } = useTranslation(); const { widget } = service; @@ -68,7 +44,7 @@ export default function Component({ service }) { return ( - + diff --git a/src/widgets/uptimerobot/component.jsx b/src/widgets/uptimerobot/component.jsx index 92497aedd..c0cb670f3 100644 --- a/src/widgets/uptimerobot/component.jsx +++ b/src/widgets/uptimerobot/component.jsx @@ -4,24 +4,6 @@ import Container from "components/services/widget/container"; import Block from "components/services/widget/block"; import useWidgetAPI from "utils/proxy/use-widget-api"; -function secondsToDhms(seconds) { - const d = Math.floor(seconds / (3600 * 24)); - const h = Math.floor((seconds % (3600 * 24)) / 3600); - const m = Math.floor((seconds % 3600) / 60); - const s = Math.floor(seconds % 60); - - const dDisplay = d > 0 ? d + (d === 1 ? " day, " : " days, ") : ""; - const hDisplay = h > 0 ? h + (h === 1 ? " hr, " : " hrs, ") : ""; - let mDisplay = m > 0 && d === 0 ? m + (m === 1 ? " min" : " mins") : ""; - let sDisplay = ""; - - if (d === 0 && h === 0) { - mDisplay = m > 0 ? m + (m === 1 ? " min, " : " mins, ") : ""; - sDisplay = s > 0 ? s + (s === 1 ? " sec" : " secs") : ""; - } - return (dDisplay + hDisplay + mDisplay + sDisplay).replace(/,\s*$/, ""); -} - export default function Component({ service }) { const { widget } = service; const { t } = useTranslation(); @@ -68,7 +50,7 @@ export default function Component({ service }) { break; case 2: status = t("uptimerobot.up"); - uptime = secondsToDhms(monitor.logs[0].duration); + uptime = t("common.uptime", { value: monitor.logs[0].duration }); logIndex = 1; break; case 8: @@ -83,7 +65,7 @@ export default function Component({ service }) { } const lastDown = new Date(monitor.logs[logIndex].datetime * 1000).toLocaleString(); - const downDuration = secondsToDhms(monitor.logs[logIndex].duration); + const downDuration = t("common.uptime", { value: monitor.logs[logIndex].duration }); const hideDown = logIndex === 1 && monitor.logs[logIndex].type !== 1; return (