mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-30 22:26:38 +08:00
ryan
793 lines
30 KiB
TypeScript
793 lines
30 KiB
TypeScript
'use client';
|
|
|
|
import {useMemo, useState} from 'react';
|
|
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
|
|
import {Loader2, Trash2} from 'lucide-react';
|
|
import {toast} from 'sonner';
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import {Button} from '@/components/ui/button';
|
|
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
|
|
import {formatDateTime} from '@/lib/utils';
|
|
import type {NodeHealthEvent, NodeItem, NodeSystemProfile} from '@/lib/services/openflare';
|
|
import {NodeService} from '@/lib/services/openflare';
|
|
|
|
import {CapacityTrendChart} from '../../components/dashboard/capacity-trend-chart';
|
|
import {TrafficTrendChart} from '../../components/dashboard/traffic-trend-chart';
|
|
import {DiskIOTrendChart} from './disk-io-trend-chart';
|
|
import {DistributionList} from './distribution-list';
|
|
import {NetworkTrendChart} from './network-trend-chart';
|
|
import {NodeStatusBadge} from './node-status-badge';
|
|
import {
|
|
aggregateTrafficBreakdown,
|
|
formatBytes,
|
|
formatBytesPerSecond,
|
|
formatMetricCount,
|
|
formatPercent,
|
|
formatRelativeTime,
|
|
formatUptime,
|
|
formatUsageRatio,
|
|
getErrorMessage,
|
|
getHealthEventLabel,
|
|
getHealthEventTone,
|
|
getNodeStatusLabel,
|
|
getNodeStatusTone,
|
|
getOpenrestyStatusLabel,
|
|
getOpenrestyStatusTone,
|
|
isMeaningfulTime,
|
|
} from './node-utils';
|
|
|
|
type HealthEventFilter = 'all' | 'active' | 'resolved';
|
|
type NodeObservabilityVariant = 'edge' | 'compact';
|
|
|
|
function MetricBar({
|
|
label,
|
|
value,
|
|
progress,
|
|
hint,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
progress?: number | null;
|
|
hint?: string;
|
|
}) {
|
|
return (
|
|
<div className="space-y-2 rounded-lg border px-3 py-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">{label}</p>
|
|
{hint ? <p className="mt-1 text-xs text-muted-foreground">{hint}</p> : null}
|
|
</div>
|
|
<p className="text-sm font-medium">{value}</p>
|
|
</div>
|
|
{progress !== null && progress !== undefined ? (
|
|
<div className="h-2 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
className="h-full rounded-full bg-primary transition-[width]"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SummaryStat({
|
|
label,
|
|
value,
|
|
hint,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
hint: string;
|
|
}) {
|
|
return (
|
|
<Card className="border-dashed shadow-none">
|
|
<CardHeader className="pb-2">
|
|
<CardDescription>{label}</CardDescription>
|
|
<CardTitle className="text-base font-semibold">{value}</CardTitle>
|
|
<p className="text-sm text-muted-foreground">{hint}</p>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function SystemProfileCard({
|
|
profile,
|
|
nodeName,
|
|
}: {
|
|
profile: NodeSystemProfile;
|
|
nodeName: string;
|
|
}) {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-4 rounded-lg border px-4 py-4">
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">主机名</p>
|
|
<p className="mt-2 text-sm">{profile.hostname || nodeName}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">操作系统</p>
|
|
<p className="mt-2 text-sm">
|
|
{profile.os_name || 'unknown'}
|
|
{profile.os_version ? ` ${profile.os_version}` : ''}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">内核 / 架构</p>
|
|
<p className="mt-2 text-sm">
|
|
{profile.kernel_version || 'unknown'} · {profile.architecture || 'unknown'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">在线时长</p>
|
|
<p className="mt-2 text-sm">{formatUptime(profile.uptime_seconds)}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 rounded-lg border px-4 py-4">
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">CPU</p>
|
|
<p className="mt-2 text-sm">{profile.cpu_model || 'unknown'}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{profile.cpu_cores || 0} 核</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">总内存</p>
|
|
<p className="mt-2 text-sm">{formatBytes(profile.total_memory_bytes)}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">总存储</p>
|
|
<p className="mt-2 text-sm">{formatBytes(profile.total_disk_bytes)}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">上报时间</p>
|
|
<p className="mt-2 text-sm">
|
|
{isMeaningfulTime(profile.reported_at)
|
|
? formatDateTime(profile.reported_at)
|
|
: '—'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HealthEventTimeline({
|
|
events,
|
|
allEventsCount,
|
|
healthEventFilter,
|
|
onFilterChange,
|
|
onCleanup,
|
|
cleanupPending,
|
|
}: {
|
|
events: NodeHealthEvent[];
|
|
allEventsCount: number;
|
|
healthEventFilter: HealthEventFilter;
|
|
onFilterChange: (filter: HealthEventFilter) => void;
|
|
onCleanup: () => void;
|
|
cleanupPending: boolean;
|
|
}) {
|
|
return (
|
|
<Card className="border-dashed shadow-none">
|
|
<CardHeader className="flex-row items-center justify-between space-y-0">
|
|
<div>
|
|
<CardTitle className="text-base font-semibold">健康事件时间线</CardTitle>
|
|
<CardDescription>保留活动与已恢复事件，帮助判断运行状态。</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-xs text-destructive hover:text-destructive"
|
|
disabled={cleanupPending || allEventsCount === 0}
|
|
onClick={onCleanup}
|
|
>
|
|
<Trash2 className="size-3.5 mr-1" />
|
|
清理日志
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{allEventsCount > 0 ? (
|
|
<>
|
|
<div className="flex flex-wrap gap-2">
|
|
{(
|
|
[
|
|
['all', '全部事件'],
|
|
['active', '活动中'],
|
|
['resolved', '已恢复'],
|
|
] as const
|
|
).map(([filter, label]) => (
|
|
<Button
|
|
key={filter}
|
|
type="button"
|
|
variant={healthEventFilter === filter ? 'secondary' : 'outline'}
|
|
size="sm"
|
|
className="h-7 text-xs rounded-full"
|
|
onClick={() => onFilterChange(filter)}
|
|
>
|
|
{label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
{events.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">当前筛选下没有健康事件。</p>
|
|
) : null}
|
|
|
|
{events.slice(0, 8).map((event) => (
|
|
<div
|
|
key={`${event.event_type}-${event.last_triggered_at}-${event.status}`}
|
|
className="rounded-lg border px-4 py-3"
|
|
>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<NodeStatusBadge
|
|
label={getHealthEventLabel(event)}
|
|
tone={getHealthEventTone(event)}
|
|
/>
|
|
<NodeStatusBadge
|
|
label={event.status === 'active' ? '活动中' : '已恢复'}
|
|
tone={event.status === 'active' ? 'warning' : 'success'}
|
|
/>
|
|
</div>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{event.message || '暂无详细消息'}
|
|
</p>
|
|
<div className="mt-2 grid gap-1 text-xs text-muted-foreground md:grid-cols-3">
|
|
<p>
|
|
首次触发：
|
|
{isMeaningfulTime(event.first_triggered_at)
|
|
? ` ${formatDateTime(event.first_triggered_at)}`
|
|
: ' —'}
|
|
</p>
|
|
<p>
|
|
最近触发：
|
|
{isMeaningfulTime(event.last_triggered_at)
|
|
? ` ${formatDateTime(event.last_triggered_at)}`
|
|
: ' —'}
|
|
</p>
|
|
<p>
|
|
恢复时间：
|
|
{isMeaningfulTime(event.resolved_at) && event.resolved_at
|
|
? ` ${formatDateTime(event.resolved_at)}`
|
|
: ' —'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">节点当前还没有上报健康事件记录。</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export function NodeObservability({
|
|
nodeId,
|
|
node,
|
|
variant = 'edge',
|
|
connectionHint = 'OpenResty 当前连接',
|
|
}: {
|
|
nodeId: number;
|
|
node?: NodeItem;
|
|
variant?: NodeObservabilityVariant;
|
|
connectionHint?: string;
|
|
}) {
|
|
const queryClient = useQueryClient();
|
|
const [healthEventFilter, setHealthEventFilter] = useState<HealthEventFilter>('all');
|
|
const [cleanupOpen, setCleanupOpen] = useState(false);
|
|
|
|
const observabilityQuery = useQuery({
|
|
queryKey: ['openflare', 'node-observability', nodeId],
|
|
queryFn: () => NodeService.getObservability(nodeId, { hours: 24, limit: 48 }),
|
|
refetchInterval: 10000,
|
|
});
|
|
|
|
const cleanupMutation = useMutation({
|
|
mutationFn: () => NodeService.cleanupHealthEvents(nodeId),
|
|
onSuccess: async (result) => {
|
|
toast.success(
|
|
result.deleted_count > 0
|
|
? `已清理 ${result.deleted_count} 条健康事件日志`
|
|
: '当前没有可清理的健康事件日志',
|
|
);
|
|
setCleanupOpen(false);
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({
|
|
queryKey: ['openflare', 'node-observability', nodeId],
|
|
}),
|
|
queryClient.invalidateQueries({ queryKey: ['openflare', 'dashboard', 'overview'] }),
|
|
]);
|
|
},
|
|
onError: (error) => toast.error(getErrorMessage(error)),
|
|
});
|
|
|
|
const observability = observabilityQuery.data ?? null;
|
|
const profile = observability?.profile ?? null;
|
|
const latestMetric = observability?.metric_snapshots?.[0] ?? null;
|
|
const activeHealthEvents = useMemo(
|
|
() => observability?.health_events.filter((event) => event.status === 'active') ?? [],
|
|
[observability?.health_events],
|
|
);
|
|
const resolvedHealthEvents = useMemo(
|
|
() => observability?.health_events.filter((event) => event.status === 'resolved') ?? [],
|
|
[observability?.health_events],
|
|
);
|
|
const filteredHealthEvents = useMemo(() => {
|
|
switch (healthEventFilter) {
|
|
case 'active':
|
|
return activeHealthEvents;
|
|
case 'resolved':
|
|
return resolvedHealthEvents;
|
|
default:
|
|
return observability?.health_events ?? [];
|
|
}
|
|
}, [activeHealthEvents, healthEventFilter, observability?.health_events, resolvedHealthEvents]);
|
|
|
|
const statusCodeDistribution = useMemo(
|
|
() => aggregateTrafficBreakdown(observability?.traffic_reports, 'status_codes_json'),
|
|
[observability?.traffic_reports],
|
|
);
|
|
const topDomains = useMemo(
|
|
() => aggregateTrafficBreakdown(observability?.traffic_reports, 'top_domains_json'),
|
|
[observability?.traffic_reports],
|
|
);
|
|
const trafficSummary = observability?.analytics?.traffic ?? null;
|
|
const healthSummary = observability?.analytics?.health ?? null;
|
|
const topSourceCountry =
|
|
observability?.analytics?.distributions?.source_countries?.[0] ?? null;
|
|
const latestHealthEvent = activeHealthEvents[0] ?? null;
|
|
const dominantStatusCode = statusCodeDistribution[0] ?? null;
|
|
const dominantDomain = topDomains[0] ?? null;
|
|
const memoryUsageRatio = formatUsageRatio(
|
|
latestMetric?.memory_used_bytes,
|
|
latestMetric?.memory_total_bytes,
|
|
);
|
|
const storageUsageRatio = formatUsageRatio(
|
|
latestMetric?.storage_used_bytes,
|
|
latestMetric?.storage_total_bytes,
|
|
);
|
|
const trends = observability?.trends;
|
|
const nodeName = node?.name ?? observability?.node_id ?? String(nodeId);
|
|
|
|
if (observabilityQuery.isLoading) {
|
|
return (
|
|
<Card className="border-dashed shadow-none">
|
|
<CardContent className="flex items-center justify-center py-10 text-sm text-muted-foreground">
|
|
<Loader2 className="size-4 mr-2 animate-spin" />
|
|
加载运行观测数据中...
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (observabilityQuery.isError) {
|
|
return (
|
|
<Card className="border-dashed shadow-none">
|
|
<CardContent className="py-6">
|
|
<p className="text-sm text-destructive">{getErrorMessage(observabilityQuery.error)}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (variant === 'compact') {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<SummaryStat
|
|
label="运行诊断"
|
|
value={
|
|
activeHealthEvents.length
|
|
? `${activeHealthEvents.length} 个活动异常`
|
|
: '运行稳定'
|
|
}
|
|
hint={
|
|
latestHealthEvent
|
|
? `${getHealthEventLabel(latestHealthEvent)} · ${latestHealthEvent.message || '等待处理'}`
|
|
: '当前没有活动中的健康事件'
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label="系统核心"
|
|
value={profile?.hostname || '—'}
|
|
hint={profile ? `${profile.os_name || '—'} · ${profile.architecture || '—'}` : '—'}
|
|
/>
|
|
<SummaryStat
|
|
label="在线时长"
|
|
value={formatUptime(profile?.uptime_seconds)}
|
|
hint="来自节点系统画像上报"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-2">
|
|
<Card className="border-dashed shadow-none">
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-semibold">系统画像</CardTitle>
|
|
<CardDescription>节点上报的主机与硬件信息</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{profile ? (
|
|
<SystemProfileCard profile={profile} nodeName={nodeName} />
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">
|
|
节点已接入，但尚未上报完整系统画像。
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-dashed shadow-none">
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-semibold">实时资源快照</CardTitle>
|
|
<CardDescription>最近一次 metrics 上报</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{latestMetric ? (
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<MetricBar
|
|
label="CPU"
|
|
value={formatPercent(latestMetric.cpu_usage_percent)}
|
|
progress={latestMetric.cpu_usage_percent}
|
|
hint={
|
|
isMeaningfulTime(latestMetric.captured_at)
|
|
? `快照 ${formatRelativeTime(latestMetric.captured_at)}`
|
|
: undefined
|
|
}
|
|
/>
|
|
<MetricBar
|
|
label="内存"
|
|
value={`${formatBytes(latestMetric.memory_used_bytes)} / ${formatBytes(latestMetric.memory_total_bytes)}`}
|
|
progress={memoryUsageRatio}
|
|
/>
|
|
<MetricBar
|
|
label="存储"
|
|
value={`${formatBytes(latestMetric.storage_used_bytes)} / ${formatBytes(latestMetric.storage_total_bytes)}`}
|
|
progress={storageUsageRatio}
|
|
/>
|
|
<MetricBar
|
|
label="连接数"
|
|
value={formatMetricCount(latestMetric.openresty_connections)}
|
|
progress={null}
|
|
hint={connectionHint}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">节点已接入，但尚未上报资源快照。</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<HealthEventTimeline
|
|
events={filteredHealthEvents}
|
|
allEventsCount={observability?.health_events.length ?? 0}
|
|
healthEventFilter={healthEventFilter}
|
|
onFilterChange={setHealthEventFilter}
|
|
onCleanup={() => setCleanupOpen(true)}
|
|
cleanupPending={cleanupMutation.isPending}
|
|
/>
|
|
|
|
<AlertDialog open={cleanupOpen} onOpenChange={setCleanupOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>清理健康事件日志</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
该操作会删除此节点在控制端记录的所有健康诊断事件历史，不会影响后续新事件上报。
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={cleanupMutation.isPending}>取消</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className="bg-destructive text-white hover:bg-destructive/90"
|
|
disabled={cleanupMutation.isPending}
|
|
onClick={() => cleanupMutation.mutate()}
|
|
>
|
|
{cleanupMutation.isPending ? '清理中...' : '确认清理'}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<SummaryStat
|
|
label="运行诊断"
|
|
value={
|
|
activeHealthEvents.length
|
|
? `${activeHealthEvents.length} 个活动异常`
|
|
: '运行稳定'
|
|
}
|
|
hint={
|
|
latestHealthEvent
|
|
? `${getHealthEventLabel(latestHealthEvent)} · ${latestHealthEvent.message || '等待处理'}`
|
|
: '当前没有活动中的健康事件'
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label="请求/分钟"
|
|
value={formatMetricCount(trafficSummary?.request_count)}
|
|
hint={
|
|
trafficSummary
|
|
? `近 60 秒 · 错误率 ${trafficSummary.error_rate_percent.toFixed(1)}%`
|
|
: '当前没有可展示的请求窗口摘要'
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label="容量压力"
|
|
value={healthSummary?.has_capacity_risk ? '需要关注' : '正常范围'}
|
|
hint={
|
|
latestMetric
|
|
? `CPU ${formatPercent(latestMetric.cpu_usage_percent)} · 存储 ${formatPercent(storageUsageRatio)}`
|
|
: '当前没有资源快照'
|
|
}
|
|
/>
|
|
<SummaryStat
|
|
label="来源信号"
|
|
value={topSourceCountry?.key ?? '—'}
|
|
hint={
|
|
topSourceCountry
|
|
? `${topSourceCountry.value.toLocaleString('zh-CN')} 次请求`
|
|
: '当前没有来源分布数据'
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-3">
|
|
<Card className="border-dashed shadow-none">
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-semibold">系统信息</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{profile ? (
|
|
<SystemProfileCard profile={profile} nodeName={nodeName} />
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">
|
|
节点已经接入，但还没有上报完整系统画像。
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-dashed shadow-none">
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-semibold">实时资源</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{latestMetric ? (
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<MetricBar
|
|
label="CPU"
|
|
value={formatPercent(latestMetric.cpu_usage_percent)}
|
|
progress={latestMetric.cpu_usage_percent}
|
|
hint={
|
|
isMeaningfulTime(latestMetric.captured_at)
|
|
? `快照 ${formatRelativeTime(latestMetric.captured_at)}`
|
|
: undefined
|
|
}
|
|
/>
|
|
<MetricBar
|
|
label="内存"
|
|
value={`${formatBytes(latestMetric.memory_used_bytes)} / ${formatBytes(latestMetric.memory_total_bytes)}`}
|
|
progress={memoryUsageRatio}
|
|
/>
|
|
<MetricBar
|
|
label="存储"
|
|
value={`${formatBytes(latestMetric.storage_used_bytes)} / ${formatBytes(latestMetric.storage_total_bytes)}`}
|
|
progress={storageUsageRatio}
|
|
/>
|
|
<MetricBar
|
|
label="连接数"
|
|
value={formatMetricCount(latestMetric.openresty_connections)}
|
|
progress={null}
|
|
hint={connectionHint}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">节点已经接入，但还没有上报资源快照。</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-dashed shadow-none">
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-semibold">网络流量</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{latestMetric ? (
|
|
<>
|
|
{node ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
<NodeStatusBadge
|
|
label={getNodeStatusLabel(node.status)}
|
|
tone={getNodeStatusTone(node.status)}
|
|
/>
|
|
<NodeStatusBadge
|
|
label={getOpenrestyStatusLabel(node.openresty_status)}
|
|
tone={getOpenrestyStatusTone(node.openresty_status)}
|
|
/>
|
|
<NodeStatusBadge
|
|
label={
|
|
activeHealthEvents.length
|
|
? `${activeHealthEvents.length} 个活动异常`
|
|
: '无活动异常'
|
|
}
|
|
tone={activeHealthEvents.length ? 'warning' : 'success'}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div className="rounded-lg border px-3 py-3">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">
|
|
OpenResty 吞吐
|
|
</p>
|
|
<div className="mt-3 space-y-2 text-sm text-muted-foreground">
|
|
<p>入站：{formatBytesPerSecond(latestMetric.openresty_rx_bytes, 60)}</p>
|
|
<p>出站：{formatBytesPerSecond(latestMetric.openresty_tx_bytes, 60)}</p>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg border px-3 py-3">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">
|
|
节点网络
|
|
</p>
|
|
<div className="mt-3 space-y-2 text-sm text-muted-foreground">
|
|
<p>入站：{formatBytes(latestMetric.network_rx_bytes)}</p>
|
|
<p>出站：{formatBytes(latestMetric.network_tx_bytes)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div className="rounded-lg border px-3 py-3">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">
|
|
请求/分钟
|
|
</p>
|
|
<p className="mt-3 text-2xl font-semibold">
|
|
{formatMetricCount(trafficSummary?.request_count)}
|
|
</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{trafficSummary
|
|
? `近 60 秒 · UV ${formatMetricCount(trafficSummary.unique_visitor_count)}`
|
|
: '暂无窗口流量摘要'}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg border px-3 py-3">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">
|
|
近 60 秒错误
|
|
</p>
|
|
<p className="mt-3 text-2xl font-semibold">
|
|
{formatMetricCount(trafficSummary?.error_count)}
|
|
</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{trafficSummary
|
|
? `错误率 ${trafficSummary.error_rate_percent.toFixed(1)}%`
|
|
: '暂无错误率摘要'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">
|
|
节点已经接入，但还没有上报网络流量相关快照。
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-2">
|
|
<TrafficTrendChart
|
|
points={trends?.traffic_24h ?? []}
|
|
description="按小时聚合该节点的请求量和错误量。"
|
|
/>
|
|
<CapacityTrendChart
|
|
points={trends?.capacity_24h ?? []}
|
|
description="观察该节点 CPU 与内存使用率在 24 小时内的变化。"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-2">
|
|
<NetworkTrendChart points={trends?.network_24h ?? []} />
|
|
<DiskIOTrendChart points={trends?.disk_io_24h ?? []} />
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
|
|
<Card className="border-dashed shadow-none">
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-semibold">请求结构分布</CardTitle>
|
|
<CardDescription>
|
|
聚合最近 24 小时窗口上报，帮助判断错误集中在哪些状态码、流量集中在哪些域名。
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="mb-6 grid gap-4 md:grid-cols-3">
|
|
<div className="rounded-lg border px-4 py-4">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">主状态码</p>
|
|
<p className="mt-3 text-2xl font-semibold">{dominantStatusCode?.label ?? '—'}</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{dominantStatusCode ? `${dominantStatusCode.value} 次` : '暂无状态码分布'}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg border px-4 py-4">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">Top Domain</p>
|
|
<p className="mt-3 truncate text-2xl font-semibold">
|
|
{dominantDomain?.label ?? '—'}
|
|
</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{dominantDomain ? `${dominantDomain.value} 次` : '暂无域名分布'}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg border px-4 py-4">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wide">已恢复事件</p>
|
|
<p className="mt-3 text-2xl font-semibold">{resolvedHealthEvents.length}</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">最近 24 小时已恢复健康事件</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-2">
|
|
<div>
|
|
<p className="mb-4 text-xs text-muted-foreground uppercase tracking-wide">
|
|
状态码分布
|
|
</p>
|
|
<DistributionList
|
|
items={statusCodeDistribution}
|
|
emptyMessage="暂无状态码分布"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p className="mb-4 text-xs text-muted-foreground uppercase tracking-wide">
|
|
Top Domain
|
|
</p>
|
|
<DistributionList items={topDomains} emptyMessage="暂无域名分布" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<HealthEventTimeline
|
|
events={filteredHealthEvents}
|
|
allEventsCount={observability?.health_events.length ?? 0}
|
|
healthEventFilter={healthEventFilter}
|
|
onFilterChange={setHealthEventFilter}
|
|
onCleanup={() => setCleanupOpen(true)}
|
|
cleanupPending={cleanupMutation.isPending}
|
|
/>
|
|
</div>
|
|
|
|
<AlertDialog open={cleanupOpen} onOpenChange={setCleanupOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>清理健康事件日志</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
该操作会删除此节点在控制端记录的所有健康诊断事件历史，不会影响后续新事件上报。
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={cleanupMutation.isPending}>取消</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className="bg-destructive text-white hover:bg-destructive/90"
|
|
disabled={cleanupMutation.isPending}
|
|
onClick={() => cleanupMutation.mutate()}
|
|
>
|
|
{cleanupMutation.isPending ? '清理中...' : '确认清理'}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
);
|
|
} |