Health modal: clearer check display with explicit status
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled

This commit is contained in:
2025-12-12 22:20:24 +01:00
parent 7c47c49fc9
commit f7c60fc667

View File

@ -479,27 +479,73 @@ export default function WatchlistPage() {
{/* Checks */} {/* Checks */}
{selectedHealth ? ( {selectedHealth ? (
<div className="space-y-1 mb-6"> <div className="space-y-0 mb-6 border border-white/[0.06] divide-y divide-white/[0.06]">
{[ {/* DNS */}
{ label: 'DNS Resolution', value: selectedHealth.dns?.has_a ?? selectedHealth.dns?.has_ns }, <div className="flex items-center justify-between px-4 py-3 bg-white/[0.01]">
{ label: 'HTTP Reachable', value: selectedHealth.http?.is_reachable }, <span className="text-sm text-white/70">DNS Resolution</span>
{ label: 'SSL Certificate', value: selectedHealth.ssl?.has_certificate }, {selectedHealth.dns?.has_a || selectedHealth.dns?.has_ns ? (
{ label: 'Not Parked', value: !(selectedHealth.dns?.is_parked || selectedHealth.http?.is_parked) }, <div className="flex items-center gap-2">
].map((check) => (
<div key={check.label} className="flex items-center justify-between py-2.5 border-b border-white/[0.05]">
<span className="text-sm text-white/60">{check.label}</span>
{check.value ? (
<CheckCircle2 className="w-5 h-5 text-accent" /> <CheckCircle2 className="w-5 h-5 text-accent" />
) : check.value === false ? ( <span className="text-xs text-accent">OK</span>
</div>
) : (
<div className="flex items-center gap-2">
<XCircle className="w-5 h-5 text-rose-400" /> <XCircle className="w-5 h-5 text-rose-400" />
) : ( <span className="text-xs text-rose-400">Failed</span>
<span className="text-xs text-white/30">Unknown</span> </div>
)} )}
</div> </div>
))}
{/* HTTP */}
<div className="flex items-center justify-between px-4 py-3 bg-white/[0.01]">
<span className="text-sm text-white/70">HTTP Reachable</span>
{selectedHealth.http?.is_reachable ? (
<div className="flex items-center gap-2">
<CheckCircle2 className="w-5 h-5 text-accent" />
<span className="text-xs text-accent">OK</span>
</div>
) : (
<div className="flex items-center gap-2">
<XCircle className="w-5 h-5 text-rose-400" />
<span className="text-xs text-rose-400">Failed</span>
</div>
)}
</div>
{/* SSL */}
<div className="flex items-center justify-between px-4 py-3 bg-white/[0.01]">
<span className="text-sm text-white/70">SSL Certificate</span>
{selectedHealth.ssl?.has_certificate ? (
<div className="flex items-center gap-2">
<CheckCircle2 className="w-5 h-5 text-accent" />
<span className="text-xs text-accent">Valid</span>
</div>
) : (
<div className="flex items-center gap-2">
<XCircle className="w-5 h-5 text-rose-400" />
<span className="text-xs text-rose-400">Missing</span>
</div>
)}
</div>
{/* Parked */}
<div className="flex items-center justify-between px-4 py-3 bg-white/[0.01]">
<span className="text-sm text-white/70">Not Parked</span>
{!selectedHealth.dns?.is_parked && !selectedHealth.http?.is_parked ? (
<div className="flex items-center gap-2">
<CheckCircle2 className="w-5 h-5 text-accent" />
<span className="text-xs text-accent">OK</span>
</div>
) : (
<div className="flex items-center gap-2">
<XCircle className="w-5 h-5 text-amber-400" />
<span className="text-xs text-amber-400">Parked</span>
</div>
)}
</div>
</div> </div>
) : ( ) : (
<div className="py-6 text-center text-white/30 text-sm mb-6"> <div className="py-8 text-center text-white/30 text-sm mb-6 border border-white/[0.06] bg-white/[0.01]">
Click the button below to run a health check Click the button below to run a health check
</div> </div>
)} )}