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.

public/locales/en/common.json

@@ -401,5 +401,12 @@
         "memoryUsed": "Memory Used",
         "uptime": "Uptime",
         "numberOfLeases": "Leases"
+    },
+    "opnsense": {
+        "cpu": "CPU Load",
+        "memory": "Memory Used",
+        "uptime": "Uptime",
+        "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,53 @@
+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.uptime" />
+        <Block label="opnsense.cpu" />
+        <Block label="opnsense.memory" />
+        <Block label="opnsense.wanUpload" />
+        <Block label="opnsense.wanDownload" />
+      </Container>
+    );
+  }
+
+  const cpuInfos = activityData.headers[2].split(" ");
+  const cpu = parseFloat(cpuInfos[2]) + parseFloat(cpuInfos[5]) + parseFloat(cpuInfos[8]) + parseFloat(cpuInfos[11]);
+  const uptimeInfos = activityData.headers[0].match(/.* up ([0-9+:]*) .*/);
+  const uptime = uptimeInfos[1];
+  const memoryInfos = activityData.headers[3].split(" ");
+  const totalMemory = parseFloat(memoryInfos[1]) + parseFloat(memoryInfos[3]) + parseFloat(memoryInfos[5]) + parseFloat(memoryInfos[7]) + parseFloat(memoryInfos[9])/1024 + parseFloat(memoryInfos[11]);
+  const memory = ( 1 - parseFloat(memoryInfos[11]) / totalMemory) * 100;
+
+  const wanUpload = interfaceData.interfaces.wan['bytes transmitted'];
+  const wanDownload = interfaceData.interfaces.wan['bytes received'];
+
+  return (
+    <Container service={service}>
+      <Block label="opnsense.uptime" value={ uptime } />
+      <Block label="opnsense.cpu" value={t("common.percent", { value: cpu.toFixed(2) })}  />
+      <Block label="opnsense.memory" value={t("common.percent", { 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,18 @@
+
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/api/{endpoint}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    activity: {
+      endpoint: "diagnostics/activity/getActivity",
+    },
+    interface: {
+      endpoint: "diagnostics/traffic/interface",
+    }
+  },
+};
+
+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";
@@ -79,6 +80,7 @@ const widgets = {
   nzbget,
   omada,
   ombi,
+  opnsense,
   overseerr,
   paperlessngx,
   pihole,