Make this nice
This commit is contained in:
parent
e7c5158c60
commit
9fe2622a04
@ -1,5 +1,5 @@
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { FaNetworkWired, FaAngleUp, FaAngleDown } from "react-icons/fa";
|
import { FaNetworkWired } from "react-icons/fa";
|
||||||
import { useTranslation } from "next-i18next";
|
import { useTranslation } from "next-i18next";
|
||||||
|
|
||||||
import Resource from "../widget/resource";
|
import Resource from "../widget/resource";
|
||||||
@ -7,6 +7,7 @@ import Error from "../widget/error";
|
|||||||
|
|
||||||
export default function Network({ options, refresh = 1500 }) {
|
export default function Network({ options, refresh = 1500 }) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
if (options.network === true) options.network = "default";
|
if (options.network === true) options.network = "default";
|
||||||
|
|
||||||
const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
|
const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
|
||||||
@ -21,11 +22,12 @@ export default function Network({ options, refresh = 1500 }) {
|
|||||||
return (
|
return (
|
||||||
<Resource
|
<Resource
|
||||||
icon={FaNetworkWired}
|
icon={FaNetworkWired}
|
||||||
value="-"
|
value="- ↑"
|
||||||
label={<FaAngleUp />}
|
label="- ↓"
|
||||||
expandedValue="-"
|
expandedValue="- ↑"
|
||||||
expandedLabel={<FaAngleDown />}
|
expandedLabel="- ↓"
|
||||||
percentage="0"
|
percentage="0"
|
||||||
|
wide
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -33,16 +35,12 @@ export default function Network({ options, refresh = 1500 }) {
|
|||||||
return (
|
return (
|
||||||
<Resource
|
<Resource
|
||||||
icon={FaNetworkWired}
|
icon={FaNetworkWired}
|
||||||
value={`${t("common.byterate", { value: data?.network?.tx_sec })} / ${t("common.byterate", {
|
value={`${t("common.byterate", { value: data?.network?.tx_sec })} ↑`}
|
||||||
value: data?.network?.rx_sec,
|
label={`${t("common.byterate", { value: data?.network?.rx_sec })} ↓`}
|
||||||
})}`}
|
expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} ↑`}
|
||||||
label={data.interface}
|
expandedLabel={`${t("common.bbytes", { value: data?.network?.rx_bytes })} ↓`}
|
||||||
expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} / ${t("common.bbytes", {
|
|
||||||
value: data?.network?.rx_bytes,
|
|
||||||
})}`}
|
|
||||||
expandedLabel={data.interface}
|
|
||||||
expanded={options.expanded}
|
expanded={options.expanded}
|
||||||
wide={true}
|
wide
|
||||||
percentage="0"
|
percentage="0"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -20,8 +20,8 @@ export default function Resource({
|
|||||||
>
|
>
|
||||||
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
|
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
|
||||||
<div
|
<div
|
||||||
className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""} ${
|
className={`flex flex-col ml-3 text-left ${expanded ? " expanded" : ""} ${
|
||||||
wide ? " min-w-[170px]" : ""
|
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="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user