fix(ui): address code quality review findings for network probes

- Rename setInterval to setProbeInterval to avoid shadowing global
- Move probeKey function outside component (pure function)
- Fix probes.length dependency to use probes directly
- Use proper type for stats fetch instead of any
- Fix name column fallback to show target instead of dash

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
xiaomiku01
2026-04-11 00:48:17 +08:00
parent 7fdc403470
commit 3a0896e57e
2 changed files with 13 additions and 13 deletions

View File

@@ -14,6 +14,11 @@ import LineChartDefault, { type DataPoint } from "@/components/charts/line-chart
import { pinnedAxisDomain } from "@/components/ui/chart"
import type { ChartData, NetworkProbeRecord, NetworkProbeStatsRecord } from "@/types"
function probeKey(p: NetworkProbeRecord) {
if (p.protocol === "tcp") return `${p.protocol}:${p.target}:${p.port}`
return `${p.protocol}:${p.target}`
}
export default function NetworkProbes({
systemId,
chartData,
@@ -48,7 +53,7 @@ export default function NetworkProbes({
const controller = new AbortController()
const statsType = chartTimeData[chartTime]?.type ?? "1m"
pb.send<{ stats: any; created: string }[]>("/api/beszel/network-probe-stats", {
pb.send<{ stats: NetworkProbeStatsRecord["stats"]; created: string }[]>("/api/beszel/network-probe-stats", {
query: { system: systemId, type: statsType },
signal: controller.signal,
})
@@ -70,7 +75,7 @@ export default function NetworkProbes({
.catch(() => setStats([]))
return () => controller.abort()
}, [systemId, chartTime, probes.length])
}, [systemId, chartTime, probes])
const deleteProbe = async (id: string) => {
try {
@@ -84,11 +89,6 @@ export default function NetworkProbes({
}
}
const probeKey = (p: NetworkProbeRecord) => {
if (p.protocol === "tcp") return `${p.protocol}:${p.target}:${p.port}`
return `${p.protocol}:${p.target}`
}
const dataPoints: DataPoint<NetworkProbeStatsRecord>[] = useMemo(() => {
return probes.map((p, i) => {
const key = probeKey(p)
@@ -181,7 +181,7 @@ export default function NetworkProbes({
const result = latestResults[key]
return (
<tr key={p.id} className="border-b last:border-0">
<td className="px-3 sm:px-6 py-2.5 text-muted-foreground">{p.name || "-"}</td>
<td className="px-3 sm:px-6 py-2.5 text-muted-foreground">{p.name || p.target}</td>
<td className="px-3 py-2.5 font-mono text-xs">{p.target}</td>
<td className="px-3 py-2.5">{protocolBadge(p.protocol)}</td>
<td className="px-3 py-2.5">{p.interval}s</td>