diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx index e2bd57020..78cdec9bf 100644 --- a/web/src/pages/System.tsx +++ b/web/src/pages/System.tsx @@ -1,14 +1,45 @@ import Heading from "@/components/ui/heading"; import useSWR from "swr"; import { FrigateStats } from "@/types/stats"; -import { useMemo } from "react"; +import { useEffect, useMemo, useState } from "react"; import SystemGraph from "@/components/graph/SystemGraph"; +import { useFrigateStats } from "@/api/ws"; +import TimeAgo from "@/components/dynamic/TimeAgo"; function System() { // stats - const { data: statsHistory } = useSWR("stats/history", { + const { data: initialStats } = useSWR("stats/history", { revalidateOnFocus: false, }); + const { payload: updatedStats } = useFrigateStats(); + const [statsHistory, setStatsHistory] = useState( + initialStats || [] + ); + + const lastUpdated = useMemo(() => { + if (updatedStats) { + return updatedStats.service.last_updated; + } + + if (initialStats) { + return initialStats.at(-1)?.service?.last_updated; + } + + return undefined; + }, [initialStats, updatedStats]); + + useEffect(() => { + if (initialStats == undefined) { + return; + } + + if (statsHistory.length < initialStats.length) { + setStatsHistory(initialStats); + return; + } + + setStatsHistory([...statsHistory, updatedStats]); + }, [initialStats, updatedStats]); // stats data pieces const detInferenceTimeSeries = useMemo(() => { @@ -184,7 +215,17 @@ function System() { return ( <> - System +
+ System + {initialStats && ( +
{initialStats[0].service.version}
+ )} +
+ {lastUpdated && ( +
+ Last refreshed: +
+ )} Detectors