updates

internal/site/src/components/routes/system/lazy-tables.tsx

@@ -1,6 +1,13 @@
-import { lazy } from "react"
+import { lazy, useEffect, useRef, useState } from "react"
 import { useIntersectionObserver } from "@/lib/use-intersection-observer"
-import { cn } from "@/lib/utils"
+import { chartTimeData, cn } from "@/lib/utils"
+import { NetworkProbeRecord, NetworkProbeStatsRecord } from "@/types"
+import { LatencyChart } from "./charts/probes-charts"
+import { SystemData } from "./use-system-data"
+import { $chartTime } from "@/lib/stores"
+import { useStore } from "@nanostores/react"
+import system from "../system"
+import { getStats, appendData } from "./chart-data"
 
 const ContainersTable = lazy(() => import("../../containers-table/containers-table"))
 
@@ -37,11 +44,75 @@ export function LazySystemdTable({ systemId }: { systemId: string }) {
 
 const NetworkProbesTableNew = lazy(() => import("@/components/network-probes-table/network-probes-table"))
 
-export function LazyNetworkProbesTableNew({ systemId }: { systemId: string }) {
+const cache = new Map<string, any>()
+
+export function LazyNetworkProbesTableNew({ systemId, systemData }: { systemId: string; systemData: SystemData }) {
+	const { grid, chartData } = systemData ?? {}
+	const [probes, setProbes] = useState<NetworkProbeRecord[]>([])
+	const chartTime = useStore($chartTime)
+	const [probeStats, setProbeStats] = useState<NetworkProbeStatsRecord[]>([])
 	const { isIntersecting, ref } = useIntersectionObserver()
+
+	const statsRequestId = useRef(0)
+
+	// get stats when system "changes." (Not just system to system,
+	// also when new info comes in via systemManager realtime connection, indicating an update)
+	useEffect(() => {
+		if (!systemId || !chartTime || chartTime === "1m") {
+			return
+		}
+
+		const { expectedInterval } = chartTimeData[chartTime]
+		const ss_cache_key = `${systemId}${chartTime}`
+		const requestId = ++statsRequestId.current
+
+		const cachedProbeStats = cache.get(ss_cache_key) as NetworkProbeStatsRecord[] | undefined
+
+		// Render from cache immediately if available
+		// if (cachedProbeStats?.length) {
+		// 	setProbeStats(cachedProbeStats)
+
+		// 	// Skip the fetch if the latest cached point is recent enough that no new point is expected yet
+		// 	const lastCreated = cachedProbeStats.at(-1)?.created as number | undefined
+		// 	if (lastCreated && Date.now() - lastCreated < expectedInterval * 0.9) {
+		// 		return
+		// 	}
+		// }
+
+		getStats<NetworkProbeStatsRecord>("network_probe_stats", systemId, chartTime, cachedProbeStats).then(
+			(probeStats) => {
+				// If another request has been made since this one, ignore the results
+				if (requestId !== statsRequestId.current) {
+					return
+				}
+
+				// make new system stats
+				let probeStatsData = (cache.get(ss_cache_key) || []) as NetworkProbeStatsRecord[]
+				if (probeStats.length) {
+					probeStatsData = appendData(probeStatsData, probeStats, expectedInterval, 100)
+					cache.set(ss_cache_key, probeStatsData)
+				}
+				setProbeStats(probeStatsData)
+			}
+		)
+	}, [system, chartTime, probes])
+
 	return (
 		<div ref={ref} className={cn(isIntersecting && "contents")}>
-			{isIntersecting && <NetworkProbesTableNew systemId={systemId} />}
+			{isIntersecting && (
+				<>
+					<NetworkProbesTableNew systemId={systemId} probes={probes} setProbes={setProbes} />
+					{!!chartData && (
+						<LatencyChart
+							probeStats={probeStats}
+							grid={grid}
+							probes={probes}
+							chartData={chartData}
+							empty={!probeStats.length}
+						/>
+					)}
+				</>
+			)}
 		</div>
 	)
 }