70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import axios from "axios";
|
|
import { useEffect, useState } from "react";
|
|
import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
|
|
import parseTraffic from "../utils/parse-traffic";
|
|
import { Typography } from "@mui/material";
|
|
import { Box } from "@mui/system";
|
|
|
|
const Traffic = () => {
|
|
const [traffic, setTraffic] = useState({ up: 0, down: 0 });
|
|
|
|
useEffect(() => {
|
|
const onTraffic = () => {
|
|
axios({
|
|
url: `http://127.0.0.1:9090/traffic`,
|
|
method: "GET",
|
|
onDownloadProgress: (progressEvent) => {
|
|
const data = progressEvent.currentTarget.response || "";
|
|
const lastData = data.slice(data.trim().lastIndexOf("\n") + 1);
|
|
try {
|
|
if (lastData) setTraffic(JSON.parse(lastData));
|
|
} catch {}
|
|
},
|
|
}).catch(() => setTimeout(onTraffic, 500));
|
|
};
|
|
|
|
onTraffic();
|
|
}, []);
|
|
|
|
const [up, upUnit] = parseTraffic(traffic.up);
|
|
const [down, downUnit] = parseTraffic(traffic.down);
|
|
|
|
const valStyle: any = {
|
|
component: "span",
|
|
color: "primary",
|
|
textAlign: "center",
|
|
sx: { flex: "1 1 54px" },
|
|
};
|
|
const unitStyle: any = {
|
|
component: "span",
|
|
color: "grey.500",
|
|
fontSize: "12px",
|
|
textAlign: "right",
|
|
sx: { flex: "0 1 28px", userSelect: "none" },
|
|
};
|
|
|
|
return (
|
|
<Box width="110px">
|
|
<Box mb={2} display="flex" alignItems="center" whiteSpace="nowrap">
|
|
<ArrowUpward
|
|
fontSize="small"
|
|
color={+up > 0 ? "primary" : "disabled"}
|
|
/>
|
|
<Typography {...valStyle}>{up}</Typography>
|
|
<Typography {...unitStyle}>{upUnit}</Typography>
|
|
</Box>
|
|
|
|
<Box display="flex" alignItems="center" whiteSpace="nowrap">
|
|
<ArrowDownward
|
|
fontSize="small"
|
|
color={+down > 0 ? "primary" : "disabled"}
|
|
/>
|
|
<Typography {...valStyle}>{down}</Typography>
|
|
<Typography {...unitStyle}>{downUnit}</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Traffic;
|