mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-28 07:36:38 +08:00
feat: add tunnel probe target UI
This commit is contained in:
@@ -525,6 +525,8 @@ export interface TunnelQualityApiItem {
|
||||
exitToBingLatency: number;
|
||||
entryToExitLoss: number;
|
||||
exitToBingLoss: number;
|
||||
probeTargetHost?: string;
|
||||
probeTargetPort?: number;
|
||||
success: boolean;
|
||||
errorMessage?: string;
|
||||
timestamp: number;
|
||||
|
||||
@@ -63,6 +63,19 @@ const MONITOR_TUNNEL_QUALITY_ENABLED_CONFIG_KEY =
|
||||
"monitor_tunnel_quality_enabled";
|
||||
const MONITOR_TUNNEL_QUALITY_ENABLED_EVENT =
|
||||
"monitorTunnelQualityEnabledChanged";
|
||||
const DEFAULT_PROBE_TARGET_LABEL = "www.bing.com:443";
|
||||
|
||||
const probeTargetLabel = (quality?: TunnelQualityApiItem | null) => {
|
||||
if (!quality?.probeTargetHost || !quality.probeTargetPort) {
|
||||
return DEFAULT_PROBE_TARGET_LABEL;
|
||||
}
|
||||
|
||||
const host = quality.probeTargetHost.includes(":")
|
||||
? `[${quality.probeTargetHost}]`
|
||||
: quality.probeTargetHost;
|
||||
|
||||
return `${host}:${quality.probeTargetPort}`;
|
||||
};
|
||||
|
||||
const formatTimestamp = (ts: number, rangeMs?: number): string => {
|
||||
const date = new Date(ts);
|
||||
@@ -177,7 +190,7 @@ function UptimeHistoryBar({
|
||||
}
|
||||
|
||||
const displayLatency = latency >= 0 ? `${latency.toFixed(0)}ms` : "-";
|
||||
const tooltip = `${timeStr} | ${displayLatency} | ${statusText}`;
|
||||
const tooltip = `${timeStr} | ${displayLatency} | ${statusText} | 测试目标: ${probeTargetLabel(q)}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -305,7 +318,7 @@ const QualityChartCard = React.memo(function QualityChartCard({
|
||||
name === "entryToExit"
|
||||
? "入口→出口"
|
||||
: name === "exitToBing"
|
||||
? "出口→Bing"
|
||||
? "出口→测试目标"
|
||||
: name;
|
||||
|
||||
return [`${n.toFixed(1)}ms`, label];
|
||||
@@ -1001,9 +1014,12 @@ export function TunnelMonitorView({
|
||||
</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 flex items-center gap-1">
|
||||
<span
|
||||
className="text-[11px] text-default-500 mb-1.5 flex items-center gap-1"
|
||||
title={probeTargetLabel(quality)}
|
||||
>
|
||||
<Globe className="w-3 h-3" />
|
||||
出口 → Bing 延迟
|
||||
出口 → 测试目标 延迟
|
||||
</span>
|
||||
<LatencyDisplay
|
||||
loading={qualityLoading}
|
||||
@@ -1027,8 +1043,11 @@ export function TunnelMonitorView({
|
||||
</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
|
||||
className="text-[11px] text-default-500 mb-1.5"
|
||||
title={probeTargetLabel(quality)}
|
||||
>
|
||||
出口 → 测试目标 丢包
|
||||
</span>
|
||||
<span
|
||||
className={`text-sm font-semibold font-mono ${(quality?.exitToBingLoss ?? 0) > 0 ? "text-warning" : ""}`}
|
||||
@@ -1054,6 +1073,9 @@ export function TunnelMonitorView({
|
||||
<span>实时隧道质量检测已关闭</span>
|
||||
</>
|
||||
)}
|
||||
<span className="text-default-400">
|
||||
· 测试目标: {probeTargetLabel(quality)}
|
||||
</span>
|
||||
{quality?.timestamp && (
|
||||
<span className="text-default-400">
|
||||
· 最近更新:{" "}
|
||||
@@ -1201,9 +1223,12 @@ export function TunnelMonitorView({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] text-default-500 flex items-center gap-1">
|
||||
<div
|
||||
className="text-[10px] text-default-500 flex items-center gap-1"
|
||||
title={probeTargetLabel(quality)}
|
||||
>
|
||||
<Globe className="w-3 h-3" />
|
||||
出口→Bing
|
||||
出口→测试目标
|
||||
</div>
|
||||
<UptimeHistoryBar
|
||||
history={qualityHistoryMap[tunnel.id]}
|
||||
@@ -1259,7 +1284,7 @@ export function TunnelMonitorView({
|
||||
<TableColumn>状态</TableColumn>
|
||||
<TableColumn>名称</TableColumn>
|
||||
<TableColumn>入口→出口</TableColumn>
|
||||
<TableColumn>出口→Bing</TableColumn>
|
||||
<TableColumn>出口→测试目标</TableColumn>
|
||||
<TableColumn>更新时间</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody emptyContent="暂无隧道">
|
||||
@@ -1294,7 +1319,7 @@ export function TunnelMonitorView({
|
||||
type="entryToExit"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell title={probeTargetLabel(quality)}>
|
||||
<UptimeHistoryBar
|
||||
history={qualityHistoryMap[tunnel.id]}
|
||||
latestValue={quality?.exitToBingLatency}
|
||||
|
||||
@@ -130,6 +130,8 @@ interface Tunnel {
|
||||
flow: number; // 1: 单向, 2: 双向
|
||||
trafficRatio: number;
|
||||
ipPreference?: string;
|
||||
probeTargetHost?: string;
|
||||
probeTargetPort?: number;
|
||||
bestExitState?: BestExitState;
|
||||
status: number;
|
||||
createdTime: string;
|
||||
@@ -156,6 +158,8 @@ interface TunnelForm {
|
||||
trafficRatio: number;
|
||||
inIp: string; // 入口IP
|
||||
ipPreference: string;
|
||||
probeTargetHost?: string;
|
||||
probeTargetPort?: number;
|
||||
status: number;
|
||||
}
|
||||
|
||||
@@ -584,6 +588,8 @@ export default function TunnelPage() {
|
||||
.join("\n")
|
||||
: "",
|
||||
ipPreference: tunnel.ipPreference || "",
|
||||
probeTargetHost: tunnel.probeTargetHost || "",
|
||||
probeTargetPort: tunnel.probeTargetPort || 0,
|
||||
status: tunnel.status,
|
||||
});
|
||||
setErrors({});
|
||||
@@ -860,12 +866,18 @@ export default function TunnelPage() {
|
||||
.map((ip) => ip.trim())
|
||||
.filter((ip) => ip)
|
||||
.join(",");
|
||||
const probeTargetHost = (form.probeTargetHost || "").trim();
|
||||
const probeTargetPort = probeTargetHost
|
||||
? Number(form.probeTargetPort || 0)
|
||||
: 0;
|
||||
|
||||
const data = {
|
||||
...form,
|
||||
inIp: inIpString,
|
||||
outNodeId: cleanedOutNodeId,
|
||||
chainNodes: cleanedChainNodes,
|
||||
probeTargetHost,
|
||||
probeTargetPort,
|
||||
};
|
||||
|
||||
const response = isEdit
|
||||
@@ -2323,6 +2335,55 @@ export default function TunnelPage() {
|
||||
</Select>
|
||||
)}
|
||||
|
||||
<div className="rounded-xl border border-divider/60 bg-default-50/40 p-3 space-y-3">
|
||||
<div>
|
||||
<div className="text-sm font-medium">质量检测目标</div>
|
||||
<p className="text-xs text-default-500 mt-0.5">
|
||||
用于实时隧道质量检测和 best 最优出口评分,留空使用
|
||||
www.bing.com:443
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-[1fr_140px] gap-3">
|
||||
<Input
|
||||
errorMessage={errors.probeTargetHost}
|
||||
isInvalid={!!errors.probeTargetHost}
|
||||
label="Host"
|
||||
placeholder="www.bing.com"
|
||||
value={form.probeTargetHost || ""}
|
||||
variant="bordered"
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
probeTargetHost: e.target.value,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
errorMessage={errors.probeTargetPort}
|
||||
isInvalid={!!errors.probeTargetPort}
|
||||
label="Port"
|
||||
max={65535}
|
||||
min={1}
|
||||
placeholder="443"
|
||||
type="number"
|
||||
value={
|
||||
form.probeTargetPort
|
||||
? String(form.probeTargetPort)
|
||||
: ""
|
||||
}
|
||||
variant="bordered"
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
probeTargetPort: e.target.value
|
||||
? Number(e.target.value)
|
||||
: 0,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
<h3 className="text-lg font-semibold">入口配置</h3>
|
||||
|
||||
|
||||
@@ -8,6 +8,8 @@ interface TunnelFormInput {
|
||||
inNodeId: TunnelChainNode[];
|
||||
outNodeId?: TunnelChainNode[];
|
||||
trafficRatio: number;
|
||||
probeTargetHost?: string;
|
||||
probeTargetPort?: number;
|
||||
}
|
||||
|
||||
interface TunnelNodeInput {
|
||||
@@ -26,6 +28,8 @@ export const createTunnelFormDefaults = () => {
|
||||
trafficRatio: 1.0,
|
||||
inIp: "",
|
||||
ipPreference: "",
|
||||
probeTargetHost: "",
|
||||
probeTargetPort: 0,
|
||||
status: 1,
|
||||
};
|
||||
};
|
||||
@@ -63,6 +67,21 @@ export const validateTunnelForm = (
|
||||
errors.trafficRatio = "流量倍率须大于0,支持小数(如 0.5)";
|
||||
}
|
||||
|
||||
const probeHost = (form.probeTargetHost || "").trim();
|
||||
const probePort = Number(form.probeTargetPort || 0);
|
||||
|
||||
if (probeHost || probePort > 0) {
|
||||
if (!probeHost) {
|
||||
errors.probeTargetHost = "请输入测试目标 Host";
|
||||
} else if (probeHost.includes("://") || /[\s/?#]/.test(probeHost)) {
|
||||
errors.probeTargetHost = "Host 不能包含协议、空格或路径";
|
||||
}
|
||||
|
||||
if (!Number.isInteger(probePort) || probePort < 1 || probePort > 65535) {
|
||||
errors.probeTargetPort = "端口必须是 1-65535";
|
||||
}
|
||||
}
|
||||
|
||||
if (form.type === 2) {
|
||||
if (!form.outNodeId || form.outNodeId.length === 0) {
|
||||
errors.outNodeId = "请至少选择一个出口节点";
|
||||
|
||||
Reference in New Issue
Block a user