feat: network monitoring from agents (#2266, #1911)

Co-authored-by: Sven van Ginkel <svenvanginkel@icloud.com>
Co-authored-by: xiaomiku01 <xiaomiku01@outlook.com>

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

@@ -1,6 +1,7 @@
 import { lazy } from "react"
 import { useIntersectionObserver } from "@/lib/use-intersection-observer"
 import { cn } from "@/lib/utils"
+import { useNetworkMonitors } from "@/lib/use-network-monitors"
 
 const ContainersTable = lazy(() => import("../../containers-table/containers-table"))
 
@@ -45,3 +46,19 @@ export function LazySystemdTable({ systemId }: { systemId: string }) {
 		</div>
 	)
 }
+
+const NetworkMonitorsTable = lazy(() => import("../../network-monitors-table/network-monitors-table"))
+
+export function LazyNetworkMonitorsTable({ systemId }: { systemId: string }) {
+	const { isIntersecting, ref } = useIntersectionObserver({ rootMargin: "90px" })
+	return (
+		<div ref={ref} className={cn(isIntersecting && "contents")}>
+			{isIntersecting && <SystemNetworkMonitorsTable systemId={systemId} />}
+		</div>
+	)
+}
+
+function SystemNetworkMonitorsTable({ systemId }: { systemId: string }) {
+	const { monitors, isLoading } = useNetworkMonitors({ systemId })
+	return <NetworkMonitorsTable systemId={systemId} monitors={monitors} isLoading={isLoading} />
+}