From b182b699d7cf1423d6d29d2b7dfe7f043c741854 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Mon, 27 Apr 2026 10:05:58 -0400
Subject: [PATCH] update

---
 .../network-probes-table/probe-dialog.tsx     | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/internal/site/src/components/network-probes-table/probe-dialog.tsx b/internal/site/src/components/network-probes-table/probe-dialog.tsx
index 56251281..1e9abbc2 100644
--- a/internal/site/src/components/network-probes-table/probe-dialog.tsx
+++ b/internal/site/src/components/network-probes-table/probe-dialog.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { Trans, useLingui } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
 import { pb } from "@/lib/api"
@@ -248,7 +248,7 @@ export function AddProbeDialog({ systemId }: { systemId?: string }) {
 					setOpen(nextOpen)
 				}}
 			>
-				{open && <ProbeDialogContent setOpen={setOpen} systemId={systemId} onOpenBulkAdd={openBulkAdd} />}
+				<ProbeDialogContent open={open} setOpen={setOpen} systemId={systemId} onOpenBulkAdd={openBulkAdd} />
 			</Dialog>
 
 			<Sheet
@@ -343,17 +343,19 @@ export function EditProbeDialog({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			{open && <ProbeDialogContent setOpen={setOpen} systemId={systemId} probe={probe} />}
+			<ProbeDialogContent open={open} setOpen={setOpen} systemId={systemId} probe={probe} />
 		</Dialog>
 	)
 }
 
 function ProbeDialogContent({
+	open,
 	setOpen,
 	systemId,
 	probe,
 	onOpenBulkAdd,
 }: {
+	open: boolean
 	setOpen: (open: boolean) => void
 	systemId?: string
 	probe?: NetworkProbeRecord
@@ -374,6 +376,21 @@ function ProbeDialogContent({
 	const isEditing = !!probe
 	const targetName = target.replace(/^https?:\/\//, "")
 
+	// When the dialog is opened, initialize form fields with probe values (if editing) or defaults (if adding).
+	useEffect(() => {
+		if (!open) {
+			return
+		}
+
+		setProtocol(probe?.protocol ?? "icmp")
+		setTarget(probe?.target ?? "")
+		setPort((probe?.protocol === "tcp" || probe?.protocol === "http") && probe.port ? String(probe.port) : "")
+		setProbeInterval(String(probe?.interval ?? 30))
+		setName(probe?.name ?? "")
+		setSelectedSystemId(probe?.system ?? "")
+		setLoading(false)
+	}, [open, probe])
+
 	async function handleSubmit(e: React.FormEvent) {
 		e.preventDefault()
 		setLoading(true)