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>

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<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>

internal/site/src/components/routes/system/probe-dialog.tsx

@@ -28,7 +28,7 @@ export function AddProbeDialog({
 	const [protocol, setProtocol] = useState<string>("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({
 						</Label>
 						<Input
 							type="number"
-							value={interval}
+							value={probeInterval}
-							onChange={(e) => setInterval(e.target.value)}
+							onChange={(e) => setProbeInterval(e.target.value)}
 							min={1}
 							max={3600}
 							required