update system permalinks to use id instead of name (#1231)

maintains backward compatibility with old permalinks

internal/site/src/components/command-palette.tsx

@@ -65,7 +65,7 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 									<CommandItem
 										key={system.id}
 										onSelect={() => {
-											navigate(getPagePath($router, "system", { name: system.name }))
+											navigate(getPagePath($router, "system", { id: system.id }))
 											setOpen(false)
 										}}
 									>

internal/site/src/components/router.tsx

@@ -2,7 +2,7 @@ import { createRouter } from "@nanostores/router"
 
 const routes = {
 	home: "/",
-	system: `/system/:name`,
+	system: `/system/:id`,
 	settings: `/settings/:name?`,
 	forgot_password: `/forgot-password`,
 	request_otp: `/request-otp`,

internal/site/src/components/routes/home.tsx

@@ -112,7 +112,7 @@ const ActiveAlerts = () => {
 											)}
 										</AlertDescription>
 										<Link
-											href={getPagePath($router, "system", { name: systems[alert.system]?.name })}
+											href={getPagePath($router, "system", { id: systems[alert.system]?.id })}
 											className="absolute inset-0 w-full h-full"
 											aria-label="View system"
 										></Link>

internal/site/src/components/routes/system.tsx

@@ -27,6 +27,7 @@ import { getPbTimestamp, pb } from "@/lib/api"
 import { ChartType, ConnectionType, connectionTypeLabels, Os, SystemStatus, Unit } from "@/lib/enums"
 import { batteryStateTranslations } from "@/lib/i18n"
 import {
+	$allSystemsById,
 	$allSystemsByName,
 	$chartTime,
 	$containerFilter,
@@ -156,7 +157,7 @@ function dockerOrPodman(str: string, system: SystemRecord): string {
 	return str
 }
 
-export default memo(function SystemDetail({ name }: { name: string }) {
+export default memo(function SystemDetail({ id }: { id: string }) {
 	const direction = useStore($direction)
 	const { t } = useLingui()
 	const systems = useStore($systems)
@@ -175,7 +176,6 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 	const chartWrapRef = useRef<HTMLDivElement>(null)
 
 	useEffect(() => {
-		document.title = `${name} / Beszel`
 		return () => {
 			if (!persistChartTime.current) {
 				$chartTime.set($userSettings.get().chartTime)
@@ -185,15 +185,17 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 			setContainerData([])
 			$containerFilter.set("")
 		}
-	}, [name])
+	}, [id])
 
 	// find matching system and update when it changes
 	useEffect(() => {
-		return subscribeKeys($allSystemsByName, [name], (newSystems) => {
+		const store = $allSystemsById.get()[id] ? $allSystemsById : $allSystemsByName
-			const sys = newSystems[name]
+		return subscribeKeys(store, [id], (newSystems) => {
+			const sys = newSystems[id]
+			document.title = `${sys?.name} / Beszel`
 			sys?.id && setSystem(sys)
 		})
-	}, [name])
+	}, [id])
 
 	// hide 1m chart time if system agent version is less than 0.13.0
 	useEffect(() => {
@@ -415,7 +417,7 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 			) {
 				return
 			}
-			const currentIndex = systems.findIndex((s) => s.name === name)
+			const currentIndex = systems.findIndex((s) => s.id === id)
 			if (currentIndex === -1 || systems.length <= 1) {
 				return
 			}
@@ -424,18 +426,18 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 				case "h": {
 					const prevIndex = (currentIndex - 1 + systems.length) % systems.length
 					persistChartTime.current = true
-					return navigate(getPagePath($router, "system", { name: systems[prevIndex].name }))
+					return navigate(getPagePath($router, "system", { id: systems[prevIndex].id }))
 				}
 				case "ArrowRight":
 				case "l": {
 					const nextIndex = (currentIndex + 1) % systems.length
 					persistChartTime.current = true
-					return navigate(getPagePath($router, "system", { name: systems[nextIndex].name }))
+					return navigate(getPagePath($router, "system", { id: systems[nextIndex].id }))
 				}
 			}
 		}
 		return listen(document, "keyup", handleKeyUp)
-	}, [name, systems])
+	}, [id, systems])
 
 	if (!system.id) {
 		return null

internal/site/src/components/systems-table/systems-table-columns.tsx

@@ -77,6 +77,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			accessorKey: "name",
 			id: "system",
 			name: () => t`System`,
+			sortingFn: (a, b) => a.original.name.localeCompare(b.original.name),
 			filterFn: (() => {
 				let filterInput = ""
 				let filterInputLower = ""
@@ -110,7 +111,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			invertSorting: false,
 			Icon: ServerIcon,
 			cell: (info) => {
-				const { name } = info.row.original
+				const { name, id } = info.row.original
 				const longestName = useStore($longestSystemNameLen)
 				return (
 					<>
@@ -122,7 +123,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 							</span>
 						</span>
 						<Link
-							href={getPagePath($router, "system", { name })}
+							href={getPagePath($router, "system", { id })}
 							className="inset-0 absolute size-full"
 							aria-label={name}
 						></Link>
@@ -279,7 +280,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 				}
 				return (
 					<Link
-						href={getPagePath($router, "system", { name: system.name })}
+						href={getPagePath($router, "system", { id: system.id })}
 						className={cn(
 							"flex gap-1.5 items-center md:pe-5 tabular-nums relative z-10",
 							viewMode === "table" && "ps-0.5"

internal/site/src/components/systems-table/systems-table.tsx

@@ -486,7 +486,7 @@ const SystemCard = memo(
 						</div>
 					</CardContent>
 					<Link
-						href={getPagePath($router, "system", { name: row.original.name })}
+						href={getPagePath($router, "system", { id: row.original.id })}
 						className="inset-0 absolute w-full h-full"
 					>
 						<span className="sr-only">{row.original.name}</span>

internal/site/src/main.tsx

@@ -59,7 +59,7 @@ const App = memo(() => {
 	} else if (page.route === "home") {
 		return <Home />
 	} else if (page.route === "system") {
-		return <SystemDetail name={page.params.name} />
+		return <SystemDetail id={page.params.id} />
 	} else if (page.route === "settings") {
 		return <Settings />
 	}