Show last listing update time next to connection status in header

Add last_updated timestamp to /api/status endpoint by querying
MAX(last_seen) across both listing tables. Display it in the
HealthIndicator as relative time (e.g. "2h ago") with full
date/time in the tooltip on hover.
This commit is contained in:
Viktor Barzin 2026-02-17 19:54:15 +00:00
parent 7833bd3ecf
commit 2d6726dcd7
No known key found for this signature in database
GPG key ID: 0EB088298288D958
5 changed files with 55 additions and 5 deletions

View file

@ -8,6 +8,20 @@ interface HealthIndicatorProps {
interval?: number;
}
function formatRelativeTime(isoString: string): string {
const date = new Date(isoString);
const now = new Date();
const diffMs = now.getTime() - date.getTime();
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMs / 3600000);
const diffDays = Math.floor(diffMs / 86400000);
if (diffMins < 1) return 'just now';
if (diffMins < 60) return `${diffMins}m ago`;
if (diffHours < 24) return `${diffHours}h ago`;
return `${diffDays}d ago`;
}
export function HealthIndicator({ interval = 30000 }: HealthIndicatorProps) {
const [health, setHealth] = useState<HealthCheckResult>({ status: 'checking' });
@ -46,12 +60,19 @@ export function HealthIndicator({ interval = 30000 }: HealthIndicatorProps) {
};
const getTooltipContent = () => {
const lines: string[] = [];
if (health.status === 'checking') {
return 'Checking backend connection...';
}
if (health.status === 'healthy') {
return `Backend connected (${health.latencyMs}ms)`;
lines.push(`Backend connected (${health.latencyMs}ms)`);
if (health.lastUpdated) {
const date = new Date(health.lastUpdated);
lines.push(`Last update: ${date.toLocaleString()}`);
}
return lines.join('\n');
}
return `Backend unavailable: ${health.error || 'Unknown error'}`;
@ -72,10 +93,15 @@ export function HealthIndicator({ interval = 30000 }: HealthIndicatorProps) {
<span className={`text-xs ${getStatusColor(health.status)} hidden sm:inline`}>
{getStatusLabel(health.status)}
</span>
{health.status === 'healthy' && health.lastUpdated && (
<span className="text-xs text-muted-foreground hidden sm:inline">
· {formatRelativeTime(health.lastUpdated)}
</span>
)}
</div>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>{getTooltipContent()}</p>
<p className="whitespace-pre-line">{getTooltipContent()}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>

View file

@ -6,6 +6,7 @@ export interface HealthCheckResult {
status: HealthStatus;
latencyMs?: number;
error?: string;
lastUpdated?: string;
}
/**
@ -39,6 +40,7 @@ export async function checkBackendHealth(): Promise<HealthCheckResult> {
return {
status: 'healthy',
latencyMs,
lastUpdated: data.last_updated ?? undefined,
};
}