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 && }
+
- {open && }
+
)
}
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)