From d81e137291e99f5aa0ed6c58ae276a9245295608 Mon Sep 17 00:00:00 2001 From: henrygd Date: Sun, 5 Oct 2025 14:18:00 -0400 Subject: [PATCH] update system permalinks to use id instead of name (#1231) maintains backward compatibility with old permalinks --- .../site/src/components/command-palette.tsx | 2 +- internal/site/src/components/router.tsx | 2 +- internal/site/src/components/routes/home.tsx | 2 +- .../site/src/components/routes/system.tsx | 22 ++++++++++--------- .../systems-table/systems-table-columns.tsx | 7 +++--- .../systems-table/systems-table.tsx | 2 +- internal/site/src/main.tsx | 2 +- 7 files changed, 21 insertions(+), 18 deletions(-) diff --git a/internal/site/src/components/command-palette.tsx b/internal/site/src/components/command-palette.tsx index 7da02bec..8e781b79 100644 --- a/internal/site/src/components/command-palette.tsx +++ b/internal/site/src/components/command-palette.tsx @@ -65,7 +65,7 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean; { - navigate(getPagePath($router, "system", { name: system.name })) + navigate(getPagePath($router, "system", { id: system.id })) setOpen(false) }} > diff --git a/internal/site/src/components/router.tsx b/internal/site/src/components/router.tsx index 51bea27f..cbc654e1 100644 --- a/internal/site/src/components/router.tsx +++ b/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`, diff --git a/internal/site/src/components/routes/home.tsx b/internal/site/src/components/routes/home.tsx index 46327f75..098ab85f 100644 --- a/internal/site/src/components/routes/home.tsx +++ b/internal/site/src/components/routes/home.tsx @@ -112,7 +112,7 @@ const ActiveAlerts = () => { )} diff --git a/internal/site/src/components/routes/system.tsx b/internal/site/src/components/routes/system.tsx index 81b4173c..09758b2e 100644 --- a/internal/site/src/components/routes/system.tsx +++ b/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(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 sys = newSystems[name] + const store = $allSystemsById.get()[id] ? $allSystemsById : $allSystemsByName + 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 diff --git a/internal/site/src/components/systems-table/systems-table-columns.tsx b/internal/site/src/components/systems-table/systems-table-columns.tsx index 0849d303..3f23153f 100644 --- a/internal/site/src/components/systems-table/systems-table-columns.tsx +++ b/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 @@ -279,7 +280,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD } return ( {row.original.name} diff --git a/internal/site/src/main.tsx b/internal/site/src/main.tsx index 70ab33e3..383dc4b1 100644 --- a/internal/site/src/main.tsx +++ b/internal/site/src/main.tsx @@ -59,7 +59,7 @@ const App = memo(() => { } else if (page.route === "home") { return } else if (page.route === "system") { - return + return } else if (page.route === "settings") { return }