i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-10-11 11:49:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(health): align model health card layout

Browse Source
This commit is contained in:
AAEE86
2026-06-01 18:54:56 +08:00
parent 7ffe33f867
commit d3c8317939
2 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/providers/components/ModelHealthMonitorCard.vue
+18 -17
View File
@@ -74,7 +74,7 @@
</Badge> </Badge>
</div> </div>
<div class="mt-4 grid grid-cols-4 gap-2"> <div class="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4">
<div <div
class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2" class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
> >
@@ -141,15 +141,17 @@
</span> </span>
</div> </div>
<TooltipProvider :delay-duration="100"> <div class="mt-2 w-full space-y-1">
<div class="mt-2 flex h-7 w-full items-center gap-px"> <div class="flex h-6 w-full items-center gap-px">
<Tooltip <TooltipProvider
v-for="(segment, index) in timelineSegments(monitor)" v-for="(segment, index) in timelineSegments(monitor)"
:key="`${monitor.model}-${index}`" :key="`${monitor.model}-${index}`"
:delay-duration="100"
> >
<Tooltip>
<TooltipTrigger as-child> <TooltipTrigger as-child>
<div <div
class="h-full flex-1 rounded-[2px] transition-all duration-150 hover:scale-y-110 hover:brightness-110" class="h-full flex-1 cursor-pointer rounded-sm transition-all duration-150 hover:scale-y-110 hover:brightness-110"
:class="getTimelineColor(segment)" :class="getTimelineColor(segment)"
/> />
</TooltipTrigger> </TooltipTrigger>
@@ -158,17 +160,16 @@
{{ buildTimelineTooltip(monitor, segment, index) }} {{ buildTimelineTooltip(monitor, segment, index) }}
</div> </div>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider>
</div> </div>
</TooltipProvider>
<div <div class="flex items-center justify-between text-[10px] text-muted-foreground">
class="mt-2 flex items-center justify-between text-[10px] text-muted-foreground" <span>{{ formatTimestamp(monitor.time_range_start) }}</span>
> <span>{{
<span>{{ formatTimestamp(monitor.time_range_start) }}</span> formatTimestamp(monitor.time_range_end || generatedAt)
<span>{{ }}</span>
formatTimestamp(monitor.time_range_end || generatedAt) </div>
}}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -332,11 +333,11 @@ function timelineSegments(monitor: ModelStatusMonitor) {
function getTimelineColor(status: string) { function getTimelineColor(status: string) {
switch (status) { switch (status) {
case "healthy": case "healthy":
return "bg-green-500/85 dark:bg-green-400/90"; return "bg-green-500/80 dark:bg-green-400/90";
case "warning": case "warning":
return "bg-amber-400/85 dark:bg-amber-300/85"; return "bg-amber-400/80 dark:bg-amber-300/80";
case "unhealthy": case "unhealthy":
return "bg-red-500/85 dark:bg-red-400/90"; return "bg-red-500/80 dark:bg-red-400/90";
default: default:
return "bg-gray-300 dark:bg-gray-600"; return "bg-gray-300 dark:bg-gray-600";
} }
frontend/src/features/providers/components/ProviderHealthMonitorCard.vue
+31 -18
View File
@@ -109,7 +109,7 @@
</div> </div>
</div> </div>
<div class="grid w-full grid-cols-4 gap-2 lg:max-w-2xl"> <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-4 lg:max-w-2xl">
<MetricBox <MetricBox
label="平均耗时" label="平均耗时"
:value="formatMs(provider.avg_latency_ms)" :value="formatMs(provider.avg_latency_ms)"
@@ -124,8 +124,8 @@
/> />
<MetricBox <MetricBox
label="可用率" label="可用率"
:value="formatPercent(provider.success_rate)" :value="formatAvailability(provider)"
:value-class="getSuccessRateClass(provider.success_rate)" :value-class="getAvailabilityClass(provider)"
/> />
</div> </div>
</button> </button>
@@ -165,7 +165,7 @@
</Badge> </Badge>
</div> </div>
<div class="mt-4 grid grid-cols-4 gap-2"> <div class="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4">
<MetricBox <MetricBox
label="平均耗时" label="平均耗时"
:value="formatMs(model.avg_latency_ms)" :value="formatMs(model.avg_latency_ms)"
@@ -180,8 +180,8 @@
/> />
<MetricBox <MetricBox
label="可用率" label="可用率"
:value="formatPercent(model.success_rate)" :value="formatAvailability(model)"
:value-class="getSuccessRateClass(model.success_rate)" :value-class="getAvailabilityClass(model)"
/> />
</div> </div>
@@ -192,15 +192,17 @@
</span> </span>
</div> </div>
<TooltipProvider :delay-duration="100"> <div class="mt-2 w-full space-y-1">
<div class="mt-2 flex h-7 w-full items-center gap-px"> <div class="flex h-6 w-full items-center gap-px">
<Tooltip <TooltipProvider
v-for="(segment, index) in timelineSegments(model)" v-for="(segment, index) in timelineSegments(model)"
:key="`${provider.provider_id}-${model.model}-${index}`" :key="`${provider.provider_id}-${model.model}-${index}`"
:delay-duration="100"
> >
<Tooltip>
<TooltipTrigger as-child> <TooltipTrigger as-child>
<div <div
class="h-full flex-1 rounded-[2px] transition-all duration-150 hover:scale-y-110 hover:brightness-110" class="h-full flex-1 cursor-pointer rounded-sm transition-all duration-150 hover:scale-y-110 hover:brightness-110"
:class="getTimelineColor(segment)" :class="getTimelineColor(segment)"
/> />
</TooltipTrigger> </TooltipTrigger>
@@ -213,13 +215,14 @@
{{ buildTimelineTooltip(model, segment, index) }} {{ buildTimelineTooltip(model, segment, index) }}
</div> </div>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider>
</div> </div>
</TooltipProvider>
<div class="mt-2 flex items-center justify-between text-[10px] text-muted-foreground"> <div class="flex items-center justify-between text-[10px] text-muted-foreground">
<span>{{ formatTimestamp(model.time_range_start) }}</span> <span>{{ formatTimestamp(model.time_range_start) }}</span>
<span>{{ formatTimestamp(model.time_range_end || generatedAt) }}</span> <span>{{ formatTimestamp(model.time_range_end || generatedAt) }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -340,6 +343,11 @@ function getSuccessRateClass(rate: number) {
return 'text-red-600 dark:text-red-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) { function getProviderMetaText(provider: ProviderStatusMonitor) {
const attempts = `${formatCompactNumber(provider.total_attempts)} 次请求` const attempts = `${formatCompactNumber(provider.total_attempts)} 次请求`
return `${provider.model_count} 个模型 / ${attempts}` return `${provider.model_count} 个模型 / ${attempts}`
@@ -364,6 +372,11 @@ function formatPercent(value: number) {
return `${(value * 100).toFixed(2)}%` 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) { function formatTps(value?: number | null) {
if (typeof value !== 'number' || Number.isNaN(value)) return '-' if (typeof value !== 'number' || Number.isNaN(value)) return '-'
return `${new Intl.NumberFormat('zh-CN', { return `${new Intl.NumberFormat('zh-CN', {
@@ -384,11 +397,11 @@ function timelineSegments(item: ModelStatusMonitor | ProviderStatusMonitor) {
function getTimelineColor(status: string) { function getTimelineColor(status: string) {
switch (status) { switch (status) {
case 'healthy': case 'healthy':
return 'bg-green-500/85 dark:bg-green-400/90' return 'bg-green-500/80 dark:bg-green-400/90'
case 'warning': case 'warning':
return 'bg-amber-400/85 dark:bg-amber-300/85' return 'bg-amber-400/80 dark:bg-amber-300/80'
case 'unhealthy': case 'unhealthy':
return 'bg-red-500/85 dark:bg-red-400/90' return 'bg-red-500/80 dark:bg-red-400/90'
default: default:
return 'bg-gray-300 dark:bg-gray-600' return 'bg-gray-300 dark:bg-gray-600'
} }