Update contributing / development guidelines

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,12 @@
 ## Proposed change
 
 <!--
-Please include a summary of the change. Screenshots and / or videos can also be helpful if appropriate.
+Please include a summary of the change. Screenshots and/or videos can also be helpful if appropriate.
 
 *** Please see the development guidelines for new widgets: https://gethomepage.dev/latest/more/development/#service-widget-guidelines
 *** If you do not follow these guidelines your PR will likely be closed without review.
 
-New service widgets should include example(s) of relevant relevant API output as well updates to the docs for the new widget.
+New service widgets should include example(s) of relevant API output as well as updates to the docs for the new widget.
 -->
 
 Closes # (issue)

CONTRIBUTING.md

@@ -48,11 +48,15 @@ Please see information in the docs regarding [code formatting with pre-commit ho
 
 By contributing, you agree that your contributions will be licensed under its GNU General Public License.
 
+## Use of AI for pull requests
+
+In general, homepage does not accept "AI-generated" PRs. If you choose to use something like that to aid the development process to generate a significant proportion of the pull request, please make sure this is explicitly stated in the PR itself.
+
 ## References
 
 This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/main/CONTRIBUTING.md)
 
-# Automatic Respository Maintenance
+## Automatic Respository Maintenance
 
 The homepage team appreciates all effort and interest from the community in filing bug reports, creating feature requests, sharing ideas and helping other community members. That said, in an effort to keep the repository organized and managebale the project uses automatic handling of certain areas:
 

README.md

@@ -41,7 +41,7 @@ With features like quick search, bookmarks, weather support, a wide range of int
 
 ## Docker Integration
 
-Homepage has built-in support for Docker, and can automatically discover and add services to the homepage based on labels. See the [Docker](https://gethomepage.dev/latest/installation/docker/) page for more information.
+Homepage has built-in support for Docker, and can automatically discover and add services to the homepage based on labels. See the [Docker Service Discovery](https://gethomepage.dev/latest/configs/docker/#automatic-service-discovery) page for more information.
 
 ## Service Widgets
 

docs/more/development.md

@@ -39,6 +39,11 @@ Once installed, hooks will run when you commit. If the formatting isn't quite ri
 
 See the [pre-commit documentation](https://pre-commit.com/#install) to get started.
 
+## Preferring self-hosted open-source software
+
+In general, homepage is meant to be a dashboard for 'self-hosted' services and we believe it is a small way we can help showcase this kind of software. While exceptions are made, mostly when there is no viable
+self-hosted / open-source alternative, we ask that any widgets, etc. are developed primarily for a self-hosted tool.
+
 ## New Feature Guidelines
 
 - New features should be linked to an existing feature request with at least 10 'up-votes'. The purpose of this requirement is to avoid the addition (and maintenance) of features that might only benefit a small number of users.

docs/widgets/info/glances.md

@@ -12,6 +12,7 @@ The Glances widget allows you to monitor the resources (CPU, memory, storage, te
     url: http://host.or.ip:port
     username: user # optional if auth enabled in Glances
     password: pass # optional if auth enabled in Glances
+    version: 4 # required only if running glances v4 or higher, defaults to 3
     cpu: true # optional, enabled by default, disable by setting to false
     mem: true # optional, enabled by default, disable by setting to false
     cputemp: true # disabled by default

docs/widgets/services/authentik.md

@@ -7,14 +7,15 @@ Learn more about [Authentik](https://github.com/goauthentik/authentik).
 
 This widget reads the number of active users in the system, as well as logins for the last 24 hours.
 
-You will need to generate an API token for an existing user. To do so follow these steps:
+You will need to generate an API token for an existing user under `Admin Portal` > `Directory` > `Tokens & App passwords`.
+Make sure to set Intent to "API Token".
 
-1. Navigate to the Authentik Admin Portal
-2. Expand Directory, the click Tokens & App passwords
-3. Click the Create button
-4. Fill out the dialog making sure to set Intent to API Token
-5. Click the Create button on the dialog
-6. Click the copy button on the far right of the newly created API Token
+The account you made the API token for also needs the following **Assigned global permissions** in Authentik:
+
+- authentik Core
+  - User
+- authentik Events
+  - Event
 
 Allowed fields: `["users", "loginsLast24H", "failedLoginsLast24H"]`.
 

docs/widgets/services/azuredevops.md

@@ -7,10 +7,10 @@ Learn more about [Azure DevOps](https://azure.microsoft.com/en-us/products/devop
 
 This widget has 2 functions:
 
-1. Pipelines: checks if the relevant pipeline is running or not, and if not, reports the last status.\
+1. Pipelines: checks if the relevant pipeline is running or not, and if not, reports the last status.<br>
    Allowed fields: `["result", "status"]`.
 
-2. Pull Requests: returns the amount of open PRs, the amount of the PRs you have open, and how many PRs that you open are marked as 'Approved' by at least 1 person and not yet completed.\
+2. Pull Requests: returns the amount of open PRs, the amount of the PRs you have open, and how many PRs that you open are marked as 'Approved' by at least 1 person and not yet completed.<br>
    Allowed fields: `["totalPrs", "myPrs", "approved"]`.
 
 You will need to generate a personal access token for an existing user, see the [azure documentation](https://learn.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&tabs=Windows#create-a-pat)

docs/widgets/services/crowdsec.md

@@ -0,0 +1,19 @@
+---
+title: Crowdsec
+description: Crowdsec Widget Configuration
+---
+
+Learn more about [Crowdsec](https://crowdsec.net).
+
+See the [crowdsec docs](https://docs.crowdsec.net/docs/local_api/intro/#machines) for information about registering a machine,
+in most instances you can use the default credentials (`/etc/crowdsec/local_api_credentials.yaml`).
+
+Allowed fields: `["alerts", "bans"]`.
+
+```yaml
+widget:
+  type: crowdsec
+  url: http://crowdsechostorip:port
+  username: localhost # machine_id in crowdsec
+  passowrd: password
+```

docs/widgets/services/diskstation.md

@@ -11,22 +11,27 @@ An optional 'volume' parameter can be supplied to specify which volume's free sp
 
 Allowed fields: `["uptime", "volumeAvailable", "resources.cpu", "resources.mem"]`.
 
-To access these system metrics you need to connect to the DiskStation with an account that is a member of the default `Administrators` group. That is because these metrics are requested from the API's `SYNO.Core.System` part that is only available to admin users. In order to keep the security impact as small as possible we can set the account in DSM up to limit the user's permissions inside the Synology system. In DSM 7.x, for instance, follow these steps:
+To access these system metrics you need to connect to the DiskStation (`DSM`) with an account that is a member of the default `Administrators` group. That is because these metrics are requested from the API's `SYNO.Core.System` part that is only available to admin users. In order to keep the security impact as small as possible we can set the account in DSM up to limit the user's permissions inside the Synology system. In DSM 7.x, for instance, follow these steps:
 
 1. Create a new user, i.e. `remote_stats`.
 2. Set up a strong password for the new user
 3. Under the `User Groups` tab of the user config dialogue check the box for `Administrators`.
 4. On the `Permissions` tab check the top box for `No Access`, effectively prohibiting the user from accessing anything in the shared folders.
 5. Under `Applications` check the box next to `Deny` in the header to explicitly prohibit login to all applications.
-6. Now _only_ allow login to the `Download Station` application, either by
+6. Now _only_ allow login to the `DSM` application, either by
    - unchecking `Deny` in the respective row, or (if inheriting permission doesn't work because of other group settings)
    - checking `Allow` for this app, or
    - checking `By IP` for this app to limit the source of login attempts to one or more IP addresses/subnets.
-7. When the `Preview` column shows `Allow` in the `Download Station` row, click `Save`.
+7. When the `Preview` column shows `Allow` in the `DSM` row, click `Save`.
 
 Now configure the widget with the correct login information and test it.
 
-If you encounter issues during testing, make sure to uncheck the option for automatic blocking due to invalid logins under `Control Panel > Security > Protection`. If desired, this setting can be reactivated once the login is established working.
+If you encounter issues during testing:
+
+1. Make sure to uncheck the option for automatic blocking due to invalid logins under `Control Panel > Security > Protection`.
+   - If desired, this setting can be reactivated once the login is established working.
+2. Login to your Synology DSM with the newly created account and accept terms and conditions.
+3. Reattempt
 
 ```yaml
 widget:

docs/widgets/services/gitea.md

@@ -7,7 +7,7 @@ Learn more about [Gitea](https://gitea.com).
 
 API token requires `notifications`, `repository` and `issue` permissions. See the [gitea documentation](https://docs.gitea.com/development/api-usage#generating-and-listing-api-tokens) for details on generating tokens.
 
-Allowed fields: ["notifications", "issues", "pulls"]
+Allowed fields: `["notifications", "issues", "pulls"]`.
 
 ```yaml
 widget:

docs/widgets/services/glances.md

@@ -17,6 +17,7 @@ widget:
   url: http://glances.host.or.ip:port
   username: user # optional if auth enabled in Glances
   password: pass # optional if auth enabled in Glances
+  version: 4 # required only if running glances v4 or higher, defaults to 3
   metric: cpu
   diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
   refreshInterval: 5000 # optional - in milliseconds, defaults to 1000 or more, depending on the metric

docs/widgets/services/netalertx.md

@@ -0,0 +1,16 @@
+---
+title: NetAlertX
+description: NetAlertX (formerly PiAlert) Widget Configuration
+---
+
+Learn more about [NetAlertX](https://github.com/jokob-sk/NetAlertX).
+
+_Note that the project was renamed from PiAlert to NetAlertX._
+
+Allowed fields: `["total", "connected", "new_devices", "down_alerts"]`.
+
+```yaml
+widget:
+  type: netalertx
+  url: http://ip:port
+```

docs/widgets/services/peanut.md

@@ -9,7 +9,7 @@ This widget adds support for [Network UPS Tools](https://networkupstools.org/) v
 
 The default ups name is `ups`. To configure more than one ups, you must create multiple peanut services.
 
-Allowed fields: `["battery_charge", "ups_load", "ups_status"]`
+Allowed fields: `["battery_charge", "ups_load", "ups_status"]`.
 
 !!! note
 

docs/widgets/services/pialert.md

@@ -1,16 +0,0 @@
----
-title: PiAlert
-description: PiAlert Widget Configuration
----
-
-Learn more about [PiAlert](https://github.com/jokob-sk/Pi.Alert).
-
-Note that [pucherot/PiAlert](https://github.com/pucherot/Pi.Alert) has been abandoned and might not work properly.
-
-Allowed fields: `["total", "connected", "new_devices", "down_alerts"]`.
-
-```yaml
-widget:
-  type: pialert
-  url: http://ip:port
-```

docs/widgets/services/pihole.md

@@ -15,6 +15,7 @@ Note: by default the "blocked" and "blocked_percent" fields are merged e.g. "1,2
 widget:
   type: pihole
   url: http://pi.hole.or.ip
+  version: 6 # required if running v6 or higher, defaults to 5
   key: yourpiholeapikey # optional
 ```
 

docs/widgets/services/prometheus.md

@@ -5,7 +5,7 @@ description: Prometheus Widget Configuration
 
 Learn more about [Prometheus](https://github.com/prometheus/prometheus).
 
-Allowed fields: `["targets_up", "targets_down", "targets_total"]`
+Allowed fields: `["targets_up", "targets_down", "targets_total"]`.
 
 ```yaml
 widget:

docs/widgets/services/pterodactyl.md

@@ -5,7 +5,7 @@ description: Pterodactyl Widget Configuration
 
 Learn more about [Pterodactyl](https://github.com/pterodactyl).
 
-Allowed fields: `["nodes", "servers"]`
+Allowed fields: `["nodes", "servers"]`.
 
 ```yaml
 widget:

docs/widgets/services/truenas.md

@@ -11,6 +11,8 @@ To create an API Key, follow [the official TrueNAS documentation](https://www.tr
 
 A detailed pool listing is disabled by default, but can be enabled with the `enablePools` option.
 
+To use the `enablePools` option with TrueNAS Core, the `nasType` parameter is required.
+
 ```yaml
 widget:
   type: truenas
@@ -19,4 +21,5 @@ widget:
   password: pass # not required if using api key
   key: yourtruenasapikey # not required if using username / password
   enablePools: true # optional, defaults to false
+  nasType: scale # defaults to scale, must be set to 'core' if using enablePools with TrueNAS Core
 ```

mkdocs.yml

@@ -44,6 +44,7 @@ nav:
       - widgets/services/channelsdvrserver.md
       - widgets/services/cloudflared.md
       - widgets/services/coin-market-cap.md
+      - widgets/services/crowdsec.md
       - widgets/services/customapi.md
       - widgets/services/deluge.md
       - widgets/services/diskstation.md

package.json

@@ -16,7 +16,7 @@
     "classnames": "^2.5.1",
     "compare-versions": "^6.1.0",
     "dockerode": "^4.0.2",
-    "follow-redirects": "^1.15.5",
+    "follow-redirects": "^1.15.6",
     "gamedig": "^4.3.1",
     "i18next": "^21.10.0",
     "js-yaml": "^4.1.0",
@@ -33,7 +33,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.6",
     "react-icons": "^4.12.0",
-    "recharts": "^2.12.2",
+    "recharts": "^2.12.3",
     "rrule": "^2.8.1",
     "swr": "^1.3.0",
     "systeminformation": "^5.22.0",
@@ -52,12 +52,12 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwind-scrollbar": "^3.0.5",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.3",
     "typescript": "^4.9.5"
   },
   "optionalDependencies": {

public/locales/en/common.json

@@ -277,7 +277,7 @@
         "approved": "Approved",
         "available": "Available"
     },
-    "pialert": {
+    "netalertx": {
         "total": "Total",
         "connected": "Connected",
         "new_devices": "New Devices",
@@ -872,5 +872,9 @@
         "labels": "Labels",
         "users": "Users",
         "totalValue": "Total Value"
+    },
+    "crowdsec": {
+        "alerts": "Alerts",
+        "bans": "Bans"
     }
 }

src/components/services/site-monitor.jsx

@@ -12,7 +12,7 @@ export default function SiteMonitor({ group, service, style }) {
   let statusTitle = t("siteMonitor.http_status");
   let statusText = "";
 
-  if (error) {
+  if (error || (data && data.error)) {
     colorClass = "text-rose-500";
     statusText = t("siteMonitor.error");
     statusTitle += ` ${t("siteMonitor.error")}`;

src/components/widgets/widget/container_form.jsx

@@ -2,11 +2,7 @@ import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
 
 export default function ContainerForm({ children = [], options, additionalClassNames = "", callback }) {
   return (
-    <form
-      type="button"
-      onSubmit={callback}
-      className={`${getAllClasses(options, additionalClassNames)} information-widget-form`}
-    >
+    <form onSubmit={callback} className={`${getAllClasses(options, additionalClassNames)} information-widget-form`}>
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </form>

src/pages/api/widgets/glances.js

@@ -13,7 +13,7 @@ async function retrieveFromGlancesAPI(privateWidgetOptions, endpoint) {
     throw new Error(errorMessage);
   }
 
-  const apiUrl = `${url}/api/3/${endpoint}`;
+  const apiUrl = `${url}/api/${privateWidgetOptions.version}/${endpoint}`;
   const headers = {
     "Accept-Encoding": "application/json",
   };
@@ -42,9 +42,10 @@ async function retrieveFromGlancesAPI(privateWidgetOptions, endpoint) {
 }
 
 export default async function handler(req, res) {
-  const { index, cputemp: includeCpuTemp, uptime: includeUptime, disk: includeDisks } = req.query;
+  const { index, cputemp: includeCpuTemp, uptime: includeUptime, disk: includeDisks, version } = req.query;
 
   const privateWidgetOptions = await getPrivateWidgetOptions("glances", index);
+  privateWidgetOptions.version = version ?? 3;
 
   try {
     const cpuData = await retrieveFromGlancesAPI(privateWidgetOptions, "cpu");

src/utils/config/service-helpers.js

@@ -393,6 +393,9 @@ export function cleanServiceGroups(groups) {
           enableBlocks,
           enableNowPlaying,
 
+          // glances, pihole
+          version,
+
           // glances
           chart,
           metric,
@@ -447,6 +450,7 @@ export function cleanServiceGroups(groups) {
 
           // truenas
           enablePools,
+          nasType,
 
           // unifi
           site,
@@ -519,6 +523,7 @@ export function cleanServiceGroups(groups) {
         }
         if (type === "truenas") {
           if (enablePools !== undefined) cleanedService.widget.enablePools = JSON.parse(enablePools);
+          if (nasType !== undefined) cleanedService.widget.nasType = nasType;
         }
         if (["diskstation", "qnap"].includes(type)) {
           if (volume) cleanedService.widget.volume = volume;
@@ -527,6 +532,9 @@ export function cleanServiceGroups(groups) {
           if (snapshotHost) cleanedService.widget.snapshotHost = snapshotHost;
           if (snapshotPath) cleanedService.widget.snapshotPath = snapshotPath;
         }
+        if (["glances", "pihole"].includes(type)) {
+          if (version) cleanedService.widget.version = version;
+        }
         if (type === "glances") {
           if (metric) cleanedService.widget.metric = metric;
           if (chart !== undefined) {

src/widgets/components.js

@@ -15,6 +15,7 @@ const components = {
   channelsdvrserver: dynamic(() => import("./channelsdvrserver/component")),
   cloudflared: dynamic(() => import("./cloudflared/component")),
   coinmarketcap: dynamic(() => import("./coinmarketcap/component")),
+  crowdsec: dynamic(() => import("./crowdsec/component")),
   iframe: dynamic(() => import("./iframe/component")),
   customapi: dynamic(() => import("./customapi/component")),
   deluge: dynamic(() => import("./deluge/component")),
@@ -62,6 +63,7 @@ const components = {
   moonraker: dynamic(() => import("./moonraker/component")),
   mylar: dynamic(() => import("./mylar/component")),
   navidrome: dynamic(() => import("./navidrome/component")),
+  netalertx: dynamic(() => import("./netalertx/component")),
   netdata: dynamic(() => import("./netdata/component")),
   nextcloud: dynamic(() => import("./nextcloud/component")),
   nextdns: dynamic(() => import("./nextdns/component")),
@@ -79,7 +81,7 @@ const components = {
   pfsense: dynamic(() => import("./pfsense/component")),
   photoprism: dynamic(() => import("./photoprism/component")),
   proxmoxbackupserver: dynamic(() => import("./proxmoxbackupserver/component")),
-  pialert: dynamic(() => import("./pialert/component")),
+  pialert: dynamic(() => import("./netalertx/component")),
   pihole: dynamic(() => import("./pihole/component")),
   plantit: dynamic(() => import("./plantit/component")),
   plex: dynamic(() => import("./plex/component")),

src/widgets/crowdsec/component.jsx

@@ -0,0 +1,34 @@
+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: alerts, error: alertsError } = useWidgetAPI(widget, "alerts");
+  const { data: bans, error: bansError } = useWidgetAPI(widget, "bans");
+
+  if (alertsError || bansError) {
+    return <Container service={service} error={alertsError ?? bansError} />;
+  }
+
+  if (!alerts && !bans) {
+    return (
+      <Container service={service}>
+        <Block label="crowdsec.alerts" />
+        <Block label="crowdsec.bans" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="crowdsec.alerts" value={t("common.number", { value: alerts?.length ?? 0 })} />
+      <Block label="crowdsec.bans" value={t("common.number", { value: bans?.length ?? 0 })} />
+    </Container>
+  );
+}

src/widgets/crowdsec/proxy.js

@@ -0,0 +1,86 @@
+import cache from "memory-cache";
+
+import { httpProxy } from "utils/proxy/http";
+import { formatApiCall } from "utils/proxy/api-helpers";
+import getServiceWidget from "utils/config/service-helpers";
+import createLogger from "utils/logger";
+import widgets from "widgets/widgets";
+
+const proxyName = "crowdsecProxyHandler";
+const logger = createLogger(proxyName);
+const sessionTokenCacheKey = `${proxyName}__sessionToken`;
+
+async function login(widget, service) {
+  const url = formatApiCall(widgets[widget.type].loginURL, widget);
+  const [status, , data] = await httpProxy(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "User-Agent": "Mozilla/5.0", // Crowdsec requires a user-agent
+    },
+    body: JSON.stringify({
+      machine_id: widget.username,
+      password: widget.password,
+      scenarios: [],
+    }),
+  });
+
+  const dataParsed = JSON.parse(data);
+
+  if (!(status === 200) || !dataParsed.token) {
+    logger.error("Failed to login to Crowdsec API, status: %d", status);
+    cache.del(`${sessionTokenCacheKey}.${service}`);
+  }
+  cache.put(`${sessionTokenCacheKey}.${service}`, dataParsed.token, new Date(dataParsed.expire) - new Date());
+}
+
+export default async function crowdsecProxyHandler(req, res) {
+  const { group, service, endpoint } = req.query;
+
+  if (!group || !service) {
+    logger.error("Invalid or missing service '%s' or group '%s'", service, group);
+    return res.status(400).json({ error: "Invalid proxy service type" });
+  }
+
+  const widget = await getServiceWidget(group, service);
+  if (!widget || !widgets[widget.type].api) {
+    logger.error("Invalid or missing widget for service '%s' in group '%s'", service, group);
+    return res.status(400).json({ error: "Invalid widget configuration" });
+  }
+
+  if (!cache.get(`${sessionTokenCacheKey}.${service}`)) {
+    await login(widget, service);
+  }
+
+  const token = cache.get(`${sessionTokenCacheKey}.${service}`);
+  if (!token) {
+    return res.status(500).json({ error: "Failed to authenticate with Crowdsec" });
+  }
+
+  const url = new URL(formatApiCall(widgets[widget.type].api, { endpoint, ...widget }));
+
+  try {
+    const params = {
+      method: "GET",
+      headers: {
+        "User-Agent": "Mozilla/5.0", // Crowdsec requires a user-agent
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    };
+
+    logger.debug("Calling Crowdsec API endpoint: %s", endpoint);
+
+    const [status, , data] = await httpProxy(url, params);
+
+    if (status !== 200) {
+      logger.error("Error calling Crowdsec API: %d. Data: %s", status, data);
+      return res.status(status).json({ error: "Crowdsec API Error", data });
+    }
+
+    return res.status(status).send(data);
+  } catch (error) {
+    logger.error("Exception calling Crowdsec API: %s", error.message);
+    return res.status(500).json({ error: "Crowdsec API Error", message: error.message });
+  }
+}

src/widgets/crowdsec/widget.js

@@ -0,0 +1,18 @@
+import crowdsecProxyHandler from "./proxy";
+
+const widget = {
+  api: "{url}/v1/{endpoint}",
+  loginURL: "{url}/v1/watchers/login",
+  proxyHandler: crowdsecProxyHandler,
+
+  mappings: {
+    alerts: {
+      endpoint: "alerts",
+    },
+    bans: {
+      endpoint: "alerts?decision_type=ban&origin=crowdsec&has_active_decision=1",
+    },
+  },
+};
+
+export default widget;

src/widgets/glances/metrics/cpu.jsx

@@ -16,15 +16,15 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
-  const { data, error } = useWidgetAPI(service.widget, "cpu", {
+  const { data, error } = useWidgetAPI(service.widget, `${version}/cpu`, {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
-  const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, "quicklook");
+  const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, `${version}/quicklook`);
 
   useEffect(() => {
     if (data) {

src/widgets/glances/metrics/disk.jsx

@@ -16,7 +16,7 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
   const [, diskName] = widget.metric.split(":");
 
   const [dataPoints, setDataPoints] = useState(
@@ -24,7 +24,7 @@ export default function Component({ service }) {
   );
   const [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
 
-  const { data, error } = useWidgetAPI(service.widget, "diskio", {
+  const { data, error } = useWidgetAPI(service.widget, `${version}/diskio`, {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 

src/widgets/glances/metrics/fs.jsx

@@ -11,11 +11,11 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval } = widget;
+  const { chart, refreshInterval = defaultInterval, version = 3 } = widget;
   const [, fsName] = widget.metric.split("fs:");
   const diskUnits = widget.diskUnits === "bbytes" ? "common.bbytes" : "common.bytes";
 
-  const { data, error } = useWidgetAPI(widget, "fs", {
+  const { data, error } = useWidgetAPI(widget, `${version}/fs`, {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 

src/widgets/glances/metrics/gpu.jsx

@@ -16,12 +16,12 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
   const [, gpuName] = widget.metric.split(":");
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
 
-  const { data, error } = useWidgetAPI(widget, "gpu", {
+  const { data, error } = useWidgetAPI(widget, `${version}/gpu`, {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 

src/widgets/glances/metrics/info.jsx

@@ -74,13 +74,13 @@ const defaultSystemInterval = 30000; // This data (OS, hostname, distribution) i
 
 export default function Component({ service }) {
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval } = widget;
+  const { chart, refreshInterval = defaultInterval, version = 3 } = widget;
 
-  const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, "quicklook", {
+  const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, `${version}/quicklook`, {
     refreshInterval,
   });
 
-  const { data: systemData, errorL: systemError } = useWidgetAPI(service.widget, "system", {
+  const { data: systemData, errorL: systemError } = useWidgetAPI(service.widget, `${version}/system`, {
     refreshInterval: defaultSystemInterval,
   });
 

src/widgets/glances/metrics/memory.jsx

@@ -17,11 +17,11 @@ export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
   const { chart } = widget;
-  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit } = widget;
+  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit, version = 3 } = widget;
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
-  const { data, error } = useWidgetAPI(service.widget, "mem", {
+  const { data, error } = useWidgetAPI(service.widget, `${version}/mem`, {
     refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
   });
 

src/widgets/glances/metrics/net.jsx

@@ -17,13 +17,16 @@ export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
   const { chart, metric } = widget;
-  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit } = widget;
+  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit, version = 3 } = widget;
+
+  const rxKey = version === 3 ? "rx" : "bytes_recv";
+  const txKey = version === 3 ? "tx" : "bytes_sent";
 
   const [, interfaceName] = metric.split(":");
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
-  const { data, error } = useWidgetAPI(widget, "network", {
+  const { data, error } = useWidgetAPI(widget, `${version}/network`, {
     refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
   });
 
@@ -36,8 +39,8 @@ export default function Component({ service }) {
           const newDataPoints = [
             ...prevDataPoints,
             {
-              a: (interfaceData.rx * 8) / interfaceData.time_since_update,
-              b: (interfaceData.tx * 8) / interfaceData.time_since_update,
+              a: (interfaceData[rxKey] * 8) / interfaceData.time_since_update,
+              b: (interfaceData[txKey] * 8) / interfaceData.time_since_update,
             },
           ];
           if (newDataPoints.length > pointsLimit) {
@@ -47,7 +50,7 @@ export default function Component({ service }) {
         });
       }
     }
-  }, [data, interfaceName, pointsLimit]);
+  }, [data, interfaceName, pointsLimit, rxKey, txKey]);
 
   if (error) {
     return (
@@ -97,7 +100,7 @@ export default function Component({ service }) {
 
         <div className="text-xs opacity-75">
           {t("common.bitrate", {
-            value: (interfaceData.rx * 8) / interfaceData.time_since_update,
+            value: (interfaceData[rxKey] * 8) / interfaceData.time_since_update,
             maximumFractionDigits: 0,
           })}{" "}
           {t("docker.rx")}
@@ -115,7 +118,7 @@ export default function Component({ service }) {
       <Block position="bottom-3 right-3">
         <div className="text-xs opacity-75">
           {t("common.bitrate", {
-            value: (interfaceData.tx * 8) / interfaceData.time_since_update,
+            value: (interfaceData[txKey] * 8) / interfaceData.time_since_update,
             maximumFractionDigits: 0,
           })}{" "}
           {t("docker.tx")}

src/widgets/glances/metrics/process.jsx

@@ -22,9 +22,11 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval } = widget;
+  const { chart, refreshInterval = defaultInterval, version = 3 } = widget;
 
-  const { data, error } = useWidgetAPI(service.widget, "processlist", {
+  const memoryInfoKey = version === 3 ? 0 : "data";
+
+  const { data, error } = useWidgetAPI(service.widget, `${version}/processlist`, {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
@@ -66,7 +68,7 @@ export default function Component({ service }) {
                 <div className="opacity-25 w-14 text-right">{item.cpu_percent.toFixed(1)}%</div>
                 <div className="opacity-25 w-14 text-right">
                   {t("common.bytes", {
-                    value: item.memory_info[0],
+                    value: item.memory_info[memoryInfoKey],
                     maximumFractionDigits: 0,
                   })}
                 </div>

src/widgets/glances/metrics/sensor.jsx

@@ -16,12 +16,12 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
   const [, sensorName] = widget.metric.split(":");
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
-  const { data, error } = useWidgetAPI(service.widget, "sensors", {
+  const { data, error } = useWidgetAPI(service.widget, `${version}/sensors`, {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 

src/widgets/glances/widget.js

@@ -1,7 +1,7 @@
 import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
 
 const widget = {
-  api: "{url}/api/3/{endpoint}",
+  api: "{url}/api/{endpoint}",
   proxyHandler: credentialedProxyHandler,
 };
 

src/widgets/homebridge/proxy.js

@@ -14,7 +14,7 @@ async function login(widget, service) {
   const endpoint = "auth/login";
   const api = widgets?.[widget.type]?.api;
   const loginUrl = new URL(formatApiCall(api, { endpoint, ...widget }));
-  const loginBody = { username: widget.username, password: widget.password };
+  const loginBody = { username: widget.username.toString(), password: widget.password.toString() };
   const headers = { "Content-Type": "application/json" };
   // eslint-disable-next-line no-unused-vars
   const [status, contentType, data, responseHeaders] = await httpProxy(loginUrl, {

src/widgets/netalertx/component.jsx

@@ -0,0 +1,37 @@
+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: netalertxData, error: netalertxError } = useWidgetAPI(widget, "data");
+
+  if (netalertxError) {
+    return <Container service={service} error={netalertxError} />;
+  }
+
+  if (!netalertxData) {
+    return (
+      <Container service={service}>
+        <Block label="netalertx.total" />
+        <Block label="netalertx.connected" />
+        <Block label="netalertx.new_devices" />
+        <Block label="netalertx.down_alerts" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="netalertx.total" value={t("common.number", { value: parseInt(netalertxData[0], 10) })} />
+      <Block label="netalertx.connected" value={t("common.number", { value: parseInt(netalertxData[1], 10) })} />
+      <Block label="netalertx.new_devices" value={t("common.number", { value: parseInt(netalertxData[3], 10) })} />
+      <Block label="netalertx.down_alerts" value={t("common.number", { value: parseInt(netalertxData[4], 10) })} />
+    </Container>
+  );
+}

src/widgets/pialert/component.jsx

@@ -1,37 +0,0 @@
-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: pialertData, error: pialertError } = useWidgetAPI(widget, "data");
-
-  if (pialertError) {
-    return <Container service={service} error={pialertError} />;
-  }
-
-  if (!pialertData) {
-    return (
-      <Container service={service}>
-        <Block label="pialert.total" />
-        <Block label="pialert.connected" />
-        <Block label="pialert.new_devices" />
-        <Block label="pialert.down_alerts" />
-      </Container>
-    );
-  }
-
-  return (
-    <Container service={service}>
-      <Block label="pialert.total" value={t("common.number", { value: parseInt(pialertData[0], 10) })} />
-      <Block label="pialert.connected" value={t("common.number", { value: parseInt(pialertData[1], 10) })} />
-      <Block label="pialert.new_devices" value={t("common.number", { value: parseInt(pialertData[3], 10) })} />
-      <Block label="pialert.down_alerts" value={t("common.number", { value: parseInt(pialertData[4], 10) })} />
-    </Container>
-  );
-}

src/widgets/pihole/component.jsx

@@ -9,7 +9,7 @@ export default function Component({ service }) {
 
   const { widget } = service;
 
-  const { data: piholeData, error: piholeError } = useWidgetAPI(widget, "summaryRaw");
+  const { data: piholeData, error: piholeError } = useWidgetAPI(widget);
 
   if (piholeError) {
     return <Container service={service} error={piholeError} />;

src/widgets/pihole/proxy.js

@@ -0,0 +1,95 @@
+import cache from "memory-cache";
+
+import { httpProxy } from "utils/proxy/http";
+import { formatApiCall } from "utils/proxy/api-helpers";
+import getServiceWidget from "utils/config/service-helpers";
+import createLogger from "utils/logger";
+import widgets from "widgets/widgets";
+
+const proxyName = "piholeProxyHandler";
+const logger = createLogger(proxyName);
+const sessionSIDCacheKey = `${proxyName}__sessionSID`;
+
+async function login(widget, service) {
+  const url = formatApiCall(widgets[widget.type].api, { ...widget, endpoint: "auth" });
+  const [status, , data] = await httpProxy(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      password: widget.key,
+    }),
+  });
+
+  const dataParsed = JSON.parse(data);
+
+  if (status !== 200 || !dataParsed.session) {
+    logger.error("Failed to login to Pi-Hole API, status: %d", status);
+    cache.del(`${sessionSIDCacheKey}.${service}`);
+  } else {
+    cache.put(`${sessionSIDCacheKey}.${service}`, dataParsed.session.sid, dataParsed.session.validity);
+  }
+}
+
+export default async function piholeProxyHandler(req, res) {
+  const { group, service } = req.query;
+  let endpoint = "stats/summary";
+
+  if (!group || !service) {
+    logger.error("Invalid or missing service '%s' or group '%s'", service, group);
+    return res.status(400).json({ error: "Invalid proxy service type" });
+  }
+
+  const widget = await getServiceWidget(group, service);
+  if (!widget) {
+    logger.error("Invalid or missing widget for service '%s' in group '%s'", service, group);
+    return res.status(400).json({ error: "Invalid widget configuration" });
+  }
+
+  let status;
+  let data;
+  if (!widget.version || widget.version < 6) {
+    // pihole v5
+    endpoint = "summaryRaw";
+    [status, , data] = await httpProxy(formatApiCall(widgets[widget.type].apiv5, { ...widget, endpoint }));
+    return res.status(status).send(data);
+  }
+
+  // pihole v6
+  if (!cache.get(`${sessionSIDCacheKey}.${service}`)) {
+    await login(widget, service);
+  }
+
+  const sid = cache.get(`${sessionSIDCacheKey}.${service}`);
+  if (!sid) {
+    return res.status(500).json({ error: "Failed to authenticate with Pi-hole" });
+  }
+
+  try {
+    logger.debug("Calling Pi-hole API endpoint: %s", endpoint);
+
+    [status, , data] = await httpProxy(formatApiCall(widgets[widget.type].api, { ...widget, endpoint }), {
+      headers: {
+        "Content-Type": "application/json",
+        "X-FTL-SID": sid,
+      },
+    });
+
+    if (status !== 200) {
+      logger.error("Error calling Pi-Hole API: %d. Data: %s", status, data);
+      return res.status(status).json({ error: "Pi-Hole API Error", data });
+    }
+
+    const dataParsed = JSON.parse(data);
+    return res.status(status).json({
+      domains_being_blocked: dataParsed.gravity.domains_being_blocked,
+      ads_blocked_today: dataParsed.queries.blocked,
+      ads_percentage_today: dataParsed.queries.percent_blocked,
+      dns_queries_today: dataParsed.queries.total,
+    });
+  } catch (error) {
+    logger.error("Exception calling Pi-Hole API: %s", error.message);
+    return res.status(500).json({ error: "Pi-Hole API Error", message: error.message });
+  }
+}

src/widgets/pihole/widget.js

@@ -1,15 +1,9 @@
-import genericProxyHandler from "utils/proxy/handlers/generic";
+import piholeProxyHandler from "./proxy";
 
 const widget = {
-  api: "{url}/admin/api.php?{endpoint}&auth={key}",
-  proxyHandler: genericProxyHandler,
-
-  mappings: {
-    summaryRaw: {
-      endpoint: "summaryRaw",
-      validate: ["dns_queries_today", "ads_blocked_today", "ads_percentage_today", "domains_being_blocked"],
-    },
-  },
+  api: "{url}/api/{endpoint}",
+  apiv5: "{url}/admin/api.php?{endpoint}&auth={key}",
+  proxyHandler: piholeProxyHandler,
 };
 
 export default widget;

src/widgets/truenas/component.jsx

@@ -40,7 +40,15 @@ export default function Component({ service }) {
       </Container>
       {enablePools &&
         poolsData.map((pool) => (
-          <Pool key={pool.id} name={pool.name} healthy={pool.healthy} allocated={pool.allocated} free={pool.free} />
+          <Pool
+            key={pool.id}
+            name={pool.name}
+            healthy={pool.healthy}
+            allocated={pool.allocated}
+            free={pool.free}
+            data={pool.data}
+            nasType={widget?.nasType ?? "scale"}
+          />
         ))}
     </>
   );

src/widgets/truenas/pool.jsx

@@ -1,8 +1,18 @@
 import classNames from "classnames";
 import prettyBytes from "pretty-bytes";
 
-export default function Pool({ name, free, allocated, healthy }) {
-  const total = free + allocated;
+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);
   const statusColor = healthy ? "bg-green-500" : "bg-yellow-500";
 

src/widgets/truenas/widget.js

@@ -25,6 +25,7 @@ const widget = {
           healthy: entry.healthy,
           allocated: entry.allocated,
           free: entry.free,
+          data: entry.topology.data,
         })),
     },
   },

src/widgets/widgets.js

@@ -12,6 +12,7 @@ import changedetectionio from "./changedetectionio/widget";
 import channelsdvrserver from "./channelsdvrserver/widget";
 import cloudflared from "./cloudflared/widget";
 import coinmarketcap from "./coinmarketcap/widget";
+import crowdsec from "./crowdsec/widget";
 import customapi from "./customapi/widget";
 import deluge from "./deluge/widget";
 import diskstation from "./diskstation/widget";
@@ -54,6 +55,7 @@ import mjpeg from "./mjpeg/widget";
 import moonraker from "./moonraker/widget";
 import mylar from "./mylar/widget";
 import navidrome from "./navidrome/widget";
+import netalertx from "./netalertx/widget";
 import netdata from "./netdata/widget";
 import nextcloud from "./nextcloud/widget";
 import nextdns from "./nextdns/widget";
@@ -72,7 +74,6 @@ import peanut from "./peanut/widget";
 import pfsense from "./pfsense/widget";
 import photoprism from "./photoprism/widget";
 import proxmoxbackupserver from "./proxmoxbackupserver/widget";
-import pialert from "./pialert/widget";
 import pihole from "./pihole/widget";
 import plantit from "./plantit/widget";
 import plex from "./plex/widget";
@@ -125,6 +126,7 @@ const widgets = {
   channelsdvrserver,
   cloudflared,
   coinmarketcap,
+  crowdsec,
   customapi,
   deluge,
   diskstation,
@@ -169,6 +171,7 @@ const widgets = {
   moonraker,
   mylar,
   navidrome,
+  netalertx,
   netdata,
   nextcloud,
   nextdns,
@@ -187,7 +190,7 @@ const widgets = {
   pfsense,
   photoprism,
   proxmoxbackupserver,
-  pialert,
+  pialert: netalertx,
   pihole,
   plantit,
   plex,