jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-04-20 19:51:49 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
internal/site/src/components/routes/system.tsx
View File

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

9
internal/site/src/components/routes/system/network-probes.tsx
View File

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