Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Better support non-OS Unifi Controllers

Browse Source
This commit is contained in:
Michael Shamoon 2022-10-16 15:18:01 -07:00
parent 4ea279856f
commit 3d89d7ad1b
4 changed files with 66 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/locales/en/common.json
View File

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

2
src/components/services/widget/container.jsx
View File

@ -11,7 +11,7 @@ export default function Container({ error = false, children, service }) {
const fields = service?.widget?.fields; const fields = service?.widget?.fields;
const type = service?.widget?.type; const type = service?.widget?.type;
if (fields && 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>; return <div className="relative flex flex-row w-full">{visibleChildren}</div>;

70
src/components/widgets/unifi_console/unifi_console.jsx
View File

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

33
src/widgets/unifi/component.jsx
View File

@ -31,28 +31,25 @@ export default function Component({ service }) {
const wan = defaultSite.health.find(h => h.subsystem === "wan"); const wan = defaultSite.health.find(h => h.subsystem === "wan");
const lan = defaultSite.health.find(h => h.subsystem === "lan"); const lan = defaultSite.health.find(h => h.subsystem === "lan");
const wlan = defaultSite.health.find(h => h.subsystem === "wlan"); const wlan = defaultSite.health.find(h => h.subsystem === "wlan");
const data = { [wan, lan, wlan].forEach(s => {
name: wan.gw_name, s.up = s.status === "ok" // eslint-disable-line no-param-reassign
uptime: wan["gw_system-stats"].uptime, s.show = s.status !== "unknown" // eslint-disable-line no-param-reassign
up: wan.status === 'ok', });
wlan: {
users: wlan.num_user,
status: wlan.status
},
lan: {
users: lan.num_user,
status: lan.status
},
};
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 ( return (
<Container service={service}> <Container service={service}>
<Block label="unifi.uptime" value={ uptime } /> {uptime && <Block label="unifi.uptime" value={ uptime } />}
<Block label="unifi.wan" value={ data.up ? t("unifi.up") : t("unifi.down") } /> {wan.show && <Block label="unifi.wan" value={ wan.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 }) } /> {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> </Container>
); );
} }