fix(webui): match the health detail row color to its badge, add tests

ProvidersView.vue's accordion detail row hardcoded text-destructive red
for any non-closed health state, while the trigger row's Badge
deliberately used grey (secondary) for half-open and red (destructive)
only for open. Add healthDetailClass so the detail row's color always
matches the badge's own severity, instead of overstating a half-open
probe as an error.

Add a describe block for formatUntil to format.spec.ts, covering the
unset sentinel, undefined, a future timestamp, and a past one. It had
no test coverage since being added in the previous round.
This commit is contained in:
2026-08-22 23:37:55 +01:00
parent 46a3577162
commit d0b55a37e9
3 changed files with 41 additions and 12 deletions
+6 -1
View File
@@ -194,6 +194,11 @@ function healthBadgeLabel(p: AdminProviderView): string {
return until ? `${p.healthState} (${until})` : p.healthState
}
/** healthDetailClass matches the accordion-content detail row's text color to healthBadgeVariant's own trigger-row Badge color, rather than hardcoding text-destructive for every non-closed state: destructive (red) for 'open', muted (grey, the same neutral tone secondary conveys on the Badge) for 'half-open'. */
function healthDetailClass(state: AdminProviderView['healthState']): string {
return state === 'open' ? 'text-destructive' : 'text-muted-foreground'
}
// --- model aliases (sortable DataTable, operator directive) ---
//
// The alias id gets the ModelChip copy treatment (an alias name IS the
@@ -356,7 +361,7 @@ const aliasEmptyMessage = computed(() =>
</div>
<div v-if="p.healthState !== 'closed'">
<dt class="text-xs text-muted-foreground">Discovery health</dt>
<dd class="text-destructive">{{ healthBadgeLabel(p) }}</dd>
<dd :class="healthDetailClass(p.healthState)">{{ healthBadgeLabel(p) }}</dd>
</div>
<div v-if="p.lastErr">
<dt class="text-xs text-muted-foreground">Last error</dt>