homepage/src/widgets/pfsenseapi/component.jsx

83 lines
2.4 KiB
JavaScript

import { useTranslation } from "next-i18next";
import Container from "components/services/widget/container";
import Block from "components/services/widget/block";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { data: systemData, error: systemError } = useWidgetAPI(widget, "system");
const { data: interfaceData, error: interfaceError } = useWidgetAPI(widget, "interface");
const showDiskUsage = widget.fields?.includes('disk');
const showWanIP = widget.fields?.includes('wanIP');
if (systemError || interfaceError) {
const finalError = systemError ?? interfaceError;
return <Container service={service} error={ finalError } />;
}
if (!systemData || !interfaceData) {
return (
<Container service={service}>
<Block label="pfsenseapi.load" />
<Block label="pfsenseapi.memory" />
<Block label="pfsenseapi.temp" />
<Block label="pfsenseapi.wanStatus" />
{showWanIP && <Block label="pfsenseapi.wanIP" />}
{showDiskUsage && <Block label="pfsenseapi.disk" />}
</Container>
);
}
const loadAvg = systemData.data.load_avg[0];
const memory = systemData.data.mem_usage;
const tempC = systemData.data.temp_c
const disk = systemData.data.disk_usage
const wanState = interfaceData.data.filter(l => l.hwif === widget.wan)[0].status
const wanStatus = (wanState === "up") ?
<span className="text-green-500">{t("pfsenseapi.up")}</span>:
<span className="text-red-500">{t("pfsenseapi.down")}</span>;
const wanIP = interfaceData.data.filter(l => l.hwif === widget.wan)[0].ipaddr
return (
<Container service={service}>
<Block
label="pfsenseapi.load"
value={loadAvg}
/>
<Block
label="pfsenseapi.memory"
value={t("common.percent", { value: (memory * 100).toFixed(2) })}
/>
<Block
label="pfsenseapi.temp"
value={`${tempC} °C`}
/>
<Block
label="pfsenseapi.wanStatus"
value={wanStatus}
/>
{
showWanIP
&&
<Block
label="pfsenseapi.wanIP"
value={wanIP}
/>
}
{
showDiskUsage
&&
<Block
label="pfsenseapi.disk"
value={t("common.percent", { value: (disk * 100).toFixed(2) })}
/>
}
</Container>
);
}