Machine details: live-update 'Última atualização' every second
This commit is contained in:
parent
3a752b88c6
commit
01461d031b
1 changed files with 13 additions and 2 deletions
|
|
@ -993,6 +993,17 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
|
||||||
const metadata = machine?.inventory ?? null
|
const metadata = machine?.inventory ?? null
|
||||||
const metrics = machine?.metrics ?? null
|
const metrics = machine?.metrics ?? null
|
||||||
const metricsCapturedAt = useMemo(() => getMetricsTimestamp(metrics), [metrics])
|
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 hardware = metadata?.hardware
|
||||||
const network = metadata?.network ?? null
|
const network = metadata?.network ?? null
|
||||||
const networkInterfaces = Array.isArray(network) ? network : null
|
const networkInterfaces = Array.isArray(network) ? network : null
|
||||||
|
|
@ -1547,9 +1558,9 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
|
||||||
<section className="space-y-2">
|
<section className="space-y-2">
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
<h4 className="text-sm font-semibold">Métricas recentes</h4>
|
<h4 className="text-sm font-semibold">Métricas recentes</h4>
|
||||||
{metricsCapturedAt ? (
|
{lastUpdateRelative ? (
|
||||||
<span className="text-xs font-medium text-muted-foreground">
|
<span className="text-xs font-medium text-muted-foreground">
|
||||||
Última atualização {formatRelativeTime(metricsCapturedAt)}
|
Última atualização {lastUpdateRelative}
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue