feat: network monitoring from agents (#2266, #1911)

Co-authored-by: Sven van Ginkel <svenvanginkel@icloud.com>
Co-authored-by: xiaomiku01 <xiaomiku01@outlook.com>

internal/site/src/components/network-monitors-table/monitor-dialog.tsx

@@ -0,0 +1,778 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Trans, useLingui } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { pb } from "@/lib/api"
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog"
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { ChevronDownIcon, ListIcon, SearchIcon, ServerIcon } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+import { $systems } from "@/lib/stores"
+import { cn, supportsNetworkMonitors } from "@/lib/utils"
+import type { NetworkMonitorRecord } from "@/types"
+import * as v from "valibot"
+
+type MonitorProtocol = "icmp" | "tcp" | "http" | "dns"
+
+type MonitorValues = {
+	system: string
+	target: string
+	protocol: MonitorProtocol
+	port: number
+	interval: string
+}
+
+type NormalizedMonitorValues = Omit<MonitorValues, "system" | "interval"> & {
+	interval: number
+}
+
+type BulkMonitorLineSource = Pick<NetworkMonitorRecord, "target" | "protocol" | "port" | "interval">
+
+const defaultInterval = 30
+
+const MonitorProtocolSchema = v.picklist(["icmp", "tcp", "http", "dns"])
+
+const MonitorIntervalSchema = v.pipe(v.string(), v.toNumber(), v.minValue(1), v.maxValue(3600))
+
+// Both the single-monitor form and the bulk importer flow through this schema so
+// defaults and HTTP target normalization stay in one place.
+const NormalizedMonitorValuesSchema = v.pipe(
+	v.object({
+		target: v.pipe(v.string(), v.trim(), v.nonEmpty("target is required")),
+		protocol: MonitorProtocolSchema,
+		port: v.number(),
+		interval: MonitorIntervalSchema,
+	}),
+	v.transform((input): NormalizedMonitorValues => {
+		let { protocol, port } = input
+		let httpTarget = input.target
+		if (protocol === "icmp" || protocol === "http" || protocol === "dns") {
+			if (protocol === "http") {
+				httpTarget = normalizeHttpTarget(input.target, port)
+			}
+			port = 0
+		} else if (protocol === "tcp" && !port) {
+			port = 443
+		}
+		return {
+			// HTTP monitors may be entered as bare hostnames, so normalize them to a
+			// scheme-bearing URL before the payload is sent to PocketBase.
+			target: protocol === "http" ? httpTarget : input.target,
+			protocol,
+			port,
+			interval: input.interval,
+		}
+	}),
+	v.forward(
+		v.check((input) => {
+			if (input.protocol === "icmp" || input.protocol === "http" || input.protocol === "dns") {
+				return input.port === 0
+			}
+
+			return Number.isInteger(input.port) && input.port >= 1 && input.port <= 65535
+		}, "Port must be between 1 and 65535"),
+		["port"]
+	)
+)
+
+// Bulk parsing only trims raw CSV fields. Inference, defaults, and protocol-
+// specific validation still go through the shared normalization schema above.
+const BulkMonitorSchema = v.object({
+	target: v.pipe(v.string(), v.trim(), v.nonEmpty("target is required")),
+	protocol: v.optional(v.pipe(v.string(), v.trim())),
+	port: v.optional(v.pipe(v.string(), v.trim())),
+	interval: v.optional(v.pipe(v.string(), v.trim())),
+})
+
+function normalizeHttpTarget(target: string, port = 0) {
+	const useExplicitPort = port > 0 && port !== 80 && port !== 443
+	const hasOriginOnlyTarget = /^https?:\/\/[^/?#]+$/i.test(target)
+	if (!/^https?:\/\//i.test(target)) {
+		const scheme = port === 80 ? "http" : "https"
+		return `${scheme}://${target}${useExplicitPort ? `:${port}` : ""}`
+	}
+
+	let parsedUrl: URL
+	try {
+		parsedUrl = new URL(target)
+	} catch {
+		return target
+	}
+
+	if (!parsedUrl.port && useExplicitPort) {
+		parsedUrl.port = `${port}`
+	}
+
+	// avoid converting "http://localhost:8090" to "http://localhost:8090/" - keep the original formatting if the URL is just an origin
+	if (hasOriginOnlyTarget && parsedUrl.pathname === "/" && !parsedUrl.search && !parsedUrl.hash) {
+		return parsedUrl.origin
+	}
+
+	return parsedUrl.toString()
+}
+
+function trimTrailingEmptyFields(fields: string[]) {
+	let lastValueIndex = fields.length - 1
+	while (lastValueIndex > 0 && !fields[lastValueIndex]) {
+		lastValueIndex--
+	}
+	return fields.slice(0, lastValueIndex + 1)
+}
+
+function buildMonitorPayload(values: MonitorValues, enabled = true) {
+	const normalizedValues = v.safeParse(NormalizedMonitorValuesSchema, values)
+	if (!normalizedValues.success) {
+		throw new Error(normalizedValues.issues[0]?.message || "Invalid monitor")
+	}
+
+	const payload = {
+		system: values.system,
+		enabled,
+		...normalizedValues.output,
+	}
+
+	return payload
+}
+
+type MonitorIdentity = Pick<MonitorValues, "system" | "target" | "protocol" | "port">
+function getMonitorIdentityKey({ system, target, protocol, port }: MonitorIdentity) {
+	return `${system}${target}${protocol}${port}`
+}
+
+function parseBulkMonitorLine(line: string, lineNumber: number, system: string) {
+	const [rawTarget = "", rawProtocol = "", rawPort = "", rawInterval = ""] = line.split(",")
+	const parsed = v.safeParse(BulkMonitorSchema, {
+		target: rawTarget,
+		protocol: rawProtocol,
+		port: rawPort,
+		interval: rawInterval,
+	})
+	if (!parsed.success) {
+		throw new Error(`Line ${lineNumber}: ${parsed.issues[0]?.message || "invalid monitor entry"}`)
+	}
+	const protocol = (parsed.output.protocol?.toLowerCase() ||
+		(/^https?:\/\//i.test(parsed.output.target) ? "http" : "icmp")) as MonitorProtocol
+
+	return buildMonitorPayload({
+		system,
+		target: parsed.output.target,
+		protocol,
+		port: parsed.output.port ? Number(parsed.output.port) : 0,
+		interval: parsed.output.interval || `${defaultInterval}`,
+	})
+}
+
+export function formatBulkMonitorLine(monitor: BulkMonitorLineSource) {
+	const port = monitor.protocol !== "tcp" || monitor.port === 443 ? "" : `${monitor.port}`
+	const interval = monitor.interval === defaultInterval ? "" : `${monitor.interval}`
+	return trimTrailingEmptyFields([monitor.target, monitor.protocol, port, interval]).join(",")
+}
+
+function SystemMultiSelect({
+	id,
+	selectedSystemIds,
+	onChange,
+	disabled,
+	className,
+}: {
+	id: string
+	selectedSystemIds: Set<string>
+	onChange: (ids: Set<string>) => void
+	disabled?: boolean
+	className?: string
+}) {
+	const systems = useStore($systems)
+	const { t } = useLingui()
+	const [search, setSearch] = useState("")
+	const searchRef = useRef<HTMLInputElement>(null)
+	const focusSearchOnMount = useCallback((node: HTMLInputElement | null) => {
+		searchRef.current = node
+		if (!node) return
+		// Focus after the menu has completed its own initial focus handling.
+		const frame = requestAnimationFrame(() => node.focus())
+		return () => cancelAnimationFrame(frame)
+	}, [])
+	const contentRef = useRef<HTMLDivElement>(null)
+	const query = search.trim().toLocaleLowerCase()
+	const filteredSystems = systems.filter(
+		(system) => supportsNetworkMonitors(system) && system.name.toLocaleLowerCase().includes(query)
+	)
+	const allSelected = filteredSystems.every((system) => selectedSystemIds.has(system.id))
+	const anySelected = filteredSystems.some((system) => selectedSystemIds.has(system.id))
+
+	const selectFiltered = (selected: boolean) => {
+		const next = new Set(selectedSystemIds)
+		for (const system of filteredSystems) {
+			if (selected) next.add(system.id)
+			else next.delete(system.id)
+		}
+		onChange(next)
+	}
+	return (
+		<DropdownMenu onOpenChange={() => setSearch("")}>
+			<DropdownMenuTrigger asChild>
+				<Button
+					id={id}
+					disabled={disabled}
+					type="button"
+					variant="outline"
+					className={cn("relative w-full min-w-0 ps-10 pe-10 justify-start font-normal text-start", className)}
+				>
+					<ServerIcon className="size-3.5 absolute start-4 top-1/2 -translate-y-1/2 opacity-85" />
+					<span className="truncate">
+						{selectedSystemIds.size === 0
+							? t`Select systems`
+							: selectedSystemIds.size === 1
+								? systems.find((s) => selectedSystemIds.has(s.id))?.name
+								: t`${selectedSystemIds.size} systems selected`}
+					</span>
+					<ChevronDownIcon className="size-4 absolute end-4 top-1/2 -translate-y-1/2 opacity-50" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent
+				ref={contentRef}
+				onKeyDown={(event) => {
+					if (event.key === "Tab") {
+						event.preventDefault()
+						searchRef.current?.focus()
+					}
+				}}
+				align="start"
+				className="w-[var(--radix-dropdown-menu-trigger-width)] max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex flex-col overflow-hidden"
+			>
+				<div className="shrink-0 border-b mb-1">
+					<div className="flex items-center gap-2 px-2.5">
+						<SearchIcon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+						<Input
+							ref={focusSearchOnMount}
+							value={search}
+							onChange={(event) => setSearch(event.target.value)}
+							placeholder={t`Search systems`}
+							aria-label={t`Search systems`}
+							className="h-10 min-w-0 rounded-none border-0 bg-transparent px-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+							onKeyDown={(event) => {
+								if (event.key === "Escape") return
+								// Keep menu typeahead and form submission from consuming search input.
+								event.stopPropagation()
+								if (event.key === "Enter") event.preventDefault()
+								if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Tab") {
+									event.preventDefault()
+									const items = contentRef.current?.querySelectorAll<HTMLElement>(
+										'[role^="menuitem"]:not([data-disabled])'
+									)
+									const index = event.key === "ArrowUp" || event.shiftKey ? (items?.length ?? 1) - 1 : 0
+									items?.[index]?.focus()
+								}
+							}}
+						/>
+					</div>
+					<div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 px-1 pb-1">
+						<div className="flex items-center">
+							<DropdownMenuItem
+								className="px-1.5 py-1 text-xs text-muted-foreground"
+								disabled={!filteredSystems.length || allSelected}
+								onSelect={(event) => {
+									event.preventDefault()
+									selectFiltered(true)
+								}}
+							>
+								{query ? <Trans>Select matches</Trans> : <Trans>Select all</Trans>}
+							</DropdownMenuItem>
+							<span aria-hidden="true" className="text-xs text-muted-foreground/50">
+								·
+							</span>
+							<DropdownMenuItem
+								className="px-1.5 py-1 text-xs text-muted-foreground"
+								disabled={!anySelected}
+								onSelect={(event) => {
+									event.preventDefault()
+									selectFiltered(false)
+								}}
+							>
+								{query ? <Trans>Clear matches</Trans> : <Trans>Clear all</Trans>}
+							</DropdownMenuItem>
+						</div>
+						<span className="px-1.5 text-xs tabular-nums text-muted-foreground">
+							{t`${selectedSystemIds.size} selected`}
+						</span>
+					</div>
+				</div>
+				<div className="min-h-0 overflow-y-auto">
+					{filteredSystems.length === 0 && (
+						<output className="block px-2.5 py-3 text-sm text-muted-foreground">
+							<Trans>No systems found.</Trans>
+						</output>
+					)}
+					{filteredSystems.map((sys) => (
+						<DropdownMenuCheckboxItem
+							key={sys.id}
+							checked={selectedSystemIds.has(sys.id)}
+							onSelect={(event) => event.preventDefault()}
+							onCheckedChange={(checked) => {
+								const next = new Set(selectedSystemIds)
+								if (checked) next.add(sys.id)
+								else next.delete(sys.id)
+								onChange(next)
+							}}
+							className="group min-w-0 gap-2.5 py-2 ps-2.5"
+							indicatorClassName="static size-4 shrink-0 rounded border border-input group-data-[state=checked]:border-primary group-data-[state=checked]:bg-primary group-data-[state=checked]:text-primary-foreground [&_svg]:size-3"
+						>
+							<span className="truncate">{sys.name}</span>
+						</DropdownMenuCheckboxItem>
+					))}
+				</div>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+}
+
+export function AddMonitorDialog({ systemId, monitors }: { systemId?: string; monitors: NetworkMonitorRecord[] }) {
+	const [open, setOpen] = useState(false)
+	const [bulkOpen, setBulkOpen] = useState(false)
+	const [bulkInput, setBulkInput] = useState("")
+	const [bulkLoading, setBulkLoading] = useState(false)
+	const [bulkSelectedSystemIds, setBulkSelectedSystemIds] = useState<Set<string>>(new Set())
+	const bulkFormRef = useRef<HTMLFormElement>(null)
+	const { toast } = useToast()
+	const { t } = useLingui()
+
+	const resetBulkForm = () => {
+		setBulkInput("")
+	}
+
+	const openBulkAdd = (selectedSystemIds?: Set<string>) => {
+		if (!systemId && selectedSystemIds) {
+			setBulkSelectedSystemIds(new Set(selectedSystemIds))
+		}
+		setOpen(false)
+		setBulkOpen(true)
+	}
+
+	const openAdd = () => {
+		setBulkOpen(false)
+		setOpen(true)
+	}
+
+	async function handleBulkSubmit(e: React.FormEvent) {
+		e.preventDefault()
+		setBulkLoading(true)
+		let closedForSubmit = false
+
+		try {
+			const targetSystems = systemId ? [systemId] : Array.from(bulkSelectedSystemIds)
+			if (!targetSystems.length) {
+				throw new Error("Select at least one system.")
+			}
+			const rawLines = bulkInput.split(/\r?\n/).filter((line) => line.trim())
+			if (!rawLines.length) {
+				throw new Error("Enter at least one monitor.")
+			}
+
+			let totalCreated = 0
+			closedForSubmit = true
+
+			for (const system of targetSystems) {
+				const payloads = rawLines.map((line, index) => parseBulkMonitorLine(line, index + 1, system))
+				const existingMonitorKeys = new Set(
+					monitors.filter((monitor) => monitor.system === system).map((monitor) => getMonitorIdentityKey(monitor))
+				)
+				const newPayloads: typeof payloads = []
+
+				for (const payload of payloads) {
+					const monitorKey = getMonitorIdentityKey(payload)
+					if (existingMonitorKeys.has(monitorKey)) {
+						continue
+					}
+					existingMonitorKeys.add(monitorKey)
+					newPayloads.push(payload)
+				}
+
+				if (!newPayloads.length) continue
+
+				let batch = pb.createBatch()
+				let inBatch = 0
+				for (const payload of newPayloads) {
+					batch.collection("network_monitors").create(payload)
+					inBatch++
+					if (inBatch > 20) {
+						await batch.send()
+						batch = pb.createBatch()
+						inBatch = 0
+					}
+				}
+				if (inBatch) {
+					await batch.send()
+				}
+				totalCreated += newPayloads.length
+			}
+
+			if (!totalCreated) {
+				throw new Error("No new monitors. All entries already exist.")
+			}
+
+			resetBulkForm()
+			toast({ title: t`Monitors created`, description: `${totalCreated} monitor(s) added.` })
+		} catch (err: unknown) {
+			if (closedForSubmit) {
+				setBulkOpen(true)
+			}
+			toast({ variant: "destructive", title: t`Error`, description: (err as Error)?.message })
+		} finally {
+			setBulkLoading(false)
+		}
+	}
+
+	return (
+		<>
+			<div className="flex gap-0 rounded-lg">
+				<Button variant="outline" onClick={openAdd} className="rounded-e-none grow">
+					{/* <PlusIcon className="size-4 me-1" /> */}
+					<Trans>Add {{ foo: t`Monitor` }}</Trans>
+				</Button>
+				<div className="w-px h-full bg-muted"></div>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="outline" className="px-2 rounded-s-none border-s-0" aria-label={t`More monitor actions`}>
+							<ChevronDownIcon className="size-4" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuItem onClick={() => openBulkAdd()}>
+							<ListIcon className="size-4 me-2" />
+							<Trans>Bulk Add</Trans>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+			<Dialog
+				open={open}
+				onOpenChange={(nextOpen) => {
+					setOpen(nextOpen)
+				}}
+			>
+				<MonitorDialogContent open={open} setOpen={setOpen} systemId={systemId} onOpenBulkAdd={openBulkAdd} />
+			</Dialog>
+
+			<Sheet
+				open={bulkOpen}
+				onOpenChange={(nextOpen) => {
+					setBulkOpen(nextOpen)
+					if (!nextOpen) {
+						resetBulkForm()
+					}
+				}}
+			>
+				<SheetContent className="w-full sm:max-w-xl gap-0">
+					<SheetHeader className="border-b">
+						<SheetTitle>
+							<Trans>Bulk Add {{ foo: t`Network Monitors` }}</Trans>
+						</SheetTitle>
+						<SheetDescription>target[,protocol[,port[,interval]]]</SheetDescription>
+					</SheetHeader>
+					<form ref={bulkFormRef} onSubmit={handleBulkSubmit} className="flex h-full flex-col overflow-hidden">
+						<div className="flex-1 flex flex-col space-y-4 overflow-auto p-4">
+							{!systemId && (
+								<div className="grid gap-2">
+									<Label htmlFor="bulk-monitor-systems" className="sr-only">
+										<Trans>Systems</Trans>
+									</Label>
+									<SystemMultiSelect
+										id="bulk-monitor-systems"
+										selectedSystemIds={bulkSelectedSystemIds}
+										onChange={setBulkSelectedSystemIds}
+										disabled={bulkLoading}
+										className="bg-card"
+									/>
+								</div>
+							)}
+							<div className="grow flex flex-col gap-2">
+								<Label htmlFor="bulk-monitors" className="sr-only">
+									Entries
+								</Label>
+								<Textarea
+									id="bulk-monitors"
+									value={bulkInput}
+									onChange={(e) => setBulkInput(e.target.value)}
+									onKeyDown={(e) => {
+										if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+											e.preventDefault()
+											bulkFormRef.current?.requestSubmit()
+										}
+									}}
+									className="font-mono grow text-sm bg-card"
+									placeholder={["1.1.1.1", "example.com,tcp", "https://example.com,http,,60"].join("\n")}
+									required
+								/>
+								<p className="text-xs text-muted-foreground">target[,protocol[,port[,interval]]]</p>
+							</div>
+						</div>
+						<SheetFooter className="border-t">
+							<Button type="submit" disabled={bulkLoading || (!systemId && !bulkSelectedSystemIds.size)}>
+								<Trans>Add {{ foo: t`Network Monitors` }}</Trans>
+							</Button>
+						</SheetFooter>
+					</form>
+				</SheetContent>
+			</Sheet>
+		</>
+	)
+}
+
+export function EditMonitorDialog({
+	open,
+	setOpen,
+	systemId,
+	monitor,
+}: {
+	open: boolean
+	setOpen: (open: boolean) => void
+	systemId?: string
+	monitor?: NetworkMonitorRecord
+}) {
+	const hasOpened = useRef(false)
+	if (!monitor && !hasOpened.current) {
+		return null
+	}
+	hasOpened.current = true
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<MonitorDialogContent open={open} setOpen={setOpen} systemId={systemId} monitor={monitor} />
+		</Dialog>
+	)
+}
+
+function MonitorDialogContent({
+	open,
+	setOpen,
+	systemId,
+	monitor,
+	onOpenBulkAdd,
+}: {
+	open: boolean
+	setOpen: (open: boolean) => void
+	systemId?: string
+	monitor?: NetworkMonitorRecord
+	onOpenBulkAdd?: (selectedSystemIds: Set<string>) => void
+}) {
+	const [protocol, setProtocol] = useState<MonitorProtocol>(monitor?.protocol ?? "icmp")
+	const [target, setTarget] = useState(monitor?.target ?? "")
+	const [port, setPort] = useState(monitor?.protocol === "tcp" && monitor.port ? String(monitor.port) : "")
+	const [monitorInterval, setMonitorInterval] = useState(String(monitor?.interval ?? defaultInterval))
+	const [loading, setLoading] = useState(false)
+	const [selectedSystemId, setSelectedSystemId] = useState(monitor?.system ?? "")
+	const [selectedSystemIds, setSelectedSystemIds] = useState<Set<string>>(new Set())
+	const systems = useStore($systems)
+	const { toast } = useToast()
+	const { t } = useLingui()
+	const isEditing = !!monitor
+
+	// When the dialog is opened, initialize form fields with monitor values (if editing) or defaults (if adding).
+	useEffect(() => {
+		if (!open) {
+			return
+		}
+
+		setProtocol(monitor?.protocol ?? "icmp")
+		setTarget(monitor?.target ?? "")
+		setPort(monitor?.protocol === "tcp" && monitor.port ? String(monitor.port) : "")
+		setMonitorInterval(String(monitor?.interval ?? defaultInterval))
+		setSelectedSystemId(monitor?.system ?? "")
+		setSelectedSystemIds(new Set())
+		setLoading(false)
+	}, [open, monitor])
+
+	async function handleSubmit(e: React.FormEvent) {
+		e.preventDefault()
+		setLoading(true)
+
+		const targetSystems = systemId ? [systemId] : monitor ? [selectedSystemId] : Array.from(selectedSystemIds)
+		const remainingSystemIds = new Set(targetSystems)
+		try {
+			if (!targetSystems.length || !targetSystems[0]) throw new Error("Select at least one system.")
+			const payload = buildMonitorPayload(
+				{
+					system: targetSystems[0],
+					target,
+					protocol,
+					port: protocol === "tcp" ? Number(port) : 0,
+					interval: monitorInterval,
+				},
+				monitor ? monitor.enabled : true
+			)
+			if (monitor) {
+				await pb.collection("network_monitors").update(monitor.id, payload)
+			} else {
+				for (const system of targetSystems) {
+					await pb.collection("network_monitors").create({ ...payload, system })
+					remainingSystemIds.delete(system)
+				}
+			}
+			setOpen(false)
+		} catch (err: unknown) {
+			if (!monitor && !systemId) {
+				// Retain only unfinished systems so retrying cannot duplicate successful creates.
+				setSelectedSystemIds(remainingSystemIds)
+			}
+			toast({ variant: "destructive", title: t`Error`, description: (err as Error)?.message })
+		} finally {
+			setLoading(false)
+		}
+	}
+
+	return (
+		<DialogContent className="max-w-md">
+			<DialogHeader>
+				<DialogTitle>
+					{isEditing ? (
+						<Trans>Edit {{ foo: t`Network Monitor` }}</Trans>
+					) : (
+						<Trans>Add {{ foo: t`Network Monitor` }}</Trans>
+					)}
+				</DialogTitle>
+				<DialogDescription>
+					<Trans>Configure response monitoring from this agent.</Trans>
+				</DialogDescription>
+			</DialogHeader>
+			<form onSubmit={handleSubmit} className="grid gap-4 tabular-nums">
+				{!systemId && !isEditing && (
+					<div className="grid gap-2">
+						<Label htmlFor="monitor-systems">
+							<Trans>Systems</Trans>
+						</Label>
+						<SystemMultiSelect
+							id="monitor-systems"
+							selectedSystemIds={selectedSystemIds}
+							onChange={setSelectedSystemIds}
+							disabled={loading}
+						/>
+					</div>
+				)}
+				{!systemId && isEditing && (
+					<div className="grid gap-2">
+						<Label>
+							<Trans>System</Trans>
+						</Label>
+						<Select value={selectedSystemId} onValueChange={setSelectedSystemId} required>
+							<SelectTrigger>
+								<SelectValue placeholder={t`Select a system`} />
+							</SelectTrigger>
+							<SelectContent>
+								{systems
+									.filter((sys) => sys.id === monitor?.system || supportsNetworkMonitors(sys))
+									.map((sys) => (
+										<SelectItem key={sys.id} value={sys.id}>
+											{sys.name}
+										</SelectItem>
+									))}
+							</SelectContent>
+						</Select>
+					</div>
+				)}
+				<div className="grid gap-2">
+					<Label>
+						<Trans>Target</Trans>
+					</Label>
+					<Input
+						value={target}
+						onChange={(e) => setTarget(e.target.value)}
+						placeholder={protocol === "http" ? "http://localhost:8090" : "1.1.1.1"}
+						required
+					/>
+				</div>
+				<div className="grid gap-2">
+					<Label>
+						<Trans>Protocol</Trans>
+					</Label>
+
+					<Select value={protocol} onValueChange={(value) => setProtocol(value as MonitorProtocol)}>
+						<SelectTrigger>
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="icmp">ICMP</SelectItem>
+							<SelectItem value="tcp">TCP</SelectItem>
+							<SelectItem value="http">HTTP</SelectItem>
+							<SelectItem value="dns">DNS</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+				{protocol === "tcp" && (
+					<div className="grid gap-2">
+						<Label>
+							<Trans>Port</Trans>
+						</Label>
+						<Input
+							type="number"
+							value={port}
+							onChange={(e) => setPort(e.target.value)}
+							placeholder="443"
+							min={1}
+							max={65535}
+						/>
+					</div>
+				)}
+				<div className="grid gap-2">
+					<Label>
+						<Trans>Interval (seconds)</Trans>
+					</Label>
+					<Input
+						type="number"
+						value={monitorInterval}
+						onChange={(e) => setMonitorInterval(e.target.value)}
+						min={1}
+						max={3600}
+						required
+					/>
+				</div>
+				<DialogFooter>
+					{!isEditing && onOpenBulkAdd && (
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => onOpenBulkAdd(selectedSystemIds)}
+							disabled={loading}
+							className="me-auto"
+						>
+							<ListIcon className="size-4 me-2" />
+							<Trans>Bulk Add</Trans>
+						</Button>
+					)}
+					<Button
+						type="submit"
+						disabled={loading || (!systemId && (isEditing ? !selectedSystemId : !selectedSystemIds.size))}
+					>
+						{loading ? (
+							isEditing ? (
+								<Trans>Saving...</Trans>
+							) : (
+								<Trans>Creating...</Trans>
+							)
+						) : isEditing ? (
+							<Trans>Save {{ foo: t`Monitor` }}</Trans>
+						) : (
+							<Trans>Add {{ foo: t`Monitor` }}</Trans>
+						)}
+					</Button>
+				</DialogFooter>
+			</form>
+		</DialogContent>
+	)
+}

internal/site/src/components/network-monitors-table/network-monitors-columns.tsx

@@ -0,0 +1,411 @@
+import type { CellContext, Column, ColumnDef } from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+import { cn, copyToClipboard, decimalString, formatMicroseconds, hourWithSeconds } from "@/lib/utils"
+import {
+	GlobeIcon,
+	TimerIcon,
+	WifiOffIcon,
+	Trash2Icon,
+	ArrowLeftRightIcon,
+	MoreHorizontalIcon,
+	ServerIcon,
+	ClockIcon,
+	RefreshCwIcon,
+	PenBoxIcon,
+	PauseCircleIcon,
+	PlayCircleIcon,
+	CopyIcon,
+	CopyPlusIcon,
+} from "lucide-react"
+import { t } from "@lingui/core/macro"
+import type { NetworkMonitorRecord, SystemRecord } from "@/types"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Trans } from "@lingui/react/macro"
+import { $allSystemsById, $longestSystemName } from "@/lib/stores"
+import { useStore } from "@nanostores/react"
+import { SystemStatus } from "@/lib/enums"
+import { Checkbox } from "@/components/ui/checkbox"
+import { useMemo } from "react"
+import { formatBulkMonitorLine } from "@/components/network-monitors-table/monitor-dialog"
+import { Badge } from "../ui/badge"
+import { getMonitorTarget } from "@/lib/network-monitor-utils"
+import { pb } from "@/lib/api"
+
+const protocolColors: Record<string, string> = {
+	icmp: "bg-blue-500/15! text-blue-600 dark:text-blue-400",
+	tcp: "bg-purple-500/15! text-purple-600 dark:text-purple-400",
+	http: "bg-green-500/15! text-green-700 dark:text-green-400",
+	dns: "bg-amber-500/15! text-amber-600 dark:text-amber-400",
+}
+
+const SYSTEM_STATUS_COLORS = {
+	[SystemStatus.Up]: "bg-green-500",
+	[SystemStatus.Down]: "bg-red-500",
+	[SystemStatus.Paused]: "bg-primary/40",
+	[SystemStatus.Pending]: "bg-yellow-500",
+} as const
+
+/**
+ * A monitor is considered muted if it's disabled or if its associated system is not up.
+ */
+const isMuted = (record: NetworkMonitorRecord, systemRecord: SystemRecord | undefined) =>
+	!record.enabled || systemRecord?.status !== SystemStatus.Up
+
+export function getMonitorColumns(
+	longestTarget = "",
+	{
+		onEdit,
+		onDelete,
+		onSetEnabled,
+	}: {
+		onEdit?: (monitor: NetworkMonitorRecord) => void
+		onDelete?: (monitors: NetworkMonitorRecord[]) => void | Promise<void>
+		onSetEnabled?: (monitors: NetworkMonitorRecord[], enabled: boolean) => void | Promise<void>
+	} = {}
+): ColumnDef<NetworkMonitorRecord>[] {
+	return [
+		{
+			id: "select",
+			header: ({ table }) => (
+				<Checkbox
+					className="ms-2"
+					checked={table.getIsAllRowsSelected() || (table.getIsSomeRowsSelected() && "indeterminate")}
+					onClick={(event) => event.stopPropagation()}
+					onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+					aria-label={t`Select all`}
+				/>
+			),
+			cell: ({ row }) => (
+				<Checkbox
+					checked={row.getIsSelected()}
+					onClick={(event) => event.stopPropagation()}
+					onCheckedChange={(value) => row.toggleSelected(!!value)}
+					aria-label={t`Select row`}
+				/>
+			),
+			enableSorting: false,
+			enableHiding: false,
+			size: 44,
+		},
+		{
+			id: "system",
+			accessorFn: (record) => record.system,
+			sortingFn: (a, b) => {
+				const allSystems = $allSystemsById.get()
+				const systemNameA = allSystems[a.original.system]?.name ?? ""
+				const systemNameB = allSystems[b.original.system]?.name ?? ""
+				const primary = systemNameA.localeCompare(systemNameB)
+				if (primary !== 0) {
+					return primary
+				}
+				return a.original.target.localeCompare(b.original.target)
+			},
+			header: ({ column }) => <HeaderButton column={column} name={t`System`} Icon={ServerIcon} />,
+			cell: ({ getValue }) => {
+				const system = useStore($allSystemsById)[getValue() as string] as SystemRecord | undefined
+				const longestSystemName = useStore($longestSystemName)
+				const name = system?.name
+				const status = system?.status as SystemStatus // undefined val is fine but makes lsp mad
+
+				return useMemo(
+					() => (
+						<div className="ms-1.5 max-w-44 flex gap-2 items-center tabular-nums">
+							<span className={cn("shrink-0 size-2 rounded-full", SYSTEM_STATUS_COLORS[status])} />
+							<div className="relative w-fit min-w-0 max-w-full">
+								<span className="invisible block whitespace-nowrap" aria-hidden="true">
+									{longestSystemName}
+								</span>
+								<span className="absolute inset-0 truncate">{name}</span>
+							</div>
+						</div>
+					),
+					[status, name]
+				)
+			},
+		},
+		{
+			id: "target",
+			sortingFn: (a, b) => a.original.target.localeCompare(b.original.target),
+			accessorFn: (record) => getMonitorTarget(record),
+			header: ({ column }) => <HeaderButton column={column} name={t`Target`} Icon={GlobeIcon} />,
+			cell: ({ row, getValue }) => {
+				const monitor = row.original
+				const { status } = useStore($allSystemsById)[monitor.system] || {}
+
+				let color = "bg-green-500"
+				if (!monitor.enabled || status === SystemStatus.Paused) {
+					color = "bg-primary/40"
+				} else if (status === SystemStatus.Down || status === SystemStatus.Pending) {
+					color = "bg-yellow-500"
+				}
+				return (
+					<div className="ms-1.5 max-w-64 flex gap-2 items-center tabular-nums">
+						<span className={cn("shrink-0 size-2 rounded-full", color)} />
+						<div className="relative w-fit min-w-0 max-w-full">
+							<span className="invisible block overflow-hidden whitespace-nowrap" aria-hidden="true">
+								{longestTarget}
+							</span>
+							<span className="absolute inset-0 truncate">{getValue() as string}</span>
+						</div>
+					</div>
+				)
+			},
+		},
+		{
+			id: "protocol",
+			accessorFn: (record) => record.protocol,
+			header: ({ column }) => <HeaderButton column={column} name={t`Protocol`} Icon={ArrowLeftRightIcon} />,
+			cell: ({ getValue }) => {
+				const protocol = getValue() as string
+				return <Badge className={cn("uppercase", protocolColors[protocol])}>{protocol}</Badge>
+			},
+		},
+		{
+			id: "interval",
+			accessorFn: (record) => record.interval,
+			invertSorting: true,
+			header: ({ column }) => <HeaderButton column={column} name={t`Interval`} Icon={RefreshCwIcon} />,
+			cell: ({ getValue }) => <span className="ms-1.5 tabular-nums">{getValue() as number}s</span>,
+		},
+		{
+			id: "res",
+			accessorFn: (record) => record.res,
+			invertSorting: true,
+			header: ({ column }) => <HeaderButton column={column} name={t`Response`} Icon={TimerIcon} />,
+			cell: responseTimeCell,
+		},
+		{
+			id: "res1h",
+			accessorFn: (record) => record.resAvg1h,
+			invertSorting: true,
+			header: ({ column }) => <HeaderButton column={column} name={t`Avg 1h`} Icon={TimerIcon} />,
+			cell: responseTimeCell,
+		},
+		{
+			id: "max1h",
+			accessorFn: (record) => record.resMax1h,
+			invertSorting: true,
+			header: ({ column }) => <HeaderButton column={column} name={t`Max 1h`} Icon={TimerIcon} />,
+			cell: responseTimeCell,
+		},
+		{
+			id: "min1h",
+			accessorFn: (record) => record.resMin1h,
+			invertSorting: true,
+			header: ({ column }) => <HeaderButton column={column} name={t`Min 1h`} Icon={TimerIcon} />,
+			cell: responseTimeCell,
+		},
+		{
+			id: "loss",
+			accessorFn: (record) => record.loss1h,
+			invertSorting: true,
+			header: ({ column }) => <HeaderButton column={column} name={t`Loss 1h`} Icon={WifiOffIcon} />,
+			cell: ({ row }) => {
+				const { loss1h, res, system } = row.original
+				const systemRecord = useStore($allSystemsById)[system]
+
+				if (loss1h === undefined || (!res && !loss1h)) {
+					return <span className="ms-1.5 text-muted-foreground">-</span>
+				}
+
+				const muted = isMuted(row.original, systemRecord)
+				let color = "bg-green-500"
+				if (muted) {
+					color = "bg-muted-foreground/50"
+				} else if (loss1h) {
+					color = loss1h > 20 ? "bg-red-500" : "bg-yellow-500"
+				}
+				return (
+					<span className="ms-1.5 tabular-nums flex gap-2 items-center">
+						<span className={cn("shrink-0 size-2 rounded-full", color)} />
+						{loss1h === 100 ? loss1h : decimalString(loss1h, loss1h >= 10 ? 1 : 2)}%
+					</span>
+				)
+			},
+		},
+		{
+			id: "updated",
+			invertSorting: true,
+			accessorFn: (record) => record.updated,
+			header: ({ column }) => <HeaderButton column={column} name={t`Updated`} Icon={ClockIcon} />,
+			cell: ({ getValue }) => {
+				const timestamp = getValue() as number
+				if (!timestamp) {
+					return <span className="ms-1.5 text-muted-foreground">-</span>
+				}
+				return <span className="ms-1.5 tabular-nums">{hourWithSeconds(timestamp)}</span>
+			},
+		},
+		{
+			id: "actions",
+			enableSorting: false,
+			enableHiding: false,
+			header: () => null,
+			size: 40,
+			cell: ({ row, table }) => {
+				const selectedRows = table.getSelectedRowModel().rows
+				const actionRows =
+					row.getIsSelected() && selectedRows.length > 1
+						? selectedRows.map((selectedRow) => selectedRow.original)
+						: [row.original]
+				const isBulkAction = actionRows.length > 1
+				const shouldPause = actionRows.some((monitor) => monitor.enabled)
+				const bulkCopyContent = actionRows.map((monitor) => formatBulkMonitorLine(monitor)).join("\n")
+				const allSystems = useStore($allSystemsById)
+				const otherSystems = useMemo(
+					() => Object.values(allSystems).filter((s) => !isBulkAction && s.id !== row.original.system),
+					[allSystems, isBulkAction]
+				)
+				return (
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost" size="icon" className="size-10">
+								<span className="sr-only">
+									<Trans>Open menu</Trans>
+								</span>
+								<MoreHorizontalIcon className="w-5" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end" onClick={(event) => event.stopPropagation()}>
+							{!isBulkAction && (
+								<DropdownMenuItem
+									onClick={() => {
+										onEdit?.(row.original)
+									}}
+								>
+									<PenBoxIcon className="me-2.5 size-4" />
+									<Trans>Edit</Trans>
+								</DropdownMenuItem>
+							)}
+							<DropdownMenuItem
+								onClick={() => {
+									onSetEnabled?.(actionRows, !shouldPause)
+								}}
+							>
+								{shouldPause ? (
+									<>
+										<PauseCircleIcon className="me-2.5 size-4" />
+										<Trans>Pause</Trans>
+									</>
+								) : (
+									<>
+										<PlayCircleIcon className="me-2.5 size-4" />
+										<Trans>Resume</Trans>
+									</>
+								)}
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								onClick={() => {
+									copyToClipboard(bulkCopyContent)
+								}}
+							>
+								<CopyIcon className="me-2.5 size-4" />
+								<Trans>Bulk copy</Trans>
+							</DropdownMenuItem>
+							{!isBulkAction && otherSystems.length > 0 && (
+								<DropdownMenuSub>
+									<DropdownMenuSubTrigger>
+										<CopyPlusIcon className="me-2.5 size-4" />
+										<Trans>Copy to system</Trans>
+									</DropdownMenuSubTrigger>
+									<DropdownMenuSubContent className="max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] overflow-y-auto">
+										{otherSystems.map((sys) => (
+											<DropdownMenuItem
+												key={sys.id}
+												onClick={() => {
+													const { id: _id, system: _system, ...rest } = row.original
+													pb.collection("network_monitors")
+														.create({ ...rest, system: sys.id })
+														.catch(() => {})
+												}}
+											>
+												{sys.name}
+											</DropdownMenuItem>
+										))}
+									</DropdownMenuSubContent>
+								</DropdownMenuSub>
+							)}
+							<DropdownMenuSeparator />
+							<DropdownMenuItem
+								onClick={() => {
+									onDelete?.(actionRows)
+								}}
+							>
+								<Trash2Icon className="me-2.5 size-4" />
+								<Trans>Delete</Trans>
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				)
+			},
+		},
+	]
+}
+
+const responseTimeThresholds = {
+	http: { warning: 800_000, critical: 3_000_000 },
+	tcp: { warning: 500_000, critical: 2_000_000 },
+	icmp: { warning: 100_000, critical: 500_000 },
+	dns: { warning: 150_000, critical: 800_000 },
+}
+
+function responseTimeCell(cell: CellContext<NetworkMonitorRecord, unknown>) {
+	const monitor = cell.row.original
+	const systemRecord = useStore($allSystemsById)[monitor.system]
+	const responseTime = cell.getValue() as number | undefined
+
+	if (!responseTime) {
+		return <span className="ms-1.5 text-muted-foreground">-</span>
+	}
+
+	const muted = isMuted(monitor, systemRecord)
+	let color = "bg-green-500"
+	if (muted) {
+		color = "bg-muted-foreground/50"
+	} else if (responseTime > responseTimeThresholds[monitor.protocol].warning) {
+		color = "bg-yellow-500"
+	}
+	if (!muted && responseTime > responseTimeThresholds[monitor.protocol].critical) {
+		color = "bg-red-500"
+	}
+	return (
+		<span className="ms-1.5 tabular-nums flex gap-2 items-center">
+			<span className={cn("shrink-0 size-2 rounded-full", color)} />
+			{formatMicroseconds(responseTime)}
+		</span>
+	)
+}
+
+function HeaderButton({
+	column,
+	name,
+	Icon,
+}: {
+	column: Column<NetworkMonitorRecord>
+	name: string
+	Icon: React.ElementType
+}) {
+	const isSorted = column.getIsSorted()
+	return (
+		<Button
+			className={cn(
+				"h-9 px-3 flex items-center gap-2 duration-50",
+				isSorted && "bg-accent/70 light:bg-accent text-accent-foreground/90"
+			)}
+			variant="ghost"
+			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+		>
+			{Icon && <Icon className="size-4" />}
+			{name}
+		</Button>
+	)
+}

internal/site/src/components/network-monitors-table/network-monitors-table.tsx

@@ -0,0 +1,575 @@
+import { getMonitorTarget } from "@/lib/network-monitor-utils"
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import {
+	type ColumnFiltersState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	type Row,
+	type RowSelectionState,
+	type SortingState,
+	type Table as TableType,
+	useReactTable,
+	type VisibilityState,
+} from "@tanstack/react-table"
+import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { memo, useCallback, useMemo, useRef, useState } from "react"
+import { getMonitorColumns } from "@/components/network-monitors-table/network-monitors-columns"
+import { Card, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { useToast } from "@/components/ui/use-toast"
+import { isReadOnlyUser } from "@/lib/api"
+import { pb } from "@/lib/api"
+import { $allSystemsById, $direction, $userSettings } from "@/lib/stores"
+import {
+	cn,
+	isVisuallyLonger,
+	matchesFilterGroups,
+	parseFilterGroups,
+	parseSemVer,
+	useBrowserStorage,
+} from "@/lib/utils"
+import type { ChartData, NetworkMonitorRecord } from "@/types"
+import { AddMonitorDialog, EditMonitorDialog } from "./monitor-dialog"
+import { ArrowLeftRightIcon, EthernetPortIcon, LoaderCircleIcon, ServerIcon, XIcon } from "lucide-react"
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+import ChartTimeSelect from "@/components/charts/chart-time-select"
+import { LossChart, AvgMinMaxResponseChart } from "@/components/routes/system/charts/monitors-charts"
+import { useNetworkMonitorStats } from "@/lib/use-network-monitors"
+import { useStore } from "@nanostores/react"
+import { atom } from "nanostores"
+import { Separator } from "../ui/separator"
+import { $router, Link } from "../router"
+import { getPagePath } from "@nanostores/router"
+
+export default function NetworkMonitorsTableNew({
+	systemId,
+	monitors,
+	isLoading,
+}: {
+	systemId?: string
+	monitors: NetworkMonitorRecord[]
+	isLoading: boolean
+}) {
+	const [sorting, setSorting] = useBrowserStorage<SortingState>(
+		`sort-np-target-${systemId ? 1 : 0}`,
+		[{ id: systemId ? "target" : "system", desc: false }],
+		sessionStorage
+	)
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+	const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+	const [globalFilter, setGlobalFilter] = useState("")
+	const [deleteOpen, setDeleteOpen] = useState(false)
+	const [pendingDeleteIds, setPendingDeleteIds] = useState<string[]>([])
+	const [editingMonitor, setEditingMonitor] = useState<NetworkMonitorRecord>()
+
+	const { toast } = useToast()
+	const canManageMonitors = !isReadOnlyUser()
+
+	const longestTarget = useMemo(() => {
+		let longestTarget = ""
+		for (const p of monitors) {
+			if (isVisuallyLonger(getMonitorTarget(p), longestTarget)) {
+				longestTarget = getMonitorTarget(p)
+			}
+		}
+		return longestTarget
+	}, [monitors])
+
+	const runMonitorBatch = useCallback(
+		async (ids: string[], enqueue: (batch: ReturnType<typeof pb.createBatch>, id: string) => void) => {
+			let batch = pb.createBatch()
+			let inBatch = 0
+			for (const id of ids) {
+				enqueue(batch, id)
+				if (++inBatch >= 20) {
+					await batch.send()
+					batch = pb.createBatch()
+					inBatch = 0
+				}
+			}
+			if (inBatch) {
+				await batch.send()
+			}
+		},
+		[]
+	)
+
+	const handleDeleteRequest = useCallback(
+		async (monitorsToDelete: NetworkMonitorRecord[]) => {
+			if (!monitorsToDelete.length) {
+				return
+			}
+
+			const ids = monitorsToDelete.map((monitor) => monitor.id)
+			if (ids.length === 1) {
+				try {
+					await pb.collection("network_monitors").delete(ids[0])
+				} catch (err: unknown) {
+					toast({
+						variant: "destructive",
+						title: t`Error`,
+						description: (err as Error)?.message || t`Failed to delete monitors.`,
+					})
+				}
+				return
+			}
+
+			setPendingDeleteIds(ids)
+			setDeleteOpen(true)
+		},
+		[toast]
+	)
+
+	const handleBulkDelete = async () => {
+		setDeleteOpen(false)
+		if (!pendingDeleteIds.length) {
+			return
+		}
+
+		try {
+			await runMonitorBatch(pendingDeleteIds, (batch, id) => batch.collection("network_monitors").delete(id))
+			setPendingDeleteIds([])
+			setRowSelection({})
+		} catch (err: unknown) {
+			toast({
+				variant: "destructive",
+				title: t`Error`,
+				description: (err as Error)?.message || t`Failed to delete monitors.`,
+			})
+		}
+	}
+
+	const handleSetEnabled = useCallback(
+		async (monitorsToUpdate: NetworkMonitorRecord[], enabled: boolean) => {
+			if (!monitorsToUpdate.length) {
+				return
+			}
+
+			const pendingUpdates = monitorsToUpdate.filter((monitor) => monitor.enabled !== enabled)
+			if (!pendingUpdates.length) {
+				return
+			}
+
+			try {
+				if (pendingUpdates.length === 1) {
+					await pb.collection("network_monitors").update(pendingUpdates[0].id, { enabled })
+					return
+				}
+				await runMonitorBatch(
+					pendingUpdates.map((monitor) => monitor.id),
+					(batch, id) => batch.collection("network_monitors").update(id, { enabled })
+				)
+				if (monitorsToUpdate.length > 1) {
+					setRowSelection({})
+				}
+			} catch (err: unknown) {
+				toast({
+					variant: "destructive",
+					title: t`Error`,
+					description: (err as Error)?.message || t`Failed to update monitors.`,
+				})
+			}
+		},
+		[runMonitorBatch, toast]
+	)
+
+	const columns = useMemo(() => {
+		let columns = getMonitorColumns(longestTarget, {
+			onEdit: setEditingMonitor,
+			onDelete: handleDeleteRequest,
+			onSetEnabled: handleSetEnabled,
+		})
+		columns = systemId ? columns.filter((col) => col.id !== "system") : columns
+		columns = canManageMonitors ? columns : columns.filter((col) => col.id !== "actions")
+		return columns
+	}, [canManageMonitors, handleDeleteRequest, handleSetEnabled, systemId, longestTarget])
+
+	const table = useReactTable({
+		data: monitors,
+		columns,
+		getRowId: (row) => row.id,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		defaultColumn: {
+			sortUndefined: "last",
+			size: 900,
+			minSize: 0,
+		},
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+			globalFilter,
+		},
+		onGlobalFilterChange: setGlobalFilter,
+		globalFilterFn: (row, _columnId, filterValue) => {
+			const value = (filterValue as string).trim()
+			if (!value) return true
+			const monitor = row.original
+			const systemName = $allSystemsById.get()[monitor.system]?.name ?? ""
+			const searchString = `${getMonitorTarget(monitor)}${monitor.protocol}${systemName}`.toLocaleLowerCase()
+			return matchesFilterGroups(searchString, parseFilterGroups(value))
+		},
+	})
+
+	const rows = table.getRowModel().rows
+	const visibleColumns = table.getVisibleLeafColumns()
+
+	return (
+		<Card className="@container w-full px-3 py-5 sm:py-6 sm:px-6">
+			<CardHeader className="p-0 mb-3 sm:mb-4">
+				<div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
+					<div className="px-2 sm:px-1">
+						<CardTitle className="mb-2">
+							<Trans>Network Monitors</Trans>
+						</CardTitle>
+						<div className="text-sm text-muted-foreground flex items-center flex-wrap">
+							<Trans>Response time monitoring from agents.</Trans>
+						</div>
+					</div>
+					<div className="md:ms-auto flex items-center gap-2">
+						{monitors.length > 0 && (
+							<div className="relative">
+								<Input
+									placeholder={t`Filter...`}
+									title={t`Use commas to match any of multiple terms, e.g. "system1, system2"`}
+									value={globalFilter}
+									onChange={(e) => setGlobalFilter(e.target.value)}
+									className="ms-auto px-4 w-full max-w-full md:w-50"
+								/>
+								{globalFilter && (
+									<Button
+										type="button"
+										variant="ghost"
+										size="icon"
+										aria-label={t`Clear`}
+										className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-muted-foreground"
+										onClick={() => setGlobalFilter("")}
+									>
+										<XIcon className="h-4 w-4" />
+									</Button>
+								)}
+							</div>
+						)}
+						{canManageMonitors ? <AddMonitorDialog systemId={systemId} monitors={monitors} /> : null}
+						{canManageMonitors ? (
+							<EditMonitorDialog
+								systemId={systemId}
+								monitor={editingMonitor}
+								open={!!editingMonitor}
+								setOpen={(open) => {
+									if (!open) {
+										setEditingMonitor(undefined)
+									}
+								}}
+							/>
+						) : null}
+						<AlertDialog
+							open={deleteOpen}
+							onOpenChange={(open) => {
+								setDeleteOpen(open)
+								if (!open) {
+									setPendingDeleteIds([])
+								}
+							}}
+						>
+							<AlertDialogContent>
+								<AlertDialogHeader>
+									<AlertDialogTitle>
+										<Trans>Are you sure?</Trans>
+									</AlertDialogTitle>
+									<AlertDialogDescription>
+										<Trans>This will permanently delete all selected records from the database.</Trans>
+									</AlertDialogDescription>
+								</AlertDialogHeader>
+								<AlertDialogFooter>
+									<AlertDialogCancel>
+										<Trans>Cancel</Trans>
+									</AlertDialogCancel>
+									<AlertDialogAction
+										className={cn(buttonVariants({ variant: "destructive" }))}
+										onClick={handleBulkDelete}
+									>
+										<Trans>Continue</Trans>
+									</AlertDialogAction>
+								</AlertDialogFooter>
+							</AlertDialogContent>
+						</AlertDialog>
+					</div>
+				</div>
+			</CardHeader>
+			<div className="rounded-md">
+				<NetworkMonitorsTable
+					table={table}
+					rows={rows}
+					colLength={visibleColumns.length}
+					rowSelection={rowSelection}
+					isLoading={isLoading}
+				/>
+			</div>
+		</Card>
+	)
+}
+
+const NetworkMonitorsTable = memo(function NetworkMonitorTable({
+	table,
+	rows,
+	colLength,
+	rowSelection,
+	isLoading,
+}: {
+	table: TableType<NetworkMonitorRecord>
+	rows: Row<NetworkMonitorRecord>[]
+	colLength: number
+	rowSelection: RowSelectionState
+	isLoading: boolean
+}) {
+	const scrollRef = useRef<HTMLDivElement>(null)
+	const [sheetOpen, setSheetOpen] = useState(false)
+	const [activeMonitorId, setActiveMonitorId] = useState<string | null>(null)
+	const activeMonitor = activeMonitorId
+		? table.options.data.find((monitor) => monitor.id === activeMonitorId)
+		: undefined
+	const openSheet = useCallback((monitor: NetworkMonitorRecord) => {
+		setActiveMonitorId(monitor.id)
+		setSheetOpen(true)
+	}, [])
+
+	const virtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+		count: rows.length,
+		estimateSize: () => 54,
+		getScrollElement: () => scrollRef.current,
+		overscan: 5,
+	})
+	const virtualRows = virtualizer.getVirtualItems()
+
+	const paddingTop = Math.max(0, virtualRows[0]?.start ?? 0 - virtualizer.options.scrollMargin)
+	const paddingBottom = Math.max(0, virtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0))
+
+	return (
+		<div
+			className={cn(
+				"h-min max-h-[calc(100dvh-17rem)] max-w-full relative overflow-auto border rounded-md",
+				(!rows.length || rows.length > 2) && "min-h-50"
+			)}
+			ref={scrollRef}
+		>
+			<div style={{ height: `${virtualizer.getTotalSize() + 48}px`, paddingTop, paddingBottom }}>
+				<table className="text-sm w-full h-full text-nowrap">
+					<NetworkMonitorTableHead table={table} />
+					<TableBody>
+						{rows.length ? (
+							virtualRows.map((virtualRow) => {
+								const row = rows[virtualRow.index]
+								return (
+									<NetworkMonitorTableRow
+										key={row.id}
+										row={row}
+										virtualRow={virtualRow}
+										isSelected={row.getIsSelected()}
+										rowSelection={rowSelection}
+										openSheet={openSheet}
+									/>
+								)
+							})
+						) : (
+							<TableRow>
+								<TableCell colSpan={colLength} className="h-37 text-center pointer-events-none">
+									{isLoading ? (
+										<LoaderCircleIcon className="animate-spin size-10 opacity-60 mx-auto" />
+									) : (
+										<Trans>No results.</Trans>
+									)}
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</table>
+			</div>
+			<NetworkMonitorSheet
+				open={sheetOpen}
+				onOpenChange={(nextOpen) => {
+					setSheetOpen(nextOpen)
+				}}
+				monitor={activeMonitor}
+			/>
+		</div>
+	)
+})
+
+function NetworkMonitorTableHead({ table }: { table: TableType<NetworkMonitorRecord> }) {
+	return (
+		<TableHeader className="sticky top-0 z-50 w-full border-b-2">
+			{table.getHeaderGroups().map((headerGroup) => (
+				<tr key={headerGroup.id}>
+					{headerGroup.headers.map((header) => {
+						return (
+							<TableHead className="px-2" key={header.id}>
+								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+							</TableHead>
+						)
+					})}
+				</tr>
+			))}
+		</TableHeader>
+	)
+}
+
+const NetworkMonitorTableRow = memo(function NetworkMonitorTableRow({
+	row,
+	virtualRow,
+	isSelected,
+	rowSelection: _rowSelection,
+	openSheet,
+}: {
+	row: Row<NetworkMonitorRecord>
+	virtualRow: VirtualItem
+	isSelected: boolean
+	// Menus depend on the entire selection, including changes to other rows.
+	rowSelection: RowSelectionState
+	openSheet: (monitor: NetworkMonitorRecord) => void
+}) {
+	return (
+		<TableRow
+			data-state={isSelected && "selected"}
+			className="cursor-pointer transition-opacity"
+			onClick={() => openSheet(row.original)}
+		>
+			{row.getVisibleCells().map((cell) => (
+				<TableCell
+					key={cell.id}
+					className="py-0"
+					style={{
+						width: `${cell.column.getSize()}px`,
+						height: virtualRow.size,
+					}}
+				>
+					{flexRender(cell.column.columnDef.cell, cell.getContext())}
+				</TableCell>
+			))}
+		</TableRow>
+	)
+})
+
+function NetworkMonitorSheet({
+	open,
+	onOpenChange,
+	monitor,
+}: {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	monitor?: NetworkMonitorRecord
+}) {
+	if (!monitor) {
+		return null
+	}
+
+	return <NetworkMonitorSheetContent key={monitor.system} open={open} onOpenChange={onOpenChange} monitor={monitor} />
+}
+
+function NetworkMonitorSheetContent({
+	open,
+	onOpenChange,
+	monitor,
+}: {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	monitor: NetworkMonitorRecord
+}) {
+	// Keep monitor exploration independent of the system charts' time range.
+	const [chartTimeStore] = useState(() => {
+		const defaultTime = $userSettings.get().chartTime
+		return atom(defaultTime === "1m" ? "1h" : defaultTime)
+	})
+	const chartTime = useStore(chartTimeStore)
+	const direction = useStore($direction)
+	const system = useStore($allSystemsById)[monitor.system]
+
+	const monitorStats = useNetworkMonitorStats({
+		systemId: monitor.system,
+		monitorId: monitor.id,
+		chartTime,
+		enabled: open,
+	})
+
+	const chartData = useMemo<ChartData>(
+		() => ({
+			agentVersion: parseSemVer(system?.info?.v),
+			orientation: direction === "rtl" ? "right" : "left",
+			chartTime,
+		}),
+		[system?.info?.v, direction, chartTime]
+	)
+	const hasMonitorStats = monitorStats.some((record) => record.stats?.[monitor.id] != null)
+	const monitorLabel = getMonitorTarget(monitor)
+
+	return (
+		<Sheet open={open} onOpenChange={onOpenChange}>
+			<SheetContent className="w-full sm:max-w-220 overflow-auto p-4 sm:p-6">
+				<SheetHeader className="mb-0 border-b p-0 pb-4">
+					<SheetTitle>{monitorLabel}</SheetTitle>
+					<SheetDescription className="flex flex-wrap items-center gap-x-2 gap-y-1">
+						<ServerIcon className="size-3.5 text-muted-foreground" />
+						<Link className="hover:underline" href={getPagePath($router, "system", { id: system?.id ?? "" })}>
+							{system?.name ?? ""}
+						</Link>
+						<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+						<ArrowLeftRightIcon className="size-3.5 text-muted-foreground" />
+						{monitor.protocol.toUpperCase()}
+						{monitor.protocol === "tcp" && monitor.port > 0 && (
+							<>
+								<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+								<EthernetPortIcon className="size-3.5 text-muted-foreground" />
+								<span>{monitor.port}</span>
+							</>
+						)}
+					</SheetDescription>
+				</SheetHeader>
+				<div className="grid gap-4">
+					<ChartTimeSelect
+						className="bg-card"
+						agentVersion={chartData.agentVersion}
+						chartTimeStore={chartTimeStore}
+						allowRealtime={false}
+					/>
+					<AvgMinMaxResponseChart
+						monitorStats={monitorStats}
+						monitor={monitor}
+						chartData={chartData}
+						empty={!hasMonitorStats}
+					/>
+					<LossChart
+						monitorStats={monitorStats}
+						grid={false}
+						monitors={[monitor]}
+						chartData={chartData}
+						empty={!hasMonitorStats}
+						showFilter={false}
+					/>
+				</div>
+			</SheetContent>
+		</Sheet>
+	)
+}