Merge remote-tracking branch 'origin/dev' into integration

src/components/bookmarks/group.jsx

@@ -20,7 +20,7 @@ export default function BookmarksGroup({ bookmarks, layout, disableCollapse, gro
       className={classNames(
         "bookmark-group",
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/4 lg:basis-1/5 xl:basis-1/6",
-        layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
+        layout?.header === false ? "flex-1 px-1 -my-1 overflow-hidden" : "flex-1 p-1 overflow-hidden",
       )}
     >
       <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>

src/components/bookmarks/item.jsx

@@ -29,9 +29,9 @@ export default function Item({ bookmark }) {
             )}
             {!bookmark.icon && bookmark.abbr}
           </div>
-          <div className="flex-1 flex items-center justify-between rounded-r-md bookmark-text">
-            <div className="flex-1 grow pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
-            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-300 text-xs bookmark-description">
+          <div className="flex-1 overflow-hidden flex items-center justify-between rounded-r-md bookmark-text">
+            <div className="pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
+            <div className="shrink truncate px-2 py-2 text-theme-500 dark:text-theme-300 text-xs bookmark-description">
               {description}
             </div>
           </div>

src/components/widgets/resources/uptime.jsx

@@ -25,7 +25,7 @@ export default function Uptime({ refresh = 1500 }) {
   return (
     <Resource
       icon={FaRegClock}
-      value={t("common.uptime", { value: data.uptime })}
+      value={t("common.duration", { value: data.uptime })}
       label={t("resources.uptime")}
       percentage={percent}
     />

src/pages/_document.jsx

@@ -8,7 +8,7 @@ export default function Document() {
           name="description"
           content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations."
         />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes" />
         <link rel="manifest" href="/site.webmanifest?v=4" crossOrigin="use-credentials" />
       </Head>
       <body>

src/pages/api/widgets/openmeteo.js

@@ -2,7 +2,7 @@ import cachedFetch from "utils/proxy/cached-fetch";
 
 export default async function handler(req, res) {
   const { latitude, longitude, units, cache, timezone } = req.query;
-  const degrees = units === "imperial" ? "fahrenheit" : "celsius";
+  const degrees = units === "metric" ? "celsius" : "fahrenheit";
   const timezeone = timezone ?? "auto";
   const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=sunrise,sunset&current_weather=true&temperature_unit=${degrees}&timezone=${timezeone}`;
   return res.send(await cachedFetch(apiUrl, cache));

src/utils/config/service-helpers.js

@@ -368,6 +368,9 @@ export function cleanServiceGroups(groups) {
           repositoryId,
           userEmail,
 
+          // beszel
+          systemId,
+
           // calendar
           firstDayInWeek,
           integrations,
@@ -511,6 +514,10 @@ export function cleanServiceGroups(groups) {
           if (repositoryId) cleanedService.widget.repositoryId = repositoryId;
         }
 
+        if (type === "beszel") {
+          if (systemId) cleanedService.widget.systemId = systemId;
+        }
+
         if (type === "coinmarketcap") {
           if (currency) cleanedService.widget.currency = currency;
           if (symbols) cleanedService.widget.symbols = symbols;

src/utils/proxy/handlers/credentialed.js

@@ -39,6 +39,7 @@ export default async function credentialedProxyHandler(req, res, map) {
           "authentik",
           "cloudflared",
           "ghostfolio",
+          "headscale",
           "linkwarden",
           "mealie",
           "netalertx",

src/widgets/audiobookshelf/component.jsx

@@ -39,11 +39,8 @@ export default function Component({ service }) {
       <Block label="audiobookshelf.podcasts" value={t("common.number", { value: totalPodcasts })} />
       <Block
         label="audiobookshelf.podcastsDuration"
-        value={t("common.number", {
-          value: totalPodcastsDuration / 60,
-          maximumFractionDigits: 0,
-          style: "unit",
-          unit: "minute",
+        value={t("common.duration", {
+          value: totalPodcastsDuration,
         })}
       />
       <Block label="audiobookshelf.books" value={t("common.number", { value: totalBooks })} />

src/widgets/beszel/component.jsx

@@ -0,0 +1,60 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+  const { systemId } = widget;
+
+  const { data: systems, error: systemsError } = useWidgetAPI(widget, "systems");
+
+  const MAX_ALLOWED_FIELDS = 4;
+  if (!widget.fields?.length > 0) {
+    widget.fields = systemId ? ["name", "status", "cpu", "memory"] : ["systems", "up"];
+  }
+  if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
+    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
+  }
+
+  if (systemsError) {
+    return <Container service={service} error={systemsError} />;
+  }
+
+  if (!systems) {
+    return (
+      <Container service={service}>
+        <Block label="beszel.systems" />
+        <Block label="beszel.up" />
+      </Container>
+    );
+  }
+
+  if (systemId) {
+    const system = systems.items.find((item) => item.id === systemId);
+
+    return (
+      <Container service={service}>
+        <Block label="beszel.name" value={system.name} />
+        <Block label="beszel.status" value={t(`beszel.${system.status}`)} />
+        <Block label="beszel.updated" value={t("common.relativeDate", { value: system.updated })} />
+        <Block label="beszel.cpu" value={t("common.percent", { value: system.info.cpu, maximumFractionDigits: 2 })} />
+        <Block label="beszel.memory" value={t("common.percent", { value: system.info.mp, maximumFractionDigits: 2 })} />
+        <Block label="beszel.disk" value={t("common.percent", { value: system.info.dp, maximumFractionDigits: 2 })} />
+        <Block label="beszel.network" value={t("common.percent", { value: system.info.b, maximumFractionDigits: 2 })} />
+      </Container>
+    );
+  }
+
+  const upTotal = systems.items.filter((item) => item.status === "up").length;
+
+  return (
+    <Container service={service}>
+      <Block label="beszel.systems" value={systems.totalItems} />
+      <Block label="beszel.up" value={`${upTotal} / ${systems.totalItems}`} />
+    </Container>
+  );
+}

src/widgets/beszel/proxy.js

@@ -0,0 +1,99 @@
+import cache from "memory-cache";
+
+import getServiceWidget from "utils/config/service-helpers";
+import { formatApiCall } from "utils/proxy/api-helpers";
+import { httpProxy } from "utils/proxy/http";
+import widgets from "widgets/widgets";
+import createLogger from "utils/logger";
+
+const proxyName = "beszelProxyHandler";
+const tokenCacheKey = `${proxyName}__token`;
+const logger = createLogger(proxyName);
+
+async function login(loginUrl, username, password, service) {
+  const authResponse = await httpProxy(loginUrl, {
+    method: "POST",
+    body: JSON.stringify({ identity: username, password }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const status = authResponse[0];
+  let data = authResponse[2];
+  try {
+    data = JSON.parse(Buffer.from(authResponse[2]).toString());
+
+    if (status === 200) {
+      cache.put(`${tokenCacheKey}.${service}`, data.token);
+    }
+  } catch (e) {
+    logger.error(`Error ${status} logging into beszel`, JSON.stringify(authResponse[2]));
+  }
+  return [status, data.token ?? data];
+}
+
+export default async function beszelProxyHandler(req, res) {
+  const { group, service, endpoint } = req.query;
+
+  if (group && service) {
+    const widget = await getServiceWidget(group, service);
+
+    if (!widgets?.[widget.type]?.api) {
+      return res.status(403).json({ error: "Service does not support API calls" });
+    }
+
+    if (widget) {
+      const url = new URL(formatApiCall(widgets[widget.type].api, { endpoint, ...widget }));
+      const loginUrl = formatApiCall(widgets[widget.type].api, { endpoint: "admins/auth-with-password", ...widget });
+
+      let status;
+      let data;
+
+      let token = cache.get(`${tokenCacheKey}.${service}`);
+      if (!token) {
+        [status, token] = await login(loginUrl, widget.username, widget.password, service);
+        if (status !== 200) {
+          logger.debug(`HTTTP ${status} logging into npm api: ${token}`);
+          return res.status(status).send(token);
+        }
+      }
+
+      [status, , data] = await httpProxy(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (status === 403) {
+        logger.debug(`HTTTP ${status} retrieving data from npm api, logging in and trying again.`);
+        cache.del(`${tokenCacheKey}.${service}`);
+        [status, token] = await login(loginUrl, widget.username, widget.password, service);
+
+        if (status !== 200) {
+          logger.debug(`HTTTP ${status} logging into npm api: ${data}`);
+          return res.status(status).send(data);
+        }
+
+        // eslint-disable-next-line no-unused-vars
+        [status, , data] = await httpProxy(url, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        });
+      }
+
+      if (status !== 200) {
+        return res.status(status).send(data);
+      }
+
+      return res.send(data);
+    }
+  }
+
+  return res.status(400).json({ error: "Invalid proxy service type" });
+}

src/widgets/beszel/widget.js

@@ -0,0 +1,14 @@
+import beszelProxyHandler from "./proxy";
+
+const widget = {
+  api: "{url}/api/{endpoint}",
+  proxyHandler: beszelProxyHandler,
+
+  mappings: {
+    systems: {
+      endpoint: "collections/systems/records?page=1&perPage=500&sort=%2Bcreated",
+    },
+  },
+};
+
+export default widget;

src/widgets/components.js

@@ -8,6 +8,7 @@ const components = {
   autobrr: dynamic(() => import("./autobrr/component")),
   azuredevops: dynamic(() => import("./azuredevops/component")),
   bazarr: dynamic(() => import("./bazarr/component")),
+  beszel: dynamic(() => import("./beszel/component")),
   caddy: dynamic(() => import("./caddy/component")),
   calendar: dynamic(() => import("./calendar/component")),
   calibreweb: dynamic(() => import("./calibreweb/component")),
@@ -41,6 +42,7 @@ const components = {
   gotify: dynamic(() => import("./gotify/component")),
   grafana: dynamic(() => import("./grafana/component")),
   hdhomerun: dynamic(() => import("./hdhomerun/component")),
+  headscale: dynamic(() => import("./headscale/component")),
   peanut: dynamic(() => import("./peanut/component")),
   homeassistant: dynamic(() => import("./homeassistant/component")),
   homebox: dynamic(() => import("./homebox/component")),

src/widgets/frigate/component.jsx

@@ -40,7 +40,7 @@ export default function Component({ service }) {
         />
         <Block
           label="frigate.uptime"
-          value={t("common.uptime", {
+          value={t("common.duration", {
             value: data.uptime,
           })}
         />

src/widgets/fritzbox/component.jsx

@@ -44,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={t("common.uptime", { value: fritzboxData.uptime })} />
+      <Block label="fritzbox.uptime" value={t("common.duration", { 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/headscale/component.jsx

@@ -0,0 +1,43 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+
+  const { data: nodeData, error: nodeError } = useWidgetAPI(widget, "node");
+
+  if (nodeError) {
+    return <Container service={service} error={nodeError} />;
+  }
+
+  if (!nodeData) {
+    return (
+      <Container service={service}>
+        <Block label="headscale.name" />
+        <Block label="headscale.address" />
+        <Block label="headscale.last_seen" />
+        <Block label="headscale.status" />
+      </Container>
+    );
+  }
+
+  const {
+    givenName,
+    ipAddresses: [address],
+    lastSeen,
+    online,
+  } = nodeData.node;
+
+  return (
+    <Container service={service}>
+      <Block label="headscale.name" value={givenName} />
+      <Block label="headscale.address" value={address} />
+      <Block label="headscale.last_seen" value={t("common.relativeDate", { value: lastSeen })} />
+      <Block label="headscale.status" value={t(online ? "headscale.online" : "headscale.offline")} />
+    </Container>
+  );
+}

src/widgets/headscale/widget.js

@@ -0,0 +1,14 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}/{nodeId}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    node: {
+      endpoint: "node",
+    },
+  },
+};
+
+export default widget;

src/widgets/openwrt/methods/system.jsx

@@ -20,7 +20,7 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="openwrt.uptime" value={t("common.uptime", { value: uptime })} />
+      <Block label="openwrt.uptime" value={t("common.duration", { value: uptime })} />
       <Block label="openwrt.cpuLoad" value={cpuLoad} />
     </Container>
   );

src/widgets/pyload/proxy.js

@@ -15,7 +15,7 @@ async function fetchFromPyloadAPI(url, sessionId, params, service) {
   const options = {
     body: params
       ? Object.keys(params)
-          .map((prop) => `${prop}=${params[prop]}`)
+          .map((prop) => `${prop}=${encodeURIComponent(params[prop])}`)
           .join("&")
       : `session=${sessionId}`,
     method: "POST",

src/widgets/radarr/widget.js

@@ -12,7 +12,10 @@ const widget = {
         wanted: jsonArrayFilter(data, (item) => item.monitored && !item.hasFile && item.isAvailable).length,
         have: jsonArrayFilter(data, (item) => item.hasFile).length,
         missing: jsonArrayFilter(data, (item) => item.monitored && !item.hasFile).length,
-        all: asJson(data),
+        all: asJson(data).map((entry) => ({
+          title: entry.title,
+          id: entry.id,
+        })),
       }),
     },
     "queue/status": {

src/widgets/stash/component.jsx

@@ -46,12 +46,12 @@ export default function Component({ service }) {
       <Block label="stash.scenes" value={t("common.number", { value: stats.scene_count })} />
       <Block label="stash.scenesPlayed" value={t("common.number", { value: stats.scenes_played })} />
       <Block label="stash.playCount" value={t("common.number", { value: stats.total_play_count })} />
-      <Block label="stash.playDuration" value={t("common.uptime", { value: stats.total_play_duration })} />
+      <Block label="stash.playDuration" value={t("common.duration", { value: stats.total_play_duration })} />
       <Block
         label="stash.sceneSize"
         value={t("common.bbytes", { value: stats.scenes_size, maximumFractionDigits: 1 })}
       />
-      <Block label="stash.sceneDuration" value={t("common.uptime", { value: stats.scenes_duration })} />
+      <Block label="stash.sceneDuration" value={t("common.duration", { value: stats.scenes_duration })} />
 
       <Block label="stash.images" value={t("common.number", { value: stats.image_count })} />
       <Block

src/widgets/truenas/component.jsx

@@ -35,7 +35,7 @@ export default function Component({ service }) {
     <>
       <Container service={service}>
         <Block label="truenas.load" value={t("common.number", { value: statusData.loadavg[0] })} />
-        <Block label="truenas.uptime" value={t("common.uptime", { value: statusData.uptime_seconds })} />
+        <Block label="truenas.uptime" value={t("common.duration", { value: statusData.uptime_seconds })} />
         <Block label="truenas.alerts" value={t("common.number", { value: alertData.pending })} />
       </Container>
       {enablePools &&

src/widgets/uptimerobot/component.jsx

@@ -58,7 +58,7 @@ export default function Component({ service }) {
       break;
     case 2:
       status = t("uptimerobot.up");
-      uptime = t("common.uptime", { value: monitor.logs[0].duration });
+      uptime = t("common.duration", { value: monitor.logs[0].duration });
       logIndex = 1;
       break;
     case 8:
@@ -73,7 +73,7 @@ export default function Component({ service }) {
   }
 
   const lastDown = new Date(monitor.logs[logIndex].datetime * 1000).toLocaleString();
-  const downDuration = t("common.uptime", { value: monitor.logs[logIndex].duration });
+  const downDuration = t("common.duration", { value: monitor.logs[logIndex].duration });
   const hideDown = logIndex === 1 && monitor.logs[logIndex].type !== 1;
 
   return (

src/widgets/widgets.js

@@ -5,6 +5,7 @@ import authentik from "./authentik/widget";
 import autobrr from "./autobrr/widget";
 import azuredevops from "./azuredevops/widget";
 import bazarr from "./bazarr/widget";
+import beszel from "./beszel/widget";
 import caddy from "./caddy/widget";
 import calendar from "./calendar/widget";
 import calibreweb from "./calibreweb/widget";
@@ -35,6 +36,7 @@ import gluetun from "./gluetun/widget";
 import gotify from "./gotify/widget";
 import grafana from "./grafana/widget";
 import hdhomerun from "./hdhomerun/widget";
+import headscale from "./headscale/widget";
 import homeassistant from "./homeassistant/widget";
 import homebox from "./homebox/widget";
 import homebridge from "./homebridge/widget";
@@ -132,6 +134,7 @@ const widgets = {
   autobrr,
   azuredevops,
   bazarr,
+  beszel,
   caddy,
   calibreweb,
   changedetectionio,
@@ -161,6 +164,7 @@ const widgets = {
   gotify,
   grafana,
   hdhomerun,
+  headscale,
   homeassistant,
   homebox,
   homebridge,