Add pfSense API widget (#1491)

* Add support for pfSense API

* Fix linting issues

* remove a line

* rename cpu to load in default block

* Re-order container blocks to ensure defaults show

* simplify pfsense widget, rename, limit blocks

---------

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

public/locales/en/common.json

@@ -514,6 +514,16 @@
         "origin_ip": "Origin IP",
         "status": "Status"
     },
+    "pfsense": {
+        "load": "Load Avg",
+        "memory": "Mem Usage",
+        "wanStatus": "WAN Status",   
+        "up": "Up",   
+        "down": "Down",   
+        "temp": "Temp",   
+        "disk": "Disk Usage",        
+        "wanIP": "WAN IP"
+    },
     "proxmoxbackupserver": {
         "datastore_usage": "Datastore",
         "failed_tasks_24h": "Failed Tasks 24h",

src/utils/config/service-helpers.js

@@ -267,7 +267,7 @@ export function cleanServiceGroups(groups) {
           namespace, // kubernetes widget
           app,
           podSelector,
-          wan, // opnsense widget,
+          wan, // opnsense widget, pfsense widget
           enableBlocks, // emby/jellyfin
           enableNowPlaying,
           volume, // diskstation widget
@@ -299,10 +299,10 @@ export function cleanServiceGroups(groups) {
           if (app) cleanedService.widget.app = app;
           if (podSelector) cleanedService.widget.podSelector = podSelector;
         }
-        if (type === "opnsense") {
+        if (["opnsense", "pfsense"].includes(type)) {
           if (wan) cleanedService.widget.wan = wan;
         }
-        if (type === "emby" || type === "jellyfin") {
+        if (["emby", "jellyfin"].includes(type)) {
           if (enableBlocks !== undefined) cleanedService.widget.enableBlocks = JSON.parse(enableBlocks);
           if (enableNowPlaying !== undefined) cleanedService.widget.enableNowPlaying = JSON.parse(enableNowPlaying);
         }

src/widgets/components.js

@@ -52,6 +52,7 @@ const components = {
   opnsense: dynamic(() => import("./opnsense/component")),
   overseerr: dynamic(() => import("./overseerr/component")),
   paperlessngx: dynamic(() => import("./paperlessngx/component")),
+  pfsense: dynamic(() => import("./pfsense/component")),
   photoprism: dynamic(() => import("./photoprism/component")),
   proxmoxbackupserver: dynamic(() => import("./proxmoxbackupserver/component")),
   pihole: dynamic(() => import("./pihole/component")),

src/widgets/pfsense/component.jsx

@@ -0,0 +1,51 @@
+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: systemData, error: systemError } = useWidgetAPI(widget, "system");
+  const { data: interfaceData, error: interfaceError } = useWidgetAPI(widget, "interface");
+
+  const showWanIP = widget.fields?.filter(f => f !== 'wanIP').length <= 4 && widget.fields?.includes('wanIP');
+  const showDiskUsage = widget.fields?.filter(f => f !== 'disk').length <= 4 && widget.fields?.includes('disk');
+  
+  if (systemError || interfaceError) {
+    const finalError = systemError ?? interfaceError;
+    return <Container service={service} error={finalError} />;
+  }
+
+  if (!systemData || !interfaceData) {
+    return (
+      <Container service={service}>      
+        <Block label="pfsense.load" />
+        <Block label="pfsense.memory" />
+        <Block label="pfsense.temp" />
+        <Block label="pfsense.wanStatus" />  
+        {showWanIP && <Block label="pfsense.wanIP" />}
+        {showDiskUsage && <Block label="pfsense.disk" />}
+      </Container>
+    );
+  }
+
+  const wan = interfaceData.data.filter(l => l.hwif === widget.wan)[0];
+
+  return (
+    <Container service={service}>
+      <Block label="pfsense.load" value={systemData.data.load_avg[0]} />
+      <Block label="pfsense.memory" value={t("common.percent", { value: (systemData.data.mem_usage * 100).toFixed(2) })} />
+      <Block label="pfsense.temp" value={t("common.number", { value: systemData.data.temp_c, style: "unit", unit: "celsius" })} />
+      <Block label="pfsense.wanStatus" value={wan.status === "up" ? 
+        <span className="text-green-500">{t("pfsense.up")}</span>:
+        <span className="text-red-500">{t("pfsense.down")}</span>} 
+      />
+      {showWanIP && <Block label="pfsense.wanIP" value={wan.ipaddr} />}
+      {showDiskUsage && <Block label="pfsense.disk" value={t("common.percent", { value: (systemData.data.disk_usage * 100).toFixed(2) })} />}
+    </Container>
+  );
+}

src/widgets/pfsense/widget.js

@@ -0,0 +1,24 @@
+
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}",
+  proxyHandler: genericProxyHandler,
+  
+  mappings: {
+    system: {
+      endpoint: "status/system",
+      validate: [
+        "data"
+      ]
+    },
+    interface: {
+      endpoint: "status/interface",
+      validate: [
+        "data"
+      ]
+    }
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -46,6 +46,7 @@ import ombi from "./ombi/widget";
 import opnsense from "./opnsense/widget";
 import overseerr from "./overseerr/widget";
 import paperlessngx from "./paperlessngx/widget";
+import pfsense from "./pfsense/widget";
 import photoprism from "./photoprism/widget";
 import proxmoxbackupserver from "./proxmoxbackupserver/widget";
 import pihole from "./pihole/widget";
@@ -130,6 +131,7 @@ const widgets = {
   opnsense,
   overseerr,
   paperlessngx,
+  pfsense,
   photoprism,
   proxmoxbackupserver,
   pihole,