diff --git a/internal/site/src/components/routes/system/network-probes.tsx b/internal/site/src/components/routes/system/network-probes.tsx index b0ef6e9c..de01e52e 100644 --- a/internal/site/src/components/routes/system/network-probes.tsx +++ b/internal/site/src/components/routes/system/network-probes.tsx @@ -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[] = useMemo(() => { return probes.map((p, i) => { const key = probeKey(p) @@ -181,7 +181,7 @@ export default function NetworkProbes({ const result = latestResults[key] return ( - {p.name || "-"} + {p.name || p.target} {p.target} {protocolBadge(p.protocol)} {p.interval}s diff --git a/internal/site/src/components/routes/system/probe-dialog.tsx b/internal/site/src/components/routes/system/probe-dialog.tsx index 59ae30ac..8c8915ee 100644 --- a/internal/site/src/components/routes/system/probe-dialog.tsx +++ b/internal/site/src/components/routes/system/probe-dialog.tsx @@ -28,7 +28,7 @@ export function AddProbeDialog({ const [protocol, setProtocol] = useState("icmp") const [target, setTarget] = useState("") const [port, setPort] = useState("") - const [interval, setInterval] = useState("10") + const [probeInterval, setProbeInterval] = useState("10") const [name, setName] = useState("") const [loading, setLoading] = useState(false) const { toast } = useToast() @@ -38,7 +38,7 @@ export function AddProbeDialog({ setProtocol("icmp") setTarget("") setPort("") - setInterval("10") + setProbeInterval("10") setName("") } @@ -54,7 +54,7 @@ export function AddProbeDialog({ target, protocol, port: protocol === "tcp" ? Number(port) : 0, - interval: Number(interval), + interval: Number(probeInterval), }, }) resetForm() @@ -133,8 +133,8 @@ export function AddProbeDialog({ setInterval(e.target.value)} + value={probeInterval} + onChange={(e) => setProbeInterval(e.target.value)} min={1} max={3600} required