Merge branch 'aether-rust-pioneer' of https://github.com/fawney19/Aether into codex/codex-image-progress-heartbeat

# Conflicts:
#	frontend/src/features/usage/components/__tests__/HorizontalRequestTimeline.spec.ts
This commit is contained in:
Entropy.Xu
2026-05-09 01:26:44 +08:00
90 changed files with 8542 additions and 1252 deletions

View File

@@ -48,9 +48,58 @@ export interface ProxyNode {
export interface ProxyNodeEvent {
id: number
event_type: 'connected' | 'disconnected' | 'error'
event_type: string
detail: string | null
created_at: string
event_metadata?: Record<string, unknown> | null
created_at: string | null
}
export type ProxyNodeMetricsStep = '1m' | '1h'
export interface ProxyNodeMetricsSummary {
samples: number
uptime_samples: number
uptime_ratio: number | null
active_connections_sum: number
active_connections_max: number
active_connections_avg: number | null
heartbeat_rtt_ms_sum: number
heartbeat_rtt_ms_max: number
heartbeat_rtt_ms_avg: number | null
connect_errors_delta: number
disconnects_delta: number
error_events_delta: number
ws_in_bytes_delta: number
ws_out_bytes_delta: number
ws_in_frames_delta: number
ws_out_frames_delta: number
}
export interface ProxyNodeMetricsBucket extends ProxyNodeMetricsSummary {
node_id?: string
bucket_start_unix_secs: number
bucket_start: string | null
}
export interface ProxyNodeMetricsResponse {
step: ProxyNodeMetricsStep
from: number
to: number
items: ProxyNodeMetricsBucket[]
summary: ProxyNodeMetricsSummary
}
export interface ProxyNodeMetricsQuery {
from: number
to: number
step: ProxyNodeMetricsStep
}
export interface ProxyNodeEventQuery {
limit?: number
from?: number
to?: number
event_type?: string
}
export interface ProxyNodeUpgradeRolloutProbe {
@@ -272,8 +321,19 @@ export const proxyNodesApi = {
return response.data
},
async listNodeEvents(nodeId: string, limit = 50): Promise<{ items: ProxyNodeEvent[] }> {
const response = await apiClient.get<{ items: ProxyNodeEvent[] }>(`/api/admin/proxy-nodes/${nodeId}/events`, { params: { limit } })
async listNodeMetrics(nodeId: string, params: ProxyNodeMetricsQuery): Promise<ProxyNodeMetricsResponse> {
const response = await apiClient.get<ProxyNodeMetricsResponse>(`/api/admin/proxy-nodes/${nodeId}/metrics`, { params })
return response.data
},
async listFleetMetrics(params: ProxyNodeMetricsQuery): Promise<ProxyNodeMetricsResponse> {
const response = await apiClient.get<ProxyNodeMetricsResponse>('/api/admin/proxy-nodes/metrics/fleet', { params })
return response.data
},
async listNodeEvents(nodeId: string, query: ProxyNodeEventQuery | number = 50): Promise<{ items: ProxyNodeEvent[] }> {
const params = typeof query === 'number' ? { limit: query } : query
const response = await apiClient.get<{ items: ProxyNodeEvent[] }>(`/api/admin/proxy-nodes/${nodeId}/events`, { params })
return response.data
},
}

View File

@@ -215,31 +215,12 @@
</span>
</div>
<div
v-if="currentAttemptSchedulerInfo"
v-if="currentAttemptRequestPathDisplay"
class="info-item"
>
<span class="info-label">调度顺位</span>
<span class="info-value info-value-stacked">
<code class="format-code">
全局 {{ currentAttemptSchedulerInfo.globalPriorityLabel }}
/ Provider {{ currentAttemptSchedulerInfo.providerPriorityLabel }}
/ Key {{ currentAttemptSchedulerInfo.keyPriorityLabel }}
</code>
<span class="text-xs text-muted-foreground">
{{ currentAttemptSchedulerInfo.hint }}
</span>
</span>
</div>
<div
v-if="currentAttemptRankingInfo"
class="info-item"
>
<span class="info-label">排序原因</span>
<span class="info-value info-value-stacked">
<code class="format-code">{{ currentAttemptRankingInfo.summary }}</code>
<span class="text-xs text-muted-foreground">
{{ currentAttemptRankingInfo.hint }}
</span>
<span class="info-label">请求路径</span>
<span class="info-value">
<code class="format-code request-path-code">{{ currentAttemptRequestPathDisplay }}</code>
</span>
</div>
<div
@@ -269,19 +250,7 @@
<span class="info-value info-value-stacked">
<code class="format-code">{{ currentAttemptKeyFormatsDisplay }}</code>
<span class="text-xs text-muted-foreground">
同一 Key 的不同 endpoint 会分别参与候选与转换判定
</span>
</span>
</div>
<div
v-if="currentAttemptConversionInfo"
class="info-item"
>
<span class="info-label">转换策略</span>
<span class="info-value info-value-stacked">
<code class="format-code">{{ currentAttemptConversionInfo.summary }}</code>
<span class="text-xs text-muted-foreground">
{{ currentAttemptConversionInfo.hint }}
Key 声明的可用 endpoint 格式
</span>
</span>
</div>
@@ -1347,59 +1316,11 @@ const extractStringList = (value: unknown): string[] => {
return []
}
const normalizePriorityNumber = (value: unknown): number | null => {
if (typeof value === 'number' && Number.isFinite(value)) {
return Math.trunc(value)
}
if (typeof value === 'string' && value.trim()) {
const parsed = Number(value)
if (Number.isFinite(parsed)) {
return Math.trunc(parsed)
}
}
return null
}
const resolveClientApiFormat = (attempt: CandidateRecord): string => {
const extra = (
attempt.extra_data && typeof attempt.extra_data === 'object' && !Array.isArray(attempt.extra_data)
? attempt.extra_data
: {}
) as Record<string, unknown>
const fromExtra = typeof extra.client_api_format === 'string' ? extra.client_api_format.trim() : ''
if (fromExtra) return fromExtra
if (typeof props.requestApiFormat === 'string' && props.requestApiFormat.trim()) {
return props.requestApiFormat.trim()
}
return ''
}
const resolveProviderApiFormat = (attempt: CandidateRecord): string => {
const extra = (
attempt.extra_data && typeof attempt.extra_data === 'object' && !Array.isArray(attempt.extra_data)
? attempt.extra_data
: {}
) as Record<string, unknown>
const fromExtra = typeof extra.provider_api_format === 'string' ? extra.provider_api_format.trim() : ''
if (fromExtra) return fromExtra
if (typeof attempt.endpoint_name === 'string' && attempt.endpoint_name.trim()) {
return attempt.endpoint_name.trim()
}
return ''
}
const resolveTransportDiagnostics = (attempt: CandidateRecord): Record<string, unknown> | null => {
const extra = extractObject(attempt.extra_data)
return extractObject(extra?.transport_diagnostics)
}
const resolveEndpointFormatAcceptanceConfig = (attempt: CandidateRecord): Record<string, unknown> | null => {
const fromAttempt = extractObject(attempt.endpoint_format_acceptance_config)
if (fromAttempt) return fromAttempt
const transport = resolveTransportDiagnostics(attempt)
return extractObject(transport?.endpoint_format_acceptance_config)
}
const currentAttemptFormatDisplay = computed(() => {
const attempt = currentAttempt.value
if (!attempt) return ''
@@ -1427,120 +1348,52 @@ const currentAttemptFormatDisplay = computed(() => {
return providerText || requestText
})
const currentAttemptSchedulerInfo = computed<{
globalPriorityLabel: string
providerPriorityLabel: string
keyPriorityLabel: string
hint: string
} | null>(() => {
const attempt = currentAttempt.value
if (!attempt) return null
const normalizeQueryString = (value: string): string => {
const trimmed = value.trim()
if (!trimmed) return ''
return trimmed.startsWith('?') ? trimmed.slice(1) : trimmed
}
const clientApiFormat = resolveClientApiFormat(attempt)
const providerApiFormat = resolveProviderApiFormat(attempt)
const providerPriority = normalizePriorityNumber(attempt.provider_priority)
const keyInternalPriority = normalizePriorityNumber(attempt.key_internal_priority)
const resolveRequestPathFromObject = (value: unknown): string => {
const object = extractObject(value)
if (!object) return ''
let globalPriority: number | null = null
const globalPriorityMap = attempt.key_global_priority_by_format
if (globalPriorityMap && typeof globalPriorityMap === 'object' && !Array.isArray(globalPriorityMap) && clientApiFormat) {
const match = Object.entries(globalPriorityMap).find(([format]) => (
normalizeFormatSignature(format) === normalizeFormatSignature(clientApiFormat)
))
globalPriority = match ? normalizePriorityNumber(match[1]) : null
}
const isCrossFormat = Boolean(
clientApiFormat &&
providerApiFormat &&
normalizeFormatSignature(clientApiFormat) !== normalizeFormatSignature(providerApiFormat),
const pathWithQuery = (
readStringField(object, 'request_path_and_query')
|| readStringField(object, 'public_path_and_query')
|| readStringField(object, 'path_and_query')
|| readStringField(object, 'request_uri')
|| readStringField(object, 'public_uri')
)
const keepPriorityOnConversion = attempt.provider_keep_priority_on_conversion === true
if (pathWithQuery) return pathWithQuery
let hint = '顺位展示 Provider / Key 优先级;不同 endpoint 独立参与候选'
if (globalPriority !== null) {
hint = `当前格式 ${formatApiFormat(clientApiFormat)} 先看全局 Key 优先级;不同 endpoint 单独判定`
}
if (isCrossFormat) {
hint = keepPriorityOnConversion
? '跨格式候选已开启保持优先级;同一 Key 的不同 endpoint 独立参与'
: '跨格式候选默认排在同格式候选之后;同一 Key 的不同 endpoint 独立参与'
}
const path = (
readStringField(object, 'request_path')
|| readStringField(object, 'public_path')
|| readStringField(object, 'path')
)
if (!path) return ''
return {
globalPriorityLabel: globalPriority !== null ? String(globalPriority) : '-',
providerPriorityLabel: providerPriority !== null ? String(providerPriority) : '-',
keyPriorityLabel: keyInternalPriority !== null ? String(keyInternalPriority) : '-',
hint,
}
})
const normalizeMetadataText = (value: unknown): string => {
return typeof value === 'string' ? value.trim() : ''
const query = normalizeQueryString(
readStringField(object, 'request_query_string')
|| readStringField(object, 'public_query_string')
|| readStringField(object, 'query_string')
|| readStringField(object, 'query')
|| '',
)
if (!query || path.includes('?')) return path
return `${path}?${query}`
}
const formatRankingModeLabel = (value: string): string => {
const normalized = value.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase()
const labels: Record<string, string> = {
fixed_order: '固定顺序',
cache_affinity: '亲和性优先',
load_balance: '负载均衡',
}
return labels[normalized] || value
}
const formatPriorityModeLabel = (value: string): string => {
const normalized = value.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase()
const labels: Record<string, string> = {
provider: 'Provider 优先级',
global_key: '全局 Key 优先级',
}
return labels[normalized] || value
}
const formatRankingReasonLabel = (value: string): string => {
const labels: Record<string, string> = {
cached_affinity: '缓存亲和性命中',
local_tunnel: '本地隧道优先',
cross_format: '跨格式降级',
}
return labels[value] || value
}
const currentAttemptRankingInfo = computed<{
summary: string
hint: string
} | null>(() => {
const currentAttemptRequestPathDisplay = computed(() => {
const attempt = currentAttempt.value
if (!attempt) return null
const ranking = extractObject(attempt.ranking)
const extra = extractObject(attempt.extra_data)
if (!ranking && !extra) return null
const fromAttempt = resolveRequestPathFromObject(attempt?.extra_data)
if (fromAttempt) return fromAttempt
const rankingMode = normalizeMetadataText(ranking?.mode ?? extra?.ranking_mode)
const priorityMode = normalizeMetadataText(ranking?.priority_mode ?? extra?.priority_mode)
const promotedBy = normalizeMetadataText(ranking?.promoted_by ?? extra?.promoted_by)
const demotedBy = normalizeMetadataText(ranking?.demoted_by ?? extra?.demoted_by)
const rankingIndex = normalizePriorityNumber(ranking?.index ?? extra?.ranking_index)
const prioritySlot = normalizePriorityNumber(ranking?.priority_slot ?? extra?.priority_slot)
if (!rankingMode && !priorityMode && !promotedBy && !demotedBy && rankingIndex === null && prioritySlot === null) {
return null
}
const fromRequestMetadata = resolveRequestPathFromObject(props.requestMetadata)
if (fromRequestMetadata) return fromRequestMetadata
const summaryParts: string[] = []
if (rankingMode) summaryParts.push(formatRankingModeLabel(rankingMode))
if (promotedBy) summaryParts.push(formatRankingReasonLabel(promotedBy))
if (demotedBy) summaryParts.push(formatRankingReasonLabel(demotedBy))
const hintParts: string[] = []
if (rankingIndex !== null) hintParts.push(`排序 #${rankingIndex + 1}`)
if (priorityMode) hintParts.push(formatPriorityModeLabel(priorityMode))
if (prioritySlot !== null) hintParts.push(`槽位 ${prioritySlot}`)
return {
summary: summaryParts.length > 0 ? summaryParts.join(' / ') : '排序元数据',
hint: hintParts.length > 0 ? hintParts.join(' · ') : '候选排序由 scheduler ranking engine 生成',
}
return ''
})
const currentAttemptKeyFormatsDisplay = computed(() => {
@@ -1554,66 +1407,6 @@ const currentAttemptKeyFormatsDisplay = computed(() => {
.map(format => formatApiFormat(format))
.join(' / ')
})
const currentAttemptConversionInfo = computed<{
summary: string
hint: string
} | null>(() => {
const attempt = currentAttempt.value
if (!attempt) return null
const clientApiFormat = resolveClientApiFormat(attempt)
const providerApiFormat = resolveProviderApiFormat(attempt)
if (!clientApiFormat || !providerApiFormat) return null
const isCrossFormat = normalizeFormatSignature(clientApiFormat) !== normalizeFormatSignature(providerApiFormat)
if (!isCrossFormat) {
return {
summary: '同格式直连',
hint: '当前候选直接命中 endpoint 原生格式',
}
}
const transportDiagnostics = resolveTransportDiagnostics(attempt)
const providerEnabled = attempt.provider_enable_format_conversion === true
|| transportDiagnostics?.provider_enable_format_conversion === true
const endpointConfig = resolveEndpointFormatAcceptanceConfig(attempt)
const endpointRuleEnabled = endpointConfig
? endpointConfig.enabled !== false
: false
const acceptFormats = extractStringList(endpointConfig?.accept_formats)
const rejectFormats = extractStringList(endpointConfig?.reject_formats)
const normalizedClientFormat = normalizeFormatSignature(clientApiFormat)
const endpointAcceptsClient = acceptFormats.some(
format => normalizeFormatSignature(format) === normalizedClientFormat,
)
const endpointRejectsClient = rejectFormats.some(
format => normalizeFormatSignature(format) === normalizedClientFormat,
)
let summary = '未开启格式转换'
if (providerEnabled && endpointRuleEnabled) {
summary = 'Provider 总开关 + Endpoint 规则'
} else if (providerEnabled) {
summary = 'Provider 总格式转换'
} else if (endpointRuleEnabled) {
summary = 'Endpoint 独立格式转换'
}
let hint = '同一 Key 的不同 endpoint 会分别判定格式转换'
if (endpointRejectsClient) {
hint = `当前 endpoint 明确拒绝 ${formatApiFormat(clientApiFormat)}`
} else if (endpointAcceptsClient) {
hint = `当前 endpoint 明确接受 ${formatApiFormat(clientApiFormat)}`
} else if (providerEnabled) {
hint = '当前跨格式由 Provider 总开关放行'
} else if (attempt.skip_reason === 'format_conversion_disabled') {
hint = 'Provider 总开关关闭,且当前 endpoint 未单独放行'
}
return { summary, hint }
})
const currentAttemptSkipReasonDisplay = computed(() => {
const attempt = currentAttempt.value
if (!attempt?.skip_reason) return ''
@@ -2099,8 +1892,16 @@ const getStatusColorClass = (status: string) => {
// 展示状态:进行中态优先(包括 started 但未 finished 的中间态),再按 HTTP 状态码兜底
function getDisplayStatus(attempt: CandidateRecord | null | undefined): string {
if (!attempt) return 'available'
const code = attempt.status_code
const isTerminalSuccessCode = typeof code === 'number' && code >= 200 && code < 300
if (attempt.status === 'success') {
if (typeof code === 'number' && !isTerminalSuccessCode) {
return 'failed'
}
return 'success'
}
if (
attempt.status === 'success' ||
attempt.status === 'failed' ||
attempt.status === 'cancelled' ||
attempt.status === 'skipped' ||
@@ -2119,10 +1920,9 @@ function getDisplayStatus(attempt: CandidateRecord | null | undefined): string {
if (isExplicitPending || isImplicitPending) {
return 'pending'
}
const code = attempt.status_code
if (typeof code === 'number') {
if (code >= 200 && code < 300) return 'success'
if (code >= 400) return 'failed'
if (isTerminalSuccessCode) return 'success'
if (code >= 300) return 'failed'
}
return attempt.status
}

View File

@@ -99,12 +99,16 @@ function buildTrace(candidates: CandidateRecord[]): RequestTrace {
}
}
function mountTimeline(traceData: RequestTrace) {
function mountTimeline(
traceData: RequestTrace,
extraProps: Record<string, unknown> = {},
) {
const root = document.createElement('div')
document.body.appendChild(root)
const app = createApp(HorizontalRequestTimeline, {
requestId: traceData.request_id,
traceData,
...extraProps,
})
app.mount(root)
mountedApps.push({ app, root })
@@ -307,4 +311,52 @@ describe('HorizontalRequestTimeline', () => {
expect(root.textContent).toContain('response.output_item.added')
expect(root.textContent).toContain('image_generation.partial_image')
})
it('treats 3xx terminal responses as failed for node display', async () => {
const trace = buildTrace([
buildCandidate({
id: 'cand-redirect',
provider_id: 'provider-redirect',
provider_name: 'Provider Redirect',
key_id: 'key-redirect',
key_name: 'Redirect Key',
candidate_index: 0,
status: 'success',
status_code: 302,
}),
])
const root = mountTimeline(trace)
await nextTick()
const nodeDot = root.querySelector<HTMLElement>('.node-dot')
expect(nodeDot?.classList.contains('status-failed')).toBe(true)
expect(nodeDot?.classList.contains('status-success')).toBe(false)
})
it('shows request path from request metadata', async () => {
const trace = buildTrace([
buildCandidate({
id: 'cand-path',
provider_id: 'provider-path',
provider_name: 'Provider Path',
key_id: 'key-path',
key_name: 'Path Key',
candidate_index: 0,
status: 'failed',
}),
])
const root = mountTimeline(trace, {
requestMetadata: {
request_path: '/v1beta/models/gemini-2.5-pro:generateContent',
request_query_string: 'alt=sse',
},
})
await nextTick()
expect(root.textContent).toContain('请求路径')
const requestPathCode = root.querySelector<HTMLElement>('.request-path-code')
expect(requestPathCode?.textContent).toContain('/v1beta/models/gemini-2.5-pro:generateContent?alt=sse')
})
})

View File

@@ -120,6 +120,14 @@ describe('usage status helpers', () => {
})).toBe('failed')
})
it('downgrades terminal success to failed when status code is 3xx', () => {
expect(resolveTimelineFinalStatus({
traceFinalStatus: 'success',
requestStatus: 'completed',
statusCode: 302,
})).toBe('failed')
})
it('falls back to request lifecycle status when status code and trace are missing', () => {
expect(resolveTimelineFinalStatus({
requestStatus: 'failed',
@@ -203,6 +211,9 @@ describe('usage status helpers', () => {
expect(resolveTimelineFinalStatus({
statusCode: 200,
})).toBe('success')
expect(resolveTimelineFinalStatus({
statusCode: 302,
})).toBe('failed')
expect(resolveTimelineFinalStatus({
statusCode: 503,
})).toBe('failed')

View File

@@ -173,7 +173,7 @@ function hasTerminalSuccessStatusCode(
): boolean {
return typeof record.status_code === 'number' &&
record.status_code >= 200 &&
record.status_code < 400
record.status_code < 300
}
export function isUsageRecordFailed(record: UsageFailureSignal & Pick<UsageRecord, 'status'>): boolean {
@@ -284,18 +284,28 @@ export function resolveTimelineFinalStatus(params: {
requestStatus?: RequestStatusLike
statusCode?: number
}): TimelineFinalStatus {
const hasTerminalSuccessStatusCode = typeof params.statusCode === 'number'
? params.statusCode >= 200 && params.statusCode < 300
: undefined
const requestStatus = mapRequestStatusToTimelineStatus(params.requestStatus)
if (requestStatus === 'success' || requestStatus === 'failed' || requestStatus === 'cancelled') {
if (requestStatus === 'success' && hasTerminalSuccessStatusCode === false) {
return 'failed'
}
return requestStatus
}
const traceStatus = normalizeTimelineFinalStatus(params.traceFinalStatus)
if (traceStatus === 'success' || traceStatus === 'failed' || traceStatus === 'cancelled') {
if (traceStatus === 'success' && hasTerminalSuccessStatusCode === false) {
return 'failed'
}
return traceStatus
}
if (typeof params.statusCode === 'number') {
return params.statusCode >= 200 && params.statusCode < 400 ? 'success' : 'failed'
if (hasTerminalSuccessStatusCode !== undefined) {
return hasTerminalSuccessStatusCode ? 'success' : 'failed'
}
if (params.hasPendingCandidates) {

View File

@@ -908,7 +908,10 @@ export const MOCK_SYSTEM_CONFIGS = [
{ key: 'cache_enabled', value: true, description: '是否启用缓存' },
{ key: 'default_cache_ttl', value: 3600, description: '默认缓存 TTL' },
{ key: 'fallback_enabled', value: true, description: '是否启用故障转移' },
{ key: 'max_fallback_attempts', value: 3, description: '最大故障转移次数' }
{ key: 'max_fallback_attempts', value: 3, description: '最大故障转移次数' },
{ key: 'proxy_node_metrics_1m_retention_days', value: 30, description: '代理节点 1m 指标保留天数' },
{ key: 'proxy_node_metrics_1h_retention_days', value: 180, description: '代理节点 1h 指标保留天数' },
{ key: 'proxy_node_metrics_cleanup_batch_size', value: 5000, description: '代理节点指标每批次清理条数' }
]
// ========== API 格式 ==========

View File

@@ -131,6 +131,7 @@
<Table>
<TableHeader>
<TableRow class="border-b border-border/60 hover:bg-transparent">
<TableHead class="w-[28px] min-w-[28px] max-w-[28px] h-12 p-0 pl-2" />
<TableHead class="w-[160px] h-12 font-semibold">
名称
</TableHead>
@@ -173,141 +174,177 @@
<TableHead class="w-[160px] h-12 font-semibold">
最后心跳
</TableHead>
<TableHead class="w-[80px] h-12 font-semibold text-center">
<TableHead class="w-[140px] h-12 font-semibold text-center">
操作
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow
<template
v-for="node in paginatedNodes"
:key="node.id"
class="border-b border-border/40 hover:bg-muted/30 transition-colors"
>
<TableCell class="py-4">
<div class="flex items-center gap-1.5">
<span class="text-sm font-semibold">{{ node.name }}</span>
<Badge
v-if="node.is_manual"
variant="outline"
class="text-[10px] px-1.5 py-0"
<TableRow
class="border-b border-border/40 hover:bg-muted/30 transition-colors"
:class="isNodeExpanded(node.id) ? 'bg-muted/20' : ''"
>
<TableCell class="w-[28px] min-w-[28px] max-w-[28px] p-0 pl-2 text-center">
<button
type="button"
class="inline-flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
:title="isNodeExpanded(node.id) ? '收起数据' : '展开数据'"
@click="toggleNodeDetails(node)"
>
手动
</Badge>
<Badge
v-if="node.tunnel_mode"
variant="outline"
class="text-[10px] px-1.5 py-0"
>
Tunnel
</Badge>
<Badge
v-if="nodeSchedulingBadge(node)"
:variant="nodeSchedulingBadge(node)!.variant"
class="text-[10px] px-1.5 py-0"
>
{{ nodeSchedulingBadge(node)!.label }}
</Badge>
<HardwareTooltip :node="node" />
</div>
</TableCell>
<TableCell class="py-4">
<code class="text-xs text-muted-foreground">{{ nodeAddress(node) }}</code>
</TableCell>
<TableCell class="py-4">
<span class="text-sm text-muted-foreground">{{ formatRegion(node.region) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<Badge
:variant="statusVariant(node.status)"
:title="statusTitle(node)"
class="font-medium px-2.5 py-0.5 text-xs"
>
{{ statusLabel(node) }}
</Badge>
</TableCell>
<TableCell class="py-4 text-center">
<span class="text-sm tabular-nums">{{ formatNumber(node.total_requests) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<span
class="text-sm tabular-nums"
:class="failureRate(node) > 5 ? 'text-destructive font-medium' : ''"
>{{ formatFailureRate(node) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<span class="text-sm tabular-nums">{{ node.avg_latency_ms != null ? `${node.avg_latency_ms.toFixed(0)}ms` : '-' }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<span class="text-sm tabular-nums">{{ node.is_manual ? '-' : nodeProxyVersion(node) }}</span>
</TableCell>
<TableCell class="py-4">
<span class="text-xs text-muted-foreground">{{ formatTime(node.last_heartbeat_at) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<div class="flex items-center justify-center gap-0.5">
<Button
variant="ghost"
size="icon"
class="h-8 w-8"
:title="testingNodes.has(node.id) ? '测试中...' : '测试连通性'"
:disabled="testingNodes.has(node.id)"
@click="handleTest(node)"
>
<Loader2
v-if="testingNodes.has(node.id)"
class="h-4 w-4 animate-spin"
<ChevronDown
v-if="isNodeExpanded(node.id)"
class="h-3.5 w-3.5"
/>
<Activity
<ChevronRight
v-else
class="h-4 w-4"
class="h-3.5 w-3.5"
/>
</Button>
<Button
v-if="node.is_manual"
variant="ghost"
size="icon"
class="h-8 w-8"
title="编辑"
@click="handleEdit(node)"
</button>
</TableCell>
<TableCell class="py-4">
<div class="flex items-center gap-1.5">
<span class="text-sm font-semibold">{{ node.name }}</span>
<Badge
v-if="node.is_manual"
variant="outline"
class="text-[10px] px-1.5 py-0"
>
手动
</Badge>
<Badge
v-if="node.tunnel_mode"
variant="outline"
class="text-[10px] px-1.5 py-0"
>
Tunnel
</Badge>
<Badge
v-if="nodeSchedulingBadge(node)"
:variant="nodeSchedulingBadge(node)!.variant"
class="text-[10px] px-1.5 py-0"
>
{{ nodeSchedulingBadge(node)!.label }}
</Badge>
<HardwareTooltip :node="node" />
</div>
</TableCell>
<TableCell class="py-4">
<code class="text-xs text-muted-foreground">{{ nodeAddress(node) }}</code>
</TableCell>
<TableCell class="py-4">
<span class="text-sm text-muted-foreground">{{ formatRegion(node.region) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<Badge
:variant="statusVariant(node.status)"
:title="statusTitle(node)"
class="font-medium px-2.5 py-0.5 text-xs"
>
<SquarePen class="h-4 w-4" />
</Button>
<Button
v-if="!node.is_manual"
variant="ghost"
size="icon"
class="h-8 w-8"
title="远程配置"
@click="handleConfig(node)"
>
<Settings class="h-4 w-4" />
</Button>
<Button
v-if="!node.is_manual"
variant="ghost"
size="icon"
class="h-8 w-8"
title="连接事件"
@click="handleViewEvents(node)"
>
<History class="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
class="h-8 w-8"
title="删除"
@click="handleDelete(node)"
>
<Trash2 class="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
{{ statusLabel(node) }}
</Badge>
</TableCell>
<TableCell class="py-4 text-center">
<span class="text-sm tabular-nums">{{ formatNumber(node.total_requests) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<span
class="text-sm tabular-nums"
:class="failureRate(node) > 5 ? 'text-destructive font-medium' : ''"
>{{ formatFailureRate(node) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<span class="text-sm tabular-nums">{{ node.avg_latency_ms != null ? `${node.avg_latency_ms.toFixed(0)}ms` : '-' }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<span class="text-sm tabular-nums">{{ node.is_manual ? '-' : nodeProxyVersion(node) }}</span>
</TableCell>
<TableCell class="py-4">
<span class="text-xs text-muted-foreground">{{ formatTime(node.last_heartbeat_at) }}</span>
</TableCell>
<TableCell class="py-4 text-center">
<div class="flex items-center justify-center gap-0.5">
<Button
variant="ghost"
size="icon"
class="h-8 w-8"
:title="testingNodes.has(node.id) ? '测试中...' : '测试连通性'"
:disabled="testingNodes.has(node.id)"
@click="handleTest(node)"
>
<Loader2
v-if="testingNodes.has(node.id)"
class="h-4 w-4 animate-spin"
/>
<Activity
v-else
class="h-4 w-4"
/>
</Button>
<Button
v-if="node.is_manual"
variant="ghost"
size="icon"
class="h-8 w-8"
title="编辑"
@click="handleEdit(node)"
>
<SquarePen class="h-4 w-4" />
</Button>
<Button
v-if="!node.is_manual"
variant="ghost"
size="icon"
class="h-8 w-8"
title="远程配置"
@click="handleConfig(node)"
>
<Settings class="h-4 w-4" />
</Button>
<Button
v-if="!node.is_manual"
variant="ghost"
size="icon"
class="h-8 w-8"
title="连接事件"
@click="handleViewEvents(node)"
>
<History class="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
class="h-8 w-8"
title="删除"
@click="handleDelete(node)"
>
<Trash2 class="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
<TableRow
v-if="isNodeExpanded(node.id)"
class="border-b border-border/40 hover:bg-transparent"
>
<TableCell
colspan="11"
class="p-0"
>
<ProxyNodeDataPanel
:node="node"
:state="nodeDetails[node.id]"
@refresh="loadNodeDetails(node)"
/>
</TableCell>
</TableRow>
</template>
<TableRow v-if="paginatedNodes.length === 0">
<TableCell
colspan="10"
colspan="11"
class="py-12 text-center text-muted-foreground text-sm"
>
{{ store.loading ? '加载中...' : '暂无代理节点' }}
@@ -327,6 +364,21 @@
<div class="flex items-start justify-between mb-2">
<div>
<div class="flex items-center gap-1.5">
<button
type="button"
class="inline-flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0"
:title="isNodeExpanded(node.id) ? '收起数据' : '展开数据'"
@click="toggleNodeDetails(node)"
>
<ChevronDown
v-if="isNodeExpanded(node.id)"
class="h-3.5 w-3.5"
/>
<ChevronRight
v-else
class="h-3.5 w-3.5"
/>
</button>
<span class="font-semibold text-sm">{{ node.name }}</span>
<Badge
v-if="node.is_manual"
@@ -390,7 +442,7 @@
</div>
<div class="flex items-center justify-between">
<span class="text-xs text-muted-foreground">{{ formatTime(node.last_heartbeat_at) }}</span>
<div class="flex items-center gap-1">
<div class="flex flex-wrap items-center justify-end gap-1">
<Button
variant="ghost"
size="sm"
@@ -439,6 +491,16 @@
</Button>
</div>
</div>
<div
v-if="isNodeExpanded(node.id)"
class="mt-4 -mx-4 sm:-mx-5"
>
<ProxyNodeDataPanel
:node="node"
:state="nodeDetails[node.id]"
@refresh="loadNodeDetails(node)"
/>
</div>
</div>
<div
v-if="paginatedNodes.length === 0"
@@ -779,6 +841,7 @@ import {
proxyNodesApi,
type ProxyNode,
type ProxyNodeEvent,
type ProxyNodeMetricsResponse,
type ProxyNodeRemoteConfig,
type ProxyNodeSchedulingState,
type ProxyNodeTestResult,
@@ -808,10 +871,11 @@ import {
Dialog,
} from '@/components/ui'
import { Search, Trash2, Plus, SquarePen, Activity, Loader2, Settings, History } from 'lucide-vue-next'
import { Search, Trash2, Plus, SquarePen, Activity, Loader2, Settings, History, ChevronDown, ChevronRight } from 'lucide-vue-next'
import { parseApiError } from '@/utils/errorParser'
import { formatRegion } from '@/utils/region'
import HardwareTooltip from './components/HardwareTooltip.vue'
import ProxyNodeDataPanel from './components/ProxyNodeDataPanel.vue'
const { success, error: toastError } = useToast()
const { confirmDanger } = useConfirm()
@@ -860,6 +924,18 @@ const eventsNode = ref<ProxyNode | null>(null)
const nodeEvents = ref<ProxyNodeEvent[]>([])
const loadingEvents = ref(false)
interface ProxyNodeDetailState {
loading: boolean
error: string | null
node: ProxyNode | null
metrics: ProxyNodeMetricsResponse | null
events: ProxyNodeEvent[]
loadedAt: number | null
}
const expandedNodeIds = ref(new Set<string>())
const nodeDetails = ref<Record<string, ProxyNodeDetailState>>({})
// 测试连通性
const testingNodes = ref(new Set<string>())
const testingUrl = ref(false)
@@ -1131,12 +1207,82 @@ async function handleTest(node: ProxyNode) {
}
}
function createNodeDetailState(): ProxyNodeDetailState {
return {
loading: false,
error: null,
node: null,
metrics: null,
events: [],
loadedAt: null,
}
}
function updateNodeDetailState(nodeId: string, patch: Partial<ProxyNodeDetailState>) {
nodeDetails.value = {
...nodeDetails.value,
[nodeId]: {
...(nodeDetails.value[nodeId] ?? createNodeDetailState()),
...patch,
},
}
}
function isNodeExpanded(nodeId: string) {
return expandedNodeIds.value.has(nodeId)
}
function toggleNodeDetails(node: ProxyNode) {
const next = new Set(expandedNodeIds.value)
if (next.has(node.id)) {
next.delete(node.id)
expandedNodeIds.value = next
return
}
next.add(node.id)
expandedNodeIds.value = next
const detailState = nodeDetails.value[node.id]
if (!detailState?.loadedAt && !detailState?.loading) {
void loadNodeDetails(node)
}
}
async function loadNodeDetails(node: ProxyNode) {
updateNodeDetailState(node.id, { loading: true, error: null })
const to = Math.floor(Date.now() / 1000)
const from = to - 24 * 60 * 60
const eventsFrom = to - 7 * 24 * 60 * 60
try {
const [detail, metrics, events] = await Promise.all([
proxyNodesApi.getNode(node.id),
proxyNodesApi.listNodeMetrics(node.id, { from, to, step: '1h' }),
proxyNodesApi.listNodeEvents(node.id, { limit: 8, from: eventsFrom, to }),
])
updateNodeDetailState(node.id, {
loading: false,
error: null,
node: detail.node,
metrics,
events: events.items,
loadedAt: Date.now(),
})
} catch (err: unknown) {
updateNodeDetailState(node.id, {
loading: false,
error: parseApiError(err, '加载节点数据失败'),
})
}
}
async function handleViewEvents(node: ProxyNode) {
eventsNode.value = node
showEventsDialog.value = true
loadingEvents.value = true
try {
const res = await proxyNodesApi.listNodeEvents(node.id, 50)
const res = await proxyNodesApi.listNodeEvents(node.id, { limit: 50 })
nodeEvents.value = res.items
} catch (err: unknown) {
toastError(parseApiError(err, '加载事件失败'))

View File

@@ -102,6 +102,9 @@
:audit-log-retention-days="systemConfig.audit_log_retention_days"
:request-candidates-retention-days="systemConfig.request_candidates_retention_days"
:request-candidates-cleanup-batch-size="systemConfig.request_candidates_cleanup_batch_size"
:proxy-node-metrics-1m-retention-days="systemConfig.proxy_node_metrics_1m_retention_days"
:proxy-node-metrics-1h-retention-days="systemConfig.proxy_node_metrics_1h_retention_days"
:proxy-node-metrics-cleanup-batch-size="systemConfig.proxy_node_metrics_cleanup_batch_size"
:loading="cleanupConfigLoading"
:has-changes="hasCleanupConfigChanges"
@save="saveCleanupConfig"
@@ -114,6 +117,9 @@
@update:audit-log-retention-days="systemConfig.audit_log_retention_days = $event"
@update:request-candidates-retention-days="systemConfig.request_candidates_retention_days = $event"
@update:request-candidates-cleanup-batch-size="systemConfig.request_candidates_cleanup_batch_size = $event"
@update:proxy-node-metrics-1m-retention-days="systemConfig.proxy_node_metrics_1m_retention_days = $event"
@update:proxy-node-metrics-1h-retention-days="systemConfig.proxy_node_metrics_1h_retention_days = $event"
@update:proxy-node-metrics-cleanup-batch-size="systemConfig.proxy_node_metrics_cleanup_batch_size = $event"
/>
<!-- 定时任务 -->

View File

@@ -0,0 +1,478 @@
<template>
<div class="px-4 sm:px-6 py-4 bg-muted/15 border-t border-border/40">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
<div>
<div class="flex items-center gap-2">
<h4 class="text-sm font-semibold">
节点数据
</h4>
<Badge
variant="outline"
class="text-[10px] px-1.5 py-0"
>
最近 24 小时
</Badge>
</div>
<p class="text-xs text-muted-foreground mt-1">
{{ loadedText }}
</p>
</div>
<Button
variant="ghost"
size="sm"
class="h-8 px-2 text-xs self-start sm:self-auto"
:disabled="state?.loading"
@click="$emit('refresh')"
>
<RefreshCw
class="h-3.5 w-3.5 mr-1"
:class="state?.loading ? 'animate-spin' : ''"
/>
刷新
</Button>
</div>
<div
v-if="state?.loading && !state.metrics"
class="py-8 flex items-center justify-center gap-2 text-sm text-muted-foreground"
>
<Loader2 class="h-4 w-4 animate-spin" />
加载节点数据...
</div>
<div
v-else-if="state?.error"
class="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive flex items-start gap-2"
>
<AlertTriangle class="h-4 w-4 mt-0.5 shrink-0" />
<span>{{ state.error }}</span>
</div>
<div
v-else
class="space-y-4"
>
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-2">
<div
v-for="item in summaryStats"
:key="item.label"
class="rounded-lg border border-border/50 bg-background/70 px-3 py-2 min-w-0"
>
<div class="text-[11px] text-muted-foreground truncate">
{{ item.label }}
</div>
<div
class="text-sm font-semibold tabular-nums truncate mt-0.5"
:class="item.tone"
>
{{ item.value }}
</div>
<div
v-if="item.hint"
class="text-[10px] text-muted-foreground truncate mt-0.5"
>
{{ item.hint }}
</div>
</div>
</div>
<div class="grid gap-4 lg:grid-cols-[minmax(0,1.35fr)_minmax(280px,0.9fr)]">
<section class="rounded-lg border border-border/50 bg-background/70 p-3 min-w-0">
<div class="flex items-center justify-between gap-3 mb-3">
<div>
<h5 class="text-xs font-semibold">
在线率采样
</h5>
<p class="text-[11px] text-muted-foreground mt-0.5">
1h 颜色随在线率和错误数变化
</p>
</div>
<span class="text-[11px] text-muted-foreground tabular-nums shrink-0">{{ formatNumber(bucketItems.length) }} </span>
</div>
<div
v-if="bucketItems.length > 0"
class="h-20 flex items-end gap-1 overflow-hidden"
>
<div
v-for="bucket in bucketItems"
:key="bucket.bucket_start_unix_secs"
class="flex-1 min-w-[4px] rounded-t-sm"
:class="bucketBarClass(bucket)"
:style="{ height: bucketBarHeight(bucket) }"
:title="bucketTitle(bucket)"
/>
</div>
<div
v-else
class="h-20 rounded-md bg-muted/30 flex items-center justify-center text-xs text-muted-foreground"
>
暂无采样数据
</div>
</section>
<section class="rounded-lg border border-border/50 bg-background/70 p-3 min-w-0">
<div class="flex items-center justify-between gap-2 mb-3">
<h5 class="text-xs font-semibold">
最近事件
</h5>
<span class="text-[11px] text-muted-foreground tabular-nums">{{ recentEvents.length }}/8</span>
</div>
<div
v-if="recentEvents.length === 0"
class="h-20 rounded-md bg-muted/30 flex items-center justify-center text-xs text-muted-foreground"
>
暂无关键事件
</div>
<div
v-else
class="space-y-1.5 max-h-28 overflow-y-auto pr-1"
>
<div
v-for="event in recentEvents"
:key="event.id"
class="flex items-center gap-2 text-xs min-w-0"
>
<Badge
:variant="eventTypeVariant(event.event_type)"
class="text-[10px] px-1.5 py-0 shrink-0"
>
{{ eventTypeLabel(event.event_type) }}
</Badge>
<span class="text-muted-foreground truncate flex-1">{{ eventDetail(event) }}</span>
<span class="text-[10px] text-muted-foreground/70 tabular-nums shrink-0">{{ formatTime(event.created_at || null) }}</span>
</div>
</div>
</section>
</div>
<div class="grid gap-4 lg:grid-cols-2">
<section class="rounded-lg border border-border/50 bg-background/70 p-3 min-w-0">
<h5 class="text-xs font-semibold mb-3">
实时快照
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-2">
<div
v-for="item in snapshotItems"
:key="item.label"
class="min-w-0"
>
<div class="text-[11px] text-muted-foreground truncate">
{{ item.label }}
</div>
<div class="text-xs font-medium tabular-nums truncate mt-0.5">
{{ item.value }}
</div>
</div>
</div>
</section>
<section class="rounded-lg border border-border/50 bg-background/70 p-3 min-w-0">
<h5 class="text-xs font-semibold mb-3">
隧道计数器
</h5>
<div
v-if="tunnelMetrics"
class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-2"
>
<div
v-for="item in tunnelCounterItems"
:key="item.label"
class="min-w-0"
>
<div class="text-[11px] text-muted-foreground truncate">
{{ item.label }}
</div>
<div class="text-xs font-medium tabular-nums truncate mt-0.5">
{{ item.value }}
</div>
</div>
</div>
<div
v-else
class="rounded-md bg-muted/30 py-4 text-center text-xs text-muted-foreground"
>
暂无隧道计数器
</div>
</section>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { AlertTriangle, Loader2, RefreshCw } from 'lucide-vue-next'
import { Badge, Button } from '@/components/ui'
import type {
ProxyNode,
ProxyNodeEvent,
ProxyNodeMetricsBucket,
ProxyNodeMetricsResponse,
} from '@/api/proxy-nodes'
interface ProxyNodeDetailState {
loading: boolean
error: string | null
node: ProxyNode | null
metrics: ProxyNodeMetricsResponse | null
events: ProxyNodeEvent[]
loadedAt: number | null
}
const props = defineProps<{
node: ProxyNode
state?: ProxyNodeDetailState | null
}>()
defineEmits<{
refresh: []
}>()
const detailNode = computed(() => props.state?.node ?? props.node)
const metrics = computed(() => props.state?.metrics ?? null)
const metricsSummary = computed(() => metrics.value?.summary ?? null)
const bucketItems = computed(() => metrics.value?.items.slice(-24) ?? [])
const recentEvents = computed(() => props.state?.events.slice(0, 8) ?? [])
const metadata = computed(() => asRecord(detailNode.value.proxy_metadata))
const tunnelMetrics = computed(() => asRecord(metadata.value?.tunnel_metrics))
const loadedText = computed(() => {
if (props.state?.loading) return '正在刷新采样数据'
if (!props.state?.loadedAt) return '展开后自动读取 24 小时指标和最近关键事件'
return `数据刷新于 ${formatLoadedAt(props.state.loadedAt)}`
})
const summaryStats = computed(() => {
const summary = metricsSummary.value
const totalBytes = (summary?.ws_in_bytes_delta ?? 0) + (summary?.ws_out_bytes_delta ?? 0)
return [
{
label: '在线率',
value: formatPercent(summary?.uptime_ratio ?? null),
hint: `${formatNumber(summary?.uptime_samples ?? 0)}/${formatNumber(summary?.samples ?? 0)} 样本`,
tone: uptimeTone(summary?.uptime_ratio ?? null),
},
{
label: '心跳 RTT',
value: formatMs(summary?.heartbeat_rtt_ms_avg ?? null),
hint: `峰值 ${formatMs(summary?.heartbeat_rtt_ms_max ?? null)}`,
tone: '',
},
{
label: '并发峰值',
value: formatNumber(summary?.active_connections_max ?? 0),
hint: `均值 ${formatDecimal(summary?.active_connections_avg ?? null)}`,
tone: '',
},
{
label: '断开',
value: formatNumber(summary?.disconnects_delta ?? 0),
hint: '24h delta',
tone: (summary?.disconnects_delta ?? 0) > 0 ? 'text-yellow-600 dark:text-yellow-400' : '',
},
{
label: '连接错误',
value: formatNumber(summary?.connect_errors_delta ?? 0),
hint: '24h delta',
tone: (summary?.connect_errors_delta ?? 0) > 0 ? 'text-destructive' : '',
},
{
label: 'WS 流量',
value: formatBytes(totalBytes),
hint: `${formatNumber((summary?.ws_in_frames_delta ?? 0) + (summary?.ws_out_frames_delta ?? 0))}`,
tone: '',
},
]
})
const snapshotItems = computed(() => {
const node = detailNode.value
return [
{ label: '当前并发', value: formatNumber(node.active_connections ?? 0) },
{ label: '心跳间隔', value: `${node.heartbeat_interval ?? '-'}s` },
{ label: '最后心跳', value: formatTime(node.last_heartbeat_at) },
{ label: '隧道连接', value: node.tunnel_connected ? '已连接' : '未连接' },
{ label: '连接时间', value: formatTime(node.tunnel_connected_at) },
{ label: '容量估算', value: node.estimated_max_concurrency == null ? '-' : formatNumber(node.estimated_max_concurrency) },
{ label: '配置版本', value: `v${node.config_version}` },
{ label: '注册来源', value: node.registered_by || '-' },
{ label: '代理版本', value: stringField(metadata.value, 'version') || '-' },
]
})
const tunnelCounterItems = computed(() => [
{ label: '建连尝试', value: formatTunnelNumber('connect_attempts') },
{ label: '建连成功', value: formatTunnelNumber('connect_successes') },
{ label: '建连错误', value: formatTunnelNumber('connect_errors') },
{ label: '断开次数', value: formatTunnelNumber('disconnects') },
{ label: '最近连上', value: formatUnixSecs(numberField(tunnelMetrics.value, 'last_connected_at_unix_secs')) },
{ label: '最近断开', value: formatUnixSecs(numberField(tunnelMetrics.value, 'last_disconnected_at_unix_secs')) },
{ label: '最近在线', value: formatDurationMs(numberField(tunnelMetrics.value, 'last_connected_duration_ms')) },
{ label: '累计在线', value: formatDurationMs(numberField(tunnelMetrics.value, 'connected_duration_total_ms')) },
{ label: '心跳发送', value: formatTunnelNumber('heartbeat_sent') },
{ label: '心跳确认', value: formatTunnelNumber('heartbeat_ack') },
{ label: '最近 RTT', value: formatMs(numberField(tunnelMetrics.value, 'heartbeat_rtt_last_ms')) },
{ label: '平均 RTT', value: formatMs(numberField(tunnelMetrics.value, 'heartbeat_rtt_avg_ms')) },
{ label: 'WS 入站', value: formatBytes(numberField(tunnelMetrics.value, 'ws_in_bytes') ?? 0) },
{ label: 'WS 出站', value: formatBytes(numberField(tunnelMetrics.value, 'ws_out_bytes') ?? 0) },
{ label: '入站帧', value: formatTunnelNumber('ws_in_frames') },
{ label: '出站帧', value: formatTunnelNumber('ws_out_frames') },
])
function asRecord(value: unknown): Record<string, unknown> | null {
if (!value || typeof value !== 'object' || Array.isArray(value)) return null
return value as Record<string, unknown>
}
function numberField(record: Record<string, unknown> | null, key: string): number | null {
const value = record?.[key]
if (typeof value === 'number' && Number.isFinite(value)) return value
if (typeof value === 'string' && value.trim() !== '') {
const parsed = Number(value)
if (Number.isFinite(parsed)) return parsed
}
return null
}
function stringField(record: Record<string, unknown> | null, key: string): string | null {
const value = record?.[key]
if (typeof value !== 'string') return null
const trimmed = value.trim()
return trimmed || null
}
function formatTunnelNumber(key: string) {
return formatNumber(numberField(tunnelMetrics.value, key) ?? 0)
}
function formatNumber(value: number) {
if (!Number.isFinite(value)) return '-'
if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(1)}K`
return String(Math.round(value))
}
function formatDecimal(value: number | null) {
if (value == null || !Number.isFinite(value)) return '-'
if (value === 0) return '0'
if (value < 10) return value.toFixed(1)
return formatNumber(value)
}
function formatPercent(value: number | null) {
if (value == null || !Number.isFinite(value)) return '-'
return `${(value * 100).toFixed(value >= 0.995 || value === 0 ? 0 : 1)}%`
}
function formatMs(value: number | null) {
if (value == null || !Number.isFinite(value) || value <= 0) return '-'
if (value >= 1000) return `${(value / 1000).toFixed(1)}s`
return `${Math.round(value)}ms`
}
function formatDurationMs(value: number | null) {
if (value == null || !Number.isFinite(value) || value <= 0) return '-'
const totalSeconds = Math.floor(value / 1000)
if (totalSeconds < 60) return `${totalSeconds}s`
const totalMinutes = Math.floor(totalSeconds / 60)
if (totalMinutes < 60) return `${totalMinutes}m`
const totalHours = Math.floor(totalMinutes / 60)
if (totalHours < 24) return `${totalHours}h ${totalMinutes % 60}m`
const days = Math.floor(totalHours / 24)
return `${days}d ${totalHours % 24}h`
}
function formatUnixSecs(value: number | null) {
if (value == null || !Number.isFinite(value) || value <= 0) return '-'
return formatTime(new Date(value * 1000).toISOString())
}
function formatBytes(value: number) {
if (!Number.isFinite(value) || value <= 0) return '0 B'
const units = ['B', 'KB', 'MB', 'GB', 'TB']
let size = value
let unit = 0
while (size >= 1024 && unit < units.length - 1) {
size /= 1024
unit += 1
}
return `${unit === 0 ? Math.round(size) : size.toFixed(1)} ${units[unit]}`
}
function formatTime(iso: string | null) {
if (!iso) return '-'
const date = new Date(iso)
if (Number.isNaN(date.getTime())) return '-'
const diff = (Date.now() - date.getTime()) / 1000
if (diff >= 0 && diff < 60) return '刚刚'
if (diff >= 0 && diff < 3600) return `${Math.floor(diff / 60)}分钟前`
if (diff >= 0 && diff < 86400) return `${Math.floor(diff / 3600)}小时前`
return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}
function formatLoadedAt(value: number) {
return new Date(value).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
}
function bucketBarHeight(bucket: ProxyNodeMetricsBucket) {
if (bucket.samples <= 0 || bucket.uptime_ratio == null) return '10%'
return `${Math.max(10, Math.round(bucket.uptime_ratio * 100))}%`
}
function bucketBarClass(bucket: ProxyNodeMetricsBucket) {
if (bucket.samples <= 0) return 'bg-muted'
if (bucket.error_events_delta > 0 || bucket.connect_errors_delta > 0) return 'bg-destructive/80'
if ((bucket.uptime_ratio ?? 0) < 0.98 || bucket.disconnects_delta > 0) return 'bg-yellow-500/80'
return 'bg-primary/80'
}
function bucketTitle(bucket: ProxyNodeMetricsBucket) {
return [
formatBucketTime(bucket.bucket_start),
`在线率 ${formatPercent(bucket.uptime_ratio)}`,
`RTT ${formatMs(bucket.heartbeat_rtt_ms_avg)}`,
`断开 ${formatNumber(bucket.disconnects_delta)}`,
`错误 ${formatNumber(bucket.connect_errors_delta + bucket.error_events_delta)}`,
].join('')
}
function formatBucketTime(value: string | null) {
if (!value) return '-'
const date = new Date(value)
if (Number.isNaN(date.getTime())) return '-'
return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit' })
}
function uptimeTone(value: number | null) {
if (value == null) return ''
if (value < 0.95) return 'text-destructive'
if (value < 0.99) return 'text-yellow-600 dark:text-yellow-400'
return 'text-primary'
}
function eventTypeLabel(type: string) {
switch (type) {
case 'connected': return '连接'
case 'disconnected': return '断开'
case 'error': return '错误'
case 'tunnel_err': return '隧道错误'
default: return type
}
}
function eventTypeVariant(type: string) {
switch (type) {
case 'connected': return 'success' as const
case 'disconnected':
case 'error':
case 'tunnel_err':
return 'destructive' as const
default: return 'secondary' as const
}
}
function eventDetail(event: ProxyNodeEvent) {
const metadata = asRecord(event.event_metadata)
return event.detail || stringField(metadata, 'message') || stringField(metadata, 'category') || '-'
}
</script>

View File

@@ -192,6 +192,72 @@
独立控制候选记录大表清理节奏不再跟随 Key 删除联动
</p>
</div>
<div>
<Label
for="proxy-node-metrics-1m-retention-days"
class="block text-sm font-medium"
>
代理 1m 指标保留天数
</Label>
<Input
id="proxy-node-metrics-1m-retention-days"
:model-value="proxyNodeMetrics1mRetentionDays"
type="number"
min="1"
max="365"
placeholder="30"
class="mt-1"
@update:model-value="$emit('update:proxyNodeMetrics1mRetentionDays', Number($event))"
/>
<p class="mt-1 text-xs text-muted-foreground">
用于代理节点稳定性分钟级图表后端最少保留 1
</p>
</div>
<div>
<Label
for="proxy-node-metrics-1h-retention-days"
class="block text-sm font-medium"
>
代理 1h 指标保留天数
</Label>
<Input
id="proxy-node-metrics-1h-retention-days"
:model-value="proxyNodeMetrics1hRetentionDays"
type="number"
min="1"
max="1095"
placeholder="180"
class="mt-1"
@update:model-value="$emit('update:proxyNodeMetrics1hRetentionDays', Number($event))"
/>
<p class="mt-1 text-xs text-muted-foreground">
小时级聚合用于长期趋势不能短于 1m 指标保留天数
</p>
</div>
<div>
<Label
for="proxy-node-metrics-cleanup-batch-size"
class="block text-sm font-medium"
>
代理指标清理批次
</Label>
<Input
id="proxy-node-metrics-cleanup-batch-size"
:model-value="proxyNodeMetricsCleanupBatchSize"
type="number"
min="1"
max="50000"
placeholder="5000"
class="mt-1"
@update:model-value="$emit('update:proxyNodeMetricsCleanupBatchSize', Number($event))"
/>
<p class="mt-1 text-xs text-muted-foreground">
独立限制 proxy_node_metrics 表的单批删除数量
</p>
</div>
</div>
<!-- 清理策略说明 -->
@@ -206,6 +272,7 @@
<p>4. <strong>归档删除</strong>: 超过保留期限后完全删除记录</p>
<p>5. <strong>候选记录</strong>: 独立按保留天数清理 request_candidates 审计记录不再跟随 Key 删除联动</p>
<p>6. <strong>审计日志</strong>: 独立清理记录用户登录操作等安全事件</p>
<p>7. <strong>代理指标</strong>: 仅保留 1m/1h 聚合桶清理任务按批次删除过期桶</p>
</div>
</div>
</CardSection>
@@ -228,6 +295,9 @@ defineProps<{
auditLogRetentionDays: number
requestCandidatesRetentionDays: number
requestCandidatesCleanupBatchSize: number
proxyNodeMetrics1mRetentionDays: number
proxyNodeMetrics1hRetentionDays: number
proxyNodeMetricsCleanupBatchSize: number
loading: boolean
hasChanges: boolean
}>()
@@ -243,5 +313,8 @@ defineEmits<{
'update:auditLogRetentionDays': [value: number]
'update:requestCandidatesRetentionDays': [value: number]
'update:requestCandidatesCleanupBatchSize': [value: number]
'update:proxyNodeMetrics1mRetentionDays': [value: number]
'update:proxyNodeMetrics1hRetentionDays': [value: number]
'update:proxyNodeMetricsCleanupBatchSize': [value: number]
}>()
</script>

View File

@@ -34,6 +34,9 @@ export interface SystemConfig {
audit_log_retention_days: number
request_candidates_retention_days: number
request_candidates_cleanup_batch_size: number
proxy_node_metrics_1m_retention_days: number
proxy_node_metrics_1h_retention_days: number
proxy_node_metrics_cleanup_batch_size: number
// 定时任务
enable_provider_checkin: boolean
provider_checkin_time: string
@@ -70,6 +73,9 @@ const CONFIG_KEYS = [
'audit_log_retention_days',
'request_candidates_retention_days',
'request_candidates_cleanup_batch_size',
'proxy_node_metrics_1m_retention_days',
'proxy_node_metrics_1h_retention_days',
'proxy_node_metrics_cleanup_batch_size',
// 定时任务
'enable_provider_checkin',
'provider_checkin_time',
@@ -107,6 +113,9 @@ function createDefaultConfig(): SystemConfig {
audit_log_retention_days: 30,
request_candidates_retention_days: 30,
request_candidates_cleanup_batch_size: 5000,
proxy_node_metrics_1m_retention_days: 30,
proxy_node_metrics_1h_retention_days: 180,
proxy_node_metrics_cleanup_batch_size: 5000,
// 定时任务
enable_provider_checkin: true,
provider_checkin_time: '01:05',
@@ -181,7 +190,13 @@ export function useSystemConfig() {
systemConfig.value.request_candidates_retention_days !==
originalConfig.value.request_candidates_retention_days ||
systemConfig.value.request_candidates_cleanup_batch_size !==
originalConfig.value.request_candidates_cleanup_batch_size
originalConfig.value.request_candidates_cleanup_batch_size ||
systemConfig.value.proxy_node_metrics_1m_retention_days !==
originalConfig.value.proxy_node_metrics_1m_retention_days ||
systemConfig.value.proxy_node_metrics_1h_retention_days !==
originalConfig.value.proxy_node_metrics_1h_retention_days ||
systemConfig.value.proxy_node_metrics_cleanup_batch_size !==
originalConfig.value.proxy_node_metrics_cleanup_batch_size
)
})
@@ -441,6 +456,21 @@ export function useSystemConfig() {
value: systemConfig.value.request_candidates_cleanup_batch_size,
description: '请求候选记录每批次清理条数',
},
{
key: 'proxy_node_metrics_1m_retention_days',
value: systemConfig.value.proxy_node_metrics_1m_retention_days,
description: '代理节点 1m 指标保留天数',
},
{
key: 'proxy_node_metrics_1h_retention_days',
value: systemConfig.value.proxy_node_metrics_1h_retention_days,
description: '代理节点 1h 指标保留天数',
},
{
key: 'proxy_node_metrics_cleanup_batch_size',
value: systemConfig.value.proxy_node_metrics_cleanup_batch_size,
description: '代理节点指标每批次清理条数',
},
]
await Promise.all(
@@ -462,6 +492,12 @@ export function useSystemConfig() {
systemConfig.value.request_candidates_retention_days
originalConfig.value.request_candidates_cleanup_batch_size =
systemConfig.value.request_candidates_cleanup_batch_size
originalConfig.value.proxy_node_metrics_1m_retention_days =
systemConfig.value.proxy_node_metrics_1m_retention_days
originalConfig.value.proxy_node_metrics_1h_retention_days =
systemConfig.value.proxy_node_metrics_1h_retention_days
originalConfig.value.proxy_node_metrics_cleanup_batch_size =
systemConfig.value.proxy_node_metrics_cleanup_batch_size
}
success('请求记录清理配置已保存')
} catch (err) {