wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: CycleTransferStats display

Browse Source
This commit is contained in:
hamster1963 2024-11-30 22:58:52 +08:00
parent 1ae404ae84
commit 1970248ae6
5 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CycleTransferStats.tsx
View File

@ -12,7 +12,7 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
className,
}) => {
return (
<>
<section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
{Object.entries(cycleStats).map(([cycleId, cycleData]) => {
const serverStats = Object.entries(cycleData.server_name).map(
([serverId, serverName]) => ({
@ -35,7 +35,7 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
/>
);
})}
</>
</section>
);
};

48
src/components/CycleTransferStatsClient.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { cn } from "@/lib/utils";
import { formatBytes } from "@/lib/format";
import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
interface CycleTransferStatsClientProps {
name: string;
@ -27,25 +28,36 @@ export const CycleTransferStatsClient: React.FC<
)}
>
<div className="space-y-1">
{/* <div className="flex justify-between items-center">
<span className=" font-semibold text-sm">{name}</span>
<span className="text-stone-600 dark:text-stone-400 text-xs">
{new Date(from).toLocaleDateString()} -{" "}
{new Date(to).toLocaleDateString()}
</span>
</div> */}
<div className="space-y-2">
{serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
const progress = (transfer / max) * 100;
return (
<div key={serverId} className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-sm font-semibold">{serverName}</span>
<span className="text-sm text-stone-600 dark:text-stone-400 font-semibold">
{formatBytes(transfer)} / {formatBytes(max)}
<section className="flex justify-between items-center">
<div className=" bg-blue-600 w-fit text-white px-1 py-0.5 rounded text-[10px]">
{name}
</div>
<span className="text-stone-600 dark:text-stone-400 text-xs">
{new Date(from).toLocaleDateString()} -{" "}
{new Date(to).toLocaleDateString()}
</span>
</div>
</section>
<section className="flex justify-between items-center">
<span className="text-sm font-semibold">{serverName}</span>
<div className="flex items-center gap-1">
<p className="text-xs text-end w-10 font-medium">
{progress.toFixed(0)}%
</p>
<AnimatedCircularProgressBar
className="size-4 text-[0px]"
max={100}
min={0}
value={progress}
primaryColor="hsl(var(--chart-1))"
/>
</div>
</section>
<div className="w-full bg-neutral-200 dark:bg-neutral-800 rounded-full h-2.5">
<div
className="bg-blue-600 h-2.5 rounded-full"
@ -57,15 +69,9 @@ export const CycleTransferStatsClient: React.FC<
<div className="text-xs text-stone-500 dark:text-stone-400">
Next update: {new Date(nextUpdate).toLocaleString()}
</div>
<section className="flex items-center gap-2">
<span className="text-stone-600 dark:text-stone-400 text-xs">
{new Date(from).toLocaleDateString()} -{" "}
{new Date(to).toLocaleDateString()}
</span>
<div className=" bg-blue-600 text-white px-1 py-0.5 rounded text-[10px]">
{name}
</div>
</section>
<span className="text-xs text-stone-600 dark:text-stone-400 font-semibold">
{formatBytes(transfer)} / {formatBytes(max)}
</span>
</section>
</div>
);

28
src/components/ServerCard.tsx
View File

@ -104,19 +104,21 @@ 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("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>
<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>

3
src/components/ServerDetailOverview.tsx
View File

@ -189,7 +189,7 @@ export default function ServerDetailOverview({
</Card>
</section>
<section className="flex flex-wrap gap-2 mt-1">
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<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">
@ -219,7 +219,6 @@ export default function ServerDetailOverview({
</section>
</CardContent>
</Card>
</section>
</div>
);

16
src/components/ServiceTracker.tsx
View File

@ -47,15 +47,13 @@ export const ServiceTracker: React.FC = () => {
return (
<div className="mt-4 w-full mx-auto ">
<section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
{serviceData.data.cycle_transfer_stats && (
<div>
<CycleTransferStatsCard
cycleStats={serviceData.data.cycle_transfer_stats}
/>
</div>
)}
</section>
{serviceData.data.cycle_transfer_stats && (
<div>
<CycleTransferStatsCard
cycleStats={serviceData.data.cycle_transfer_stats}
/>
</div>
)}
<section className="grid grid-cols-1 md:grid-cols-2 mt-4 gap-2 md:gap-4">
{Object.entries(serviceData.data.services).map(([name, data]) => {
const { days, uptime, avgDelay } = processServiceData(data);