root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: net transfer badge

Browse Source
This commit is contained in:
hamster1963 2024-10-11 12:57:49 +08:00
parent 8a197e88b6
commit 129ffa9853
1 changed files with 64 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/ServerCard.tsx
View File

@ -2,13 +2,14 @@ import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
import ServerCardPopover from "@/components/ServerCardPopover"; import ServerCardPopover from "@/components/ServerCardPopover";
import ServerFlag from "@/components/ServerFlag"; import ServerFlag from "@/components/ServerFlag";
import ServerUsageBar from "@/components/ServerUsageBar"; import ServerUsageBar from "@/components/ServerUsageBar";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card"; import { Card } from "@/components/ui/card";
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { cn, formatNezhaInfo } from "@/lib/utils"; import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
import { useLocale, useTranslations } from "next-intl"; import { useLocale, useTranslations } from "next-intl";
import { env } from "next-runtime-env"; import { env } from "next-runtime-env";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@ -25,6 +26,8 @@ export default function ServerCard({
const showFlag = env("NEXT_PUBLIC_ShowFlag") === "true"; const showFlag = env("NEXT_PUBLIC_ShowFlag") === "true";
const showNetTransfer = env("NEXT_PUBLIC_ShowNetTransfer") === "true";
const locale = useLocale(); const locale = useLocale();
return online ? ( return online ? (
@ -52,12 +55,13 @@ export default function ServerCard({
<ServerCardPopover status={props.status} host={props.host} /> <ServerCardPopover status={props.status} host={props.host} />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<section <div
onClick={() => { onClick={() => {
router.push(`/${locale}/${id}`); router.push(`/${locale}/${id}`);
}} }}
className={"grid cursor-pointer grid-cols-5 items-center gap-3"} className="flex flex-col gap-2 cursor-pointer"
> >
<section className={"grid grid-cols-5 items-center gap-3"}>
<div className={"flex w-14 flex-col"}> <div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("CPU")}</p> <p className="text-xs text-muted-foreground">{t("CPU")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
@ -92,6 +96,34 @@ export default function ServerCard({
</div> </div>
</div> </div>
</section> </section>
{showNetTransfer && (
<section
onClick={() => {
router.push(`/${locale}/${id}`);
}}
className={"flex items-center justify-between gap-1"}
>
<Badge
variant="secondary"
className="items-center justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
style={{
width: `${(serverInfo.status.NetInTransfer / (serverInfo.status.NetInTransfer + serverInfo.status.NetOutTransfer)) * 100}%`,
}}
>
{t("Upload")}:{formatBytes(serverInfo.status.NetInTransfer)}
</Badge>
<Badge
variant="outline"
className="items-center justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
style={{
width: `${(serverInfo.status.NetOutTransfer / (serverInfo.status.NetInTransfer + serverInfo.status.NetOutTransfer)) * 100}%`,
}}
>
{t("Download")}:{formatBytes(serverInfo.status.NetOutTransfer)}
</Badge>
</section>
)}
</div>
</Card> </Card>
) : ( ) : (
<Card <Card