OPNSense widget (#730)

* Opnsense widget (#2)

* OPNSense widget : initial version, memory usage is inaccurate.

* OPNSense widget : code cleanup in widget.js. Firewall is no longer displayed, so it did not need to be queried.

* Opnsense widget (#3)

* OPNSense widget : initial version, memory usage is inaccurate.

* OPNSense widget : code cleanup in widget.js. Firewall is no longer displayed, so it did not need to be queried.

* OPNSense widget : fixing the CPU code to make it more reliable.

* OPNSense widget : fixing the CPU code to make it more reliable. Removing uptime info

* Update src/widgets/opnsense/component.jsx

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

* Update public/locales/en/common.json

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

* Update src/widgets/opnsense/component.jsx

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

* Update src/widgets/opnsense/component.jsx

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

public/locales/en/common.json

@@ -406,5 +406,11 @@
         "streams_all": "All Streams",
         "streams_active": "Active Streams",
         "streams_xepg": "XEPG Channels"
+    },
+    "opnsense": {
+        "cpu": "CPU Load",
+        "memory": "Active Memory",
+        "wanUpload": "WAN Upload",
+        "wanDownload": "WAN Download"
     }
 }

src/widgets/components.js

@@ -29,6 +29,7 @@ const components = {
   nzbget: dynamic(() => import("./nzbget/component")),
   omada: dynamic(() => import("./omada/component")),
   ombi: dynamic(() => import("./ombi/component")),
+  opnsense: dynamic(() => import("./opnsense/component")),
   overseerr: dynamic(() => import("./overseerr/component")),
   paperlessngx: dynamic(() => import("./paperlessngx/component")),
   pihole: dynamic(() => import("./pihole/component")),

src/widgets/opnsense/component.jsx

@@ -0,0 +1,48 @@
+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: activityData, error: activityError } = useWidgetAPI(widget, "activity");
+  const { data: interfaceData, error: interfaceError } = useWidgetAPI(widget, "interface");
+
+  if (activityError || interfaceError) {
+    const finalError = activityError ?? interfaceError;
+    return <Container error={ finalError } />;
+  }
+
+  if (!activityData || !interfaceData) {
+    return (
+      <Container service={service}>
+        <Block label="opnsense.cpu" />
+        <Block label="opnsense.memory" />
+        <Block label="opnsense.wanUpload" />
+        <Block label="opnsense.wanDownload" />
+      </Container>
+    );
+  }
+
+
+  const cpuIdle = activityData.headers[2].match(/ ([0-9.]+)% idle/)[1];
+  const cpu = 100 - parseFloat(cpuIdle);
+  const memory = activityData.headers[3].match(/Mem: (.+) Active,/)[1];
+
+  const wanUpload = interfaceData.interfaces.wan['bytes transmitted'];
+  const wanDownload = interfaceData.interfaces.wan['bytes received'];
+
+  return (
+    <Container service={service}>
+      <Block label="opnsense.cpu" value={t("common.percent", { value: cpu.toFixed(2) })}  />
+      <Block label="opnsense.memory" value={memory} />
+      <Block label="opnsense.wanUpload" value={t("common.bytes", { value: wanUpload })} />
+      <Block label="opnsense.wanDownload" value={t("common.bytes", { value: wanDownload })} />
+
+    </Container>
+  );
+}

src/widgets/opnsense/widget.js

@@ -0,0 +1,24 @@
+
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/api/{endpoint}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    activity: {
+      endpoint: "diagnostics/activity/getActivity",
+      validate: [
+        "headers"
+      ]
+    },
+    interface: {
+      endpoint: "diagnostics/traffic/interface",
+      validate: [
+        "interfaces"
+      ]
+    }
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -24,6 +24,7 @@ import npm from "./npm/widget";
 import nzbget from "./nzbget/widget";
 import omada from "./omada/widget";
 import ombi from "./ombi/widget";
+import opnsense from "./opnsense/widget";
 import overseerr from "./overseerr/widget";
 import paperlessngx from "./paperlessngx/widget";
 import pihole from "./pihole/widget";
@@ -80,6 +81,7 @@ const widgets = {
   nzbget,
   omada,
   ombi,
+  opnsense,
   overseerr,
   paperlessngx,
   pihole,