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:
parent
7833bd3ecf
commit
2d6726dcd7
5 changed files with 55 additions and 5 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue