From 7fdc40347097d829885f74f3ac9f0e985a6fd029 Mon Sep 17 00:00:00 2001
From: xiaomiku01 <xiaomiku01@outlook.com>
Date: Sat, 11 Apr 2026 00:41:55 +0800
Subject: [PATCH] feat(ui): integrate network probes into system detail page

Lazy-load the NetworkProbes component in both default and tabbed
layouts so the probes table and latency chart appear on the system
detail page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 internal/site/src/components/routes/system.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/internal/site/src/components/routes/system.tsx b/internal/site/src/components/routes/system.tsx
index 4d4b96da..4055899d 100644
--- a/internal/site/src/components/routes/system.tsx
+++ b/internal/site/src/components/routes/system.tsx
@@ -1,4 +1,4 @@
-import { memo, useState } from "react"
+import { memo, useState, Suspense, lazy } from "react"
 import { Trans } from "@lingui/react/macro"
 import { compareSemVer, parseSemVer } from "@/lib/utils"
 import type { GPUData } from "@/types"
@@ -12,6 +12,7 @@ import { BandwidthChart, ContainerNetworkChart } from "./system/charts/network-c
 import { TemperatureChart, BatteryChart } from "./system/charts/sensor-charts"
 import { GpuPowerChart, GpuDetailCharts } from "./system/charts/gpu-charts"
 import { LazyContainersTable, LazySmartTable, LazySystemdTable } from "./system/lazy-tables"
+const NetworkProbes = lazy(() => import("./system/network-probes"))
 import { LoadAverageChart } from "./system/charts/load-average-chart"
 import { ContainerIcon, CpuIcon, HardDriveIcon, TerminalSquareIcon } from "lucide-react"
 import { GpuIcon } from "../ui/icons"
@@ -145,6 +146,10 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 				{hasContainersTable && <LazyContainersTable systemId={system.id} />}
 
 				{hasSystemd && <LazySystemdTable systemId={system.id} />}
+
+				<Suspense>
+					<NetworkProbes systemId={system.id} chartData={chartData} grid={grid} />
+				</Suspense>
 			</>
 		)
 	}
@@ -192,6 +197,9 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						<SwapChart chartData={chartData} grid={grid} dataEmpty={dataEmpty} systemStats={systemStats} />
 						{pageBottomExtraMargin > 0 && <div style={{ marginBottom: pageBottomExtraMargin }}></div>}
 					</div>
+					<Suspense>
+						<NetworkProbes systemId={system.id} chartData={chartData} grid={grid} />
+					</Suspense>
 				</TabsContent>
 
 				<TabsContent value="disk" forceMount className={activeTab === "disk" ? "contents" : "hidden"}>