mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-07 02:02:27 +08:00
257 lines
8.3 KiB
Vue
257 lines
8.3 KiB
Vue
<template>
|
||
<div class="w-full space-y-1">
|
||
<!-- 时间线 -->
|
||
<div class="flex items-center gap-px h-6 w-full">
|
||
<TooltipProvider v-for="(segment, index) in segments" :key="index" :delay-duration="100">
|
||
<Tooltip>
|
||
<TooltipTrigger as-child>
|
||
<div
|
||
class="flex-1 h-full rounded-sm transition-all duration-150 cursor-pointer hover:scale-y-110 hover:brightness-110"
|
||
:class="segment.color"
|
||
></div>
|
||
</TooltipTrigger>
|
||
<TooltipContent side="top" :side-offset="8" class="max-w-xs">
|
||
<div class="text-xs whitespace-pre-line">{{ segment.tooltip }}</div>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
</div>
|
||
<!-- 时间标签 -->
|
||
<div class="flex items-center justify-between text-[10px] text-muted-foreground">
|
||
<span>{{ earliestTime }}</span>
|
||
<span>{{ latestTime }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import type { EndpointStatusMonitor, EndpointHealthEvent, PublicEndpointStatusMonitor, PublicHealthEvent } from '@/api/endpoints'
|
||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||
|
||
// 组件同时支持管理员端和用户端的监控数据类型
|
||
// - EndpointStatusMonitor: 管理员端，包含 provider_count, key_count 等敏感信息
|
||
// - PublicEndpointStatusMonitor: 用户端，不含敏感信息
|
||
const props = defineProps<{
|
||
monitor?: EndpointStatusMonitor | PublicEndpointStatusMonitor | null
|
||
segmentCount?: number
|
||
lookbackHours?: number
|
||
}>()
|
||
|
||
// 固定格子数量，将实际事件按时间均匀分布到格子中
|
||
const GRID_COUNT = 100
|
||
|
||
const segments = computed(() => {
|
||
const gridCount = props.segmentCount ?? GRID_COUNT
|
||
const lookbackHours = props.lookbackHours ?? 6
|
||
const usageTimeline = Array.isArray(props.monitor?.timeline)
|
||
? props.monitor?.timeline ?? []
|
||
: []
|
||
|
||
if (usageTimeline.length > 0) {
|
||
return buildUsageTimelineSegments(
|
||
usageTimeline,
|
||
props.monitor?.time_range_start ?? null,
|
||
props.monitor?.time_range_end ?? null,
|
||
lookbackHours
|
||
)
|
||
}
|
||
|
||
const events = props.monitor?.events ?? []
|
||
|
||
// 无数据时显示空白格子
|
||
if (events.length === 0) {
|
||
return Array.from({ length: gridCount }, () => ({
|
||
color: 'bg-gray-300 dark:bg-gray-600',
|
||
tooltip: '暂无请求记录'
|
||
}))
|
||
}
|
||
|
||
// 计算时间范围：使用 UTC 时间戳避免时区问题
|
||
const nowUtc = Date.now()
|
||
const startTimeUtc = nowUtc - lookbackHours * 60 * 60 * 1000
|
||
const timeRange = lookbackHours * 60 * 60 * 1000
|
||
const timePerGrid = timeRange / gridCount
|
||
|
||
const gridEvents: Array<Array<EndpointHealthEvent | PublicHealthEvent>> = Array.from({ length: gridCount }, () => [])
|
||
|
||
for (const event of events) {
|
||
const eventTime = new Date(event.timestamp).getTime()
|
||
const gridIndex = Math.floor((eventTime - startTimeUtc) / timePerGrid)
|
||
if (gridIndex >= 0 && gridIndex < gridCount) {
|
||
gridEvents[gridIndex].push(event)
|
||
}
|
||
}
|
||
|
||
const result: Array<{ color: string; tooltip: string }> = []
|
||
|
||
for (let i = 0; i < gridCount; i++) {
|
||
const cellEvents = gridEvents[i]
|
||
const cellStartTime = new Date(startTimeUtc + i * timePerGrid)
|
||
const cellEndTime = new Date(startTimeUtc + (i + 1) * timePerGrid)
|
||
|
||
if (cellEvents.length === 0) {
|
||
result.push({
|
||
color: 'bg-gray-300 dark:bg-gray-600',
|
||
tooltip: `${formatTimestamp(cellStartTime.toISOString())} - ${formatTimestamp(cellEndTime.toISOString())}\n暂无请求记录`
|
||
})
|
||
continue
|
||
}
|
||
|
||
if (cellEvents.length === 1) {
|
||
result.push({
|
||
color: getStatusColor(cellEvents[0].status),
|
||
tooltip: buildTooltip(cellEvents[0])
|
||
})
|
||
continue
|
||
}
|
||
|
||
const successCount = cellEvents.filter(e => e.status === 'success').length
|
||
const failedCount = cellEvents.filter(e => e.status === 'failed').length
|
||
const skippedCount = cellEvents.filter(e => e.status === 'skipped').length
|
||
const total = cellEvents.length
|
||
|
||
let color: string
|
||
if (failedCount > 0) {
|
||
const failRate = failedCount / total
|
||
color = failRate > 0.5 ? 'bg-red-500' : 'bg-red-400/80'
|
||
} else if (successCount > 0) {
|
||
const successRate = successCount / total
|
||
color = successRate > 0.7 ? 'bg-green-500/80' : 'bg-green-400/80'
|
||
} else if (skippedCount > 0) {
|
||
color = 'bg-amber-400/80'
|
||
} else {
|
||
color = 'bg-gray-300 dark:bg-gray-600'
|
||
}
|
||
|
||
const firstTime = formatTimestamp(cellEvents[0]?.timestamp)
|
||
const lastTime = formatTimestamp(cellEvents[cellEvents.length - 1]?.timestamp)
|
||
const tooltip = `${firstTime} - ${lastTime}\n共 ${total} 次请求\n成功: ${successCount}, 失败: ${failedCount}, 跳过: ${skippedCount}`
|
||
|
||
result.push({ color, tooltip })
|
||
}
|
||
|
||
return result
|
||
})
|
||
|
||
function getStatusColor(status: string) {
|
||
switch (status) {
|
||
case 'success':
|
||
return 'bg-green-500/80 dark:bg-green-400/90'
|
||
case 'failed':
|
||
return 'bg-red-500/80 dark:bg-red-400/90'
|
||
case 'skipped':
|
||
return 'bg-amber-400/80 dark:bg-amber-300/80'
|
||
case 'started':
|
||
return 'bg-blue-400/80 dark:bg-blue-300/80'
|
||
default:
|
||
return 'bg-muted/50 dark:bg-muted/20'
|
||
}
|
||
}
|
||
|
||
function buildTooltip(event: EndpointHealthEvent | PublicHealthEvent) {
|
||
const time = formatTimestamp(event.timestamp)
|
||
const statusText = getStatusText(event.status)
|
||
const latency = event.latency_ms ? ` • ${event.latency_ms}ms` : ''
|
||
const code = event.status_code ? ` • ${event.status_code}` : ''
|
||
const error = event.error_type ? ` • ${event.error_type}` : ''
|
||
return `${time} ${statusText}${latency}${code}${error}`
|
||
}
|
||
|
||
function getStatusText(status: string) {
|
||
switch (status) {
|
||
case 'success':
|
||
return '成功'
|
||
case 'failed':
|
||
return '失败'
|
||
case 'skipped':
|
||
return '跳过'
|
||
case 'started':
|
||
return '执行中'
|
||
default:
|
||
return '未知'
|
||
}
|
||
}
|
||
|
||
function formatTimestamp(timestamp?: string | null) {
|
||
if (!timestamp) return '未知时间'
|
||
const date = new Date(timestamp)
|
||
return date.toLocaleString('zh-CN', {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit'
|
||
})
|
||
}
|
||
|
||
// 计算时间范围显示
|
||
const earliestTime = computed(() => {
|
||
const explicitStart =
|
||
(props.monitor as (EndpointStatusMonitor | PublicEndpointStatusMonitor | null))?.time_range_start
|
||
if (explicitStart) return formatTimestamp(explicitStart)
|
||
const lookbackHours = props.lookbackHours ?? 6
|
||
const startTime = new Date(Date.now() - lookbackHours * 60 * 60 * 1000)
|
||
return formatTimestamp(startTime.toISOString())
|
||
})
|
||
|
||
const latestTime = computed(() => {
|
||
const explicitEnd =
|
||
(props.monitor as (EndpointStatusMonitor | PublicEndpointStatusMonitor | null))?.time_range_end
|
||
if (explicitEnd) return formatTimestamp(explicitEnd)
|
||
return formatTimestamp(new Date().toISOString())
|
||
})
|
||
|
||
function buildUsageTimelineSegments(
|
||
statuses: string[],
|
||
timeRangeStart: string | null,
|
||
timeRangeEnd: string | null,
|
||
lookbackHours: number
|
||
) {
|
||
const gridCount = statuses.length
|
||
const endTime = timeRangeEnd ? new Date(timeRangeEnd).getTime() : Date.now()
|
||
const startTime = timeRangeStart
|
||
? new Date(timeRangeStart).getTime()
|
||
: endTime - lookbackHours * 60 * 60 * 1000
|
||
const safeRange = Math.max(endTime - startTime, 1)
|
||
const interval = safeRange / gridCount
|
||
|
||
return statuses.map((status, index) => {
|
||
const cellStart = new Date(startTime + index * interval)
|
||
const cellEnd = new Date(startTime + (index + 1) * interval)
|
||
return {
|
||
color: getHealthTimelineColor(status),
|
||
tooltip: `${formatTimestamp(cellStart.toISOString())} - ${formatTimestamp(
|
||
cellEnd.toISOString()
|
||
)}\n状态：${getHealthTimelineLabel(status)}`
|
||
}
|
||
})
|
||
}
|
||
|
||
function getHealthTimelineColor(status: string) {
|
||
switch (status) {
|
||
case 'healthy':
|
||
return 'bg-green-500/80 dark:bg-green-400/90'
|
||
case 'warning':
|
||
return 'bg-amber-400/80 dark:bg-amber-300/80'
|
||
case 'unhealthy':
|
||
return 'bg-red-500/80 dark:bg-red-400/90'
|
||
default:
|
||
return 'bg-gray-300 dark:bg-gray-600'
|
||
}
|
||
}
|
||
|
||
function getHealthTimelineLabel(status: string) {
|
||
switch (status) {
|
||
case 'healthy':
|
||
return '健康'
|
||
case 'warning':
|
||
return '警告'
|
||
case 'unhealthy':
|
||
return '异常'
|
||
default:
|
||
return '未知'
|
||
}
|
||
}
|
||
</script>
|