Feature: OpenWRT service widget (#2782)

* Feat: OpenWRT widget implementation

* Update proxy.js

* fixes from review

---------

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

docs/widgets/services/openwrt.md

@@ -0,0 +1,54 @@
+---
+title: OpenWRT
+description: OpenWRT widget configuration
+---
+
+Learn more about [OpenWRT](https://openwrt.org/).
+
+Provides information from OpenWRT
+
+```yaml
+widget:
+  type: openwrt
+  url: http://host.or.ip
+  username: homepage
+  password: pass
+  interfaceName: eth0 # optional
+```
+
+## Interface
+
+Setting `interfaceName` (e.g. eth0) will display information for that particular device, otherwise the widget will display general system info.
+
+## Authorization
+
+In order for homepage to access the OpenWRT RPC endpoints you will need to [create an ACL](https://openwrt.org/docs/techref/ubus#acls) and [new user](https://openwrt.org/docs/techref/ubus#authentication) in OpenWRT.
+
+Create an ACL named `homepage.json` in `/usr/share/rpcd/acl.d/`, the following permissions will suffice:
+
+```
+{
+        "homepage": {
+                "description": "Homepage widget",
+                "read": {
+                        "ubus": {
+                                "network.interface.wan": ["status"],
+                                "network.interface.lan": ["status"],
+                                "network.device": ["status"]
+                                "system": ["info"]
+                        }
+                },
+        }
+}
+```
+
+Then add a user that will use that ACL in `/etc/config/rpc`:
+
+```config login
+        option username 'homepage'
+        option password '<password>'
+        list read homepage
+        list write '*'
+```
+
+This username and password will be used in Homepage's services.yaml to grant access.

public/locales/en/common.json

@@ -788,6 +788,14 @@
         "passed": "Passed",
         "failed": "Failed"
     },
+    "openwrt": {
+        "uptime": "Uptime",
+        "cpuLoad": "CPU Load Avg (5m)",
+        "up": "Up",
+        "down": "Down",
+        "bytesTx": "Transmitted",
+        "bytesRx": "Received"
+    },
     "uptimerobot": {
         "status": "Status",
         "uptime": "Uptime",

src/utils/config/service-helpers.js

@@ -429,6 +429,9 @@ export function cleanServiceGroups(groups) {
           // openmediavault
           method,
 
+          // openwrt
+          interfaceName,
+
           // opnsense, pfsense
           wan,
 
@@ -531,6 +534,9 @@ export function cleanServiceGroups(groups) {
         if (type === "openmediavault") {
           if (method) cleanedService.widget.method = method;
         }
+        if (type === "openwrt") {
+          if (interfaceName) cleanedService.widget.interfaceName = interfaceName;
+        }
         if (type === "customapi") {
           if (mappings) cleanedService.widget.mappings = mappings;
           if (refreshInterval) cleanedService.widget.refreshInterval = refreshInterval;

src/widgets/components.js

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

src/widgets/openwrt/component.jsx

@@ -0,0 +1,9 @@
+import Interface from "./methods/interface";
+import System from "./methods/system";
+
+export default function Component({ service }) {
+  if (service.widget.interfaceName) {
+    return <Interface service={service} />;
+  }
+  return <System service={service} />;
+}

src/widgets/openwrt/methods/interface.jsx

@@ -0,0 +1,37 @@
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { data, error } = useWidgetAPI(service.widget);
+
+  if (error) {
+    return <Container service={service} error={error} />;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const { up, bytesTx, bytesRx } = data;
+
+  return (
+    <Container service={service}>
+      <Block
+        label="widget.status"
+        value={
+          up ? (
+            <span className="text-green-500">{t("openwrt.up")}</span>
+          ) : (
+            <span className="text-red-500">{t("openwrt.down")}</span>
+          )
+        }
+      />
+      <Block label="openwrt.bytesTx" value={t("common.bytes", { value: bytesTx })} />
+      <Block label="openwrt.bytesRx" value={t("common.bytes", { value: bytesRx })} />
+    </Container>
+  );
+}

src/widgets/openwrt/methods/system.jsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { data, error } = useWidgetAPI(service.widget);
+
+  if (error) {
+    return <Container service={service} error={error} />;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const { uptime, cpuLoad } = data;
+
+  return (
+    <Container service={service}>
+      <Block label="openwrt.uptime" value={t("common.uptime", { value: uptime })} />
+      <Block label="openwrt.cpuLoad" value={cpuLoad} />
+    </Container>
+  );
+}

src/widgets/openwrt/proxy.js

@@ -0,0 +1,128 @@
+import { sendJsonRpcRequest } from "utils/proxy/handlers/jsonrpc";
+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 PROXY_NAME = "OpenWRTProxyHandler";
+const logger = createLogger(PROXY_NAME);
+const LOGIN_PARAMS = ["00000000000000000000000000000000", "session", "login"];
+const RPC_METHOD = "call";
+
+let authToken = "00000000000000000000000000000000";
+
+const PARAMS = {
+  system: ["system", "info", {}],
+  device: ["network.device", "status", {}],
+};
+
+async function getWidget(req) {
+  const { group, service } = req.query;
+
+  if (!group || !service) {
+    logger.debug("Invalid or missing service '%s' or group '%s'", service, group);
+    return null;
+  }
+
+  const widget = await getServiceWidget(group, service);
+
+  if (!widget) {
+    logger.debug("Invalid or missing widget for service '%s' in group '%s'", service, group);
+    return null;
+  }
+
+  return widget;
+}
+
+function isUnauthorized(data) {
+  const json = JSON.parse(data.toString());
+  return json?.error?.code === -32002;
+}
+
+async function login(url, username, password) {
+  const response = await sendJsonRpcRequest(url, RPC_METHOD, [...LOGIN_PARAMS, { username, password }]);
+
+  if (response[0] === 200) {
+    const responseData = JSON.parse(response[2]);
+    authToken = responseData[1].ubus_rpc_session;
+  }
+
+  return response;
+}
+
+async function fetchInterface(url, interfaceName) {
+  const [, contentType, data] = await sendJsonRpcRequest(url, RPC_METHOD, [authToken, ...PARAMS.device]);
+  if (isUnauthorized(data)) {
+    return [401, contentType, data];
+  }
+  const response = JSON.parse(data.toString())[1];
+  const networkInterface = response[interfaceName];
+  if (!networkInterface) {
+    return [404, contentType, { error: "Interface not found" }];
+  }
+
+  const interfaceInfo = {
+    up: networkInterface.up,
+    bytesRx: networkInterface.statistics.rx_bytes,
+    bytesTx: networkInterface.statistics.tx_bytes,
+  };
+  return [200, contentType, interfaceInfo];
+}
+
+async function fetchSystem(url) {
+  const [, contentType, data] = await sendJsonRpcRequest(url, RPC_METHOD, [authToken, ...PARAMS.system]);
+  if (isUnauthorized(data)) {
+    return [401, contentType, data];
+  }
+  const systemResponse = JSON.parse(data.toString())[1];
+  const response = {
+    uptime: systemResponse.uptime,
+    cpuLoad: systemResponse.load[1],
+  };
+  return [200, contentType, response];
+}
+
+async function fetchData(url, widget) {
+  let response;
+  if (widget.interfaceName) {
+    response = await fetchInterface(url, widget.interfaceName);
+  } else {
+    response = await fetchSystem(url);
+  }
+  return response;
+}
+
+export default async function proxyHandler(req, res) {
+  const { group, service } = req.query;
+
+  if (!group || !service) {
+    logger.debug("Invalid or missing service '%s' or group '%s'", service, group);
+    return res.status(400).json({ error: "Invalid proxy service type" });
+  }
+
+  const widget = await getWidget(req);
+
+  if (!widget) {
+    logger.debug("Invalid or missing widget for service '%s' in group '%s'", service, group);
+    return res.status(400).json({ error: "Invalid proxy service type" });
+  }
+
+  const api = widgets?.[widget.type]?.api;
+  const url = new URL(formatApiCall(api, { ...widget }));
+
+  let [status, , data] = await fetchData(url, widget);
+
+  if (status === 401) {
+    const [loginStatus, , loginData] = await login(url, widget.username, widget.password);
+    if (loginStatus !== 200) {
+      return res.status(loginStatus).end(loginData);
+    }
+    [status, , data] = await fetchData(url, widget);
+
+    if (status === 401) {
+      return res.status(401).json({ error: "Unauthorized" });
+    }
+  }
+
+  return res.status(200).end(JSON.stringify(data));
+}

src/widgets/openwrt/widget.js

@@ -0,0 +1,8 @@
+import proxyHandler from "./proxy";
+
+const widget = {
+  api: "{url}/ubus",
+  proxyHandler,
+};
+
+export default widget;

src/widgets/widgets.js

@@ -63,6 +63,7 @@ import opendtu from "./opendtu/widget";
 import opnsense from "./opnsense/widget";
 import overseerr from "./overseerr/widget";
 import openmediavault from "./openmediavault/widget";
+import openwrt from "./openwrt/widget";
 import paperlessngx from "./paperlessngx/widget";
 import peanut from "./peanut/widget";
 import pfsense from "./pfsense/widget";
@@ -171,6 +172,7 @@ const widgets = {
   opnsense,
   overseerr,
   openmediavault,
+  openwrt,
   paperlessngx,
   peanut,
   pfsense,