Better support non-OS Unifi Controllers

public/locales/en/common.json

@@ -36,6 +36,11 @@
         "uptime": "System Uptime",
         "days": "Days",
         "wan": "WAN",
+        "lan": "LAN",
+        "wlan": "WLAN",
+        "devices": "Devices",
+        "lan_devices": "LAN Devices",
+        "wlan_devices": "WLAN Devices",
         "lan_users": "LAN Users",
         "wlan_users": "WLAN Users",
         "up": "UP",

src/components/services/widget/container.jsx

@@ -11,7 +11,7 @@ export default function Container({ error = false, children, service }) {
   const fields = service?.widget?.fields;
   const type = service?.widget?.type;
   if (fields && type) {
-    visibleChildren = children.filter(child => fields.some(field => `${type}.${field}` === child.props?.label));
+    visibleChildren = children.filter(child => fields.some(field => `${type}.${field}` === child?.props?.label));
   }
 
   return <div className="relative flex flex-row w-full">{visibleChildren}</div>;

src/components/widgets/unifi_console/unifi_console.jsx

@@ -1,4 +1,4 @@
-import { BiError, BiWifi, BiCheckCircle, BiXCircle } from "react-icons/bi";
+import { BiError, BiWifi, BiCheckCircle, BiXCircle, BiNetworkChart } from "react-icons/bi";
 import { MdSettingsEthernet } from "react-icons/md";
 import { useTranslation } from "next-i18next";
 import { SiUbiquiti } from "react-icons/si";
@@ -48,19 +48,12 @@ export default function Widget({ options }) {
   const wan = defaultSite.health.find(h => h.subsystem === "wan");
   const lan = defaultSite.health.find(h => h.subsystem === "lan");
   const wlan = defaultSite.health.find(h => h.subsystem === "wlan");
-  const data = {
-    name: wan.gw_name,
-    uptime: wan["gw_system-stats"].uptime,
-    up: wan.status === 'ok',
-    wlan: {
-      users: wlan.num_user,
-      status: wlan.status
-    },
-    lan: {
-      users: lan.num_user,
-      status: lan.status
-    }
-  };
+  [wan, lan, wlan].forEach(s => {
+    s.up = s.status === "ok" // eslint-disable-line no-param-reassign
+    s.show = s.status !== "unknown" // eslint-disable-line no-param-reassign
+  });
+  const name = wan.gw_name ?? defaultSite.desc;
+  const uptime = wan["gw_system-stats"] ? wan["gw_system-stats"].uptime : null;
 
   return (
     <div className="flex-none flex flex-row items-center mr-3 py-1.5">
@@ -68,52 +61,77 @@ export default function Widget({ options }) {
         <div className="flex flex-row ml-3">
           <SiUbiquiti className="text-theme-800 dark:text-theme-200 w-3 h-3 mr-1" />
           <div className="text-theme-800 dark:text-theme-200 text-xs font-bold flex flex-row justify-between">
-            {data.name}
+            {name}
           </div>
         </div>
         <div className="flex flex-row ml-3 text-[10px] justify-between">
-          <div className="flex flex-row" title={t("unifi.uptime")}>
+          {uptime && <div className="flex flex-row" title={t("unifi.uptime")}>
             <div className="pr-0.5 text-theme-800 dark:text-theme-200">
               {t("common.number", {
-                value: data.uptime / 86400,
+                value: uptime / 86400,
                 maximumFractionDigits: 1,
               })}
             </div>
             <div className="pr-1 text-theme-800 dark:text-theme-200">{t("unifi.days")}</div>
-          </div>
-          <div className="flex flex-row">
+          </div>}
+          {wan.show && <div className="flex flex-row">
             <div className="pr-1 text-theme-800 dark:text-theme-200">{t("unifi.wan")}</div>
-            { data.up
+            {wan.up
               ? <BiCheckCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
               : <BiXCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
             }
-          </div>
+          </div>}
+          {!wan.show && !lan.show && wlan.show && <div className="flex flex-row">
+            <div className="pr-1 text-theme-800 dark:text-theme-200">{t("unifi.wlan")}</div>
+            {wlan.up
+              ? <BiCheckCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
+              : <BiXCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
+            }
+          </div>}
+          {!wan.show && !wlan.show && lan.show && <div className="flex flex-row">
+            <div className="pr-1 text-theme-800 dark:text-theme-200">{t("unifi.lan")}</div>
+            {lan.up
+              ? <BiCheckCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
+              : <BiXCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
+            }
+          </div>}
         </div>
       </div>
       <div className="flex flex-col">
-        <div className="flex flex-row ml-3 py-0.5">
+        {wlan.show && <div className="flex flex-row ml-3 py-0.5">
           <BiWifi className="text-theme-800 dark:text-theme-200 w-4 h-4 mr-1" />
           <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between" title={t("unifi.users")}>
             <div className="pr-0.5">
               {t("common.number", {
-                value: data.wlan.users,
+                value: wlan.num_user,
                 maximumFractionDigits: 0,
               })}
             </div>
           </div>
-        </div>
-        <div className="flex flex-row ml-3 pb-0.5">
+        </div>}
+        {lan.show && <div className="flex flex-row ml-3 pb-0.5">
           <MdSettingsEthernet className="text-theme-800 dark:text-theme-200 w-4 h-4 mr-1" />
           <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between" title={t("unifi.users")}>
             <div className="pr-0.5">
               {t("common.number", {
-                value: data.lan.users,
+                value: lan.num_user,
                 maximumFractionDigits: 0,
               })}
             </div>
           </div>
+        </div>}
+        {(wlan.show && !lan.show || !wlan.show && lan.show) && <div className="flex flex-row ml-3 py-0.5">
+          <BiNetworkChart className="text-theme-800 dark:text-theme-200 w-4 h-4 mr-1" />
+          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between" title={t("unifi.devices")}>
+            <div className="pr-0.5">
+              {t("common.number", {
+                value: wlan.show ? wlan.num_adopted : lan.num_adopted,
+                maximumFractionDigits: 0,
+              })}
             </div>
           </div>
+        </div>}
+      </div>
     </div>
   );
 }

src/widgets/unifi/component.jsx

@@ -31,28 +31,25 @@ export default function Component({ service }) {
     const wan = defaultSite.health.find(h => h.subsystem === "wan");
     const lan = defaultSite.health.find(h => h.subsystem === "lan");
     const wlan = defaultSite.health.find(h => h.subsystem === "wlan");
-    const data = {
-        name: wan.gw_name,
-        uptime: wan["gw_system-stats"].uptime,
-        up: wan.status === 'ok',
-        wlan: {
-            users: wlan.num_user,
-            status: wlan.status
-        },
-        lan: {
-            users: lan.num_user,
-            status: lan.status
-        },
-    };
+    [wan, lan, wlan].forEach(s => {
+        s.up = s.status === "ok" // eslint-disable-line no-param-reassign
+        s.show = s.status !== "unknown" // eslint-disable-line no-param-reassign
+    });
 
-    const uptime = `${t("common.number", { value: data.uptime / 86400, maximumFractionDigits: 1 })} ${t("unifi.days")}`;
+    const uptime = wan["gw_system-stats"] ? `${t("common.number", { value: wan["gw_system-stats"].uptime / 86400, maximumFractionDigits: 1 })} ${t("unifi.days")}` : null;
 
     return (
         <Container service={service}>
-            <Block label="unifi.uptime" value={ uptime } />
-            <Block label="unifi.wan" value={ data.up ? t("unifi.up") : t("unifi.down") } />
-            <Block label="unifi.lan_users" value={ t("common.number", { value: data.lan.users }) } />
-            <Block label="unifi.wlan_users" value={ t("common.number", { value: data.wlan.users }) } />
+            {uptime && <Block label="unifi.uptime" value={ uptime } />}
+            {wan.show && <Block label="unifi.wan" value={ wan.up ? t("unifi.up") : t("unifi.down") } />}
+            
+            {lan.show && <Block label="unifi.lan_users" value={ t("common.number", { value: lan.num_user }) } />}
+            {lan.show && !wlan.show && <Block label="unifi.lan_devices" value={ t("common.number", { value: lan.num_adopted }) } />}
+            {lan.show && !wlan.show && <Block label="unifi.lan" value={ lan.up ? t("unifi.up") : t("unifi.down") } />}
+            
+            {wlan.show && <Block label="unifi.wlan_users" value={ t("common.number", { value: wlan.num_user }) } />}
+            {wlan.show && !lan.show && <Block label="unifi.wlan_devices" value={ t("common.number", { value: wlan.num_adopted }) } />}
+            {wlan.show && !lan.show && <Block label="unifi.wlan" value={ wlan.up ? t("unifi.up") : t("unifi.down") } />}
         </Container>
     );
 }