Unify uptime formatting (#2483)

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",
     },

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",
+        "uptime": "UP"
-        "months": "mo",
-        "days": "d",
-        "hours": "h",
-        "minutes": "m"
     },
     "unifi": {
         "users": "Users",

src/components/widgets/resources/uptime.jsx

@@ -20,17 +20,14 @@ export default function Uptime({ refresh = 1500 }) {
     return <Resource icon={FaRegClock} value="-" label={t("resources.uptime")} percentage="0" />;
   }
 
-  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 <Resource icon={FaRegClock} value={uptime} label={t("resources.uptime")} percentage={percent} />;
+  return (
+    <Resource
+      icon={FaRegClock}
+      value={t("common.uptime", { value: data.uptime })}
+      label={t("resources.uptime")}
+      percentage={percent}
+    />
+  );
 }

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 (
     <Container service={service}>
       <Block label="fritzbox.connectionStatus" value={t(`fritzbox.connectionStatus${fritzboxData.connectionStatus}`)} />
-      <Block label="fritzbox.uptime" value={formatUptime(fritzboxData.uptime)} />
+      <Block label="fritzbox.uptime" value={t("common.uptime", { value: fritzboxData.uptime })} />
       <Block label="fritzbox.maxDown" value={t("common.byterate", { value: fritzboxData.maxDown / 8, decimals: 1 })} />
       <Block label="fritzbox.maxUp" value={t("common.byterate", { value: fritzboxData.maxUp / 8, decimals: 1 })} />
       <Block label="fritzbox.down" value={t("common.byterate", { value: fritzboxData.down, decimals: 1 })} />

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 (