Fix units

.babelrc

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

.github/workflows/docker-publish.yml

@@ -145,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
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
           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:22-alpine AS deps
+FROM docker.io/node:18-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:22-alpine AS builder
+FROM docker.io/node:18-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:22-alpine AS runner
+FROM docker.io/node:18-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,8 +56,7 @@ COPY --link --chmod=755 docker-entrypoint.sh /usr/local/bin/
 
 RUN apk add --no-cache su-exec
 
-ENV HOSTNAME=::
-ENV PORT=3000
+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.
+- **For Everyone** - Images built for AMD64, ARM64, ARMv7, and ARMv6.
 - **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.

package.json

@@ -10,7 +10,7 @@
     "telemetry": "next telemetry disable"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "^1.7.18",
     "@kubernetes/client-node": "^0.17.1",
     "cal-parser": "^1.0.2",
     "classnames": "^2.5.1",
@@ -24,22 +24,22 @@
     "luxon": "^3.5.0",
     "memory-cache": "^0.2.0",
     "minecraft-ping-js": "^1.0.2",
-    "next": "^15.0.3",
+    "next": "^12.3.4",
     "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.3.1",
+    "react-dom": "^18.2.0",
     "react-i18next": "^11.18.6",
     "react-icons": "^5.4.0",
-    "recharts": "^2.12.7",
+    "recharts": "^2.12.6",
     "rrule": "^2.8.1",
     "swr": "^1.3.0",
     "systeminformation": "^5.24.3",
-    "tough-cookie": "^4.1.4",
-    "urbackup-server-api": "^0.8.9",
-    "winston": "^3.13.0",
+    "tough-cookie": "^4.1.3",
+    "urbackup-server-api": "^0.52.1",
+    "winston": "^3.11.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.4",
+    "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "postcss": "^8.4.48",
-    "prettier": "^3.3.2",
+    "postcss": "^8.4.47",
+    "prettier": "^3.2.5",
     "tailwind-scrollbar": "^3.0.5",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3"

src/components/resolvedicon.jsx

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

src/components/version.jsx

@@ -44,7 +44,7 @@ export default function Version() {
           </a>
         )}
       </span>
-      {!validate(version)
+      {version === "main" || version === "dev" || version === "nightly" || !validate(version)
         ? null
         : releaseData &&
           latestRelease &&

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