feat: detail net transfer info

This commit is contained in:
hamster1963 2024-11-30 22:44:48 +08:00
parent 4112333088
commit 1ae404ae84
5 changed files with 56 additions and 17 deletions

View File

@ -104,26 +104,26 @@ export default function ServerCard({
</div>
</section>
<section className={"flex items-center justify-between gap-1"}>
<Badge
variant="secondary"
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
>
{t("Upload")}:{formatBytes(serverInfo.state.net_out_transfer)}
</Badge>
<Badge
variant="outline"
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
>
{t("Download")}:{formatBytes(serverInfo.state.net_in_transfer)}
</Badge>
</section>
<Badge
variant="secondary"
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
>
{t("serverCard.upload")}:{formatBytes(serverInfo.state.net_out_transfer)}
</Badge>
<Badge
variant="outline"
className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
>
{t("serverCard.download")}:{formatBytes(serverInfo.state.net_in_transfer)}
</Badge>
</section>
</div>
</Card>
</section>
) : (
<Card
className={cn(
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
"flex flex-col lg:min-h-[91px] min-h-[123px] items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
)}
onClick={() => navigate(`/server/${serverInfo.id}`)}
>

View File

@ -188,6 +188,39 @@ export default function ServerDetailOverview({
</CardContent>
</Card>
</section>
<section className="flex flex-wrap gap-2 mt-1">
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
{t("serverDetail.upload")}
</p>
{server.state.net_out_transfer ? (
<div className="text-xs">
{" "}
{formatBytes(server.state.net_out_transfer)}{" "}
</div>
) : null}
</section>
</CardContent>
</Card>
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
{t("serverDetail.download")}
</p>
{server.state.net_in_transfer ? (
<div className="text-xs">
{" "}
{formatBytes(server.state.net_in_transfer)}{" "}
</div>
) : null}
</section>
</CardContent>
</Card>
</section>
</div>
);
}

View File

@ -33,7 +33,9 @@
"mem": "Mem",
"disk": "Disk",
"region": "Region",
"system": "System"
"system": "System",
"upload": "Upload",
"download": "Download"
},
"serverDetailChart": {
"process": "Process",

View File

@ -33,7 +33,9 @@
"mem": "内存",
"disk": "磁盘",
"region": "区域",
"system": "系统"
"system": "系统",
"upload": "上传",
"download": "下载"
},
"serverDetailChart": {
"process": "进程数",

View File

@ -33,7 +33,9 @@
"mem": "內存",
"disk": "磁盤",
"region": "地區",
"system": "系統"
"system": "系統",
"upload": "上傳",
"download": "下載"
},
"serverDetailChart": {
"process": "進程數",