open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Better support non-OS Unifi Controllers

Browse Source
pull/398/head
Michael Shamoon 2 years ago
parent 4ea279856f
commit 3d89d7ad1b
4 changed files with 67 additions and 47 deletions
Show Stats Download Patch File Download Diff File

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

@ -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",

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

@ -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>;

70
src/components/widgets/unifi_console/unifi_console.jsx
Unescape 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 { 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,51 +61,76 @@ 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>
);

35
src/widgets/unifi/component.jsx
Unescape View File

@ -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
},
};
const uptime = `${t("common.number", { value: data.uptime / 86400, maximumFractionDigits: 1 })} ${t("unifi.days")}`;
[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 = 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>
);
}

Write Preview
Loading…
Cancel
Save