fix(ui): auto-refresh probe stats when system data updates

Pass system record to NetworkProbes component and use it as a
dependency in the non-realtime fetch effect, matching the pattern
used by system_stats and container_stats in use-system-data.ts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
xiaomiku01
2026-04-11 18:44:09 +08:00
parent 9a5959b57e
commit aa9ab49654
2 changed files with 7 additions and 6 deletions

View File

@@ -149,7 +149,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
{hasSystemd && <LazySystemdTable systemId={system.id} />}
<Suspense>
<NetworkProbes systemId={system.id} chartData={chartData} grid={grid} realtimeProbeStats={probeStats} />
<NetworkProbes system={system} chartData={chartData} grid={grid} realtimeProbeStats={probeStats} />
</Suspense>
</>
)
@@ -199,7 +199,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
{pageBottomExtraMargin > 0 && <div style={{ marginBottom: pageBottomExtraMargin }}></div>}
</div>
<Suspense>
<NetworkProbes systemId={system.id} chartData={chartData} grid={grid} realtimeProbeStats={probeStats} />
<NetworkProbes system={system} chartData={chartData} grid={grid} realtimeProbeStats={probeStats} />
</Suspense>
</TabsContent>

View File

@@ -12,7 +12,7 @@ import { AddProbeDialog } from "./probe-dialog"
import { ChartCard } from "./chart-card"
import LineChartDefault, { type DataPoint } from "@/components/charts/line-chart"
import { pinnedAxisDomain } from "@/components/ui/chart"
import type { ChartData, NetworkProbeRecord, NetworkProbeStatsRecord } from "@/types"
import type { ChartData, NetworkProbeRecord, NetworkProbeStatsRecord, SystemRecord } from "@/types"
function probeKey(p: NetworkProbeRecord) {
if (p.protocol === "tcp") return `${p.protocol}:${p.target}:${p.port}`
@@ -20,16 +20,17 @@ function probeKey(p: NetworkProbeRecord) {
}
export default function NetworkProbes({
systemId,
system,
chartData,
grid,
realtimeProbeStats,
}: {
systemId: string
system: SystemRecord
chartData: ChartData
grid: boolean
realtimeProbeStats?: NetworkProbeStatsRecord[]
}) {
const systemId = system.id
const [probes, setProbes] = useState<NetworkProbeRecord[]>([])
const [stats, setStats] = useState<NetworkProbeStatsRecord[]>([])
const [latestResults, setLatestResults] = useState<Record<string, { avg: number; loss: number }>>({})
@@ -119,7 +120,7 @@ export default function NetworkProbes({
.catch(() => setStats([]))
return () => controller.abort()
}, [systemId, chartTime, probes, activeProbeKeys])
}, [system, chartTime, probes, activeProbeKeys])
const deleteProbe = async (id: string) => {
try {