updates

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

@@ -34,18 +34,20 @@ import { useToast } from "@/components/ui/use-toast"
 import { isReadOnlyUser } from "@/lib/api"
 import { pb } from "@/lib/api"
 import { $allSystemsById, $chartTime, $direction } from "@/lib/stores"
-import { cn, useBrowserStorage } from "@/lib/utils"
+import { cn, isVisuallyLonger, useBrowserStorage } from "@/lib/utils"
 import type { NetworkProbeRecord } from "@/types"
 import { AddProbeDialog, EditProbeDialog } from "./probe-dialog"
 import { XIcon } from "lucide-react"
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import ChartTimeSelect from "@/components/charts/chart-time-select"
-import { ResponseChart, LossChart } from "@/components/routes/system/charts/probes-charts"
+import { LossChart, AvgMinMaxResponseChart } from "@/components/routes/system/charts/probes-charts"
 import { useNetworkProbeStats } from "@/lib/use-network-probes"
 import { useStore } from "@nanostores/react"
 import type { ChartData } from "@/types"
 import { parseSemVer } from "@/lib/utils"
 import { Separator } from "../ui/separator"
+import { $router, Link } from "../router"
+import { getPagePath } from "@nanostores/router"
 
 export default function NetworkProbesTableNew({
 	systemId,
@@ -74,10 +76,10 @@ export default function NetworkProbesTableNew({
 		let longestTarget = ""
 		for (const p of probes) {
 			const name = p.name || p.target
-			if (name.length > longestName.length) {
+			if (isVisuallyLonger(name, longestName)) {
 				longestName = name
 			}
-			if (p.target.length > longestTarget.length) {
+			if (isVisuallyLonger(p.target, longestTarget)) {
 				longestTarget = p.target
 			}
 		}
@@ -266,7 +268,7 @@ export default function NetworkProbesTableNew({
 								)}
 							</div>
 						)}
-						{canManageProbes ? <AddProbeDialog systemId={systemId} /> : null}
+						{canManageProbes ? <AddProbeDialog systemId={systemId} probes={probes} /> : null}
 						{canManageProbes ? (
 							<EditProbeDialog
 								systemId={systemId}
@@ -488,7 +490,7 @@ function NetworkProbeSheetContent({
 			orientation: direction === "rtl" ? "right" : "left",
 			chartTime,
 		}),
-		[chartTime]
+		[probeStats]
 	)
 	const hasProbeStats = probeStats.some((record) => record.stats?.[probe.id] != null)
 	const probeLabel = probe.name || probe.target
@@ -499,7 +501,9 @@ function NetworkProbeSheetContent({
 				<SheetHeader className="mb-0 border-b p-0 pb-4">
 					<SheetTitle>{probeLabel}</SheetTitle>
 					<SheetDescription className="flex flex-wrap items-center gap-x-2 gap-y-1">
-						{system?.name ?? ""}
+						<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" />
 						{probe.protocol.toUpperCase()}
 						<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
@@ -514,14 +518,7 @@ function NetworkProbeSheetContent({
 				</SheetHeader>
 				<div className="grid gap-4">
 					<ChartTimeSelect className="bg-card" agentVersion={chartData.agentVersion} />
-					<ResponseChart
-						probeStats={probeStats}
-						grid={false}
-						probes={[probe]}
-						chartData={chartData}
-						empty={!hasProbeStats}
-						showFilter={false}
-					/>
+					<AvgMinMaxResponseChart probeStats={probeStats} probe={probe} chartData={chartData} empty={!hasProbeStats} />
 					<LossChart
 						probeStats={probeStats}
 						grid={false}

internal/site/src/components/network-probes-table/probe-dialog.tsx

@@ -38,6 +38,8 @@ type NormalizedProbeValues = Omit<ProbeValues, "system" | "interval"> & {
 	interval: number
 }
 
+const defaultInterval = 20
+
 const ProbeProtocolSchema = v.picklist(["icmp", "tcp", "http"])
 
 const ProbeIntervalSchema = v.pipe(v.string(), v.toNumber(), v.minValue(1), v.maxValue(3600))
@@ -99,7 +101,7 @@ function normalizeHttpTarget(target: string, port: number) {
 	return `${port === 443 ? "https" : "http"}://${target}`
 }
 
-function buildProbePayload(values: ProbeValues) {
+function buildProbePayload(values: ProbeValues, enabled = true) {
 	const normalizedValues = v.safeParse(NormalizedProbeValuesSchema, values)
 	if (!normalizedValues.success) {
 		throw new Error(normalizedValues.issues[0]?.message || "Invalid probe")
@@ -107,7 +109,7 @@ function buildProbePayload(values: ProbeValues) {
 
 	const payload = {
 		system: values.system,
-		enabled: true,
+		enabled,
 		...normalizedValues.output,
 	}
 
@@ -123,6 +125,11 @@ function buildProbePayload(values: ProbeValues) {
 	return payload
 }
 
+type ProbeIdentity = Pick<ProbeValues, "system" | "target" | "protocol" | "port">
+function getProbeIdentityKey({ system, target, protocol, port }: ProbeIdentity) {
+	return `${system}${target}${protocol}${port}`
+}
+
 function parseBulkProbeLine(line: string, lineNumber: number, system: string) {
 	const [rawTarget = "", rawProtocol = "", rawPort = "", rawInterval = "", ...rawName] = line.split(",")
 	const parsed = v.safeParse(BulkProbeSchema, {
@@ -142,12 +149,12 @@ function parseBulkProbeLine(line: string, lineNumber: number, system: string) {
 		protocol: (parsed.output.protocol?.toLowerCase() ||
 			(/^https?:\/\//i.test(parsed.output.target) ? "http" : "icmp")) as ProbeProtocol,
 		port: parsed.output.port ? Number(parsed.output.port) : 0,
-		interval: parsed.output.interval || "30",
+		interval: parsed.output.interval || `${defaultInterval}`,
 		name: parsed.output.name || undefined,
 	})
 }
 
-export function AddProbeDialog({ systemId }: { systemId?: string }) {
+export function AddProbeDialog({ systemId, probes }: { systemId?: string; probes: NetworkProbeRecord[] }) {
 	const [open, setOpen] = useState(false)
 	const [bulkOpen, setBulkOpen] = useState(false)
 	const [bulkInput, setBulkInput] = useState("")
@@ -192,10 +199,29 @@ export function AddProbeDialog({ systemId }: { systemId?: string }) {
 			}
 
 			const payloads = rawLines.map((line, index) => parseBulkProbeLine(line, index + 1, system))
+			const existingProbeKeys = new Set(
+				probes.filter((probe) => probe.system === system).map((probe) => getProbeIdentityKey(probe))
+			)
+			const newPayloads = [] as typeof payloads
+
+			for (const payload of payloads) {
+				const probeKey = getProbeIdentityKey(payload)
+				if (existingProbeKeys.has(probeKey)) {
+					continue
+				}
+
+				existingProbeKeys.add(probeKey)
+				newPayloads.push(payload)
+			}
+
+			if (!newPayloads.length) {
+				throw new Error("No new probes to add. All entries already exist.")
+			}
+
 			closedForSubmit = true
 			let batch = pb.createBatch()
 			let inBatch = 0
-			for (const payload of payloads) {
+			for (const payload of newPayloads) {
 				batch.collection("network_probes").create(payload)
 				inBatch++
 				if (inBatch > 20) {
@@ -209,7 +235,7 @@ export function AddProbeDialog({ systemId }: { systemId?: string }) {
 			}
 
 			resetBulkForm()
-			toast({ title: t`Probes created`, description: `${payloads.length} probe(s) added.` })
+			toast({ title: t`Probes created`, description: `${newPayloads.length} probe(s) added.` })
 		} catch (err: unknown) {
 			if (closedForSubmit) {
 				setBulkOpen(true)
@@ -337,10 +363,11 @@ export function EditProbeDialog({
 	systemId?: string
 	probe?: NetworkProbeRecord
 }) {
-	if (!probe) {
+	const hasOpened = useRef(false)
+	if (!probe && !hasOpened.current) {
 		return null
 	}
-
+	hasOpened.current = true
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<ProbeDialogContent open={open} setOpen={setOpen} systemId={systemId} probe={probe} />
@@ -366,7 +393,7 @@ function ProbeDialogContent({
 	const [port, setPort] = useState(
 		(probe?.protocol === "tcp" || probe?.protocol === "http") && probe.port ? String(probe.port) : ""
 	)
-	const [probeInterval, setProbeInterval] = useState(String(probe?.interval ?? 30))
+	const [probeInterval, setProbeInterval] = useState(String(probe?.interval ?? defaultInterval))
 	const [name, setName] = useState(probe?.name ?? "")
 	const [loading, setLoading] = useState(false)
 	const [selectedSystemId, setSelectedSystemId] = useState(probe?.system ?? "")
@@ -385,7 +412,7 @@ function ProbeDialogContent({
 		setProtocol(probe?.protocol ?? "icmp")
 		setTarget(probe?.target ?? "")
 		setPort((probe?.protocol === "tcp" || probe?.protocol === "http") && probe.port ? String(probe.port) : "")
-		setProbeInterval(String(probe?.interval ?? 30))
+		setProbeInterval(String(probe?.interval ?? defaultInterval))
 		setName(probe?.name ?? "")
 		setSelectedSystemId(probe?.system ?? "")
 		setLoading(false)
@@ -400,14 +427,17 @@ function ProbeDialogContent({
 			if (!selectedSystem) {
 				throw new Error("Select a system.")
 			}
-			const payload = buildProbePayload({
-				system: selectedSystem,
-				target,
-				protocol,
-				port: protocol === "tcp" || protocol === "http" ? Number(port) : 0,
-				interval: probeInterval,
-				name,
-			})
+			const payload = buildProbePayload(
+				{
+					system: selectedSystem,
+					target,
+					protocol,
+					port: protocol === "tcp" || protocol === "http" ? Number(port) : 0,
+					interval: probeInterval,
+					name,
+				},
+				probe ? probe.enabled : true
+			)
 			if (probe) {
 				await pb.collection("network_probes").update(probe.id, payload)
 			} else {
@@ -490,7 +520,6 @@ function ProbeDialogContent({
 							placeholder="443"
 							min={1}
 							max={65535}
-							required={protocol === "tcp"}
 						/>
 					</div>
 				)}

internal/site/src/components/routes/system/charts/probes-charts.tsx

@@ -132,27 +132,82 @@ export function ResponseChart({ probeStats, grid, probes, chartData, empty }: Pr
 	)
 }
 
-export function MaxResponseChart({ probeStats, grid, probes, chartData, empty }: ProbeChartProps) {
+interface AvgMinMaxResponseChartProps {
+	probeStats: NetworkProbeStatsRecord[]
+	probe: NetworkProbeRecord | null
+	chartData: ChartData
+	empty: boolean
+}
+
+export function AvgMinMaxResponseChart({ probeStats, probe, chartData, empty }: AvgMinMaxResponseChartProps) {
 	const { t } = useLingui()
 
+	const { chartTime } = chartData
+	const hasLongInterval = (probe?.interval ?? 61) > 60
+
+	// only one probe is relevant for this chart
+	const dataPoints: DataPoint<NetworkProbeStatsRecord>[] = useMemo(() => {
+		const dataFn = (index: number) => (record: NetworkProbeStatsRecord) =>
+			record.stats?.[probe?.id ?? ""]?.[index] ?? "-"
+		const avgPoint = {
+			label: "Avg",
+			dataKey: dataFn(0),
+			color: 1,
+			order: 0,
+		}
+		if (chartTime === "1m" || (hasLongInterval && chartTime === "1h")) {
+			// avg, min, max are all the same for 1m interval, so just show avg
+			return [avgPoint]
+		}
+		return [
+			{
+				label: "Max",
+				dataKey: dataFn(2),
+				color: 3,
+				order: 0,
+			},
+			avgPoint,
+			{
+				label: "Min",
+				dataKey: dataFn(1),
+				color: 2,
+				order: 2,
+			},
+		]
+	}, [chartTime, hasLongInterval])
+
+	const data = useMemo(() => {
+		if (!probe) return []
+		return probeStats.filter((record) => record.stats && probe.id in record.stats)
+	}, [probe, probeStats])
+
+	const legend = dataPoints.length > 1
+
 	return (
-		<ProbeChart
-			probeStats={probeStats}
-			grid={grid}
-			probes={probes}
-			chartData={chartData}
+		<ChartCard
+			legend={true}
 			empty={empty}
-			valueIndex={0}
 			title={t`Response`}
-			description={t`Average response time`}
-			tickFormatter={(value) => formatMicroseconds(value, false)}
-			contentFormatter={({ value }) => {
-				if (typeof value !== "number") {
-					return value
-				}
-				return formatMicroseconds(value)
-			}}
-		/>
+			description={t`Average, minimum, and maximum response time`}
+			grid={false}
+		>
+			<LineChartDefault
+				truncate
+				chartData={chartData}
+				customData={data}
+				dataPoints={dataPoints}
+				domain={["auto", "auto"]}
+				connectNulls
+				legend={legend}
+				tickFormatter={(value) => formatMicroseconds(value, false)}
+				contentFormatter={({ value }) => {
+					if (typeof value !== "number") {
+						return value
+					}
+					return formatMicroseconds(value)
+				}}
+			/>
+		</ChartCard>
 	)
 }
 
@@ -166,7 +221,7 @@ export function LossChart({ probeStats, grid, probes, chartData, empty }: ProbeC
 			probes={probes}
 			chartData={chartData}
 			empty={empty}
-			valueIndex={4}
+			valueIndex={3}
 			title={t`Loss`}
 			description={t`Packet loss (%)`}
 			domain={[0, 100]}

internal/site/src/lib/systemsManager.ts

@@ -9,7 +9,7 @@ import {
 	$pausedSystems,
 	$upSystems,
 } from "@/lib/stores"
-import { updateFavicon } from "@/lib/utils"
+import { isVisuallyLonger, updateFavicon } from "@/lib/utils"
 import type { SystemRecord } from "@/types"
 import { SystemStatus } from "./enums"
 
@@ -41,7 +41,7 @@ export function init() {
 		}
 
 		if (!newSystem) {
-			onSystemsChanged(newSystems, undefined)
+			onSystemsChanged(newSystems, newSystem, oldSystem)
 			return
 		}
 
@@ -65,23 +65,28 @@ export function init() {
 		}
 
 		// run things that need to be done when systems change
-		onSystemsChanged(newSystems, newSystem)
+		onSystemsChanged(newSystems, newSystem, oldSystem)
 	})
 }
 
 /** Update the longest system name string and favicon based on system status */
-function onSystemsChanged(systems: Record<string, SystemRecord>, _changedSystem: SystemRecord | undefined) {
+function onSystemsChanged(systems: Record<string, SystemRecord>, newSystem?: SystemRecord, oldSystem?: SystemRecord) {
 	const downSystemsStore = $downSystems.get()
 	const downSystems = Object.values(downSystemsStore)
 
-	let longestName = ""
-	for (const system of Object.values(systems)) {
-		if (system.name.length > longestName.length) {
-			longestName = system.name
+	// if the old system's old name was the longest, we need to find the new longest name
+	// otherwise, if the changed system's new name is longer than the current longest, update it
+	const longestName = $longestSystemName.get()
+	if (oldSystem?.name === longestName && oldSystem.name !== newSystem?.name) {
+		let newLongest = ""
+		for (const id in systems) {
+			if (isVisuallyLonger(systems[id].name, newLongest)) {
+				newLongest = systems[id].name
+			}
 		}
-	}
-	if ($longestSystemName.get() !== longestName) {
-		$longestSystemName.set(longestName)
+		$longestSystemName.set(newLongest)
+	} else if (newSystem && newSystem.name !== longestName && isVisuallyLonger(newSystem.name, longestName)) {
+		$longestSystemName.set(newSystem.name)
 	}
 
 	updateFavicon(downSystems.length)

internal/site/src/lib/use-network-probes.ts

@@ -116,64 +116,6 @@ export function useNetworkProbeStats(props: UseNetworkProbeStatsProps) {
 	const [probeStats, setProbeStats] = useState<NetworkProbeStatsRecord[]>([])
 	const requestID = useRef(0)
 
-	// Subscribe to new probe stats
-	useEffect(() => {
-		if (!systemId) {
-			return
-		}
-		let unsubscribe: (() => void) | undefined
-		const pbOptions = {
-			fields: "stats,created,type",
-			filter: pb.filter("system = {:system}", { system: systemId }),
-		}
-
-		;(async () => {
-			try {
-				unsubscribe = await pb.collection<NetworkProbeStatsRecord>("network_probe_stats").subscribe(
-					"*",
-					(event) => {
-						if (!chartTime || event.action !== "create") {
-							return
-						}
-						// if (typeof event.record.created === "string") {
-						// 	event.record.created = new Date(event.record.created).getTime()
-						// }
-						// return if not current chart time
-						// we could append to other chart times, but we would need to check the timestamps
-						// to make sure they fit in correctly, so for simplicity just ignore non-chart-time updates
-						// and fetch them via API when the user switches to that chart time
-						const chartTimeRecordType = chartTimeData[chartTime].type as ChartTimes
-						if (event.record.type !== chartTimeRecordType) {
-							// const lastCreated = getCacheValue(systemId, chartTime)?.at(-1)?.created ?? 0
-							// if (lastCreated) {
-							// 	// if the new record is close enough to the last cached record, append it to the cache so it's available immediately if the user switches to that chart time
-							// 	const { expectedInterval } = chartTimeData[chartTime]
-							// 	if (event.record.created - lastCreated < expectedInterval * 1.5) {
-							// 		console.log(
-							// 			`Caching out-of-chart-time probe stats record for chart time ${chartTime} (record type: ${event.record.type})`
-							// 		)
-							// 		const newStats = appendCacheValue(systemId, chartTime, [event.record])
-							// 		cache.set(`${systemId}${chartTime}`, newStats)
-							// 	}
-							// }
-							// console.log(`Received probe stats for non-current chart time (${event.record.type}), ignoring for now`)
-							return
-						}
-
-						// console.log("Appending new probe stats to chart:", event.record)
-						const newStats = appendCacheValue(systemId, chartTime, [event.record])
-						setProbeStats(newStats)
-					},
-					pbOptions
-				)
-			} catch (error) {
-				console.error("Failed to subscribe to probe stats:", error)
-			}
-		})()
-
-		return () => unsubscribe?.()
-	}, [systemId])
-
 	// fetch missing probe stats on load and when chart time changes
 	useEffect(() => {
 		if (!systemId || !chartTime || chartTime === "1m") {
@@ -208,6 +150,39 @@ export function useNetworkProbeStats(props: UseNetworkProbeStatsProps) {
 		)
 	}, [chartTime])
 
+	// Subscribe to new probe stats on non-1m chart times (1h, 12h, etc)
+	useEffect(() => {
+		if (!systemId || !chartTime || chartTime === "1m") {
+			return
+		}
+		let unsubscribe: (() => void) | undefined
+		const pbOptions = {
+			fields: "stats,created,type",
+			filter: pb.filter("system={:system} && type={:type}", { system: systemId, type: chartTimeData[chartTime].type }),
+		}
+
+		;(async () => {
+			try {
+				unsubscribe = await pb.collection<NetworkProbeStatsRecord>("network_probe_stats").subscribe(
+					"*",
+					(event) => {
+						if (event.action !== "create") {
+							return
+						}
+						// console.log("Appending new probe stats to chart:", event.record)
+						const newStats = appendCacheValue(systemId, chartTime, [event.record])
+						setProbeStats(newStats)
+					},
+					pbOptions
+				)
+			} catch (error) {
+				console.error("Failed to subscribe to probe stats:", error)
+			}
+		})()
+
+		return () => unsubscribe?.()
+	}, [systemId, chartTime])
+
 	// subscribe to realtime metrics if chart time is 1m
 	useEffect(() => {
 		if (!systemId || chartTime !== "1m") {

internal/site/src/lib/utils.ts

@@ -472,3 +472,45 @@ export function secondsToUptimeString(seconds: number): string {
 		return secondsToString(seconds, "day")
 	}
 }
+
+const visualWidthCache = new Map<string, number>()
+
+/** Get the visual width of a string, accounting for full-width and narrow punctuation characters.
+ *  Don't use for monospaced fonts, use .length instead
+ */
+export function getVisualStringWidth(str: string): number {
+	const cached = visualWidthCache.get(str)
+	if (cached !== undefined) {
+		return cached
+	}
+	let width = 0
+	for (const char of str) {
+		if (char === ".") {
+			width += 0.7
+			continue
+		}
+		const code = char.codePointAt(0) || 0
+		// Hangul Jamo and Syllables are often slightly thinner than Hanzi/Kanji
+		if ((code >= 0x1100 && code <= 0x115f) || (code >= 0xac00 && code <= 0xd7af)) {
+			width += 1.8
+			continue
+		}
+		// Count CJK and other full-width characters as 2 units, others as 1
+		// Arabic and Cyrillic are counted as 1
+		const isFullWidth =
+			(code >= 0x2e80 && code <= 0x9fff) || // CJK Radicals, Symbols, and Ideographs
+			(code >= 0xf900 && code <= 0xfaff) || // CJK Compatibility Ideographs
+			(code >= 0xfe30 && code <= 0xfe6f) || // CJK Compatibility Forms
+			(code >= 0xff00 && code <= 0xff60) || // Fullwidth Forms
+			(code >= 0xffe0 && code <= 0xffe6) || // Fullwidth Symbols
+			code > 0xffff // Emojis and other supplementary plane characters
+		width += isFullWidth ? 2 : 1
+	}
+	visualWidthCache.set(str, width)
+
+	return width
+}
+
+export function isVisuallyLonger(str1: string, str2: string): boolean {
+	return getVisualStringWidth(str1) > getVisualStringWidth(str2)
+}

internal/site/src/types.d.ts

@@ -564,23 +564,21 @@ export interface NetworkProbeRecord {
 }
 
 /**
- * 0: avg 1 minute response in microseconds
+ * Stats holds only 1m values for a single target, which are used for charts.
  *
- * 1: avg response over 1 hour in microseconds
+ * 0: avg response in microseconds
  *
- * 2: min response over the last hour in microseconds
+ * 1: min response in microseconds
  *
- * 3: max response over the last hour in microseconds
+ * 2: max response in microseconds
  *
- * 4: packet loss %
- *
- * 5: packet loss over the last hour in %
+ * 3: packet loss percentage (0-100)
  */
-type ProbeResult = number[]
+type ProbeStats = number[]
 
 export interface NetworkProbeStatsRecord {
 	id?: string
 	type?: string
-	stats: Record<string, ProbeResult>
+	stats: Record<string, ProbeStats>
 	created: number // unix timestamp (ms) for Recharts xAxis
 }