tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-13 18:36:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/(main)/components/dashboard/stat-cards.tsx
+51 -38
View File
@@ -1,12 +1,16 @@
'use client';
import {Activity, Cpu, Gauge, Server, Users} from 'lucide-react';
import { Activity, Cpu, Gauge, Server, Users } from 'lucide-react';
import {Card, CardContent, CardHeader} from '@/components/ui/card';
import {Progress} from '@/components/ui/progress';
import type {DashboardCapacity, DashboardSummary, DashboardTraffic,} from '@/lib/services/openflare';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import type {
DashboardCapacity,
DashboardSummary,
DashboardTraffic,
} from '@/lib/services/openflare';
import {formatCompactNumber, formatPercent} from './dashboard-utils';
import { formatCompactNumber, formatPercent } from './dashboard-utils';
export function DashboardStatCards({
summary,
@@ -23,17 +27,19 @@ export function DashboardStatCards({
: 0;
return (
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
<Card className="border-dashed shadow-none">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<span className="text-xs font-medium text-muted-foreground">24h 请求量</span>
<Activity className="size-4 text-primary" />
<div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3'>
<Card className='border-dashed shadow-none'>
<CardHeader className='flex flex-row items-center justify-between pb-2'>
<span className='text-xs font-medium text-muted-foreground'>
24h 请求量
</span>
<Activity className='size-4 text-primary' />
</CardHeader>
<CardContent className="space-y-2">
<div className="text-2xl font-semibold tracking-tight">
<CardContent className='space-y-2'>
<div className='text-2xl font-semibold tracking-tight'>
{formatCompactNumber(traffic.request_count)}
</div>
<p className="text-[10px] text-muted-foreground">
<p className='text-[10px] text-muted-foreground'>
窗口UV(估) {formatCompactNumber(traffic.unique_visitors)} · 错误{' '}
{formatCompactNumber(traffic.error_count)} · 估算 QPS{' '}
{traffic.estimated_qps.toFixed(2)}
@@ -41,48 +47,55 @@ export function DashboardStatCards({
</CardContent>
</Card>
<Card className="border-dashed shadow-none">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<span className="text-xs font-medium text-muted-foreground">集群容量</span>
<Cpu className="size-4 text-primary" />
<Card className='border-dashed shadow-none'>
<CardHeader className='flex flex-row items-center justify-between pb-2'>
<span className='text-xs font-medium text-muted-foreground'>
集群容量
</span>
<Cpu className='size-4 text-primary' />
</CardHeader>
<CardContent className="space-y-2">
<div className="text-2xl font-semibold tracking-tight">
<CardContent className='space-y-2'>
<div className='text-2xl font-semibold tracking-tight'>
{formatPercent(capacity.average_cpu_usage_percent)}
<span className="ml-2 text-sm font-normal text-muted-foreground">
<span className='ml-2 text-sm font-normal text-muted-foreground'>
CPU
</span>
</div>
<Progress value={capacity.average_cpu_usage_percent} className="h-1.5" />
<p className="text-[10px] text-muted-foreground">
平均内存 {formatPercent(capacity.average_memory_usage_percent)} · 高负载节点 CPU{' '}
{capacity.high_cpu_nodes} / 内存 {capacity.high_memory_nodes} / 存储{' '}
{capacity.high_storage_nodes}
<Progress
value={capacity.average_cpu_usage_percent}
className='h-1.5'
/>
<p className='text-[10px] text-muted-foreground'>
平均内存 {formatPercent(capacity.average_memory_usage_percent)} ·
高负载节点 CPU {capacity.high_cpu_nodes} / 内存{' '}
{capacity.high_memory_nodes} / 存储 {capacity.high_storage_nodes}
</p>
</CardContent>
</Card>
<Card className="border-dashed shadow-none md:col-span-2 xl:col-span-1">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<span className="text-xs font-medium text-muted-foreground">节点概览</span>
<Server className="size-4 text-primary" />
<Card className='border-dashed shadow-none md:col-span-2 xl:col-span-1'>
<CardHeader className='flex flex-row items-center justify-between pb-2'>
<span className='text-xs font-medium text-muted-foreground'>
节点概览
</span>
<Server className='size-4 text-primary' />
</CardHeader>
<CardContent className="space-y-2">
<div className="text-2xl font-semibold tracking-tight">
<CardContent className='space-y-2'>
<div className='text-2xl font-semibold tracking-tight'>
{summary.online_nodes}
<span className="text-sm font-normal text-muted-foreground">
<span className='text-sm font-normal text-muted-foreground'>
{' '}
/ {summary.total_nodes} 在线
</span>
</div>
<Progress value={onlineRate} className="h-1.5" />
<p className="text-[10px] text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1">
<span className="inline-flex items-center gap-1">
<Users className="size-3" />
<Progress value={onlineRate} className='h-1.5' />
<p className='text-[10px] text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1'>
<span className='inline-flex items-center gap-1'>
<Users className='size-3' />
待接入 {summary.pending_nodes}
</span>
<span className="inline-flex items-center gap-1">
<Gauge className="size-3" />
<span className='inline-flex items-center gap-1'>
<Gauge className='size-3' />
异常 {summary.unhealthy_nodes} · 离线 {summary.offline_nodes}
</span>
</p>