mirror of
https://github.com/fawney19/Aether.git
synced 2026-10-08 02:17:46 +08:00
refactor(health): consolidate monitor components
This commit is contained in:
AAEE86
@@ -1,6 +1,18 @@
|
||||
<template>
|
||||
<div class="w-full space-y-1">
|
||||
<!-- 时间线 -->
|
||||
<HealthStatusTimeline
|
||||
v-if="hasStatusTimeline"
|
||||
:timeline="monitor?.timeline"
|
||||
:time-range-start="monitor?.time_range_start"
|
||||
:time-range-end="monitor?.time_range_end"
|
||||
:lookback-hours="lookbackHours"
|
||||
:fallback-segments="segmentCount ?? GRID_COUNT"
|
||||
entity-label="端点"
|
||||
:entity-name="monitor?.api_format"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-full space-y-1"
|
||||
>
|
||||
<div class="flex items-center gap-px h-6 w-full">
|
||||
<TooltipProvider
|
||||
v-for="(segment, index) in segments"
|
||||
@@ -26,7 +38,6 @@
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<!-- 时间标签 -->
|
||||
<div class="flex items-center justify-between text-[10px] text-muted-foreground">
|
||||
<span>{{ earliestTime }}</span>
|
||||
<span>{{ latestTime }}</span>
|
||||
@@ -38,6 +49,8 @@
|
||||
import { computed } from 'vue'
|
||||
import type { EndpointStatusMonitor, EndpointHealthEvent, PublicEndpointStatusMonitor, PublicHealthEvent } from '@/api/endpoints'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import HealthStatusTimeline from './HealthStatusTimeline.vue'
|
||||
import { formatTimestamp } from './health-monitor-utils'
|
||||
|
||||
// 组件同时支持管理员端和用户端的监控数据类型
|
||||
// - EndpointStatusMonitor: 管理员端，包含 provider_count, key_count 等敏感信息
|
||||
@@ -49,24 +62,15 @@ const props = defineProps<{
|
||||
}>()
|
||||
|
||||
// 固定格子数量，将实际事件按时间均匀分布到格子中
|
||||
const GRID_COUNT = 100
|
||||
const GRID_COUNT = 60
|
||||
|
||||
const hasStatusTimeline = computed(() =>
|
||||
Array.isArray(props.monitor?.timeline) && (props.monitor?.timeline?.length ?? 0) > 0
|
||||
)
|
||||
|
||||
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 ?? []
|
||||
|
||||
// 无数据时显示空白格子
|
||||
@@ -183,18 +187,6 @@ function getStatusText(status: string) {
|
||||
}
|
||||
}
|
||||
|
||||
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 =
|
||||
@@ -212,55 +204,4 @@ const latestTime = computed(() => {
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
<div
|
||||
v-for="metric in metrics"
|
||||
:key="metric.label"
|
||||
class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div class="text-[11px] leading-tight text-muted-foreground">
|
||||
{{ metric.label }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 text-sm font-semibold tabular-nums"
|
||||
:class="metric.valueClass"
|
||||
>
|
||||
{{ metric.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import {
|
||||
formatAvailability,
|
||||
formatMs,
|
||||
formatTps,
|
||||
getAvailabilityClass
|
||||
} from './health-monitor-utils'
|
||||
|
||||
const props = defineProps<{
|
||||
avgLatencyMs?: number | null
|
||||
avgFirstByteMs?: number | null
|
||||
avgTps?: number | null
|
||||
totalAttempts: number
|
||||
successRate: number
|
||||
}>()
|
||||
|
||||
const availabilityItem = computed(() => ({
|
||||
total_attempts: props.totalAttempts,
|
||||
success_rate: props.successRate
|
||||
}))
|
||||
|
||||
const metrics = computed(() => [
|
||||
{
|
||||
label: '平均耗时',
|
||||
value: formatMs(props.avgLatencyMs),
|
||||
valueClass: ''
|
||||
},
|
||||
{
|
||||
label: '平均TTFB',
|
||||
value: formatMs(props.avgFirstByteMs),
|
||||
valueClass: ''
|
||||
},
|
||||
{
|
||||
label: '平均速度',
|
||||
value: formatTps(props.avgTps),
|
||||
valueClass: ''
|
||||
},
|
||||
{
|
||||
label: '可用率',
|
||||
value: formatAvailability(availabilityItem.value),
|
||||
valueClass: getAvailabilityClass(availabilityItem.value)
|
||||
}
|
||||
])
|
||||
</script>
|
||||
@@ -3,52 +3,14 @@
|
||||
variant="default"
|
||||
class="overflow-hidden"
|
||||
>
|
||||
<!-- 标题和筛选器 -->
|
||||
<div class="px-6 py-3.5 border-b border-border/60">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
基于真实请求统计端点可用率、请求成功率与健康历史
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<Label class="text-xs text-muted-foreground">回溯时间：</Label>
|
||||
<Select
|
||||
v-model="lookbackHours"
|
||||
>
|
||||
<SelectTrigger class="w-28 h-8 text-xs border-border/60">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">
|
||||
1 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="6">
|
||||
6 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="12">
|
||||
12 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="24">
|
||||
24 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="48">
|
||||
48 小时
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<RefreshButton
|
||||
:loading="loading"
|
||||
@click="refreshData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HealthMonitorHeader
|
||||
v-model:lookback-hours="lookbackHours"
|
||||
:title="title"
|
||||
description="基于真实请求统计端点可用率、平均耗时、平均TTFB 与平均速度"
|
||||
:loading="loading"
|
||||
@refresh="refreshData"
|
||||
/>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="p-6">
|
||||
<div
|
||||
v-if="loadingMonitors"
|
||||
@@ -71,59 +33,66 @@
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="space-y-3"
|
||||
class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"
|
||||
>
|
||||
<div
|
||||
v-for="monitor in monitors"
|
||||
:key="monitor.api_format"
|
||||
class="border border-border/60 rounded-lg p-4 hover:border-primary/50 transition-colors"
|
||||
v-for="(monitor, index) in monitors"
|
||||
:key="`${monitor.api_format}-${index}`"
|
||||
class="relative overflow-hidden rounded-xl border border-border/60 bg-card/60 p-4 transition-colors hover:border-primary/50"
|
||||
>
|
||||
<!-- 响应式布局：窄屏上下两行，宽屏左右结构 -->
|
||||
<div class="flex flex-col sm:flex-row sm:gap-6 sm:items-center">
|
||||
<!-- 第一行/左侧：信息区域 -->
|
||||
<div class="sm:w-52 flex-shrink-0 space-y-1.5 mb-3 sm:mb-0">
|
||||
<!-- API 格式标签和成功率 -->
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<div
|
||||
class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent"
|
||||
/>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div
|
||||
class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl border border-border/60 bg-muted/50"
|
||||
>
|
||||
<Activity class="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<h4 class="truncate text-sm font-semibold">
|
||||
{{ formatApiFormat(monitor.api_format) }}
|
||||
</h4>
|
||||
<Badge
|
||||
variant="outline"
|
||||
class="font-mono text-xs whitespace-nowrap"
|
||||
class="mt-1 max-w-full font-mono text-[11px]"
|
||||
>
|
||||
{{ formatApiFormat(monitor.api_format) }}
|
||||
<span class="truncate">{{ monitor.api_format }}</span>
|
||||
</Badge>
|
||||
<Badge
|
||||
v-if="monitor.total_attempts > 0"
|
||||
:variant="getSuccessRateVariant(monitor.success_rate)"
|
||||
class="text-xs whitespace-nowrap"
|
||||
>
|
||||
{{ (monitor.success_rate * 100).toFixed(0) }}%
|
||||
</Badge>
|
||||
<!-- 提供商信息（仅管理员可见）- 窄屏时显示在同一行 -->
|
||||
<span
|
||||
v-if="showProviderInfo && 'provider_count' in monitor"
|
||||
class="text-xs text-muted-foreground sm:hidden"
|
||||
>
|
||||
{{ monitor.provider_count }} 个提供商 / {{ monitor.key_count }} 个密钥
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 提供商信息（仅管理员可见）- 宽屏时显示在下方 -->
|
||||
<div
|
||||
v-if="showProviderInfo && 'provider_count' in monitor"
|
||||
class="text-xs text-muted-foreground hidden sm:block"
|
||||
>
|
||||
{{ monitor.provider_count }} 个提供商 / {{ monitor.key_count }} 个密钥
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
:variant="getHealthBadgeVariant(monitor)"
|
||||
class="shrink-0"
|
||||
>
|
||||
{{ getHealthLabel(monitor) }}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<!-- 第二行/右侧：时间线区域 -->
|
||||
<div class="flex-1 min-w-0 sm:flex sm:justify-end">
|
||||
<div class="w-full sm:max-w-5xl">
|
||||
<EndpointHealthTimeline
|
||||
:monitor="monitor"
|
||||
:lookback-hours="parseInt(lookbackHours)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<HealthMetricGrid
|
||||
class="mt-4"
|
||||
:avg-latency-ms="monitor.avg_latency_ms"
|
||||
:avg-first-byte-ms="monitor.avg_first_byte_ms"
|
||||
:avg-tps="monitor.avg_tps"
|
||||
:total-attempts="monitor.total_attempts"
|
||||
:success-rate="monitor.success_rate"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="mt-4 flex items-center justify-between gap-3 text-[11px] uppercase tracking-wide text-muted-foreground"
|
||||
>
|
||||
<span>History (60pts)</span>
|
||||
<span class="truncate normal-case tracking-normal">
|
||||
{{ getEndpointMetaText(monitor) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<EndpointHealthTimeline
|
||||
:monitor="monitor"
|
||||
:lookback-hours="parseInt(lookbackHours)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,19 +105,21 @@ import { ref, onMounted, watch } from 'vue'
|
||||
import { Activity, Loader2 } from 'lucide-vue-next'
|
||||
import Card from '@/components/ui/card.vue'
|
||||
import Badge from '@/components/ui/badge.vue'
|
||||
import Label from '@/components/ui/label.vue'
|
||||
import Select from '@/components/ui/select.vue'
|
||||
import SelectTrigger from '@/components/ui/select-trigger.vue'
|
||||
import SelectValue from '@/components/ui/select-value.vue'
|
||||
import SelectContent from '@/components/ui/select-content.vue'
|
||||
import SelectItem from '@/components/ui/select-item.vue'
|
||||
import RefreshButton from '@/components/ui/refresh-button.vue'
|
||||
import HealthMetricGrid from './HealthMetricGrid.vue'
|
||||
import HealthMonitorHeader from './HealthMonitorHeader.vue'
|
||||
import EndpointHealthTimeline from './EndpointHealthTimeline.vue'
|
||||
import { getEndpointStatusMonitor, getPublicEndpointStatusMonitor } from '@/api/endpoints/health'
|
||||
import type { EndpointStatusMonitor, PublicEndpointStatusMonitor } from '@/api/endpoints/types'
|
||||
import { useToast } from '@/composables/useToast'
|
||||
import { parseApiError } from '@/utils/errorParser'
|
||||
import { formatApiFormat } from '@/api/endpoints/types/api-format'
|
||||
import {
|
||||
formatCompactNumber,
|
||||
getHealthBadgeVariant,
|
||||
getHealthLabel
|
||||
} from './health-monitor-utils'
|
||||
|
||||
type EndpointMonitor = EndpointStatusMonitor | PublicEndpointStatusMonitor
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
title?: string
|
||||
@@ -164,7 +135,7 @@ const { error: showError } = useToast()
|
||||
|
||||
const loading = ref(false)
|
||||
const loadingMonitors = ref(false)
|
||||
const monitors = ref<(EndpointStatusMonitor | PublicEndpointStatusMonitor)[]>([])
|
||||
const monitors = ref<EndpointMonitor[]>([])
|
||||
const lookbackHours = ref('6')
|
||||
|
||||
async function loadMonitors() {
|
||||
@@ -198,10 +169,23 @@ async function refreshData() {
|
||||
}
|
||||
}
|
||||
|
||||
function getSuccessRateVariant(rate: number): 'default' | 'secondary' | 'destructive' | 'outline' {
|
||||
if (rate >= 0.95) return 'default'
|
||||
if (rate >= 0.8) return 'secondary'
|
||||
return 'destructive'
|
||||
function getEndpointMetaText(monitor: EndpointMonitor) {
|
||||
const attempts = `${formatCompactNumber(monitor.total_attempts)} 次请求`
|
||||
if (props.showProviderInfo && hasProviderInfo(monitor)) {
|
||||
return `${monitor.provider_count} 个提供商 / ${monitor.key_count} 个密钥 / ${attempts}`
|
||||
}
|
||||
if (hasApiPath(monitor)) {
|
||||
return `${monitor.api_path} / ${attempts}`
|
||||
}
|
||||
return attempts
|
||||
}
|
||||
|
||||
function hasProviderInfo(monitor: EndpointMonitor): monitor is EndpointStatusMonitor {
|
||||
return 'provider_count' in monitor && typeof monitor.provider_count === 'number'
|
||||
}
|
||||
|
||||
function hasApiPath(monitor: EndpointMonitor): monitor is PublicEndpointStatusMonitor {
|
||||
return 'api_path' in monitor && typeof monitor.api_path === 'string' && monitor.api_path.length > 0
|
||||
}
|
||||
|
||||
watch(lookbackHours, () => {
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="px-6 py-3.5 border-b border-border/60">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<Label class="text-xs text-muted-foreground">回溯时间：</Label>
|
||||
<Select v-model="selectedLookbackHours">
|
||||
<SelectTrigger class="w-28 h-8 text-xs border-border/60">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">
|
||||
1 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="6">
|
||||
6 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="12">
|
||||
12 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="24">
|
||||
24 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="48">
|
||||
48 小时
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<RefreshButton
|
||||
:loading="loading"
|
||||
@click="$emit('refresh')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import Label from '@/components/ui/label.vue'
|
||||
import Select from '@/components/ui/select.vue'
|
||||
import SelectTrigger from '@/components/ui/select-trigger.vue'
|
||||
import SelectValue from '@/components/ui/select-value.vue'
|
||||
import SelectContent from '@/components/ui/select-content.vue'
|
||||
import SelectItem from '@/components/ui/select-item.vue'
|
||||
import RefreshButton from '@/components/ui/refresh-button.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
description: string
|
||||
lookbackHours: string
|
||||
loading: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:lookbackHours': [value: string]
|
||||
refresh: []
|
||||
}>()
|
||||
|
||||
const selectedLookbackHours = computed({
|
||||
get: () => props.lookbackHours,
|
||||
set: value => emit('update:lookbackHours', value)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="w-full space-y-1">
|
||||
<div class="flex h-6 w-full items-center gap-px">
|
||||
<TooltipProvider
|
||||
v-for="(segment, index) in segments"
|
||||
:key="index"
|
||||
:delay-duration="100"
|
||||
>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<div
|
||||
class="h-full flex-1 cursor-pointer rounded-sm transition-all duration-150 hover:scale-y-110 hover:brightness-110"
|
||||
:class="getTimelineColor(segment.status)"
|
||||
/>
|
||||
</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>{{ startLabel }}</span>
|
||||
<span>{{ endLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import {
|
||||
formatTimestamp,
|
||||
getTimelineColor,
|
||||
getTimelineLabel
|
||||
} from './health-monitor-utils'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
timeline?: string[] | null
|
||||
timeRangeStart?: string | null
|
||||
timeRangeEnd?: string | null
|
||||
generatedAt?: string | null
|
||||
lookbackHours?: number
|
||||
fallbackSegments?: number
|
||||
entityLabel?: string
|
||||
entityName?: string | null
|
||||
}>(), {
|
||||
lookbackHours: 6,
|
||||
fallbackSegments: 60,
|
||||
entityLabel: '',
|
||||
entityName: null
|
||||
})
|
||||
|
||||
const statuses = computed(() => {
|
||||
if (Array.isArray(props.timeline) && props.timeline.length > 0) {
|
||||
return props.timeline
|
||||
}
|
||||
return Array.from({ length: props.fallbackSegments }, () => 'unknown')
|
||||
})
|
||||
|
||||
const startMs = computed(() => {
|
||||
const explicitStart = props.timeRangeStart
|
||||
? new Date(props.timeRangeStart).getTime()
|
||||
: NaN
|
||||
if (!Number.isNaN(explicitStart)) return explicitStart
|
||||
return endMs.value - props.lookbackHours * 60 * 60 * 1000
|
||||
})
|
||||
|
||||
const endMs = computed(() => {
|
||||
const explicitEnd = props.timeRangeEnd
|
||||
? new Date(props.timeRangeEnd).getTime()
|
||||
: NaN
|
||||
if (!Number.isNaN(explicitEnd)) return explicitEnd
|
||||
const generatedAt = props.generatedAt
|
||||
? new Date(props.generatedAt).getTime()
|
||||
: NaN
|
||||
if (!Number.isNaN(generatedAt)) return generatedAt
|
||||
return Date.now()
|
||||
})
|
||||
|
||||
const startLabel = computed(() => formatTimestamp(new Date(startMs.value).toISOString()))
|
||||
const endLabel = computed(() => formatTimestamp(new Date(endMs.value).toISOString()))
|
||||
|
||||
const segments = computed(() => {
|
||||
const segmentStatuses = statuses.value
|
||||
const safeRange = Math.max(endMs.value - startMs.value, 1)
|
||||
const interval = safeRange / segmentStatuses.length
|
||||
|
||||
return segmentStatuses.map((status, index) => {
|
||||
const cellStart = new Date(startMs.value + index * interval).toISOString()
|
||||
const cellEnd = new Date(startMs.value + (index + 1) * interval).toISOString()
|
||||
return {
|
||||
status,
|
||||
tooltip: buildTooltip(status, cellStart, cellEnd)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function buildTooltip(status: string, cellStart: string, cellEnd: string) {
|
||||
const entity = props.entityLabel && props.entityName
|
||||
? `\n${props.entityLabel}：${props.entityName}`
|
||||
: ''
|
||||
return `${formatTimestamp(cellStart)} - ${formatTimestamp(cellEnd)}${entity}\n状态：${getTimelineLabel(status)}`
|
||||
}
|
||||
</script>
|
||||
@@ -1,35 +1,12 @@
|
||||
<template>
|
||||
<Card variant="default" class="overflow-hidden">
|
||||
<div class="px-6 py-3.5 border-b border-border/60">
|
||||
<div
|
||||
class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
基于真实请求统计模型可用率、平均耗时、平均TTFB 与平均速度
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<Label class="text-xs text-muted-foreground">回溯时间：</Label>
|
||||
<Select v-model="lookbackHours">
|
||||
<SelectTrigger class="w-28 h-8 text-xs border-border/60">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1"> 1 小时 </SelectItem>
|
||||
<SelectItem value="6"> 6 小时 </SelectItem>
|
||||
<SelectItem value="12"> 12 小时 </SelectItem>
|
||||
<SelectItem value="24"> 24 小时 </SelectItem>
|
||||
<SelectItem value="48"> 48 小时 </SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<RefreshButton :loading="loading" @click="refreshData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HealthMonitorHeader
|
||||
v-model:lookback-hours="lookbackHours"
|
||||
:title="title"
|
||||
description="基于真实请求统计模型可用率、平均耗时、平均TTFB 与平均速度"
|
||||
:loading="loading"
|
||||
@refresh="refreshData"
|
||||
/>
|
||||
|
||||
<div class="p-6">
|
||||
<div
|
||||
@@ -74,63 +51,14 @@
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
<div
|
||||
class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-1.5 text-[11px] leading-tight text-muted-foreground"
|
||||
>
|
||||
<Gauge class="h-3.5 w-3.5" />
|
||||
平均耗时
|
||||
</div>
|
||||
<div class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ formatMs(monitor.avg_latency_ms) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-1.5 text-[11px] leading-tight text-muted-foreground"
|
||||
>
|
||||
<Radio class="h-3.5 w-3.5" />
|
||||
平均TTFB
|
||||
</div>
|
||||
<div class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ formatMs(monitor.avg_first_byte_ms) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-1.5 text-[11px] leading-tight text-muted-foreground"
|
||||
>
|
||||
<Zap class="h-3.5 w-3.5" />
|
||||
平均速度
|
||||
</div>
|
||||
<div class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ formatTps(monitor.avg_tps) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-1.5 text-[11px] leading-tight text-muted-foreground"
|
||||
>
|
||||
<Activity class="h-3.5 w-3.5" />
|
||||
可用率
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 text-sm font-semibold tabular-nums"
|
||||
:class="getSuccessRateClass(monitor.success_rate)"
|
||||
>
|
||||
{{ formatPercent(monitor.success_rate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HealthMetricGrid
|
||||
class="mt-4"
|
||||
:avg-latency-ms="monitor.avg_latency_ms"
|
||||
:avg-first-byte-ms="monitor.avg_first_byte_ms"
|
||||
:avg-tps="monitor.avg_tps"
|
||||
:total-attempts="monitor.total_attempts"
|
||||
:success-rate="monitor.success_rate"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="mt-4 flex items-center justify-between gap-3 text-[11px] uppercase tracking-wide text-muted-foreground"
|
||||
@@ -141,36 +69,16 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 w-full space-y-1">
|
||||
<div class="flex h-6 w-full items-center gap-px">
|
||||
<TooltipProvider
|
||||
v-for="(segment, index) in timelineSegments(monitor)"
|
||||
:key="`${monitor.model}-${index}`"
|
||||
:delay-duration="100"
|
||||
>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<div
|
||||
class="h-full flex-1 cursor-pointer rounded-sm transition-all duration-150 hover:scale-y-110 hover:brightness-110"
|
||||
:class="getTimelineColor(segment)"
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top" :side-offset="8" class="max-w-xs">
|
||||
<div class="text-xs whitespace-pre-line">
|
||||
{{ buildTimelineTooltip(monitor, segment, index) }}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-[10px] text-muted-foreground">
|
||||
<span>{{ formatTimestamp(monitor.time_range_start) }}</span>
|
||||
<span>{{
|
||||
formatTimestamp(monitor.time_range_end || generatedAt)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<HealthStatusTimeline
|
||||
class="mt-2"
|
||||
:timeline="monitor.timeline"
|
||||
:time-range-start="monitor.time_range_start"
|
||||
:time-range-end="monitor.time_range_end"
|
||||
:generated-at="generatedAt"
|
||||
:lookback-hours="parseInt(lookbackHours)"
|
||||
entity-label="模型"
|
||||
:entity-name="monitor.model"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -179,22 +87,12 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { Activity, Bot, Gauge, Loader2, Radio, Zap } from "lucide-vue-next";
|
||||
import { Bot, Loader2 } from "lucide-vue-next";
|
||||
import Card from "@/components/ui/card.vue";
|
||||
import Badge from "@/components/ui/badge.vue";
|
||||
import Label from "@/components/ui/label.vue";
|
||||
import Select from "@/components/ui/select.vue";
|
||||
import SelectTrigger from "@/components/ui/select-trigger.vue";
|
||||
import SelectValue from "@/components/ui/select-value.vue";
|
||||
import SelectContent from "@/components/ui/select-content.vue";
|
||||
import SelectItem from "@/components/ui/select-item.vue";
|
||||
import RefreshButton from "@/components/ui/refresh-button.vue";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import HealthMetricGrid from "./HealthMetricGrid.vue";
|
||||
import HealthMonitorHeader from "./HealthMonitorHeader.vue";
|
||||
import HealthStatusTimeline from "./HealthStatusTimeline.vue";
|
||||
import {
|
||||
getModelStatusMonitor,
|
||||
getPublicModelStatusMonitor,
|
||||
@@ -202,6 +100,11 @@ import {
|
||||
import type { ModelStatusMonitor } from "@/api/endpoints/types";
|
||||
import { useToast } from "@/composables/useToast";
|
||||
import { parseApiError } from "@/utils/errorParser";
|
||||
import {
|
||||
formatCompactNumber,
|
||||
getHealthBadgeVariant,
|
||||
getHealthLabel,
|
||||
} from "./health-monitor-utils";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -254,35 +157,6 @@ async function refreshData() {
|
||||
}
|
||||
}
|
||||
|
||||
function getHealthLabel(monitor: ModelStatusMonitor) {
|
||||
if (monitor.total_attempts <= 0) return "未知";
|
||||
if (monitor.success_rate >= 0.95) return "正常";
|
||||
if (monitor.success_rate >= 0.8) return "波动";
|
||||
return "异常";
|
||||
}
|
||||
|
||||
function getHealthBadgeVariant(
|
||||
monitor: ModelStatusMonitor,
|
||||
):
|
||||
| "default"
|
||||
| "secondary"
|
||||
| "destructive"
|
||||
| "outline"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "dark" {
|
||||
if (monitor.total_attempts <= 0) return "outline";
|
||||
if (monitor.success_rate >= 0.95) return "success";
|
||||
if (monitor.success_rate >= 0.8) return "warning";
|
||||
return "destructive";
|
||||
}
|
||||
|
||||
function getSuccessRateClass(rate: number) {
|
||||
if (rate >= 0.95) return "text-green-600 dark:text-green-400";
|
||||
if (rate >= 0.8) return "text-amber-600 dark:text-amber-400";
|
||||
return "text-red-600 dark:text-red-400";
|
||||
}
|
||||
|
||||
function getModelMetaText(monitor: ModelStatusMonitor) {
|
||||
const attempts = `${formatCompactNumber(monitor.total_attempts)} 次请求`;
|
||||
if (props.showProviderInfo && typeof monitor.provider_count === "number") {
|
||||
@@ -291,102 +165,6 @@ function getModelMetaText(monitor: ModelStatusMonitor) {
|
||||
return attempts;
|
||||
}
|
||||
|
||||
function formatMs(value?: number | null) {
|
||||
if (typeof value !== "number" || Number.isNaN(value)) return "-";
|
||||
const absValue = Math.abs(value);
|
||||
if (absValue < 1000) return `${Math.round(value)} ms`;
|
||||
if (absValue < 60_000) return `${formatDurationNumber(value / 1000)} s`;
|
||||
return `${formatDurationNumber(value / 60_000)} min`;
|
||||
}
|
||||
|
||||
function formatDurationNumber(value: number) {
|
||||
return new Intl.NumberFormat("zh-CN", {
|
||||
maximumFractionDigits: Math.abs(value) < 10 ? 2 : 1,
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
function formatPercent(value: number) {
|
||||
if (typeof value !== "number" || Number.isNaN(value)) return "-";
|
||||
return `${(value * 100).toFixed(2)}%`;
|
||||
}
|
||||
|
||||
function formatTps(value?: number | null) {
|
||||
if (typeof value !== "number" || Number.isNaN(value)) return "-";
|
||||
return `${new Intl.NumberFormat("zh-CN", {
|
||||
maximumFractionDigits: value < 10 ? 2 : value < 100 ? 1 : 0,
|
||||
}).format(value)} tps`;
|
||||
}
|
||||
|
||||
function formatCompactNumber(value: number) {
|
||||
return new Intl.NumberFormat("zh-CN", {
|
||||
notation: "compact",
|
||||
maximumFractionDigits: 1,
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
function timelineSegments(monitor: ModelStatusMonitor) {
|
||||
const timeline = Array.isArray(monitor.timeline) ? monitor.timeline : [];
|
||||
if (timeline.length > 0) return timeline;
|
||||
return Array.from({ length: 60 }, () => "unknown");
|
||||
}
|
||||
|
||||
function getTimelineColor(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 getTimelineLabel(status: string) {
|
||||
switch (status) {
|
||||
case "healthy":
|
||||
return "健康";
|
||||
case "warning":
|
||||
return "波动";
|
||||
case "unhealthy":
|
||||
return "异常";
|
||||
default:
|
||||
return "无请求";
|
||||
}
|
||||
}
|
||||
|
||||
function buildTimelineTooltip(
|
||||
monitor: ModelStatusMonitor,
|
||||
status: string,
|
||||
index: number,
|
||||
) {
|
||||
const segmentCount = timelineSegments(monitor).length;
|
||||
const startMs = monitor.time_range_start
|
||||
? new Date(monitor.time_range_start).getTime()
|
||||
: Date.now() - parseInt(lookbackHours.value) * 60 * 60 * 1000;
|
||||
const endMs = monitor.time_range_end
|
||||
? new Date(monitor.time_range_end).getTime()
|
||||
: Date.now();
|
||||
const interval = Math.max(endMs - startMs, 1) / segmentCount;
|
||||
const cellStart = new Date(startMs + index * interval).toISOString();
|
||||
const cellEnd = new Date(startMs + (index + 1) * interval).toISOString();
|
||||
return `${formatTimestamp(cellStart)} - ${formatTimestamp(cellEnd)}\n模型：${monitor.model}\n状态：${getTimelineLabel(status)}`;
|
||||
}
|
||||
|
||||
function formatTimestamp(timestamp?: string | null) {
|
||||
if (!timestamp) return "未知时间";
|
||||
const date = new Date(timestamp);
|
||||
if (Number.isNaN(date.getTime())) return "未知时间";
|
||||
return date.toLocaleString("zh-CN", {
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
watch(lookbackHours, () => {
|
||||
loadMonitors();
|
||||
});
|
||||
|
||||
@@ -3,47 +3,13 @@
|
||||
variant="default"
|
||||
class="overflow-hidden"
|
||||
>
|
||||
<div class="px-6 py-3.5 border-b border-border/60">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
仅展示活跃提供商，展开后查看该提供商下的模型健康明细
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<Label class="text-xs text-muted-foreground">回溯时间：</Label>
|
||||
<Select v-model="lookbackHours">
|
||||
<SelectTrigger class="w-28 h-8 text-xs border-border/60">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">
|
||||
1 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="6">
|
||||
6 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="12">
|
||||
12 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="24">
|
||||
24 小时
|
||||
</SelectItem>
|
||||
<SelectItem value="48">
|
||||
48 小时
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<RefreshButton
|
||||
:loading="loading"
|
||||
@click="refreshData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HealthMonitorHeader
|
||||
v-model:lookback-hours="lookbackHours"
|
||||
:title="title"
|
||||
description="仅展示活跃提供商，展开后查看该提供商下的模型健康明细"
|
||||
:loading="loading"
|
||||
@refresh="refreshData"
|
||||
/>
|
||||
|
||||
<div class="p-6">
|
||||
<div
|
||||
@@ -109,25 +75,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-4 lg:max-w-2xl">
|
||||
<MetricBox
|
||||
label="平均耗时"
|
||||
:value="formatMs(provider.avg_latency_ms)"
|
||||
/>
|
||||
<MetricBox
|
||||
label="平均TTFB"
|
||||
:value="formatMs(provider.avg_first_byte_ms)"
|
||||
/>
|
||||
<MetricBox
|
||||
label="平均速度"
|
||||
:value="formatTps(provider.avg_tps)"
|
||||
/>
|
||||
<MetricBox
|
||||
label="可用率"
|
||||
:value="formatAvailability(provider)"
|
||||
:value-class="getAvailabilityClass(provider)"
|
||||
/>
|
||||
</div>
|
||||
<HealthMetricGrid
|
||||
class="lg:max-w-2xl"
|
||||
:avg-latency-ms="provider.avg_latency_ms"
|
||||
:avg-first-byte-ms="provider.avg_first_byte_ms"
|
||||
:avg-tps="provider.avg_tps"
|
||||
:total-attempts="provider.total_attempts"
|
||||
:success-rate="provider.success_rate"
|
||||
/>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
|
||||
@@ -165,25 +120,14 @@
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
<MetricBox
|
||||
label="平均耗时"
|
||||
:value="formatMs(model.avg_latency_ms)"
|
||||
/>
|
||||
<MetricBox
|
||||
label="平均TTFB"
|
||||
:value="formatMs(model.avg_first_byte_ms)"
|
||||
/>
|
||||
<MetricBox
|
||||
label="平均速度"
|
||||
:value="formatTps(model.avg_tps)"
|
||||
/>
|
||||
<MetricBox
|
||||
label="可用率"
|
||||
:value="formatAvailability(model)"
|
||||
:value-class="getAvailabilityClass(model)"
|
||||
/>
|
||||
</div>
|
||||
<HealthMetricGrid
|
||||
class="mt-4"
|
||||
:avg-latency-ms="model.avg_latency_ms"
|
||||
:avg-first-byte-ms="model.avg_first_byte_ms"
|
||||
:avg-tps="model.avg_tps"
|
||||
:total-attempts="model.total_attempts"
|
||||
:success-rate="model.success_rate"
|
||||
/>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between gap-3 text-[11px] uppercase tracking-wide text-muted-foreground">
|
||||
<span>History (60pts)</span>
|
||||
@@ -192,38 +136,16 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 w-full space-y-1">
|
||||
<div class="flex h-6 w-full items-center gap-px">
|
||||
<TooltipProvider
|
||||
v-for="(segment, index) in timelineSegments(model)"
|
||||
:key="`${provider.provider_id}-${model.model}-${index}`"
|
||||
:delay-duration="100"
|
||||
>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<div
|
||||
class="h-full flex-1 cursor-pointer rounded-sm transition-all duration-150 hover:scale-y-110 hover:brightness-110"
|
||||
:class="getTimelineColor(segment)"
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="top"
|
||||
:side-offset="8"
|
||||
class="max-w-xs"
|
||||
>
|
||||
<div class="text-xs whitespace-pre-line">
|
||||
{{ buildTimelineTooltip(model, segment, index) }}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-[10px] text-muted-foreground">
|
||||
<span>{{ formatTimestamp(model.time_range_start) }}</span>
|
||||
<span>{{ formatTimestamp(model.time_range_end || generatedAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<HealthStatusTimeline
|
||||
class="mt-2"
|
||||
:timeline="model.timeline"
|
||||
:time-range-start="model.time_range_start"
|
||||
:time-range-end="model.time_range_end"
|
||||
:generated-at="generatedAt"
|
||||
:lookback-hours="parseInt(lookbackHours)"
|
||||
entity-label="模型"
|
||||
:entity-name="model.model"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
@@ -234,41 +156,25 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, h, ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { Bot, ChevronRight, Loader2, Server } from 'lucide-vue-next'
|
||||
import Card from '@/components/ui/card.vue'
|
||||
import Badge from '@/components/ui/badge.vue'
|
||||
import Label from '@/components/ui/label.vue'
|
||||
import Select from '@/components/ui/select.vue'
|
||||
import SelectTrigger from '@/components/ui/select-trigger.vue'
|
||||
import SelectValue from '@/components/ui/select-value.vue'
|
||||
import SelectContent from '@/components/ui/select-content.vue'
|
||||
import SelectItem from '@/components/ui/select-item.vue'
|
||||
import RefreshButton from '@/components/ui/refresh-button.vue'
|
||||
import Collapsible from '@/components/ui/collapsible.vue'
|
||||
import CollapsibleTrigger from '@/components/ui/collapsible-trigger.vue'
|
||||
import CollapsibleContent from '@/components/ui/collapsible-content.vue'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import HealthMetricGrid from './HealthMetricGrid.vue'
|
||||
import HealthMonitorHeader from './HealthMonitorHeader.vue'
|
||||
import HealthStatusTimeline from './HealthStatusTimeline.vue'
|
||||
import { getProviderStatusMonitor } from '@/api/endpoints/health'
|
||||
import type { ModelStatusMonitor, ProviderStatusMonitor } from '@/api/endpoints/types'
|
||||
import type { ProviderStatusMonitor } from '@/api/endpoints/types'
|
||||
import { useToast } from '@/composables/useToast'
|
||||
import { parseApiError } from '@/utils/errorParser'
|
||||
|
||||
type HealthMonitorItem = Pick<ProviderStatusMonitor | ModelStatusMonitor, 'total_attempts' | 'success_rate'>
|
||||
|
||||
const MetricBox = defineComponent({
|
||||
props: {
|
||||
label: { type: String, required: true },
|
||||
value: { type: String, required: true },
|
||||
valueClass: { type: String, default: '' }
|
||||
},
|
||||
setup(props) {
|
||||
return () => h('div', { class: 'rounded-lg border border-border/40 bg-muted/20 px-3 py-2' }, [
|
||||
h('div', { class: 'text-[11px] leading-tight text-muted-foreground' }, props.label),
|
||||
h('div', { class: ['mt-1 text-sm font-semibold tabular-nums', props.valueClass] }, props.value)
|
||||
])
|
||||
}
|
||||
})
|
||||
import {
|
||||
formatCompactNumber,
|
||||
getHealthBadgeVariant,
|
||||
getHealthLabel
|
||||
} from './health-monitor-utils'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
title?: string
|
||||
@@ -323,126 +229,11 @@ function ensureExpandedProviderState() {
|
||||
expandedProviders.value = next
|
||||
}
|
||||
|
||||
function getHealthLabel(item: HealthMonitorItem) {
|
||||
if (item.total_attempts <= 0) return '暂无请求'
|
||||
if (item.success_rate >= 0.95) return '正常'
|
||||
if (item.success_rate >= 0.8) return '波动'
|
||||
return '异常'
|
||||
}
|
||||
|
||||
function getHealthBadgeVariant(item: HealthMonitorItem): 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'dark' {
|
||||
if (item.total_attempts <= 0) return 'outline'
|
||||
if (item.success_rate >= 0.95) return 'success'
|
||||
if (item.success_rate >= 0.8) return 'warning'
|
||||
return 'destructive'
|
||||
}
|
||||
|
||||
function getSuccessRateClass(rate: number) {
|
||||
if (rate >= 0.95) return 'text-green-600 dark:text-green-400'
|
||||
if (rate >= 0.8) return 'text-amber-600 dark:text-amber-400'
|
||||
return 'text-red-600 dark:text-red-400'
|
||||
}
|
||||
|
||||
function getAvailabilityClass(item: HealthMonitorItem) {
|
||||
if (item.total_attempts <= 0) return ''
|
||||
return getSuccessRateClass(item.success_rate)
|
||||
}
|
||||
|
||||
function getProviderMetaText(provider: ProviderStatusMonitor) {
|
||||
const attempts = `${formatCompactNumber(provider.total_attempts)} 次请求`
|
||||
return `${provider.model_count} 个模型 / ${attempts}`
|
||||
}
|
||||
|
||||
function formatMs(value?: number | null) {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) return '-'
|
||||
const absValue = Math.abs(value)
|
||||
if (absValue < 1000) return `${Math.round(value)} ms`
|
||||
if (absValue < 60_000) return `${formatDurationNumber(value / 1000)} s`
|
||||
return `${formatDurationNumber(value / 60_000)} min`
|
||||
}
|
||||
|
||||
function formatDurationNumber(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
maximumFractionDigits: Math.abs(value) < 10 ? 2 : 1
|
||||
}).format(value)
|
||||
}
|
||||
|
||||
function formatPercent(value: number) {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) return '-'
|
||||
return `${(value * 100).toFixed(2)}%`
|
||||
}
|
||||
|
||||
function formatAvailability(item: HealthMonitorItem) {
|
||||
if (item.total_attempts <= 0) return '-'
|
||||
return formatPercent(item.success_rate)
|
||||
}
|
||||
|
||||
function formatTps(value?: number | null) {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) return '-'
|
||||
return `${new Intl.NumberFormat('zh-CN', {
|
||||
maximumFractionDigits: value < 10 ? 2 : value < 100 ? 1 : 0
|
||||
}).format(value)} tps`
|
||||
}
|
||||
|
||||
function formatCompactNumber(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', { notation: 'compact', maximumFractionDigits: 1 }).format(value)
|
||||
}
|
||||
|
||||
function timelineSegments(item: ModelStatusMonitor | ProviderStatusMonitor) {
|
||||
const timeline = Array.isArray(item.timeline) ? item.timeline : []
|
||||
if (timeline.length > 0) return timeline
|
||||
return Array.from({ length: 60 }, () => 'unknown')
|
||||
}
|
||||
|
||||
function getTimelineColor(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 getTimelineLabel(status: string) {
|
||||
switch (status) {
|
||||
case 'healthy':
|
||||
return '健康'
|
||||
case 'warning':
|
||||
return '波动'
|
||||
case 'unhealthy':
|
||||
return '异常'
|
||||
default:
|
||||
return '无请求'
|
||||
}
|
||||
}
|
||||
|
||||
function buildTimelineTooltip(model: ModelStatusMonitor, status: string, index: number) {
|
||||
const segmentCount = timelineSegments(model).length
|
||||
const startMs = model.time_range_start ? new Date(model.time_range_start).getTime() : Date.now() - parseInt(lookbackHours.value) * 60 * 60 * 1000
|
||||
const endMs = model.time_range_end ? new Date(model.time_range_end).getTime() : Date.now()
|
||||
const interval = Math.max(endMs - startMs, 1) / segmentCount
|
||||
const cellStart = new Date(startMs + index * interval).toISOString()
|
||||
const cellEnd = new Date(startMs + (index + 1) * interval).toISOString()
|
||||
return `${formatTimestamp(cellStart)} - ${formatTimestamp(cellEnd)}\n模型：${model.model}\n状态：${getTimelineLabel(status)}`
|
||||
}
|
||||
|
||||
function formatTimestamp(timestamp?: string | null) {
|
||||
if (!timestamp) return '未知时间'
|
||||
const date = new Date(timestamp)
|
||||
if (Number.isNaN(date.getTime())) return '未知时间'
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
watch(lookbackHours, () => {
|
||||
loadMonitors()
|
||||
})
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
export type HealthBadgeVariant =
|
||||
| 'default'
|
||||
| 'secondary'
|
||||
| 'destructive'
|
||||
| 'outline'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'dark'
|
||||
|
||||
export interface HealthMonitorAvailability {
|
||||
total_attempts: number
|
||||
success_rate: number
|
||||
}
|
||||
|
||||
export function getHealthLabel(
|
||||
item: HealthMonitorAvailability,
|
||||
emptyLabel = '暂无请求'
|
||||
) {
|
||||
if (item.total_attempts <= 0) return emptyLabel
|
||||
if (item.success_rate >= 0.95) return '正常'
|
||||
if (item.success_rate >= 0.8) return '波动'
|
||||
return '异常'
|
||||
}
|
||||
|
||||
export function getHealthBadgeVariant(
|
||||
item: HealthMonitorAvailability
|
||||
): HealthBadgeVariant {
|
||||
if (item.total_attempts <= 0) return 'outline'
|
||||
if (item.success_rate >= 0.95) return 'success'
|
||||
if (item.success_rate >= 0.8) return 'warning'
|
||||
return 'destructive'
|
||||
}
|
||||
|
||||
export function getSuccessRateClass(rate: number) {
|
||||
if (rate >= 0.95) return 'text-green-600 dark:text-green-400'
|
||||
if (rate >= 0.8) return 'text-amber-600 dark:text-amber-400'
|
||||
return 'text-red-600 dark:text-red-400'
|
||||
}
|
||||
|
||||
export function getAvailabilityClass(item: HealthMonitorAvailability) {
|
||||
if (item.total_attempts <= 0) return ''
|
||||
return getSuccessRateClass(item.success_rate)
|
||||
}
|
||||
|
||||
export function formatMs(value?: number | null) {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) return '-'
|
||||
const absValue = Math.abs(value)
|
||||
if (absValue < 1000) return `${Math.round(value)} ms`
|
||||
if (absValue < 60_000) return `${formatDurationNumber(value / 1000)} s`
|
||||
return `${formatDurationNumber(value / 60_000)} min`
|
||||
}
|
||||
|
||||
function formatDurationNumber(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
maximumFractionDigits: Math.abs(value) < 10 ? 2 : 1
|
||||
}).format(value)
|
||||
}
|
||||
|
||||
export function formatPercent(value: number) {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) return '-'
|
||||
return `${(value * 100).toFixed(2)}%`
|
||||
}
|
||||
|
||||
export function formatAvailability(item: HealthMonitorAvailability) {
|
||||
if (item.total_attempts <= 0) return '-'
|
||||
return formatPercent(item.success_rate)
|
||||
}
|
||||
|
||||
export function formatTps(value?: number | null) {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) return '-'
|
||||
return `${new Intl.NumberFormat('zh-CN', {
|
||||
maximumFractionDigits: value < 10 ? 2 : value < 100 ? 1 : 0
|
||||
}).format(value)} tps`
|
||||
}
|
||||
|
||||
export function formatCompactNumber(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
notation: 'compact',
|
||||
maximumFractionDigits: 1
|
||||
}).format(value)
|
||||
}
|
||||
|
||||
export function formatTimestamp(timestamp?: string | null) {
|
||||
if (!timestamp) return '未知时间'
|
||||
const date = new Date(timestamp)
|
||||
if (Number.isNaN(date.getTime())) return '未知时间'
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
export function getTimelineColor(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'
|
||||
}
|
||||
}
|
||||
|
||||
export function getTimelineLabel(status: string) {
|
||||
switch (status) {
|
||||
case 'healthy':
|
||||
return '健康'
|
||||
case 'warning':
|
||||
return '波动'
|
||||
case 'unhealthy':
|
||||
return '异常'
|
||||
default:
|
||||
return '无请求'
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user