Machine details: live-update 'Última atualização' every second

This commit is contained in:
Esdras Renan 2025-10-19 02:02:34 -03:00
parent 3a752b88c6
commit 01461d031b

View file

@ -993,6 +993,17 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
const metadata = machine?.inventory ?? null
const metrics = machine?.metrics ?? null
const metricsCapturedAt = useMemo(() => getMetricsTimestamp(metrics), [metrics])
// Live refresh the relative time label every second when we have a capture timestamp
const [relativeTick, setRelativeTick] = useState(0)
useEffect(() => {
if (!metricsCapturedAt) return
const id = setInterval(() => setRelativeTick((t) => t + 1), 1000)
return () => clearInterval(id)
}, [metricsCapturedAt])
const lastUpdateRelative = useMemo(
() => (metricsCapturedAt ? formatRelativeTime(metricsCapturedAt) : null),
[metricsCapturedAt, relativeTick]
)
const hardware = metadata?.hardware
const network = metadata?.network ?? null
const networkInterfaces = Array.isArray(network) ? network : null
@ -1547,9 +1558,9 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
<section className="space-y-2">
<div className="flex flex-wrap items-center gap-2">
<h4 className="text-sm font-semibold">Métricas recentes</h4>
{metricsCapturedAt ? (
{lastUpdateRelative ? (
<span className="text-xs font-medium text-muted-foreground">
Última atualização {formatRelativeTime(metricsCapturedAt)}
Última atualização {lastUpdateRelative}
</span>
) : null}
</div>