Enhancement: resources network widget (#4327)

This commit is contained in:
shamoon 2024-11-24 22:43:13 -08:00
parent a06964dd17
commit 897309a47c
No known key found for this signature in database
6 changed files with 86 additions and 4 deletions

View file

@ -0,0 +1,47 @@
import useSWR from "swr";
import { FaNetworkWired } from "react-icons/fa";
import { useTranslation } from "next-i18next";
import Resource from "../widget/resource";
import Error from "../widget/error";
export default function Network({ options, refresh = 1500 }) {
const { t } = useTranslation();
// eslint-disable-next-line no-param-reassign
if (options.network === true) options.network = "default";
const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
refreshInterval: refresh,
});
if (error || data?.error) {
return <Error />;
}
if (!data || !data.network) {
return (
<Resource
icon={FaNetworkWired}
value="- ↑"
label="- ↓"
expandedValue="- ↑"
expandedLabel="- ↓"
percentage="0"
wide
/>
);
}
return (
<Resource
icon={FaNetworkWired}
value={`${t("common.byterate", { value: data.network.tx_sec })} ↑`}
label={`${t("common.byterate", { value: data.network.rx_sec })} ↓`}
expandedValue={`${t("common.bytes", { value: data.network.tx_bytes })} ↑`}
expandedLabel={`${t("common.bytes", { value: data.network.rx_bytes })} ↓`}
expanded={options.expanded}
wide
percentage={(100 * data.network.rx_sec) / (data.network.rx_sec + data.network.tx_sec)}
/>
);
}

View file

@ -6,6 +6,7 @@ import Cpu from "./cpu";
import Memory from "./memory";
import CpuTemp from "./cputemp";
import Uptime from "./uptime";
import Network from "./network";
export default function Resources({ options }) {
const { expanded, units, diskUnits, tempmin, tempmax } = options;
@ -23,6 +24,7 @@ export default function Resources({ options }) {
<Disk key={disk} options={{ disk }} expanded={expanded} diskUnits={diskUnits} refresh={refresh} />
))
: options.disk && <Disk options={options} expanded={expanded} diskUnits={diskUnits} refresh={refresh} />}
{options.network && <Network options={options} refresh={refresh} />}
{options.cputemp && (
<CpuTemp expanded={expanded} units={units} refresh={refresh} tempmin={tempmin} tempmax={tempmax} />
)}

View file

@ -10,6 +10,7 @@ export default function Resource({
percentage,
expanded = false,
additionalClassNames = "",
wide = false,
}) {
const Icon = icon;
@ -18,7 +19,11 @@ export default function Resource({
className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${additionalClassNames}`}
>
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
<div className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""}`}>
<div
className={`flex flex-col ml-3 text-left ${expanded ? " expanded" : ""} ${
wide ? " min-w-[120px]" : "min-w-[85px]"
}`}
>
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{value}</div>
<div className="pr-1">{label}</div>