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

Merge pull request #56 from hamster1963/show-net-transfer

Browse Source 
feat: show net transfer
This commit is contained in:
仓鼠 2024-10-11 13:02:13 +08:00 committed by GitHub
commit f8f7b5190a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 70 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env.example
View File

@ -3,5 +3,6 @@ NezhaAuth=your-nezha-api-token
DefaultLocale=zh
NEXT_PUBLIC_NezhaFetchInterval=5000
NEXT_PUBLIC_ShowFlag=true
NEXT_PUBLIC_DisableCartoon=true
NEXT_PUBLIC_ShowTag=true
NEXT_PUBLIC_DisableCartoon=false
NEXT_PUBLIC_ShowTag=true
NEXT_PUBLIC_ShowNetTransfer=false

1
README.md
View File

@ -21,6 +21,7 @@
| NEXT_PUBLIC_ShowFlag | 是否显示旗帜 | **默认**：false |
| NEXT_PUBLIC_DisableCartoon | 是否禁用卡通人物 | **默认**：false |
| NEXT_PUBLIC_ShowTag | 是否显示标签 | **默认**：false |
| NEXT_PUBLIC_ShowNetTransfer | 是否显示流量信息 | **默认**：false |
#### 多语言支持

96
components/ServerCard.tsx
View File

@ -2,13 +2,14 @@ import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
import ServerCardPopover from "@/components/ServerCardPopover";
import ServerFlag from "@/components/ServerFlag";
import ServerUsageBar from "@/components/ServerUsageBar";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { cn, formatNezhaInfo } from "@/lib/utils";
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
import { useLocale, useTranslations } from "next-intl";
import { env } from "next-runtime-env";
import { useRouter } from "next/navigation";
@ -25,6 +26,8 @@ export default function ServerCard({
const showFlag = env("NEXT_PUBLIC_ShowFlag") === "true";
const showNetTransfer = env("NEXT_PUBLIC_ShowNetTransfer") === "true";
const locale = useLocale();
return online ? (
@ -52,46 +55,75 @@ export default function ServerCard({
<ServerCardPopover status={props.status} host={props.host} />
</PopoverContent>
</Popover>
<section
<div
onClick={() => {
router.push(`/${locale}/${id}`);
}}
className={"grid cursor-pointer grid-cols-5 items-center gap-3"}
className="flex flex-col gap-2 cursor-pointer"
>
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("CPU")}</p>
<div className="flex items-center text-xs font-semibold">
{cpu.toFixed(2)}%
<section className={"grid grid-cols-5 items-center gap-3"}>
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("CPU")}</p>
<div className="flex items-center text-xs font-semibold">
{cpu.toFixed(2)}%
</div>
<ServerUsageBar value={cpu} />
</div>
<ServerUsageBar value={cpu} />
</div>
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Mem")}</p>
<div className="flex items-center text-xs font-semibold">
{mem.toFixed(2)}%
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Mem")}</p>
<div className="flex items-center text-xs font-semibold">
{mem.toFixed(2)}%
</div>
<ServerUsageBar value={mem} />
</div>
<ServerUsageBar value={mem} />
</div>
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("STG")}</p>
<div className="flex items-center text-xs font-semibold">
{stg.toFixed(2)}%
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("STG")}</p>
<div className="flex items-center text-xs font-semibold">
{stg.toFixed(2)}%
</div>
<ServerUsageBar value={stg} />
</div>
<ServerUsageBar value={stg} />
</div>
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Upload")}</p>
<div className="flex items-center text-xs font-semibold">
{up.toFixed(2)}M/s
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Upload")}</p>
<div className="flex items-center text-xs font-semibold">
{up.toFixed(2)}M/s
</div>
</div>
</div>
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Download")}</p>
<div className="flex items-center text-xs font-semibold">
{down.toFixed(2)}M/s
<div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Download")}</p>
<div className="flex items-center text-xs font-semibold">
{down.toFixed(2)}M/s
</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

3
docker/.env.example
View File

@ -3,5 +3,6 @@ NezhaAuth=your-nezha-api-token
DefaultLocale=zh
NEXT_PUBLIC_NezhaFetchInterval=5000
NEXT_PUBLIC_ShowFlag=true
NEXT_PUBLIC_DisableCartoon=true
NEXT_PUBLIC_DisableCartoon=false
NEXT_PUBLIC_ShowTag=true
NEXT_PUBLIC_ShowNetTransfer=false