mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 17:41:56 +08:00
feat: detail chart
This commit is contained in:
hamster1963
parent
b7d7c9cad8
commit
aae837c110
@ -23,6 +23,7 @@ export default tseslint.config(
|
|||||||
"warn",
|
"warn",
|
||||||
{ allowConstantExport: true },
|
{ allowConstantExport: true },
|
||||||
],
|
],
|
||||||
|
"react-hooks/exhaustive-deps": "off",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
@ -27,12 +27,13 @@
|
|||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"country-flag-icons": "^1.5.13",
|
"country-flag-icons": "^1.5.13",
|
||||||
"framer-motion": "^11.11.17",
|
"framer-motion": "^11.11.17",
|
||||||
"lucide-react": "^0.453.0",
|
"lucide-react": "^0.460.0",
|
||||||
"luxon": "^3.5.0",
|
"luxon": "^3.5.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-router-dom": "^6.28.0",
|
"react-router-dom": "^6.28.0",
|
||||||
"react-use-websocket": "^4.11.1",
|
"react-use-websocket": "^4.11.1",
|
||||||
|
"recharts": "^2.13.3",
|
||||||
"sonner": "^1.7.0",
|
"sonner": "^1.7.0",
|
||||||
"tailwind-merge": "^2.5.4",
|
"tailwind-merge": "^2.5.4",
|
||||||
"tailwindcss-animate": "^1.0.7"
|
"tailwindcss-animate": "^1.0.7"
|
||||||
|
|||||||
742
src/components/ServerDetailChart.tsx
Normal file
742
src/components/ServerDetailChart.tsx
Normal file
@ -0,0 +1,742 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { ChartConfig, ChartContainer } from "@/components/ui/chart";
|
||||||
|
import { formatNezhaInfo, formatRelativeTime } from "@/lib/utils";
|
||||||
|
import { NezhaAPI, NezhaAPIResponse } from "@/types/nezha-api";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import useWebSocket from "react-use-websocket";
|
||||||
|
import {
|
||||||
|
Area,
|
||||||
|
AreaChart,
|
||||||
|
CartesianGrid,
|
||||||
|
Line,
|
||||||
|
LineChart,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
} from "recharts";
|
||||||
|
import { ServerDetailChartLoading } from "./loading/ServerDetailLoading";
|
||||||
|
import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
|
||||||
|
|
||||||
|
type cpuChartData = {
|
||||||
|
timeStamp: string;
|
||||||
|
cpu: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type processChartData = {
|
||||||
|
timeStamp: string;
|
||||||
|
process: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type diskChartData = {
|
||||||
|
timeStamp: string;
|
||||||
|
disk: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type memChartData = {
|
||||||
|
timeStamp: string;
|
||||||
|
mem: number;
|
||||||
|
swap: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type networkChartData = {
|
||||||
|
timeStamp: string;
|
||||||
|
upload: number;
|
||||||
|
download: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type connectChartData = {
|
||||||
|
timeStamp: string;
|
||||||
|
tcp: number;
|
||||||
|
udp: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ServerDetailChart() {
|
||||||
|
const { id } = useParams();
|
||||||
|
const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
|
||||||
|
shouldReconnect: () => true,
|
||||||
|
reconnectInterval: 3000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 检查连接状态
|
||||||
|
if (readyState !== 1) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center">
|
||||||
|
<p className="font-semibold text-sm">connecting...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析消息
|
||||||
|
const nezhaWsData = lastMessage
|
||||||
|
? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
if (!nezhaWsData) {
|
||||||
|
return <ServerDetailChartLoading />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const server = nezhaWsData.servers.find((s) => s.id === Number(id));
|
||||||
|
|
||||||
|
if (!server) {
|
||||||
|
return <ServerDetailChartLoading />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
|
||||||
|
<CpuChart data={server} />
|
||||||
|
<ProcessChart data={server} />
|
||||||
|
<DiskChart data={server} />
|
||||||
|
<MemChart data={server} />
|
||||||
|
<NetworkChart data={server} />
|
||||||
|
<ConnectChart data={server} />
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CpuChart({ data }: { data: NezhaAPI }) {
|
||||||
|
const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
|
||||||
|
|
||||||
|
const { cpu } = formatNezhaInfo(data);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
const timestamp = Date.now().toString();
|
||||||
|
let newData = [] as cpuChartData[];
|
||||||
|
if (cpuChartData.length === 0) {
|
||||||
|
newData = [
|
||||||
|
{ timeStamp: timestamp, cpu: cpu },
|
||||||
|
{ timeStamp: timestamp, cpu: cpu },
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
|
||||||
|
}
|
||||||
|
if (newData.length > 30) {
|
||||||
|
newData.shift();
|
||||||
|
}
|
||||||
|
setCpuChartData(newData);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const chartConfig = {
|
||||||
|
cpu: {
|
||||||
|
label: "CPU",
|
||||||
|
},
|
||||||
|
} satisfies ChartConfig;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="px-6 py-3">
|
||||||
|
<section className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p className="text-md font-medium">CPU</p>
|
||||||
|
<section className="flex items-center gap-2">
|
||||||
|
<p className="text-xs text-end w-10 font-medium">
|
||||||
|
{cpu.toFixed(0)}%
|
||||||
|
</p>
|
||||||
|
<AnimatedCircularProgressBar
|
||||||
|
className="size-3 text-[0px]"
|
||||||
|
max={100}
|
||||||
|
min={0}
|
||||||
|
value={cpu}
|
||||||
|
primaryColor="hsl(var(--chart-1))"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<ChartContainer
|
||||||
|
config={chartConfig}
|
||||||
|
className="aspect-auto h-[130px] w-full"
|
||||||
|
>
|
||||||
|
<AreaChart
|
||||||
|
accessibilityLayer
|
||||||
|
data={cpuChartData}
|
||||||
|
margin={{
|
||||||
|
top: 12,
|
||||||
|
left: 12,
|
||||||
|
right: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CartesianGrid vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="timeStamp"
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
tickMargin={8}
|
||||||
|
minTickGap={200}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
tickFormatter={(value) => formatRelativeTime(value)}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
mirror={true}
|
||||||
|
tickMargin={-15}
|
||||||
|
domain={[0, 100]}
|
||||||
|
tickFormatter={(value) => `${value}%`}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="cpu"
|
||||||
|
type="step"
|
||||||
|
fill="hsl(var(--chart-1))"
|
||||||
|
fillOpacity={0.3}
|
||||||
|
stroke="hsl(var(--chart-1))"
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ChartContainer>
|
||||||
|
</section>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ProcessChart({ data }: { data: NezhaAPI }) {
|
||||||
|
const [processChartData, setProcessChartData] = useState(
|
||||||
|
[] as processChartData[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const { process } = formatNezhaInfo(data);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
const timestamp = Date.now().toString();
|
||||||
|
let newData = [] as processChartData[];
|
||||||
|
if (processChartData.length === 0) {
|
||||||
|
newData = [
|
||||||
|
{ timeStamp: timestamp, process: process },
|
||||||
|
{ timeStamp: timestamp, process: process },
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
newData = [
|
||||||
|
...processChartData,
|
||||||
|
{ timeStamp: timestamp, process: process },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
if (newData.length > 30) {
|
||||||
|
newData.shift();
|
||||||
|
}
|
||||||
|
setProcessChartData(newData);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const chartConfig = {
|
||||||
|
process: {
|
||||||
|
label: "Process",
|
||||||
|
},
|
||||||
|
} satisfies ChartConfig;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="px-6 py-3">
|
||||||
|
<section className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p className="text-md font-medium">{"Process"}</p>
|
||||||
|
<section className="flex items-center gap-2">
|
||||||
|
<p className="text-xs text-end w-10 font-medium">{process}</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<ChartContainer
|
||||||
|
config={chartConfig}
|
||||||
|
className="aspect-auto h-[130px] w-full"
|
||||||
|
>
|
||||||
|
<AreaChart
|
||||||
|
accessibilityLayer
|
||||||
|
data={processChartData}
|
||||||
|
margin={{
|
||||||
|
top: 12,
|
||||||
|
left: 12,
|
||||||
|
right: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CartesianGrid vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="timeStamp"
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
tickMargin={8}
|
||||||
|
minTickGap={200}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
tickFormatter={(value) => formatRelativeTime(value)}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
mirror={true}
|
||||||
|
tickMargin={-15}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="process"
|
||||||
|
type="step"
|
||||||
|
fill="hsl(var(--chart-2))"
|
||||||
|
fillOpacity={0.3}
|
||||||
|
stroke="hsl(var(--chart-2))"
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ChartContainer>
|
||||||
|
</section>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MemChart({ data }: { data: NezhaAPI }) {
|
||||||
|
const [memChartData, setMemChartData] = useState([] as memChartData[]);
|
||||||
|
|
||||||
|
const { mem, swap } = formatNezhaInfo(data);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
const timestamp = Date.now().toString();
|
||||||
|
let newData = [] as memChartData[];
|
||||||
|
if (memChartData.length === 0) {
|
||||||
|
newData = [
|
||||||
|
{ timeStamp: timestamp, mem: mem, swap: swap },
|
||||||
|
{ timeStamp: timestamp, mem: mem, swap: swap },
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
newData = [
|
||||||
|
...memChartData,
|
||||||
|
{ timeStamp: timestamp, mem: mem, swap: swap },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
if (newData.length > 30) {
|
||||||
|
newData.shift();
|
||||||
|
}
|
||||||
|
setMemChartData(newData);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const chartConfig = {
|
||||||
|
mem: {
|
||||||
|
label: "Mem",
|
||||||
|
},
|
||||||
|
swap: {
|
||||||
|
label: "Swap",
|
||||||
|
},
|
||||||
|
} satisfies ChartConfig;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="px-6 py-3">
|
||||||
|
<section className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<section className="flex items-center gap-4">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className=" text-xs text-muted-foreground">{"Mem"}</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<AnimatedCircularProgressBar
|
||||||
|
className="size-3 text-[0px]"
|
||||||
|
max={100}
|
||||||
|
min={0}
|
||||||
|
value={mem}
|
||||||
|
primaryColor="hsl(var(--chart-8))"
|
||||||
|
/>
|
||||||
|
<p className="text-xs font-medium">{mem.toFixed(0)}%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className=" text-xs text-muted-foreground">{"Swap"}</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<AnimatedCircularProgressBar
|
||||||
|
className="size-3 text-[0px]"
|
||||||
|
max={100}
|
||||||
|
min={0}
|
||||||
|
value={swap}
|
||||||
|
primaryColor="hsl(var(--chart-10))"
|
||||||
|
/>
|
||||||
|
<p className="text-xs font-medium">{swap.toFixed(0)}%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<ChartContainer
|
||||||
|
config={chartConfig}
|
||||||
|
className="aspect-auto h-[130px] w-full"
|
||||||
|
>
|
||||||
|
<AreaChart
|
||||||
|
accessibilityLayer
|
||||||
|
data={memChartData}
|
||||||
|
margin={{
|
||||||
|
top: 12,
|
||||||
|
left: 12,
|
||||||
|
right: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CartesianGrid vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="timeStamp"
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
tickMargin={8}
|
||||||
|
minTickGap={200}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
tickFormatter={(value) => formatRelativeTime(value)}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
mirror={true}
|
||||||
|
tickMargin={-15}
|
||||||
|
domain={[0, 100]}
|
||||||
|
tickFormatter={(value) => `${value}%`}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="mem"
|
||||||
|
type="step"
|
||||||
|
fill="hsl(var(--chart-8))"
|
||||||
|
fillOpacity={0.3}
|
||||||
|
stroke="hsl(var(--chart-8))"
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="swap"
|
||||||
|
type="step"
|
||||||
|
fill="hsl(var(--chart-10))"
|
||||||
|
fillOpacity={0.3}
|
||||||
|
stroke="hsl(var(--chart-10))"
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ChartContainer>
|
||||||
|
</section>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DiskChart({ data }: { data: NezhaAPI }) {
|
||||||
|
const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
|
||||||
|
|
||||||
|
const { disk } = formatNezhaInfo(data);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
const timestamp = Date.now().toString();
|
||||||
|
let newData = [] as diskChartData[];
|
||||||
|
if (diskChartData.length === 0) {
|
||||||
|
newData = [
|
||||||
|
{ timeStamp: timestamp, disk: disk },
|
||||||
|
{ timeStamp: timestamp, disk: disk },
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
|
||||||
|
}
|
||||||
|
if (newData.length > 30) {
|
||||||
|
newData.shift();
|
||||||
|
}
|
||||||
|
setDiskChartData(newData);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const chartConfig = {
|
||||||
|
disk: {
|
||||||
|
label: "Disk",
|
||||||
|
},
|
||||||
|
} satisfies ChartConfig;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="px-6 py-3">
|
||||||
|
<section className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p className="text-md font-medium">{"Disk"}</p>
|
||||||
|
<section className="flex items-center gap-2">
|
||||||
|
<p className="text-xs text-end w-10 font-medium">
|
||||||
|
{disk.toFixed(0)}%
|
||||||
|
</p>
|
||||||
|
<AnimatedCircularProgressBar
|
||||||
|
className="size-3 text-[0px]"
|
||||||
|
max={100}
|
||||||
|
min={0}
|
||||||
|
value={disk}
|
||||||
|
primaryColor="hsl(var(--chart-5))"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<ChartContainer
|
||||||
|
config={chartConfig}
|
||||||
|
className="aspect-auto h-[130px] w-full"
|
||||||
|
>
|
||||||
|
<AreaChart
|
||||||
|
accessibilityLayer
|
||||||
|
data={diskChartData}
|
||||||
|
margin={{
|
||||||
|
top: 12,
|
||||||
|
left: 12,
|
||||||
|
right: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CartesianGrid vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="timeStamp"
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
tickMargin={8}
|
||||||
|
minTickGap={200}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
tickFormatter={(value) => formatRelativeTime(value)}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
mirror={true}
|
||||||
|
tickMargin={-15}
|
||||||
|
domain={[0, 100]}
|
||||||
|
tickFormatter={(value) => `${value}%`}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="disk"
|
||||||
|
type="step"
|
||||||
|
fill="hsl(var(--chart-5))"
|
||||||
|
fillOpacity={0.3}
|
||||||
|
stroke="hsl(var(--chart-5))"
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ChartContainer>
|
||||||
|
</section>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NetworkChart({ data }: { data: NezhaAPI }) {
|
||||||
|
const [networkChartData, setNetworkChartData] = useState(
|
||||||
|
[] as networkChartData[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const { up, down } = formatNezhaInfo(data);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
const timestamp = Date.now().toString();
|
||||||
|
let newData = [] as networkChartData[];
|
||||||
|
if (networkChartData.length === 0) {
|
||||||
|
newData = [
|
||||||
|
{ timeStamp: timestamp, upload: up, download: down },
|
||||||
|
{ timeStamp: timestamp, upload: up, download: down },
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
newData = [
|
||||||
|
...networkChartData,
|
||||||
|
{ timeStamp: timestamp, upload: up, download: down },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
if (newData.length > 30) {
|
||||||
|
newData.shift();
|
||||||
|
}
|
||||||
|
setNetworkChartData(newData);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
let maxDownload = Math.max(...networkChartData.map((item) => item.download));
|
||||||
|
maxDownload = Math.ceil(maxDownload);
|
||||||
|
if (maxDownload < 1) {
|
||||||
|
maxDownload = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
const chartConfig = {
|
||||||
|
upload: {
|
||||||
|
label: "Upload",
|
||||||
|
},
|
||||||
|
download: {
|
||||||
|
label: "Download",
|
||||||
|
},
|
||||||
|
} satisfies ChartConfig;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="px-6 py-3">
|
||||||
|
<section className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<section className="flex items-center gap-4">
|
||||||
|
<div className="flex flex-col w-20">
|
||||||
|
<p className="text-xs text-muted-foreground">{"Upload"}</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
|
||||||
|
<p className="text-xs font-medium">{up.toFixed(2)} M/s</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col w-20">
|
||||||
|
<p className=" text-xs text-muted-foreground">{"Download"}</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
|
||||||
|
<p className="text-xs font-medium">{down.toFixed(2)} M/s</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<ChartContainer
|
||||||
|
config={chartConfig}
|
||||||
|
className="aspect-auto h-[130px] w-full"
|
||||||
|
>
|
||||||
|
<LineChart
|
||||||
|
accessibilityLayer
|
||||||
|
data={networkChartData}
|
||||||
|
margin={{
|
||||||
|
top: 12,
|
||||||
|
left: 12,
|
||||||
|
right: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CartesianGrid vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="timeStamp"
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
tickMargin={8}
|
||||||
|
minTickGap={200}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
tickFormatter={(value) => formatRelativeTime(value)}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
mirror={true}
|
||||||
|
tickMargin={-15}
|
||||||
|
type="number"
|
||||||
|
minTickGap={50}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
domain={[1, maxDownload]}
|
||||||
|
tickFormatter={(value) => `${value.toFixed(0)}M/s`}
|
||||||
|
/>
|
||||||
|
<Line
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="upload"
|
||||||
|
type="linear"
|
||||||
|
stroke="hsl(var(--chart-1))"
|
||||||
|
strokeWidth={1}
|
||||||
|
dot={false}
|
||||||
|
/>
|
||||||
|
<Line
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="download"
|
||||||
|
type="linear"
|
||||||
|
stroke="hsl(var(--chart-4))"
|
||||||
|
strokeWidth={1}
|
||||||
|
dot={false}
|
||||||
|
/>
|
||||||
|
</LineChart>
|
||||||
|
</ChartContainer>
|
||||||
|
</section>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ConnectChart({ data }: { data: NezhaAPI }) {
|
||||||
|
const [connectChartData, setConnectChartData] = useState(
|
||||||
|
[] as connectChartData[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const { tcp, udp } = formatNezhaInfo(data);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
const timestamp = Date.now().toString();
|
||||||
|
let newData = [] as connectChartData[];
|
||||||
|
if (connectChartData.length === 0) {
|
||||||
|
newData = [
|
||||||
|
{ timeStamp: timestamp, tcp: tcp, udp: udp },
|
||||||
|
{ timeStamp: timestamp, tcp: tcp, udp: udp },
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
newData = [
|
||||||
|
...connectChartData,
|
||||||
|
{ timeStamp: timestamp, tcp: tcp, udp: udp },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
if (newData.length > 30) {
|
||||||
|
newData.shift();
|
||||||
|
}
|
||||||
|
setConnectChartData(newData);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const chartConfig = {
|
||||||
|
tcp: {
|
||||||
|
label: "TCP",
|
||||||
|
},
|
||||||
|
udp: {
|
||||||
|
label: "UDP",
|
||||||
|
},
|
||||||
|
} satisfies ChartConfig;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="px-6 py-3">
|
||||||
|
<section className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<section className="flex items-center gap-4">
|
||||||
|
<div className="flex flex-col w-12">
|
||||||
|
<p className="text-xs text-muted-foreground">TCP</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
|
||||||
|
<p className="text-xs font-medium">{tcp}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col w-12">
|
||||||
|
<p className=" text-xs text-muted-foreground">UDP</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
|
||||||
|
<p className="text-xs font-medium">{udp}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<ChartContainer
|
||||||
|
config={chartConfig}
|
||||||
|
className="aspect-auto h-[130px] w-full"
|
||||||
|
>
|
||||||
|
<LineChart
|
||||||
|
accessibilityLayer
|
||||||
|
data={connectChartData}
|
||||||
|
margin={{
|
||||||
|
top: 12,
|
||||||
|
left: 12,
|
||||||
|
right: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CartesianGrid vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="timeStamp"
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
tickMargin={8}
|
||||||
|
minTickGap={200}
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
tickFormatter={(value) => formatRelativeTime(value)}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
mirror={true}
|
||||||
|
tickMargin={-15}
|
||||||
|
type="number"
|
||||||
|
interval="preserveStartEnd"
|
||||||
|
/>
|
||||||
|
<Line
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="tcp"
|
||||||
|
type="linear"
|
||||||
|
stroke="hsl(var(--chart-1))"
|
||||||
|
strokeWidth={1}
|
||||||
|
dot={false}
|
||||||
|
/>
|
||||||
|
<Line
|
||||||
|
isAnimationActive={false}
|
||||||
|
dataKey="udp"
|
||||||
|
type="linear"
|
||||||
|
stroke="hsl(var(--chart-4))"
|
||||||
|
strokeWidth={1}
|
||||||
|
dot={false}
|
||||||
|
/>
|
||||||
|
</LineChart>
|
||||||
|
</ChartContainer>
|
||||||
|
</section>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
171
src/components/ServerDetailOverview.tsx
Normal file
171
src/components/ServerDetailOverview.tsx
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
import { BackIcon } from "@/components/Icon";
|
||||||
|
import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading";
|
||||||
|
import ServerFlag from "@/components/ServerFlag";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
|
||||||
|
import { NezhaAPIResponse } from "@/types/nezha-api";
|
||||||
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
import useWebSocket from "react-use-websocket";
|
||||||
|
|
||||||
|
export default function ServerDetailOverview() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams();
|
||||||
|
const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
|
||||||
|
shouldReconnect: () => true,
|
||||||
|
reconnectInterval: 3000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 检查连接状态
|
||||||
|
if (readyState !== 1) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center">
|
||||||
|
<p className="font-semibold text-sm">connecting...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析消息
|
||||||
|
const nezhaWsData = lastMessage
|
||||||
|
? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
if (!nezhaWsData) {
|
||||||
|
return <ServerDetailLoading />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const server = nezhaWsData.servers.find((s) => s.id === Number(id));
|
||||||
|
|
||||||
|
if (!server) {
|
||||||
|
return <ServerDetailLoading />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { name, online, uptime, version } = formatNezhaInfo(server);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
onClick={() => navigate("/")}
|
||||||
|
className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
|
||||||
|
>
|
||||||
|
<BackIcon />
|
||||||
|
{name}
|
||||||
|
</div>
|
||||||
|
<section className="flex flex-wrap gap-2 mt-3">
|
||||||
|
<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">{"Status"}</p>
|
||||||
|
<Badge
|
||||||
|
className={cn(
|
||||||
|
"text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
|
||||||
|
{
|
||||||
|
" bg-green-800": online,
|
||||||
|
" bg-red-600": !online,
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{online ? "Online" : "Offline"}
|
||||||
|
</Badge>
|
||||||
|
</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">{"Uptime"}</p>
|
||||||
|
<div className="text-xs">
|
||||||
|
{" "}
|
||||||
|
{online ? (uptime / 86400).toFixed(0) : "N/A"} {"Days"}{" "}
|
||||||
|
</div>
|
||||||
|
</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">{"Version"}</p>
|
||||||
|
<div className="text-xs">{version || "Unknown"} </div>
|
||||||
|
</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">{"Arch"}</p>
|
||||||
|
<div className="text-xs">{server.host.arch || "Unknown"} </div>
|
||||||
|
</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">{"Mem"}</p>
|
||||||
|
<div className="text-xs">
|
||||||
|
{formatBytes(server.host.mem_total)}
|
||||||
|
</div>
|
||||||
|
</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">{"Disk"}</p>
|
||||||
|
<div className="text-xs">
|
||||||
|
{formatBytes(server.host.disk_total)}
|
||||||
|
</div>
|
||||||
|
</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">{"Region"}</p>
|
||||||
|
<section className="flex items-start gap-1">
|
||||||
|
<div className="text-xs text-start">
|
||||||
|
{server.host.country_code?.toUpperCase() || "Unknown"}
|
||||||
|
</div>
|
||||||
|
{server.host.country_code && (
|
||||||
|
<ServerFlag
|
||||||
|
className="text-[11px] -mt-[1px]"
|
||||||
|
country_code={server.host.country_code}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</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">{"System"}</p>
|
||||||
|
{server.host.platform ? (
|
||||||
|
<div className="text-xs">
|
||||||
|
{" "}
|
||||||
|
{server.host.platform || "Unknown"} -{" "}
|
||||||
|
{server.host.platform_version}{" "}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-xs">Unknown</div>
|
||||||
|
)}
|
||||||
|
</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">{"CPU"}</p>
|
||||||
|
{server.host.cpu ? (
|
||||||
|
<div className="text-xs"> {server.host.cpu}</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-xs">Unknown</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
import { BackIcon } from "../Icon";
|
import { BackIcon } from "../Icon";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|||||||
107
src/components/ui/animated-circular-progress-bar.tsx
Normal file
107
src/components/ui/animated-circular-progress-bar.tsx
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
max: number;
|
||||||
|
value: number;
|
||||||
|
min: number;
|
||||||
|
className?: string;
|
||||||
|
primaryColor?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AnimatedCircularProgressBar({
|
||||||
|
max = 100,
|
||||||
|
min = 0,
|
||||||
|
value = 0,
|
||||||
|
primaryColor,
|
||||||
|
className,
|
||||||
|
}: Props) {
|
||||||
|
const circumference = 2 * Math.PI * 45;
|
||||||
|
const percentPx = circumference / 100;
|
||||||
|
const currentPercent = ((value - min) / (max - min)) * 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("relative size-40 text-2xl font-semibold", className)}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--circle-size": "100px",
|
||||||
|
"--circumference": circumference,
|
||||||
|
"--percent-to-px": `${percentPx}px`,
|
||||||
|
"--gap-percent": "5",
|
||||||
|
"--offset-factor": "0",
|
||||||
|
"--transition-length": "1s",
|
||||||
|
"--transition-step": "200ms",
|
||||||
|
"--delay": "0s",
|
||||||
|
"--percent-to-deg": "3.6deg",
|
||||||
|
transform: "translateZ(0)",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
className="size-full"
|
||||||
|
strokeWidth="2"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
>
|
||||||
|
{currentPercent <= 90 && currentPercent >= 0 && (
|
||||||
|
<circle
|
||||||
|
cx="50"
|
||||||
|
cy="50"
|
||||||
|
r="45"
|
||||||
|
strokeWidth="10"
|
||||||
|
strokeDashoffset="0"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="opacity-100 stroke-muted"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--stroke-percent": 90 - currentPercent,
|
||||||
|
"--offset-factor-secondary": "calc(1 - var(--offset-factor))",
|
||||||
|
strokeDasharray:
|
||||||
|
"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
|
||||||
|
transform:
|
||||||
|
"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
|
||||||
|
transition: "all var(--transition-length) ease var(--delay)",
|
||||||
|
transformOrigin:
|
||||||
|
"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<circle
|
||||||
|
cx="50"
|
||||||
|
cy="50"
|
||||||
|
r="45"
|
||||||
|
strokeWidth="10"
|
||||||
|
strokeDashoffset="0"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className={cn("opacity-100 stroke-current", {
|
||||||
|
"stroke-[var(--stroke-primary-color)]": primaryColor,
|
||||||
|
})}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--stroke-primary-color": primaryColor,
|
||||||
|
"--stroke-percent": currentPercent,
|
||||||
|
strokeDasharray:
|
||||||
|
"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
|
||||||
|
transition:
|
||||||
|
"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)",
|
||||||
|
transitionProperty: "stroke-dasharray,transform",
|
||||||
|
transform:
|
||||||
|
"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
|
||||||
|
transformOrigin:
|
||||||
|
"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
data-current-value={currentPercent}
|
||||||
|
className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
|
||||||
|
>
|
||||||
|
{currentPercent}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import * as React from "react"
|
import * as React from "react";
|
||||||
import { cva, type VariantProps } from "class-variance-authority"
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
const badgeVariants = cva(
|
const badgeVariants = cva(
|
||||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||||
@ -20,8 +20,8 @@ const badgeVariants = cva(
|
|||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: "default",
|
variant: "default",
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
export interface BadgeProps
|
export interface BadgeProps
|
||||||
extends React.HTMLAttributes<HTMLDivElement>,
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
@ -30,7 +30,7 @@ export interface BadgeProps
|
|||||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
return (
|
return (
|
||||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Badge, badgeVariants }
|
export { Badge, badgeVariants };
|
||||||
|
|||||||
363
src/components/ui/chart.tsx
Normal file
363
src/components/ui/chart.tsx
Normal file
@ -0,0 +1,363 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as RechartsPrimitive from "recharts";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||||
|
const THEMES = { light: "", dark: ".dark" } as const;
|
||||||
|
|
||||||
|
export type ChartConfig = {
|
||||||
|
[k in string]: {
|
||||||
|
label?: React.ReactNode;
|
||||||
|
icon?: React.ComponentType;
|
||||||
|
} & (
|
||||||
|
| { color?: string; theme?: never }
|
||||||
|
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type ChartContextProps = {
|
||||||
|
config: ChartConfig;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ChartContext = React.createContext<ChartContextProps | null>(null);
|
||||||
|
|
||||||
|
function useChart() {
|
||||||
|
const context = React.useContext(ChartContext);
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useChart must be used within a <ChartContainer />");
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartContainer = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div"> & {
|
||||||
|
config: ChartConfig;
|
||||||
|
children: React.ComponentProps<
|
||||||
|
typeof RechartsPrimitive.ResponsiveContainer
|
||||||
|
>["children"];
|
||||||
|
}
|
||||||
|
>(({ id, className, children, config, ...props }, ref) => {
|
||||||
|
const uniqueId = React.useId();
|
||||||
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ChartContext.Provider value={{ config }}>
|
||||||
|
<div
|
||||||
|
data-chart={chartId}
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChartStyle id={chartId} config={config} />
|
||||||
|
<RechartsPrimitive.ResponsiveContainer>
|
||||||
|
{children}
|
||||||
|
</RechartsPrimitive.ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
</ChartContext.Provider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
ChartContainer.displayName = "Chart";
|
||||||
|
|
||||||
|
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||||
|
const colorConfig = Object.entries(config).filter(
|
||||||
|
([_, config]) => config.theme || config.color,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!colorConfig.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<style
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: Object.entries(THEMES)
|
||||||
|
.map(
|
||||||
|
([theme, prefix]) => `
|
||||||
|
${prefix} [data-chart=${id}] {
|
||||||
|
${colorConfig
|
||||||
|
.map(([key, itemConfig]) => {
|
||||||
|
const color =
|
||||||
|
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||||
|
itemConfig.color;
|
||||||
|
return color ? ` --color-${key}: ${color};` : null;
|
||||||
|
})
|
||||||
|
.join("\n")}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
)
|
||||||
|
.join("\n"),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ChartTooltip = RechartsPrimitive.Tooltip;
|
||||||
|
|
||||||
|
const ChartTooltipContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||||
|
React.ComponentProps<"div"> & {
|
||||||
|
hideLabel?: boolean;
|
||||||
|
hideIndicator?: boolean;
|
||||||
|
indicator?: "line" | "dot" | "dashed";
|
||||||
|
nameKey?: string;
|
||||||
|
labelKey?: string;
|
||||||
|
}
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
active,
|
||||||
|
payload,
|
||||||
|
className,
|
||||||
|
indicator = "dot",
|
||||||
|
hideLabel = false,
|
||||||
|
hideIndicator = false,
|
||||||
|
label,
|
||||||
|
labelFormatter,
|
||||||
|
labelClassName,
|
||||||
|
formatter,
|
||||||
|
color,
|
||||||
|
nameKey,
|
||||||
|
labelKey,
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const { config } = useChart();
|
||||||
|
|
||||||
|
const tooltipLabel = React.useMemo(() => {
|
||||||
|
if (hideLabel || !payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [item] = payload;
|
||||||
|
const key = `${labelKey || item.dataKey || item.name || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
const value =
|
||||||
|
!labelKey && typeof label === "string"
|
||||||
|
? config[label as keyof typeof config]?.label || label
|
||||||
|
: itemConfig?.label;
|
||||||
|
|
||||||
|
if (labelFormatter) {
|
||||||
|
return (
|
||||||
|
<div className={cn("font-medium", labelClassName)}>
|
||||||
|
{labelFormatter(value, payload)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
|
||||||
|
}, [
|
||||||
|
label,
|
||||||
|
labelFormatter,
|
||||||
|
payload,
|
||||||
|
hideLabel,
|
||||||
|
labelClassName,
|
||||||
|
config,
|
||||||
|
labelKey,
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!active || !payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nestLabel = payload.length === 1 && indicator !== "dot";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{!nestLabel ? tooltipLabel : null}
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
{payload.map((item, index) => {
|
||||||
|
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
const indicatorColor = color || item.payload.fill || item.color;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.dataKey}
|
||||||
|
className={cn(
|
||||||
|
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||||
|
indicator === "dot" && "items-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{formatter && item?.value !== undefined && item.name ? (
|
||||||
|
formatter(item.value, item.name, item, index, item.payload)
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{itemConfig?.icon ? (
|
||||||
|
<itemConfig.icon />
|
||||||
|
) : (
|
||||||
|
!hideIndicator && (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
||||||
|
{
|
||||||
|
"h-2.5 w-2.5": indicator === "dot",
|
||||||
|
"w-1": indicator === "line",
|
||||||
|
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||||
|
indicator === "dashed",
|
||||||
|
"my-0.5": nestLabel && indicator === "dashed",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--color-bg": indicatorColor,
|
||||||
|
"--color-border": indicatorColor,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-1 justify-between leading-none",
|
||||||
|
nestLabel ? "items-end" : "items-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
{nestLabel ? tooltipLabel : null}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{itemConfig?.label || item.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{item.value && (
|
||||||
|
<span className="font-mono font-medium tabular-nums text-foreground">
|
||||||
|
{item.value.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
ChartTooltipContent.displayName = "ChartTooltip";
|
||||||
|
|
||||||
|
const ChartLegend = RechartsPrimitive.Legend;
|
||||||
|
|
||||||
|
const ChartLegendContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div"> &
|
||||||
|
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||||
|
hideIcon?: boolean;
|
||||||
|
nameKey?: string;
|
||||||
|
}
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const { config } = useChart();
|
||||||
|
|
||||||
|
if (!payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center justify-center gap-4",
|
||||||
|
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{payload.map((item) => {
|
||||||
|
const key = `${nameKey || item.dataKey || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.value}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{itemConfig?.icon && !hideIcon ? (
|
||||||
|
<itemConfig.icon />
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: item.color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{itemConfig?.label}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
ChartLegendContent.displayName = "ChartLegend";
|
||||||
|
|
||||||
|
// Helper to extract item config from a payload.
|
||||||
|
function getPayloadConfigFromPayload(
|
||||||
|
config: ChartConfig,
|
||||||
|
payload: unknown,
|
||||||
|
key: string,
|
||||||
|
) {
|
||||||
|
if (typeof payload !== "object" || payload === null) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const payloadPayload =
|
||||||
|
"payload" in payload &&
|
||||||
|
typeof payload.payload === "object" &&
|
||||||
|
payload.payload !== null
|
||||||
|
? payload.payload
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
let configLabelKey: string = key;
|
||||||
|
|
||||||
|
if (
|
||||||
|
key in payload &&
|
||||||
|
typeof payload[key as keyof typeof payload] === "string"
|
||||||
|
) {
|
||||||
|
configLabelKey = payload[key as keyof typeof payload] as string;
|
||||||
|
} else if (
|
||||||
|
payloadPayload &&
|
||||||
|
key in payloadPayload &&
|
||||||
|
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||||
|
) {
|
||||||
|
configLabelKey = payloadPayload[
|
||||||
|
key as keyof typeof payloadPayload
|
||||||
|
] as string;
|
||||||
|
}
|
||||||
|
|
||||||
|
return configLabelKey in config
|
||||||
|
? config[configLabelKey]
|
||||||
|
: config[key as keyof typeof config];
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
ChartContainer,
|
||||||
|
ChartTooltip,
|
||||||
|
ChartTooltipContent,
|
||||||
|
ChartLegend,
|
||||||
|
ChartLegendContent,
|
||||||
|
ChartStyle,
|
||||||
|
};
|
||||||
@ -1,173 +1,11 @@
|
|||||||
|
import ServerDetailChart from "@/components/ServerDetailChart";
|
||||||
import { BackIcon } from "@/components/Icon";
|
import ServerDetailOverview from "@/components/ServerDetailOverview";
|
||||||
import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading";
|
|
||||||
import ServerFlag from "@/components/ServerFlag";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
|
||||||
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
|
|
||||||
import { NezhaAPIResponse } from "@/types/nezha-api";
|
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
|
||||||
import useWebSocket from "react-use-websocket";
|
|
||||||
|
|
||||||
|
|
||||||
export default function ServerDetail() {
|
export default function ServerDetail() {
|
||||||
const navigate = useNavigate();
|
|
||||||
const { id } = useParams();
|
|
||||||
const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
|
|
||||||
shouldReconnect: () => true,
|
|
||||||
reconnectInterval: 3000,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// 检查连接状态
|
|
||||||
if (readyState !== 1) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center">
|
|
||||||
<p className="font-semibold text-sm">connecting...</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析消息
|
|
||||||
const nezhaWsData = lastMessage
|
|
||||||
? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
|
|
||||||
: null;
|
|
||||||
|
|
||||||
if (!nezhaWsData) {
|
|
||||||
return <ServerDetailLoading />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const server = nezhaWsData.servers.find((s) => s.id === Number(id));
|
|
||||||
|
|
||||||
if (!server) {
|
|
||||||
return <ServerDetailLoading />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { name, online,uptime,version } =
|
|
||||||
formatNezhaInfo(server);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto w-full max-w-5xl px-0">
|
<div className="mx-auto w-full max-w-5xl px-0 flex flex-col gap-4">
|
||||||
<div
|
<ServerDetailOverview />
|
||||||
onClick={() => navigate("/")}
|
<ServerDetailChart />
|
||||||
className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
|
|
||||||
>
|
|
||||||
<BackIcon />
|
|
||||||
{name}
|
|
||||||
</div>
|
|
||||||
<section className="flex flex-wrap gap-2 mt-3">
|
|
||||||
<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">{"Status"}</p>
|
|
||||||
<Badge
|
|
||||||
className={cn(
|
|
||||||
"text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
|
|
||||||
{
|
|
||||||
" bg-green-800": online,
|
|
||||||
" bg-red-600": !online,
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{online ? "Online" : "Offline"}
|
|
||||||
</Badge>
|
|
||||||
</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">{"Uptime"}</p>
|
|
||||||
<div className="text-xs">
|
|
||||||
{" "}
|
|
||||||
{online ? (uptime / 86400).toFixed(0) : "N/A"}{" "}
|
|
||||||
{"Days"}{" "}
|
|
||||||
</div>
|
|
||||||
</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">{"Version"}</p>
|
|
||||||
<div className="text-xs">{version || "Unknown"} </div>
|
|
||||||
</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">{"Arch"}</p>
|
|
||||||
<div className="text-xs">{server.host.arch || "Unknown"} </div>
|
|
||||||
</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">{"Mem"}</p>
|
|
||||||
<div className="text-xs">{formatBytes(server.host.mem_total)}</div>
|
|
||||||
</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">{"Disk"}</p>
|
|
||||||
<div className="text-xs">{formatBytes(server.host.disk_total)}</div>
|
|
||||||
</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">{"Region"}</p>
|
|
||||||
<section className="flex items-start gap-1">
|
|
||||||
<div className="text-xs text-start">
|
|
||||||
{server.host.country_code?.toUpperCase() || "Unknown"}
|
|
||||||
</div>
|
|
||||||
{server.host.country_code && (<ServerFlag
|
|
||||||
className="text-[11px] -mt-[1px]"
|
|
||||||
country_code={server.host.country_code}
|
|
||||||
/>)}
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
</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">{"System"}</p>
|
|
||||||
{server.host.platform ? (
|
|
||||||
<div className="text-xs">
|
|
||||||
{" "}
|
|
||||||
{server.host.platform || "Unknown"} -{" "}
|
|
||||||
{server.host.platform_version}{" "}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-xs">Unknown</div>
|
|
||||||
)}
|
|
||||||
</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">{"CPU"}</p>
|
|
||||||
{server.host.cpu ? (
|
|
||||||
<div className="text-xs"> {server.host.cpu}</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-xs">Unknown</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user