tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-09-28 07:36:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: monitor tunnel top level (#347)

Browse Source 
Merge chore/force-update sync
This commit is contained in:
sagit
2026-03-19 15:46:02 +08:00
committed by GitHub
parent 78fb9a31d6 bc75ed745d
commit 2f424bea31
5 changed files with 1083 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plans/050-monitor-tunnel-top-level.md
+40
View File
@@ -0,0 +1,40 @@
# 050 - 监控页面隧道独立入口
## 背景
当前监控页面的隧道流量监控嵌套在节点详情内，用户需要先点击某个节点才能看到隧道流量。
需要将隧道监控提升为与节点列表同级的入口，展示隧道质量（延迟）和流量统计。
## 设计
### 监控页面结构变更
在 `monitor.tsx` 页面增加 Tab 式结构（或并列区域），新增"隧道监控"入口与节点列表同级：
- **节点** Tab：保持现有节点卡片/列表 + 详情视图
- **隧道** Tab：新增隧道卡片/列表视图
- 每个隧道卡片显示：隧道名称、状态、质量指标（入口→出口延迟、出口→Bing TCP延迟）
- 点击隧道进入详情：隧道流量趋势图表（已有的 tunnel metrics chart）
### 隧道质量指标
使用已有的隧道诊断 API (`/tunnel/diagnose`) 进行 TCP 延迟测试：
- 入口→出口延迟
- 出口→Bing TCP 延迟（bing.com:443）
新增一个轻量级的后端 API 来获取隧道质量快照（定时 TCP 测试延迟），
或者前端在隧道 Tab 里手动触发诊断。
### 实现方案（前端为主）
由于后端已有完整的 tunnel metrics 和 diagnosis API，本次改动主要在前端：
1. `monitor.tsx` 增加 Tab 切换（节点 / 隧道）
2. 新建 `tunnel-monitor-view.tsx` 组件
3. 隧道列表用卡片展示质量指标
4. 点击进入隧道详情，展示流量图表
5. 从 `monitor-view.tsx` 的节点详情中移除隧道流量图表
## 任务清单
- [x] 1. 修改 `monitor.tsx`，增加节点/隧道 Tab 切换
- [x] 2. 新建 `tunnel-monitor-view.tsx` 组件，实现隧道列表视图
- [x] 3. 隧道卡片展示名称、状态、质量指标（支持手动诊断获取延迟）
- [x] 4. 隧道详情视图，展示流量趋势图表（复用已有 tunnel metrics API）
- [x] 5. 从节点详情视图中移除隧道流量图表
- [x] 6. TypeScript 编译通过验证
plans/051-sync-main-and-push-tag.md
+15
View File
@@ -0,0 +1,15 @@
# Plan 051: Sync Main and Push Tag
## Goal
Submit all changes, push them to the remote repository, create a pull request to main, merge it, and push a new tag.
## Tasks
- [ ] Determine the next tag version.
- [ ] Add all changes to the staging area.
- [ ] Commit the changes.
- [ ] Push changes to the current branch.
- [ ] Create a pull request via `gh` CLI.
- [ ] Merge the pull request via `gh` CLI.
- [ ] Sync the `main` branch locally.
- [ ] Create a new tag.
- [ ] Push the new tag to the remote repository.
vite-frontend/src/pages/monitor.tsx
+49 -13
View File
@@ -2,13 +2,14 @@ import type { MonitorNodeApiItem } from "@/api/types";
import { useCallback, useEffect, useMemo, useState } from "react";
import toast from "react-hot-toast";
import { RefreshCw, LayoutGrid, List } from "lucide-react";
import { RefreshCw, LayoutGrid, List, Server, ArrowRightLeft } from "lucide-react";
import { AnimatedPage } from "@/components/animated-page";
import { Button } from "@/shadcn-bridge/heroui/button";
import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
import { getMonitorNodes } from "@/api";
import { MonitorView } from "@/pages/node/monitor-view";
import { TunnelMonitorView } from "@/pages/node/tunnel-monitor-view";
type MonitorNode = {
id: number;
@@ -16,11 +17,14 @@ type MonitorNode = {
connectionStatus: "online" | "offline";
};
type MonitorTab = "nodes" | "tunnels";
export default function MonitorPage() {
const [nodes, setNodes] = useState<MonitorNodeApiItem[]>([]);
const [nodesLoading, setNodesLoading] = useState(false);
const [nodesError, setNodesError] = useState<string | null>(null);
const [viewMode, setViewMode] = useState<"list" | "grid">("list");
const [activeTab, setActiveTab] = useState<MonitorTab>("nodes");
const loadNodes = useCallback(async (options?: { silent?: boolean }) => {
const silent = options?.silent ?? false;
@@ -81,7 +85,7 @@ export default function MonitorPage() {
<div className="min-w-0">
<h2 className="text-xl font-semibold truncate">监控</h2>
<div className="text-xs text-default-500 truncate">
实时节点状态 + 历史指标图表 + 隧道流量 + 服务监控（TCP/ICMP）
实时节点状态 + 隧道质量检测 + 历史指标图表 + 服务监控（TCP/ICMP）
</div>
</div>
<div className="flex items-center gap-2">
@@ -93,19 +97,47 @@ export default function MonitorPage() {
>
{viewMode === "list" ? <LayoutGrid className="w-4 h-4" /> : <List className="w-4 h-4" />}
</Button>
<Button
isLoading={nodesLoading}
size="sm"
variant="flat"
onPress={() => loadNodes()}
>
<RefreshCw className="w-4 h-4 mr-1" />
刷新节点
</Button>
{activeTab === "nodes" && (
<Button
isLoading={nodesLoading}
size="sm"
variant="flat"
onPress={() => loadNodes()}
>
<RefreshCw className="w-4 h-4 mr-1" />
刷新节点
</Button>
)}
</div>
</div>
{nodesError ? (
{/* Tab Switcher */}
<div className="flex items-center gap-1 p-1 rounded-xl bg-default-100 dark:bg-default-50/10 w-fit">
<button
className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
activeTab === "nodes"
? "bg-background shadow-sm text-foreground"
: "text-default-500 hover:text-foreground"
}`}
onClick={() => setActiveTab("nodes")}
>
<Server className="w-4 h-4" />
节点
</button>
<button
className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
activeTab === "tunnels"
? "bg-background shadow-sm text-foreground"
: "text-default-500 hover:text-foreground"
}`}
onClick={() => setActiveTab("tunnels")}
>
<ArrowRightLeft className="w-4 h-4" />
隧道
</button>
</div>
{nodesError && activeTab === "nodes" ? (
<Card>
<CardHeader>
<h3 className="text-sm font-semibold">节点列表</h3>
@@ -117,7 +149,11 @@ export default function MonitorPage() {
) : null}
</div>
<MonitorView nodeMap={nodeMap} viewMode={viewMode} />
{activeTab === "nodes" ? (
<MonitorView nodeMap={nodeMap} viewMode={viewMode} />
) : (
<TunnelMonitorView viewMode={viewMode} />
)}
</AnimatedPage>
);
}
vite-frontend/src/pages/node/monitor-view.tsx
+150 -289
View File
@@ -1,7 +1,5 @@
import type {
MonitorTunnelApiItem,
NodeMetricApiItem,
TunnelMetricApiItem,
ServiceMonitorApiItem,
ServiceMonitorResultApiItem,
ServiceMonitorMutationPayload,
@@ -34,9 +32,7 @@ import {
import toast from "react-hot-toast";
import {
getMonitorTunnels,
getNodeMetrics,
getTunnelMetrics,
getServiceMonitorList,
getServiceMonitorLimits,
getServiceMonitorResults,
@@ -287,17 +283,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
const [metricsRangeMs, setMetricsRangeMs] = useState(60 * 60 * 1000);
const [tunnels, setTunnels] = useState<MonitorTunnelApiItem[]>([]);
const [tunnelsLoading, setTunnelsLoading] = useState(false);
const [, setTunnelsError] = useState<string | null>(null);
const [selectedTunnelId, setSelectedTunnelId] = useState<number | null>(null);
const [tunnelMetrics, setTunnelMetrics] = useState<TunnelMetricApiItem[]>([]);
const [tunnelMetricsLoading, setTunnelMetricsLoading] = useState(false);
const [, setTunnelMetricsTruncated] = useState(false);
const [tunnelMetricsError, setTunnelMetricsError] = useState<string | null>(
null,
);
const [tunnelRangeMs, setTunnelRangeMs] = useState(60 * 60 * 1000);
const [serviceMonitors, setServiceMonitors] = useState<
ServiceMonitorApiItem[]
@@ -327,6 +313,8 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
enabled: true,
});
const [submitLoading, setSubmitLoading] = useState(false);
const [activeServiceMonitorId, setActiveServiceMonitorId] = useState<number | null>(null);
const [serviceMonitorRangeLimit, setServiceMonitorRangeLimit] = useState(50);
const [accessDenied, setAccessDenied] = useState<string | null>(null);
const [resultsModalOpen, setResultsModalOpen] = useState(false);
@@ -446,111 +434,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
}
}, [preferredNodeId, selectedNodeId]);
const loadTunnels = useCallback(async (options?: { silent?: boolean }) => {
const silent = options?.silent ?? false;
if (!silent) setTunnelsLoading(true);
try {
const response = await getMonitorTunnels();
if (response.code === 0 && response.data) {
setAccessDenied(null);
setTunnelsError(null);
setTunnels(response.data);
return;
}
if (response.code === 403) {
setAccessDenied(response.msg || "暂无监控权限，请联系管理员授权");
setTunnelsError(null);
setTunnels([]);
return;
}
setTunnelsError(response.msg || "加载隧道列表失败");
if (!silent) toast.error(response.msg || "加载隧道列表失败");
} catch {
if (!silent) {
setTunnelsError("加载隧道列表失败");
toast.error("加载隧道列表失败");
}
} finally {
if (!silent) setTunnelsLoading(false);
}
}, []);
useEffect(() => {
void loadTunnels();
}, [loadTunnels]);
useEffect(() => {
const timer = window.setInterval(() => {
void loadTunnels({ silent: true });
}, 60_000);
return () => window.clearInterval(timer);
}, [loadTunnels]);
useEffect(() => {
if (!selectedTunnelId && tunnels.length > 0) {
setSelectedTunnelId(tunnels[0].id);
}
}, [selectedTunnelId, tunnels]);
const loadTunnelMetrics = useCallback(
async (tunnelId: number, options?: { silent?: boolean }) => {
const silent = options?.silent ?? false;
if (!silent) setTunnelMetricsLoading(true);
try {
const end = Date.now();
const start = end - tunnelRangeMs;
const response = await getTunnelMetrics(tunnelId, start, end);
if (response.code === 0 && Array.isArray(response.data)) {
setAccessDenied(null);
setTunnelMetricsError(null);
setTunnelMetricsTruncated(response.data.length >= METRICS_MAX_ROWS);
const ordered = [...response.data].sort(
(a, b) => a.timestamp - b.timestamp,
);
setTunnelMetrics(ordered);
return;
}
if (response.code === 403) {
setAccessDenied(response.msg || "暂无监控权限，请联系管理员授权");
setTunnelMetricsTruncated(false);
setTunnelMetricsError(null);
return;
}
setTunnelMetricsTruncated(false);
setTunnelMetricsError(response.msg || "加载隧道指标失败");
if (!silent) toast.error(response.msg || "加载隧道指标失败");
} catch {
setTunnelMetricsTruncated(false);
if (!silent) setTunnelMetricsError("加载隧道指标失败");
} finally {
if (!silent) setTunnelMetricsLoading(false);
}
},
[tunnelRangeMs],
);
useEffect(() => {
if (selectedTunnelId) {
void loadTunnelMetrics(selectedTunnelId);
}
}, [selectedTunnelId, loadTunnelMetrics]);
useEffect(() => {
if (!selectedTunnelId) return;
const timer = window.setInterval(() => {
void loadTunnelMetrics(selectedTunnelId, { silent: true });
}, 30_000);
return () => window.clearInterval(timer);
}, [selectedTunnelId, loadTunnelMetrics]);
const loadMetrics = useCallback(
async (nodeId: number, options?: { silent?: boolean }) => {
@@ -757,6 +641,12 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
void loadResultsForModal();
}, [resultsModalOpen, resultsMonitorId, resultsLimit, loadResultsForModal]);
// Reload results for the active service monitor chart when range limit changes
useEffect(() => {
if (!activeServiceMonitorId) return;
void loadMonitorResults(activeServiceMonitorId, serviceMonitorRangeLimit);
}, [activeServiceMonitorId, serviceMonitorRangeLimit, loadMonitorResults]);
const chartData = metrics.map((m) => ({
time: formatTimestamp(m.timestamp, metricsRangeMs),
cpu: m.cpuUsage,
@@ -816,21 +706,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
}
};
const tunnelChartData = tunnelMetrics.map((m) => ({
time: formatTimestamp(m.timestamp, tunnelRangeMs),
bytesIn: m.bytesIn,
bytesOut: m.bytesOut,
}));
const getTunnelChartConfig = () => {
return {
lines: [
{ dataKey: "bytesIn", color: "#10b981", name: "入站流量" },
{ dataKey: "bytesOut", color: "#ef4444", name: "出站流量" },
],
yAxisLabel: "流量",
};
};
const handleOpenEditModal = (monitor?: ServiceMonitorApiItem) => {
if (monitor) {
@@ -1091,7 +967,6 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
}, [getLatestResult, isResultStale, serviceMonitors]);
const chartConfig = getChartConfig();
const tunnelChartConfig = getTunnelChartConfig();
const nodeYAxisTickFormatter = (value: unknown) => {
const n = Number(value);
@@ -1131,21 +1006,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
}
};
const tunnelYAxisTickFormatter = (value: unknown) => {
const n = Number(value);
if (!Number.isFinite(n)) return "";
return formatBytes(n);
};
const tunnelTooltipFormatter = (value: unknown) => {
const n = Number(value);
if (!Number.isFinite(n)) return "-";
return formatBytes(n);
};
const detailNode = detailNodeId != null ? nodes.find((n) => n.id === detailNodeId) : null;
const detailRealtimeMetric = detailNodeId != null ? realtimeNodeMetrics[detailNodeId] || null : null;
@@ -1440,158 +1301,158 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
</CardBody>
</Card>
{/* Tunnel traffic chart */}
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<h3 className="text-lg font-semibold">隧道流量趋势</h3>
<div className="flex items-center gap-2">
<Select
className="w-56"
placeholder={tunnelsLoading ? "加载中..." : "选择隧道"}
selectedKeys={selectedTunnelId ? [String(selectedTunnelId)] : []}
onSelectionChange={(keys) => {
const tunnelId = Number(Array.from(keys)[0]);
setSelectedTunnelId(tunnelId || null);
}}
>
{tunnels.map((t) => (
<SelectItem key={String(t.id)}>{t.name}{t.status === 1 ? "" : " (禁用)"}</SelectItem>
))}
</Select>
<Select
className="w-36"
selectedKeys={[String(tunnelRangeMs)]}
onSelectionChange={(keys) => {
const v = Number(Array.from(keys)[0]);
if (v > 0) setTunnelRangeMs(v);
}}
>
<SelectItem key={String(15 * 60 * 1000)}>15分钟</SelectItem>
<SelectItem key={String(60 * 60 * 1000)}>1小时</SelectItem>
<SelectItem key={String(6 * 60 * 60 * 1000)}>6小时</SelectItem>
<SelectItem key={String(24 * 60 * 60 * 1000)}>24小时</SelectItem>
</Select>
</div>
</CardHeader>
<CardBody>
{selectedTunnelId ? (
tunnelMetricsLoading ? (
<div className="flex justify-center py-8"><RefreshCw className="w-6 h-6 animate-spin" /></div>
) : tunnelMetricsError ? (
<div className="text-center py-8 text-danger text-sm">{tunnelMetricsError}</div>
) : tunnelMetrics.length > 0 ? (
<div className="h-64">
<ResponsiveContainer height="100%" width="100%">
<LineChart data={tunnelChartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" fontSize={12} />
<YAxis fontSize={12} tickFormatter={tunnelYAxisTickFormatter} />
<Tooltip
contentStyle={{ backgroundColor: "rgba(0,0,0,0.8)", border: "none", borderRadius: "8px" }}
labelStyle={{ color: "#fff" }}
formatter={tunnelTooltipFormatter}
/>
{tunnelChartConfig.lines.map((line) => (
<Line key={line.dataKey} dataKey={line.dataKey} dot={false} name={line.name} stroke={line.color} strokeWidth={2} type="monotone" />
))}
</LineChart>
</ResponsiveContainer>
{/* Service monitors chart – same style as node metrics */}
{(() => {
// Resolve which monitor is active
const resolvedActiveMonitor =
detailServiceMonitors.find((m) => m.id === activeServiceMonitorId) ||
detailServiceMonitors[0] ||
null;
const resolvedActiveMonitorId = resolvedActiveMonitor?.id ?? null;
const activeLatestResult = resolvedActiveMonitorId != null ? getLatestResult(resolvedActiveMonitorId) : null;
const activeStale = resolvedActiveMonitor ? isResultStale(resolvedActiveMonitor, activeLatestResult) : false;
const activeResults = resolvedActiveMonitorId != null ? (monitorResults[resolvedActiveMonitorId] || []) : [];
const activeLatencyData = [...activeResults]
.slice(0, serviceMonitorRangeLimit)
.reverse()
.map((r) => ({
time: formatTimestamp(r.timestamp),
latency: r.success === 1 ? r.latencyMs : null,
success: r.success,
}));
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<h3 className="text-lg font-semibold">服务监控图表</h3>
<div className="flex items-center gap-2">
<Select
className="w-28"
selectedKeys={[String(serviceMonitorRangeLimit)]}
onSelectionChange={(keys) => {
const v = Number(Array.from(keys)[0]);
if (v > 0) setServiceMonitorRangeLimit(v);
}}
>
<SelectItem key="20">20条</SelectItem>
<SelectItem key="50">50条</SelectItem>
<SelectItem key="100">100条</SelectItem>
<SelectItem key="200">200条</SelectItem>
</Select>
{resolvedActiveMonitorId != null && (
<Button
size="sm"
variant="flat"
onPress={() => {
void loadMonitorResults(resolvedActiveMonitorId, serviceMonitorRangeLimit);
}}
>
<RefreshCw className="w-4 h-4 mr-1" />
刷新
</Button>
)}
<Button color="primary" size="sm" variant="flat" onPress={() => handleOpenEditModal()}>
<Plus className="w-4 h-4 mr-1" />
添加监控
</Button>
</div>
) : (
<div className="text-center py-8 text-default-500">暂无指标数据</div>
)
) : (
<div className="text-center py-8 text-default-500">请选择一个隧道查看指标</div>
)}
</CardBody>
</Card>
</CardHeader>
<CardBody className="space-y-4">
{monitorsLoading ? (
<div className="flex justify-center py-8"><RefreshCw className="w-6 h-6 animate-spin" /></div>
) : detailServiceMonitors.length > 0 ? (
<>
{/* Monitor switcher buttons – like metric type tabs */}
<div className="flex flex-wrap gap-2">
{detailServiceMonitors.map((monitor) => {
const lr = getLatestResult(monitor.id);
const statusColor =
monitor.enabled !== 1 ? "default" :
!lr ? "default" :
lr.success === 1 ? "success" : "danger";
const isActive = monitor.id === resolvedActiveMonitorId;
{/* Service monitors with latency charts */}
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<h3 className="text-lg font-semibold">服务监控</h3>
<Button color="primary" size="sm" variant="flat" onPress={() => handleOpenEditModal()}>
<Plus className="w-4 h-4 mr-1" />
添加监控
</Button>
</CardHeader>
<CardBody className="space-y-4">
{monitorsLoading ? (
<div className="flex justify-center py-8"><RefreshCw className="w-6 h-6 animate-spin" /></div>
) : detailServiceMonitors.length > 0 ? (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{detailServiceMonitors.map((monitor) => {
const latestResult = getLatestResult(monitor.id);
const stale = isResultStale(monitor, latestResult);
const results = monitorResults[monitor.id] || [];
const latencyData = [...results].reverse().map((r) => ({
time: formatTimestamp(r.timestamp),
latency: r.success === 1 ? r.latencyMs : null,
success: r.success,
}));
return (
<Button
key={monitor.id}
color={isActive ? "primary" : statusColor as any}
size="sm"
variant={isActive ? "solid" : "flat"}
onPress={() => {
setActiveServiceMonitorId(monitor.id);
// Load results for this monitor if not loaded
if (!monitorResults[monitor.id] || monitorResults[monitor.id].length <= 1) {
void loadMonitorResults(monitor.id, serviceMonitorRangeLimit);
}
}}
>
<div className={`w-2 h-2 rounded-full shrink-0 mr-1 ${
monitor.enabled !== 1 ? "bg-default-300" :
!lr ? "bg-default-400" :
lr.success === 1 ? (isActive ? "bg-white" : "bg-success") : (isActive ? "bg-white" : "bg-danger")
}`} />
{monitor.name}
</Button>
);
})}
</div>
return (
<Card key={monitor.id} className="border border-default-200/60">
<CardHeader className="pb-1 flex flex-row items-center justify-between">
<div className="flex items-center gap-2 min-w-0">
<div className={`w-2.5 h-2.5 rounded-full shrink-0 ${
monitor.enabled !== 1 ? "bg-default-300" :
!latestResult ? "bg-default-400" :
latestResult.success === 1 ? "bg-success" : "bg-danger"
}`} />
<span className="font-semibold text-sm truncate">{monitor.name}</span>
<Chip size="sm" color="primary" variant="flat">{monitor.type.toUpperCase()}</Chip>
{stale ? <Chip size="sm" color="warning" variant="flat">陈旧</Chip> : null}
{/* Active monitor info bar */}
{resolvedActiveMonitor && (
<div className="flex items-center justify-between gap-3 p-3 rounded-lg bg-default-50 dark:bg-default-100/30 border border-divider">
<div className="flex items-center gap-3 min-w-0 flex-wrap">
<Chip size="sm" color="primary" variant="flat">{resolvedActiveMonitor.type.toUpperCase()}</Chip>
<span className="font-mono text-xs text-default-500">{resolvedActiveMonitor.target}</span>
<span className="text-xs text-default-500">间隔 {resolvedActiveMonitor.intervalSec}s</span>
{activeLatestResult && Number.isFinite(activeLatestResult.latencyMs) ? (
<span className="font-mono text-xs font-semibold text-success">{activeLatestResult.latencyMs.toFixed(0)}ms</span>
) : null}
{activeStale ? <Chip size="sm" color="warning" variant="flat">陈旧</Chip> : null}
{resolvedActiveMonitor.enabled !== 1 ? <Chip size="sm" color="default" variant="flat">已禁用</Chip> : null}
</div>
<Dropdown>
<DropdownTrigger>
<Button isIconOnly size="sm" variant="light"><MoreVertical className="w-4 h-4" /></Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem startContent={<Play className="w-4 h-4" />} onPress={() => handleRunMonitor(monitor.id)}>立即检查</DropdownItem>
<DropdownItem startContent={<Activity className="w-4 h-4" />} onPress={() => openResultsModal(monitor.id)}>查看记录</DropdownItem>
<DropdownItem startContent={<Edit className="w-4 h-4" />} onPress={() => handleOpenEditModal(monitor)}>编辑</DropdownItem>
<DropdownItem className="text-danger" color="danger" startContent={<Trash2 className="w-4 h-4" />} onPress={() => handleDeleteMonitor(monitor.id)}>删除</DropdownItem>
<DropdownItem startContent={<Play className="w-4 h-4" />} onPress={() => resolvedActiveMonitorId != null && handleRunMonitor(resolvedActiveMonitorId)}>立即检查</DropdownItem>
<DropdownItem startContent={<Activity className="w-4 h-4" />} onPress={() => resolvedActiveMonitorId != null && openResultsModal(resolvedActiveMonitorId)}>查看记录</DropdownItem>
<DropdownItem startContent={<Edit className="w-4 h-4" />} onPress={() => resolvedActiveMonitor && handleOpenEditModal(resolvedActiveMonitor)}>编辑</DropdownItem>
<DropdownItem className="text-danger" color="danger" startContent={<Trash2 className="w-4 h-4" />} onPress={() => resolvedActiveMonitorId != null && handleDeleteMonitor(resolvedActiveMonitorId)}>删除</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardHeader>
<CardBody className="pt-0 space-y-2">
<div className="flex items-center gap-3 text-xs text-default-500">
<span className="font-mono">{monitor.target}</span>
<span>间隔 {monitor.intervalSec}s</span>
{latestResult && Number.isFinite(latestResult.latencyMs) ? (
<span className="font-mono text-success">{latestResult.latencyMs.toFixed(0)}ms</span>
) : null}
</div>
{latencyData.length > 0 ? (
<div className="h-24">
<ResponsiveContainer height="100%" width="100%">
<LineChart data={latencyData}>
<CartesianGrid strokeDasharray="3 3" stroke="rgba(128,128,128,0.15)" />
<XAxis dataKey="time" fontSize={10} tick={false} />
<YAxis fontSize={10} tickFormatter={(v: number) => `${Math.round(v)}ms`} />
<Tooltip
contentStyle={{ backgroundColor: "rgba(0,0,0,0.85)", border: "none", borderRadius: "8px", fontSize: "12px" }}
labelStyle={{ color: "#fff" }}
formatter={(value: unknown) => [`${Number(value).toFixed(0)}ms`, "延迟"]}
/>
<Line dataKey="latency" dot={false} stroke="#10b981" strokeWidth={1.5} type="monotone" connectNulls={false} />
</LineChart>
</ResponsiveContainer>
</div>
) : (
<div className="text-xs text-default-400 py-2">暂无检查记录</div>
)}
</CardBody>
</Card>
);
})}
</div>
) : (
<div className="text-center py-8 text-default-500">暂无服务监控，点击&quot;添加监控&quot;创建</div>
)}
</CardBody>
</Card>
</div>
)}
{/* Chart area – same h-64 as node metrics */}
{activeLatencyData.length > 0 ? (
<div className="h-64">
<ResponsiveContainer height="100%" width="100%">
<LineChart data={activeLatencyData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" fontSize={12} />
<YAxis fontSize={12} tickFormatter={(v: number) => `${Math.round(v)}ms`} />
<Tooltip
contentStyle={{ backgroundColor: "rgba(0,0,0,0.8)", border: "none", borderRadius: "8px" }}
labelStyle={{ color: "#fff" }}
formatter={(value: unknown) => [`${Number(value).toFixed(0)}ms`, "延迟"]}
/>
<Line dataKey="latency" dot={false} stroke="#10b981" strokeWidth={2} type="monotone" connectNulls={false} name="延迟" />
</LineChart>
</ResponsiveContainer>
</div>
) : (
<div className="text-center py-8 text-default-500">暂无检查记录</div>
)}
</>
) : (
<div className="text-center py-8 text-default-500">暂无服务监控，点击&quot;添加监控&quot;创建</div>
)}
</CardBody>
</Card>
);
})()}
</>
)}
vite-frontend/src/pages/node/tunnel-monitor-view.tsx
+829
View File
@@ -0,0 +1,829 @@
import type {
MonitorTunnelApiItem,
TunnelMetricApiItem,
TunnelDiagnosisApiItem,
} from "@/api/types";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
} from "recharts";
import {
RefreshCw,
ArrowLeft,
Activity,
Zap,
Globe,
ArrowRightLeft,
Wifi,
WifiOff,
Stethoscope,
} from "lucide-react";
import toast from "react-hot-toast";
import {
getMonitorTunnels,
getTunnelMetrics,
diagnoseTunnel,
} from "@/api";
import { diagnoseTunnelStream } from "@/api/diagnosis-stream";
import { getDiagnosisQualityDisplay } from "@/pages/tunnel/diagnosis";
import { Button } from "@/shadcn-bridge/heroui/button";
import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
import { Chip } from "@/shadcn-bridge/heroui/chip";
import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
import {
Table,
TableHeader,
TableColumn,
TableBody,
TableRow,
TableCell,
} from "@/shadcn-bridge/heroui/table";
interface TunnelMonitorViewProps {
viewMode?: "list" | "grid";
}
const METRICS_MAX_ROWS = 5000;
interface TunnelQuality {
loading: boolean;
entryToExitLatency?: number;
exitToBingLatency?: number;
entryToExitLoss?: number;
exitToBingLoss?: number;
results?: TunnelDiagnosisApiItem[];
timestamp?: number;
error?: string;
}
const formatTimestamp = (ts: number, rangeMs?: number): string => {
const date = new Date(ts);
const includeDate = (rangeMs ?? 0) >= 24 * 60 * 60 * 1000;
if (includeDate) {
return date.toLocaleString("zh-CN", {
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
});
}
return date.toLocaleTimeString("zh-CN", {
hour: "2-digit",
minute: "2-digit",
});
};
const formatBytes = (bytes: number): string => {
if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
const k = 1024;
const sizes = ["B", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
};
export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps) {
const [tunnels, setTunnels] = useState<MonitorTunnelApiItem[]>([]);
const [tunnelsLoading, setTunnelsLoading] = useState(false);
const [tunnelsError, setTunnelsError] = useState<string | null>(null);
const [accessDenied, setAccessDenied] = useState<string | null>(null);
// Detail view state
const [detailTunnelId, setDetailTunnelId] = useState<number | null>(null);
const [tunnelMetrics, setTunnelMetrics] = useState<TunnelMetricApiItem[]>([]);
const [tunnelMetricsLoading, setTunnelMetricsLoading] = useState(false);
const [tunnelMetricsError, setTunnelMetricsError] = useState<string | null>(null);
const [, setTunnelMetricsTruncated] = useState(false);
const [tunnelRangeMs, setTunnelRangeMs] = useState(60 * 60 * 1000);
// Tunnel quality (diagnosis) state
const [tunnelQualities, setTunnelQualities] = useState<Record<number, TunnelQuality>>({});
const diagnosisAbortRef = useRef<Record<number, AbortController>>({});
// Cleanup abort controllers on unmount
useEffect(() => {
return () => {
Object.values(diagnosisAbortRef.current).forEach((c) => c.abort());
diagnosisAbortRef.current = {};
};
}, []);
const loadTunnels = useCallback(async (options?: { silent?: boolean }) => {
const silent = options?.silent ?? false;
if (!silent) setTunnelsLoading(true);
try {
const response = await getMonitorTunnels();
if (response.code === 0 && response.data) {
setAccessDenied(null);
setTunnelsError(null);
setTunnels(response.data);
return;
}
if (response.code === 403) {
setAccessDenied(response.msg || "暂无监控权限，请联系管理员授权");
setTunnelsError(null);
setTunnels([]);
return;
}
setTunnelsError(response.msg || "加载隧道列表失败");
if (!silent) toast.error(response.msg || "加载隧道列表失败");
} catch {
if (!silent) {
setTunnelsError("加载隧道列表失败");
toast.error("加载隧道列表失败");
}
} finally {
if (!silent) setTunnelsLoading(false);
}
}, []);
useEffect(() => {
void loadTunnels();
}, [loadTunnels]);
useEffect(() => {
const timer = window.setInterval(() => {
void loadTunnels({ silent: true });
}, 60_000);
return () => window.clearInterval(timer);
}, [loadTunnels]);
// Load tunnel metrics for detail view
const loadTunnelMetrics = useCallback(
async (tunnelId: number, options?: { silent?: boolean }) => {
const silent = options?.silent ?? false;
if (!silent) setTunnelMetricsLoading(true);
try {
const end = Date.now();
const start = end - tunnelRangeMs;
const response = await getTunnelMetrics(tunnelId, start, end);
if (response.code === 0 && Array.isArray(response.data)) {
setAccessDenied(null);
setTunnelMetricsError(null);
setTunnelMetricsTruncated(response.data.length >= METRICS_MAX_ROWS);
const ordered = [...response.data].sort(
(a, b) => a.timestamp - b.timestamp,
);
setTunnelMetrics(ordered);
return;
}
if (response.code === 403) {
setAccessDenied(response.msg || "暂无监控权限，请联系管理员授权");
setTunnelMetricsTruncated(false);
setTunnelMetricsError(null);
return;
}
setTunnelMetricsTruncated(false);
setTunnelMetricsError(response.msg || "加载隧道指标失败");
if (!silent) toast.error(response.msg || "加载隧道指标失败");
} catch {
setTunnelMetricsTruncated(false);
if (!silent) setTunnelMetricsError("加载隧道指标失败");
} finally {
if (!silent) setTunnelMetricsLoading(false);
}
},
[tunnelRangeMs],
);
useEffect(() => {
if (detailTunnelId) {
void loadTunnelMetrics(detailTunnelId);
}
}, [detailTunnelId, loadTunnelMetrics]);
useEffect(() => {
if (!detailTunnelId) return;
const timer = window.setInterval(() => {
void loadTunnelMetrics(detailTunnelId, { silent: true });
}, 30_000);
return () => window.clearInterval(timer);
}, [detailTunnelId, loadTunnelMetrics]);
// Diagnose tunnel quality
const diagnoseTunnelQuality = useCallback(async (tunnelId: number) => {
// Abort if already running
if (diagnosisAbortRef.current[tunnelId]) {
diagnosisAbortRef.current[tunnelId].abort();
}
const abortController = new AbortController();
diagnosisAbortRef.current[tunnelId] = abortController;
setTunnelQualities((prev) => ({
...prev,
[tunnelId]: { loading: true },
}));
try {
// Try stream first
const results: TunnelDiagnosisApiItem[] = [];
const streamResult = await diagnoseTunnelStream(
tunnelId,
{
onItem: (payload) => {
results.push(payload.result);
},
onError: (msg) => {
setTunnelQualities((prev) => ({
...prev,
[tunnelId]: { loading: false, error: msg },
}));
},
},
abortController.signal,
);
if (streamResult.fallback) {
// Fallback to non-stream API
try {
const response = await diagnoseTunnel(tunnelId);
if (response.code === 0 && response.data?.results) {
const apiResults = response.data.results;
const quality = extractQualityFromResults(apiResults);
setTunnelQualities((prev) => ({
...prev,
[tunnelId]: {
loading: false,
...quality,
results: apiResults,
timestamp: Date.now(),
},
}));
} else {
setTunnelQualities((prev) => ({
...prev,
[tunnelId]: { loading: false, error: response.msg || "诊断失败" },
}));
}
} catch {
setTunnelQualities((prev) => ({
...prev,
[tunnelId]: { loading: false, error: "诊断请求失败" },
}));
}
return;
}
// Process stream results
if (results.length > 0) {
const quality = extractQualityFromResults(results);
setTunnelQualities((prev) => ({
...prev,
[tunnelId]: {
loading: false,
...quality,
results,
timestamp: Date.now(),
},
}));
} else {
setTunnelQualities((prev) => ({
...prev,
[tunnelId]: { loading: false, error: "未获取到诊断结果" },
}));
}
} catch {
if (!abortController.signal.aborted) {
setTunnelQualities((prev) => ({
...prev,
[tunnelId]: { loading: false, error: "诊断失败" },
}));
}
} finally {
delete diagnosisAbortRef.current[tunnelId];
}
}, []);
const extractQualityFromResults = (
results: TunnelDiagnosisApiItem[],
): Pick<TunnelQuality, "entryToExitLatency" | "exitToBingLatency" | "entryToExitLoss" | "exitToBingLoss"> => {
// The diagnosis results contain hop-by-hop tests
// We look for entry→exit (hop between entry and exit nodes)
// and exit→Bing (the last hop to external target like bing.com)
let entryToExitLatency: number | undefined;
let exitToBingLatency: number | undefined;
let entryToExitLoss: number | undefined;
let exitToBingLoss: number | undefined;
for (const r of results) {
if (!r.success) continue;
// Entry to Exit: chainType transitions from 1 (entry) to 3 (exit)
if (r.fromChainType === 1 && r.toChainType === 3) {
entryToExitLatency = r.averageTime;
entryToExitLoss = r.packetLoss;
}
// Or if it's a mid-chain to exit
if (r.fromChainType === 2 && r.toChainType === 3) {
// Use this if no direct entry→exit
if (entryToExitLatency === undefined) {
entryToExitLatency = r.averageTime;
entryToExitLoss = r.packetLoss;
}
}
// Exit to external target (Bing / external)
if (r.toChainType === undefined || r.toChainType === 0) {
// This typically means it's the exit node testing external
if (r.fromChainType === 3) {
exitToBingLatency = r.averageTime;
exitToBingLoss = r.packetLoss;
}
}
}
// If no chainType-based matching, use position-based heuristics
if (entryToExitLatency === undefined && exitToBingLatency === undefined) {
const successResults = results.filter((r) => r.success);
if (successResults.length >= 2) {
entryToExitLatency = successResults[0].averageTime;
entryToExitLoss = successResults[0].packetLoss;
exitToBingLatency = successResults[successResults.length - 1].averageTime;
exitToBingLoss = successResults[successResults.length - 1].packetLoss;
} else if (successResults.length === 1) {
entryToExitLatency = successResults[0].averageTime;
entryToExitLoss = successResults[0].packetLoss;
}
}
return { entryToExitLatency, exitToBingLatency, entryToExitLoss, exitToBingLoss };
};
// Chart data
const tunnelChartData = tunnelMetrics.map((m) => ({
time: formatTimestamp(m.timestamp, tunnelRangeMs),
bytesIn: m.bytesIn,
bytesOut: m.bytesOut,
connections: m.connections,
}));
const tunnelYAxisTickFormatter = (value: unknown) => {
const n = Number(value);
if (!Number.isFinite(n)) return "";
return formatBytes(n);
};
const tunnelTooltipFormatter = (value: unknown) => {
const n = Number(value);
if (!Number.isFinite(n)) return "-";
return formatBytes(n);
};
const detailTunnel = detailTunnelId != null
? tunnels.find((t) => t.id === detailTunnelId)
: null;
// Aggregate stats
const tunnelStats = useMemo(() => {
const enabled = tunnels.filter((t) => t.status === 1).length;
const disabled = tunnels.length - enabled;
const diagnosed = Object.keys(tunnelQualities).filter((k) => {
const q = tunnelQualities[Number(k)];
return q && !q.loading && !q.error;
}).length;
return { total: tunnels.length, enabled, disabled, diagnosed };
}, [tunnels, tunnelQualities]);
// =====================
// RENDER
// =====================
if (accessDenied) {
return (
<Card>
<CardHeader className="flex flex-row items-center gap-2">
<Activity className="w-5 h-5 text-warning" />
<h3 className="text-lg font-semibold">监控权限</h3>
</CardHeader>
<CardBody>
<div className="text-sm text-default-600">{accessDenied}</div>
<div className="text-xs text-default-500 mt-2">
如需使用监控功能，请联系管理员在用户页面授予监控权限。
</div>
</CardBody>
</Card>
);
}
// ===== DETAIL VIEW =====
if (detailTunnelId && detailTunnel) {
const quality = tunnelQualities[detailTunnelId];
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center gap-3 flex-wrap">
<Button size="sm" variant="flat" onPress={() => {
setDetailTunnelId(null);
setTunnelMetrics([]);
}}>
<ArrowLeft className="w-4 h-4 mr-1" />
返回隧道列表
</Button>
<div className="flex items-center gap-2">
<ArrowRightLeft className={`w-5 h-5 ${detailTunnel.status === 1 ? "text-success" : "text-default-400"}`} />
<h3 className="text-lg font-semibold">{detailTunnel.name}</h3>
<Chip size="sm" color={detailTunnel.status === 1 ? "success" : "danger"} variant="flat">
{detailTunnel.status === 1 ? "启用" : "禁用"}
</Chip>
</div>
</div>
{/* Quality KPI Cards */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
<CardBody className="py-3 px-4 flex flex-col items-center justify-center min-h-[5rem]">
<span className="text-[11px] text-default-500 mb-1.5">入口 → 出口 延迟</span>
<span className={`text-sm font-semibold font-mono ${quality?.entryToExitLatency !== undefined ? "text-primary" : ""}`}>
{quality?.loading ? "检测中..." : quality?.entryToExitLatency !== undefined ? `${quality.entryToExitLatency.toFixed(0)}ms` : "-"}
</span>
</CardBody>
</Card>
<Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
<CardBody className="py-3 px-4 flex flex-col items-center justify-center min-h-[5rem]">
<span className="text-[11px] text-default-500 mb-1.5">出口 → Bing 延迟</span>
<span className={`text-sm font-semibold font-mono ${quality?.exitToBingLatency !== undefined ? "text-success" : ""}`}>
{quality?.loading ? "检测中..." : quality?.exitToBingLatency !== undefined ? `${quality.exitToBingLatency.toFixed(0)}ms` : "-"}
</span>
</CardBody>
</Card>
<Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
<CardBody className="py-3 px-4 flex flex-col items-center justify-center min-h-[5rem]">
<span className="text-[11px] text-default-500 mb-1.5">入口 → 出口 丢包</span>
<span className={`text-sm font-semibold font-mono ${(quality?.entryToExitLoss ?? 0) > 0 ? "text-warning" : ""}`}>
{quality?.loading ? "检测中..." : quality?.entryToExitLoss !== undefined ? `${quality.entryToExitLoss.toFixed(1)}%` : "-"}
</span>
</CardBody>
</Card>
<Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
<CardBody className="py-3 px-4 flex flex-col items-center justify-center min-h-[5rem]">
<span className="text-[11px] text-default-500 mb-1.5">出口 → Bing 丢包</span>
<span className={`text-sm font-semibold font-mono ${(quality?.exitToBingLoss ?? 0) > 0 ? "text-warning" : ""}`}>
{quality?.loading ? "检测中..." : quality?.exitToBingLoss !== undefined ? `${quality.exitToBingLoss.toFixed(1)}%` : "-"}
</span>
</CardBody>
</Card>
</div>
{/* Diagnose Button */}
<div className="flex items-center gap-2">
<Button
size="sm"
color="primary"
variant="flat"
isLoading={quality?.loading}
onPress={() => diagnoseTunnelQuality(detailTunnelId)}
>
<Stethoscope className="w-4 h-4 mr-1" />
{quality?.timestamp ? "重新检测质量" : "检测隧道质量"}
</Button>
{quality?.timestamp && (
<span className="text-xs text-default-500">
上次检测: {new Date(quality.timestamp).toLocaleTimeString("zh-CN")}
</span>
)}
{quality?.error && (
<span className="text-xs text-danger">{quality.error}</span>
)}
</div>
{/* Diagnosis Details */}
{quality?.results && quality.results.length > 0 && (
<Card>
<CardHeader>
<h3 className="text-lg font-semibold">诊断详情</h3>
</CardHeader>
<CardBody>
<Table aria-label="诊断结果">
<TableHeader>
<TableColumn>描述</TableColumn>
<TableColumn>节点</TableColumn>
<TableColumn>目标</TableColumn>
<TableColumn>延迟</TableColumn>
<TableColumn>丢包</TableColumn>
<TableColumn>状态</TableColumn>
</TableHeader>
<TableBody>
{quality.results.map((r, idx) => (
<TableRow key={idx}>
<TableCell>
<span className="text-sm">{r.description || "-"}</span>
</TableCell>
<TableCell>
<span className="text-sm font-mono">{r.nodeName || "-"}</span>
</TableCell>
<TableCell>
<span className="text-sm font-mono">
{r.targetIp || "-"}{r.targetPort ? `:${r.targetPort}` : ""}
</span>
</TableCell>
<TableCell>
<span className="text-sm font-mono">
{r.averageTime !== undefined ? `${r.averageTime.toFixed(0)}ms` : "-"}
</span>
</TableCell>
<TableCell>
<span className="text-sm font-mono">
{r.packetLoss !== undefined ? `${r.packetLoss.toFixed(1)}%` : "-"}
</span>
</TableCell>
<TableCell>
<Chip size="sm" color={r.success ? "success" : "danger"} variant="flat">
{r.success ? "成功" : "失败"}
</Chip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardBody>
</Card>
)}
{/* Tunnel traffic chart */}
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<h3 className="text-lg font-semibold">隧道流量趋势</h3>
<div className="flex items-center gap-2">
<Select
className="w-36"
selectedKeys={[String(tunnelRangeMs)]}
onSelectionChange={(keys) => {
const v = Number(Array.from(keys)[0]);
if (v > 0) setTunnelRangeMs(v);
}}
>
<SelectItem key={String(15 * 60 * 1000)}>15分钟</SelectItem>
<SelectItem key={String(60 * 60 * 1000)}>1小时</SelectItem>
<SelectItem key={String(6 * 60 * 60 * 1000)}>6小时</SelectItem>
<SelectItem key={String(24 * 60 * 60 * 1000)}>24小时</SelectItem>
</Select>
<Button
isLoading={tunnelMetricsLoading}
size="sm"
variant="flat"
onPress={() => detailTunnelId && loadTunnelMetrics(detailTunnelId)}
>
<RefreshCw className="w-4 h-4 mr-1" />
刷新
</Button>
</div>
</CardHeader>
<CardBody>
{tunnelMetricsLoading ? (
<div className="flex justify-center py-8"><RefreshCw className="w-6 h-6 animate-spin" /></div>
) : tunnelMetricsError ? (
<div className="text-center py-8 text-danger text-sm">{tunnelMetricsError}</div>
) : tunnelMetrics.length > 0 ? (
<div className="h-64">
<ResponsiveContainer height="100%" width="100%">
<LineChart data={tunnelChartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" fontSize={12} />
<YAxis fontSize={12} tickFormatter={tunnelYAxisTickFormatter} />
<Tooltip
contentStyle={{ backgroundColor: "rgba(0,0,0,0.8)", border: "none", borderRadius: "8px" }}
labelStyle={{ color: "#fff" }}
formatter={tunnelTooltipFormatter}
/>
<Line dataKey="bytesIn" dot={false} name="入站流量" stroke="#10b981" strokeWidth={2} type="monotone" />
<Line dataKey="bytesOut" dot={false} name="出站流量" stroke="#ef4444" strokeWidth={2} type="monotone" />
</LineChart>
</ResponsiveContainer>
</div>
) : (
<div className="text-center py-8 text-default-500">暂无指标数据</div>
)}
</CardBody>
</Card>
</div>
);
}
// ===== LIST/GRID VIEW =====
return (
<div className="space-y-6">
<div className="flex flex-wrap items-center gap-3 mb-1">
<Chip color="primary" size="sm" variant="flat">隧道 {tunnelStats.enabled}/{tunnelStats.total}</Chip>
{tunnelStats.diagnosed > 0 && (
<Chip color="success" size="sm" variant="flat">已诊断 {tunnelStats.diagnosed}</Chip>
)}
<div className="ml-auto">
<Button isLoading={tunnelsLoading} size="sm" variant="flat" onPress={() => loadTunnels()}>
<RefreshCw className="w-4 h-4 mr-1" />
刷新
</Button>
</div>
</div>
{tunnelsError ? (
<Card>
<CardBody>
<div className="text-sm text-default-600">{tunnelsError}</div>
</CardBody>
</Card>
) : null}
{viewMode === "grid" ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{tunnels.map((tunnel) => {
const quality = tunnelQualities[tunnel.id];
const isEnabled = tunnel.status === 1;
const overallQuality = quality?.entryToExitLatency !== undefined
? getDiagnosisQualityDisplay(quality.entryToExitLatency, quality.entryToExitLoss ?? 0)
: null;
return (
<Card
key={tunnel.id}
className="group relative overflow-hidden shadow-sm border border-divider dark:border-default-100 hover:-translate-y-1 hover:shadow-lg transition-all duration-300 h-full flex flex-col cursor-pointer bg-background"
onClick={() => setDetailTunnelId(tunnel.id)}
>
{/* Top gradient bar */}
<div className={`absolute top-0 left-0 right-0 h-1 ${isEnabled ? "bg-success" : "bg-danger"}`} />
{/* Decorative background glow */}
<div className={`absolute -right-8 -top-8 w-24 h-24 rounded-full blur-2xl opacity-10 transition-opacity group-hover:opacity-20 ${isEnabled ? "bg-success" : "bg-danger"}`} />
<CardHeader className="pb-2 pt-5 px-5 flex flex-row justify-between items-start gap-4">
<div className="flex items-center gap-3 min-w-0">
<div className="relative flex-shrink-0">
<div className="w-10 h-10 rounded-xl bg-default-100 dark:bg-default-50/10 flex items-center justify-center border border-divider">
<ArrowRightLeft className={`w-5 h-5 ${isEnabled ? "text-success" : "text-danger"}`} />
</div>
<span className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-background ${isEnabled ? "bg-success" : "bg-danger"}`} />
</div>
<div className="flex flex-col min-w-0">
<h3 className="font-semibold text-foreground text-sm truncate">{tunnel.name}</h3>
<div className="flex items-center gap-1.5 text-[11px] text-default-500 mt-0.5">
<span className="font-mono">{isEnabled ? "启用" : "禁用"}</span>
</div>
</div>
</div>
{overallQuality && (
<Chip size="sm" color={overallQuality.color} variant="flat">
{overallQuality.text}
</Chip>
)}
</CardHeader>
<CardBody className="py-3 px-5 flex-1 flex flex-col justify-end gap-3 z-10 w-full overflow-hidden">
{/* Quality metrics */}
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<div className="text-[10px] text-default-500 flex items-center gap-1">
<Zap className="w-3 h-3" />
入口→出口
</div>
<span className="font-mono text-xs font-semibold">
{quality?.loading ? (
<RefreshCw className="w-3 h-3 animate-spin inline" />
) : quality?.entryToExitLatency !== undefined ? (
`${quality.entryToExitLatency.toFixed(0)}ms`
) : "-"}
</span>
</div>
<div className="space-y-1">
<div className="text-[10px] text-default-500 flex items-center gap-1">
<Globe className="w-3 h-3" />
出口→Bing
</div>
<span className="font-mono text-xs font-semibold">
{quality?.loading ? (
<RefreshCw className="w-3 h-3 animate-spin inline" />
) : quality?.exitToBingLatency !== undefined ? (
`${quality.exitToBingLatency.toFixed(0)}ms`
) : "-"}
</span>
</div>
</div>
{/* Action area */}
<div className="flex justify-between items-center pt-2 border-t border-divider/50">
{quality?.error ? (
<span className="text-[11px] text-danger truncate">{quality.error}</span>
) : quality?.timestamp ? (
<span className="text-[11px] text-default-500">
{new Date(quality.timestamp).toLocaleTimeString("zh-CN")}
</span>
) : (
<span className="text-[11px] text-default-400">未检测</span>
)}
<Button
isIconOnly
size="sm"
variant="light"
isLoading={quality?.loading}
onPress={() => {
diagnoseTunnelQuality(tunnel.id);
}}
onClick={(e) => e.stopPropagation()}
>
<Stethoscope className="w-4 h-4 text-default-500" />
</Button>
</div>
</CardBody>
</Card>
);
})}
</div>
) : (
<Card className="w-full">
<Table aria-label="隧道列表">
<TableHeader>
<TableColumn>状态</TableColumn>
<TableColumn>名称</TableColumn>
<TableColumn>入口→出口</TableColumn>
<TableColumn>出口→Bing</TableColumn>
<TableColumn>质量</TableColumn>
<TableColumn align="center">操作</TableColumn>
</TableHeader>
<TableBody emptyContent="暂无隧道">
{tunnels.map((tunnel) => {
const quality = tunnelQualities[tunnel.id];
const isEnabled = tunnel.status === 1;
const overallQuality = quality?.entryToExitLatency !== undefined
? getDiagnosisQualityDisplay(quality.entryToExitLatency, quality.entryToExitLoss ?? 0)
: null;
return (
<TableRow key={tunnel.id} className="border-b border-divider/50 last:border-b-0 cursor-pointer" onClick={() => setDetailTunnelId(tunnel.id)}>
<TableCell>
<div className="flex items-center gap-1.5">
{isEnabled ? (
<Wifi className="w-3.5 h-3.5 text-success" />
) : (
<WifiOff className="w-3.5 h-3.5 text-danger" />
)}
</div>
</TableCell>
<TableCell>
<span className="font-semibold text-sm whitespace-nowrap">{tunnel.name}</span>
</TableCell>
<TableCell>
<span className="font-mono text-xs whitespace-nowrap">
{quality?.loading ? (
<RefreshCw className="w-3 h-3 animate-spin inline" />
) : quality?.entryToExitLatency !== undefined ? (
`${quality.entryToExitLatency.toFixed(0)}ms`
) : "-"}
</span>
</TableCell>
<TableCell>
<span className="font-mono text-xs whitespace-nowrap">
{quality?.loading ? (
<RefreshCw className="w-3 h-3 animate-spin inline" />
) : quality?.exitToBingLatency !== undefined ? (
`${quality.exitToBingLatency.toFixed(0)}ms`
) : "-"}
</span>
</TableCell>
<TableCell>
{overallQuality ? (
<Chip size="sm" color={overallQuality.color} variant="flat">
{overallQuality.text}
</Chip>
) : (
<span className="text-xs text-default-400">-</span>
)}
</TableCell>
<TableCell>
<div className="flex justify-center gap-1">
<Button
isIconOnly
size="sm"
variant="light"
isLoading={quality?.loading}
onPress={() => diagnoseTunnelQuality(tunnel.id)}
onClick={(e) => e.stopPropagation()}
>
<Stethoscope className="w-4 h-4 text-default-500" />
</Button>
</div>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Card>
)}
</div>
);
}