simplify pfsense widget, rename, limit blocks

public/locales/en/common.json

@@ -514,9 +514,9 @@
         "origin_ip": "Origin IP",
         "status": "Status"
     },
-    "pfsenseapi": {
+    "pfsense": {
-        "load": "LOAD AVG",
+        "load": "Load Avg",
-        "memory": "MEM USAGE",
+        "memory": "Mem Usage",
         "wanStatus": "WAN Status",   
         "up": "Up",   
         "down": "Down",   

src/utils/config/service-helpers.js

@@ -267,7 +267,7 @@ export function cleanServiceGroups(groups) {
           namespace, // kubernetes widget
           app,
           podSelector,
-          wan, // opnsense widget, pfsenseapi 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" || type === "pfsenseapi") {
+        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,7 +52,7 @@ const components = {
   opnsense: dynamic(() => import("./opnsense/component")),
   overseerr: dynamic(() => import("./overseerr/component")),
   paperlessngx: dynamic(() => import("./paperlessngx/component")),
-  pfsenseapi: dynamic(() => import("./pfsenseapi/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/pfsenseapi/component.jsx

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

src/widgets/widgets.js

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