Merge branch 'dev' into pr/4643

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["next/babel"]
-}

.github/workflows/docker-publish.yml

@@ -46,6 +46,24 @@ jobs:
       -
         name: Check files
         uses: pre-commit/action@v3.0.1
+      -
+        name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+      -
+        name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      -
+        name: Install dependencies
+        run: pnpm install
+      -
+        name: Lint frontend
+        run: pnpm run lint
 
   build:
     name: Docker Build & Push
@@ -127,7 +145,7 @@ jobs:
             REVISION=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.revision'] }}
           # https://github.com/docker/setup-qemu-action#about
           # platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+          platforms: linux/amd64,linux/arm64
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
 

Dockerfile

@@ -1,7 +1,7 @@
 # syntax = docker/dockerfile:latest
 
 # Install dependencies only when needed
-FROM docker.io/node:18-alpine AS deps
+FROM docker.io/node:22-alpine AS deps
 
 WORKDIR /app
 
@@ -17,7 +17,7 @@ RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store pnpm f
 RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store pnpm install -r --offline
 
 # Rebuild the source code only when needed
-FROM docker.io/node:18-alpine AS builder
+FROM docker.io/node:22-alpine AS builder
 WORKDIR /app
 
 ARG BUILDTIME
@@ -33,7 +33,7 @@ RUN npm run telemetry \
  && NEXT_PUBLIC_BUILDTIME=$BUILDTIME NEXT_PUBLIC_VERSION=$VERSION NEXT_PUBLIC_REVISION=$REVISION npm run build
 
 # Production image, copy all the files and run next
-FROM docker.io/node:18-alpine AS runner
+FROM docker.io/node:22-alpine AS runner
 LABEL org.opencontainers.image.title "Homepage"
 LABEL org.opencontainers.image.description "A self-hosted services landing page, with docker and service integrations."
 LABEL org.opencontainers.image.url="https://github.com/gethomepage/homepage"
@@ -41,7 +41,7 @@ LABEL org.opencontainers.image.documentation='https://github.com/gethomepage/hom
 LABEL org.opencontainers.image.source='https://github.com/gethomepage/homepage'
 LABEL org.opencontainers.image.licenses='Apache-2.0'
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
 
 WORKDIR /app
 
@@ -56,7 +56,8 @@ COPY --link --chmod=755 docker-entrypoint.sh /usr/local/bin/
 
 RUN apk add --no-cache su-exec
 
-ENV PORT 3000
+ENV HOSTNAME=::
+ENV PORT=3000
 EXPOSE $PORT
 
 HEALTHCHECK --interval=10s --timeout=3s --start-period=20s \

README.md

@@ -38,7 +38,7 @@ With features like quick search, bookmarks, weather support, a wide range of int
 
 - **Fast** - The site is statically generated at build time for instant load times.
 - **Secure** - All API requests to backend services are proxied, keeping your API keys hidden. Constantly reviewed for security by the community.
-- **For Everyone** - Images built for AMD64, ARM64, ARMv7, and ARMv6.
+- **For Everyone** - Images built for AMD64, ARM64.
 - **Full i18n** - Support for over 40 languages.
 - **Service & Web Bookmarks** - Add custom links to the homepage.
 - **Docker Integration** - Container status and stats. Automatic service discovery via labels.

docs/widgets/services/firefly.md

@@ -0,0 +1,17 @@
+---
+title: Firefly III
+description: Firefly III Widget Configuration
+---
+
+Learn more about [Firefly III](https://www.firefly-iii.org/).
+
+Find your API key under `Options > Profile > OAuth > Personal Access Tokens`.
+
+Allowed fields: `["networth" ,"budget"]`.
+
+```yaml
+widget:
+  type: firefly
+  url: https://firefly.host.or.ip
+  key: personalaccesstoken.personalaccesstoken.personalaccesstoken
+```

docs/widgets/services/index.md

@@ -33,6 +33,7 @@ You can also find a list of all available service widgets in the sidebar navigat
 - [ESPHome](esphome.md)
 - [EVCC](evcc.md)
 - [Fileflows](fileflows.md)
+- [Firefly III](firefly.md)
 - [Flood](flood.md)
 - [FreshRSS](freshrss.md)
 - [Frigate](frigate.md)

docs/widgets/services/speedtest-tracker.md

@@ -8,7 +8,12 @@ Learn more about [Speedtest Tracker](https://github.com/alexjustesen/speedtest-t
 
 No extra configuration is required.
 
-This widget is compatible with both [alexjustesen/speedtest-tracker](https://github.com/alexjustesen/speedtest-tracker) and [henrywhitaker3/Speedtest-Tracker](https://github.com/henrywhitaker3/Speedtest-Tracker).
+Version 1 of the widget is compatible with both [alexjustesen/speedtest-tracker](https://github.com/alexjustesen/speedtest-tracker) and [henrywhitaker3/Speedtest-Tracker](https://github.com/henrywhitaker3/Speedtest-Tracker), while version 2 is only compatible with [alexjustesen/speedtest-tracker](https://github.com/alexjustesen/speedtest-tracker).
+
+| Speedtest Version (AJ) | Speedtest Version (HW) | Homepage Widget Version |
+| ---------------------- | ---------------------- | ----------------------- |
+| < 1.2.1                | ≤ 1.12.0               | 1 (default)             |
+| >= 1.2.1               | N/A                    | 2                       |
 
 Allowed fields: `["download", "upload", "ping"]`.
 
@@ -16,5 +21,7 @@ Allowed fields: `["download", "upload", "ping"]`.
 widget:
   type: speedtest
   url: http://speedtest.host.or.ip
+  version: 1 # optional, default is 1
+  key: speedtestapikey # required for version 2
   bitratePrecision: 3 # optional, default is 0
 ```

mkdocs.yml

@@ -56,6 +56,7 @@ nav:
           - widgets/services/esphome.md
           - widgets/services/evcc.md
           - widgets/services/fileflows.md
+          - widgets/services/firefly.md
           - widgets/services/flood.md
           - widgets/services/freshrss.md
           - widgets/services/frigate.md

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homepage",
-  "version": "0.9.6",
+  "version": "0.10.9",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,8 +10,8 @@
     "telemetry": "next telemetry disable"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.18",
-    "@kubernetes/client-node": "^0.17.1",
+    "@headlessui/react": "^1.7.19",
+    "@kubernetes/client-node": "^1.0.0",
     "cal-parser": "^1.0.2",
     "classnames": "^2.5.1",
     "compare-versions": "^6.1.0",
@@ -24,22 +24,22 @@
     "luxon": "^3.5.0",
     "memory-cache": "^0.2.0",
     "minecraft-ping-js": "^1.0.2",
-    "next": "^12.3.4",
+    "next": "^15.0.3",
     "next-i18next": "^12.1.0",
     "ping": "^0.4.4",
     "pretty-bytes": "^6.1.1",
     "raw-body": "^3.0.0",
     "react": "^18.3.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-i18next": "^11.18.6",
     "react-icons": "^5.4.0",
-    "recharts": "^2.12.6",
+    "recharts": "^2.12.7",
     "rrule": "^2.8.1",
     "swr": "^1.3.0",
     "systeminformation": "^5.24.3",
-    "tough-cookie": "^4.1.3",
-    "urbackup-server-api": "^0.52.1",
-    "winston": "^3.11.0",
+    "tough-cookie": "^4.1.4",
+    "urbackup-server-api": "^0.8.9",
+    "winston": "^3.13.0",
     "xml-js": "^1.6.11"
   },
   "devDependencies": {
@@ -47,15 +47,15 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^14.2.3",
+    "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "postcss": "^8.4.47",
-    "prettier": "^3.2.5",
+    "postcss": "^8.4.48",
+    "prettier": "^3.3.2",
     "tailwind-scrollbar": "^3.0.5",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3"

public/locales/en/common.json

@@ -702,6 +702,10 @@
         "processed": "Processed",
         "time": "Time"
     },
+    "firefly": {
+        "networth": "Net Worth",
+        "budget": "Budget"
+    },
     "grafana": {
         "dashboards": "Dashboards",
         "datasources": "Data Sources",

src/components/resolvedicon.jsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import Image from "next/future/image";
+import Image from "next/image";
 
 import { SettingsContext } from "utils/contexts/settings";
 import { ThemeContext } from "utils/contexts/theme";

src/components/version.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "next-i18next";
 import useSWR from "swr";
-import { compareVersions } from "compare-versions";
+import { compareVersions, validate } from "compare-versions";
 import { MdNewReleases } from "react-icons/md";
 
 export default function Version() {
@@ -44,7 +44,7 @@ export default function Version() {
           </a>
         )}
       </span>
-      {version === "main" || version === "dev" || version === "nightly"
+      {!validate(version)
         ? null
         : releaseData &&
           latestRelease &&

src/styles/globals.css

@@ -67,3 +67,8 @@ dialog ::-webkit-scrollbar {
 .chart + .chart {
   margin-top: 2em;
 }
+
+.service-container + .chart {
+  margin-top: 2.5rem;
+  margin-bottom: .5rem;
+}

src/utils/config/api-response.js

@@ -175,6 +175,9 @@ export async function servicesResponse() {
         // this is a nested group, so find the parent group and merge the services
         mergeSubgroups(configuredServices, mergedGroup);
       } else unsortedGroups.push(mergedGroup);
+    } else if (configuredGroup.parent) {
+      // this is a nested group, so find the parent group and merge the services
+      mergeSubgroups(configuredServices, mergedGroup);
     } else {
       unsortedGroups.push(mergedGroup);
     }

src/utils/config/service-helpers.js

@@ -304,7 +304,7 @@ export function cleanServiceGroups(groups) {
           // frigate
           enableRecentEvents,
 
-          // beszel, glances, immich, mealie, pihole, pfsense
+          // beszel, glances, immich, mealie, pihole, pfsense, speedtest
           version,
 
           // glances
@@ -482,7 +482,7 @@ export function cleanServiceGroups(groups) {
           if (snapshotHost) widget.snapshotHost = snapshotHost;
           if (snapshotPath) widget.snapshotPath = snapshotPath;
         }
-        if (["beszel", "glances", "immich", "mealie", "pfsense", "pihole"].includes(type)) {
+        if (["beszel", "glances", "immich", "mealie", "pfsense", "pihole", "speedtest"].includes(type)) {
           if (version) widget.version = parseInt(version, 10);
         }
         if (type === "glances") {
@@ -575,7 +575,7 @@ export function findGroupByName(groups, name) {
     } else if (group.groups) {
       const foundGroup = findGroupByName(group.groups, name);
       if (foundGroup) {
-        foundGroup.parent = group;
+        foundGroup.parent = group.name;
         return foundGroup;
       }
     }

src/utils/proxy/handlers/credentialed.js

@@ -48,6 +48,7 @@ export default async function credentialedProxyHandler(req, res, map) {
           "tandoor",
           "pterodactyl",
           "vikunja",
+          "firefly",
         ].includes(widget.type)
       ) {
         headers.Authorization = `Bearer ${widget.key}`;
@@ -98,6 +99,11 @@ export default async function credentialedProxyHandler(req, res, map) {
         headers.Authorization = widget.password;
       } else if (widget.type === "gitlab") {
         headers["PRIVATE-TOKEN"] = widget.key;
+      } else if (widget.type === "speedtest") {
+        if (widget.key) {
+          // v1 does not require a key
+          headers.Authorization = `Bearer ${widget.key}`;
+        }
       } else {
         headers["X-API-Key"] = `${widget.key}`;
       }

src/widgets/components.js

@@ -30,6 +30,7 @@ const components = {
   esphome: dynamic(() => import("./esphome/component")),
   evcc: dynamic(() => import("./evcc/component")),
   fileflows: dynamic(() => import("./fileflows/component")),
+  firefly: dynamic(() => import("./firefly/component")),
   flood: dynamic(() => import("./flood/component")),
   freshrss: dynamic(() => import("./freshrss/component")),
   frigate: dynamic(() => import("./frigate/component")),

src/widgets/firefly/component.jsx

@@ -0,0 +1,71 @@
+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 startOfMonth = new Date();
+  startOfMonth.setDate(1);
+  startOfMonth.setHours(0, 0, 0, 0);
+  const startOfMonthFormatted = startOfMonth.toISOString().split("T")[0];
+
+  const endOfMonth = new Date(startOfMonth);
+  endOfMonth.setMonth(endOfMonth.getMonth() + 1);
+  endOfMonth.setDate(0);
+  endOfMonth.setHours(23, 59, 59, 999);
+  const endOfMonthFormatted = endOfMonth.toISOString().split("T")[0];
+
+  const { data: summaryData, error: summaryError } = useWidgetAPI(widget, "summary", {
+    start: startOfMonthFormatted,
+    end: endOfMonthFormatted,
+  });
+
+  const { data: budgetData, error: budgetError } = useWidgetAPI(widget, "budgets", {
+    start: startOfMonthFormatted,
+    end: endOfMonthFormatted,
+  });
+
+  if (summaryError || budgetError) {
+    return <Container service={service} error="Failed to load Firefly account summary and budgets" />;
+  }
+
+  if (!summaryData || !budgetData) {
+    return (
+      <Container service={service}>
+        <Block label="firefly.networth" />
+        <Block label="firefly.budget" />
+      </Container>
+    );
+  }
+
+  const netWorth = Object.keys(summaryData)
+    .filter((key) => key.includes("net-worth-in"))
+    .map((key) => summaryData[key]);
+
+  let budgetValue = null;
+
+  if (budgetData.data?.length && budgetData.data[0].type === "available_budgets") {
+    const budgetAmount = parseFloat(budgetData.data[0].attributes.amount);
+    const budgetSpent = -parseFloat(budgetData.data[0].attributes.spent_in_budgets[0]?.sum ?? "0");
+    const budgetCurrency = budgetData.data[0].attributes.currency_symbol;
+
+    budgetValue = `${budgetCurrency} ${t("common.number", {
+      value: budgetSpent,
+      minimumFractionDigits: 2,
+    })} / ${budgetCurrency} ${t("common.number", {
+      value: budgetAmount,
+      minimumFractionDigits: 2,
+    })}`;
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="firefly.networth" value={netWorth[0].value_parsed} />
+      <Block label="firefly.budget" value={budgetValue} />
+    </Container>
+  );
+}

src/widgets/firefly/widget.js

@@ -0,0 +1,19 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    summary: {
+      endpoint: "v1/summary/basic",
+      params: ["start", "end"],
+    },
+    budgets: {
+      endpoint: "v1/available-budgets",
+      params: ["start", "end"],
+    },
+  },
+};
+
+export default widget;

src/widgets/prometheus/widget.js

@@ -6,7 +6,7 @@ const widget = {
 
   mappings: {
     targets: {
-      endpoint: "targets",
+      endpoint: "targets?state=active",
       validate: ["data"],
     },
   },

src/widgets/speedtest/component.jsx

@@ -9,18 +9,19 @@ export default function Component({ service }) {
 
   const { widget } = service;
 
-  const { data: speedtestData, error: speedtestError } = useWidgetAPI(widget, "speedtest/latest");
+  const endpoint = widget.version === 2 ? "latestv2" : "latestv1";
+  const { data: speedtestData, error: speedtestError } = useWidgetAPI(widget, endpoint);
 
   const bitratePrecision =
     !widget?.bitratePrecision || Number.isNaN(widget?.bitratePrecision) || widget?.bitratePrecision < 0
       ? 0
       : widget.bitratePrecision;
 
-  if (speedtestError) {
-    return <Container service={service} error={speedtestError} />;
+  if (speedtestError || speedtestData?.error) {
+    return <Container service={service} error={speedtestError ?? speedtestData.error} />;
   }
 
-  if (!speedtestData) {
+  if (!speedtestData?.data) {
     return (
       <Container service={service}>
         <Block label="speedtest.download" />

src/widgets/speedtest/widget.js

@@ -1,14 +1,18 @@
-import genericProxyHandler from "utils/proxy/handlers/generic";
+import genericProxyHandler from "utils/proxy/handlers/credentialed";
 
 const widget = {
   api: "{url}/api/{endpoint}",
   proxyHandler: genericProxyHandler,
 
   mappings: {
-    "speedtest/latest": {
+    latestv1: {
       endpoint: "speedtest/latest",
       validate: ["data"],
     },
+    latestv2: {
+      endpoint: "v1/results/latest",
+      validate: ["data"],
+    },
   },
 };
 

src/widgets/truenas/component.jsx

@@ -12,14 +12,15 @@ export default function Component({ service }) {
 
   const { data: alertData, error: alertError } = useWidgetAPI(widget, "alerts");
   const { data: statusData, error: statusError } = useWidgetAPI(widget, "status");
-  const { data: poolsData, error: poolsError } = useWidgetAPI(widget, "pools");
+  const { data: poolsData, error: poolsError } = useWidgetAPI(widget, widget?.enablePools ? "pools" : null);
+  const { data: datasetData, error: datasetError } = useWidgetAPI(widget, widget?.enablePools ? "dataset" : null);
 
   if (alertError || statusError || poolsError) {
-    const finalError = alertError ?? statusError ?? poolsError;
+    const finalError = alertError ?? statusError ?? poolsError ?? datasetError;
     return <Container service={service} error={finalError} />;
   }
 
-  if (!alertData || !statusData) {
+  if (!alertData || !statusData || (widget?.enablePools && (!poolsData || !datasetData))) {
     return (
       <Container service={service}>
         <Block label="truenas.load" />
@@ -29,7 +30,22 @@ export default function Component({ service }) {
     );
   }
 
-  const enablePools = widget?.enablePools && Array.isArray(poolsData) && poolsData.length > 0;
+  let pools = [];
+  const showPools =
+    Array.isArray(poolsData) && poolsData.length > 0 && Array.isArray(datasetData) && datasetData.length > 0;
+
+  if (showPools) {
+    pools = poolsData.map((pool) => {
+      const dataset = datasetData.find((d) => d.pool === pool.name && d.name === pool.name);
+      return {
+        id: pool.id,
+        name: pool.name,
+        healthy: pool.healthy,
+        allocated: dataset?.used.parsed ?? 0,
+        free: dataset?.available.parsed ?? 0,
+      };
+    });
+  }
 
   return (
     <>
@@ -38,19 +54,11 @@ export default function Component({ service }) {
         <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 &&
-        poolsData
+      {showPools &&
+        pools
           .sort((a, b) => a.name.localeCompare(b.name))
           .map((pool) => (
-            <Pool
-              key={pool.id}
-              name={pool.name}
-              healthy={pool.healthy}
-              allocated={pool.allocated}
-              free={pool.free}
-              data={pool.data}
-              nasType={widget?.nasType ?? "scale"}
-            />
+            <Pool key={pool.id} name={pool.name} healthy={pool.healthy} allocated={pool.allocated} free={pool.free} />
           ))}
     </>
   );

src/widgets/truenas/pool.jsx

@@ -1,19 +1,9 @@
 import classNames from "classnames";
-import prettyBytes from "pretty-bytes";
+import { useTranslation } from "next-i18next";
 
-export default function Pool({ name, free, allocated, healthy, data, nasType }) {
-  let total = 0;
-  if (nasType === "scale") {
-    total = free + allocated;
-  } else {
-    allocated = 0; // eslint-disable-line no-param-reassign
-    for (let i = 0; i < data.length; i += 1) {
-      total += data[i].stats.size;
-      allocated += data[i].stats.allocated; // eslint-disable-line no-param-reassign
-    }
-  }
-
-  const usedPercent = Math.round((allocated / total) * 100);
+export default function Pool({ name, free, allocated, healthy }) {
+  const { t } = useTranslation();
+  const usedPercent = Math.round((allocated / (free + allocated)) * 100);
   const statusColor = healthy ? "bg-green-500" : "bg-yellow-500";
 
   return (
@@ -32,7 +22,15 @@ export default function Pool({ name, free, allocated, healthy, data, nasType })
       </div>
       <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
         <span>
-          {prettyBytes(allocated)} / {prettyBytes(total)}
+          {`${t("common.bytes", {
+            value: allocated,
+            maximumFractionDigits: 1,
+            binary: true,
+          })} / ${t("common.bytes", {
+            value: free + allocated,
+            maximumFractionDigits: 1,
+            binary: true,
+          })}`}
         </span>
         <span className="pl-2">({usedPercent}%)</span>
       </div>

src/widgets/truenas/widget.js

@@ -23,11 +23,11 @@ const widget = {
           id: entry.name,
           name: entry.name,
           healthy: entry.healthy,
-          allocated: entry.allocated,
-          free: entry.free,
-          data: entry.topology?.data ?? [],
         })),
     },
+    dataset: {
+      endpoint: "pool/dataset",
+    },
   },
 };
 

src/widgets/widgets.js

@@ -24,6 +24,7 @@ import emby from "./emby/widget";
 import esphome from "./esphome/widget";
 import evcc from "./evcc/widget";
 import fileflows from "./fileflows/widget";
+import firefly from "./firefly/widget";
 import flood from "./flood/widget";
 import freshrss from "./freshrss/widget";
 import frigate from "./frigate/widget";
@@ -157,6 +158,7 @@ const widgets = {
   esphome,
   evcc,
   fileflows,
+  firefly,
   flood,
   freshrss,
   frigate,