Merge branch 'dev' into pr/4643

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,