83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
|
|
import { checkBackendHealth, type HealthStatus, type HealthCheckResult } from '@/services';
|
|
import { Circle, Loader2 } from 'lucide-react';
|
|
|
|
interface HealthIndicatorProps {
|
|
/** How often to check health in milliseconds (default: 30000 = 30s) */
|
|
interval?: number;
|
|
}
|
|
|
|
export function HealthIndicator({ interval = 30000 }: HealthIndicatorProps) {
|
|
const [health, setHealth] = useState<HealthCheckResult>({ status: 'checking' });
|
|
|
|
useEffect(() => {
|
|
// Initial check
|
|
checkBackendHealth().then(setHealth);
|
|
|
|
// Periodic checks
|
|
const intervalId = setInterval(() => {
|
|
checkBackendHealth().then(setHealth);
|
|
}, interval);
|
|
|
|
return () => clearInterval(intervalId);
|
|
}, [interval]);
|
|
|
|
const getStatusColor = (status: HealthStatus) => {
|
|
switch (status) {
|
|
case 'healthy':
|
|
return 'text-green-500';
|
|
case 'unhealthy':
|
|
return 'text-red-500';
|
|
case 'checking':
|
|
return 'text-muted-foreground';
|
|
}
|
|
};
|
|
|
|
const getStatusLabel = (status: HealthStatus) => {
|
|
switch (status) {
|
|
case 'healthy':
|
|
return 'Connected';
|
|
case 'unhealthy':
|
|
return 'Disconnected';
|
|
case 'checking':
|
|
return 'Checking...';
|
|
}
|
|
};
|
|
|
|
const getTooltipContent = () => {
|
|
if (health.status === 'checking') {
|
|
return 'Checking backend connection...';
|
|
}
|
|
|
|
if (health.status === 'healthy') {
|
|
return `Backend connected (${health.latencyMs}ms)`;
|
|
}
|
|
|
|
return `Backend unavailable: ${health.error || 'Unknown error'}`;
|
|
};
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center gap-1.5 cursor-default">
|
|
{health.status === 'checking' ? (
|
|
<Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
|
|
) : (
|
|
<Circle
|
|
className={`h-2.5 w-2.5 fill-current ${getStatusColor(health.status)}`}
|
|
/>
|
|
)}
|
|
<span className={`text-xs ${getStatusColor(health.status)} hidden sm:inline`}>
|
|
{getStatusLabel(health.status)}
|
|
</span>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>{getTooltipContent()}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|