ui: truncate full path of host if using unix socket

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

@@ -22,7 +22,7 @@ import {
 import { useEffect } from "react"
 import { useStore } from "@nanostores/react"
 import { $systems } from "@/lib/stores"
-import { isAdmin } from "@/lib/utils"
+import { getHostDisplayValue, isAdmin } from "@/lib/utils"
 import { $router, basePath, navigate } from "./router"
 import { Trans, t } from "@lingui/macro"
 import { getPagePath } from "@nanostores/router"
@@ -62,7 +62,7 @@ export default function CommandPalette({ open, setOpen }: { open: boolean; setOp
 								>
 									<Server className="me-2 h-4 w-4" />
 									<span>{system.name}</span>
-									<CommandShortcut>{system.host}</CommandShortcut>
+									<CommandShortcut>{getHostDisplayValue(system)}</CommandShortcut>
 								</CommandItem>
 							))}
 						</CommandGroup>

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

@@ -6,7 +6,15 @@ import { useStore } from "@nanostores/react"
 import Spinner from "../spinner"
 import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon, MonitorIcon, XIcon } from "lucide-react"
 import ChartTimeSelect from "../charts/chart-time-select"
-import { chartTimeData, cn, getPbTimestamp, getSizeAndUnit, toFixedFloat, useLocalStorage } from "@/lib/utils"
+import {
+	chartTimeData,
+	cn,
+	getHostDisplayValue,
+	getPbTimestamp,
+	getSizeAndUnit,
+	toFixedFloat,
+	useLocalStorage,
+} from "@/lib/utils"
 import { Separator } from "../ui/separator"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
 import { Button } from "../ui/button"
@@ -244,7 +252,7 @@ export default function SystemDetail({ name }: { name: string }) {
 			uptime = <Plural value={Math.trunc(system.info?.u / 86400)} one="# day" other="# days" />
 		}
 		return [
-			{ value: system.host, Icon: GlobeIcon },
+			{ value: getHostDisplayValue(system), Icon: GlobeIcon },
 			{
 				value: system.info.h,
 				Icon: MonitorIcon,

beszel/site/src/lib/utils.ts

@@ -336,3 +336,11 @@ export const alertInfo: Record<string, AlertInfo> = {
 		desc: () => t`Triggers when any sensor exceeds a threshold`,
 	},
 }
+
+/**
+ * Retuns value of system host, truncating full path if socket.
+ * @example
+ * // Assuming system.host is "/var/run/beszel.sock"
+ * const hostname = getHostDisplayValue(system) // hostname will be "beszel.sock"
+ */
+export const getHostDisplayValue = (system: SystemRecord): string => system.host.slice(system.host.lastIndexOf("/") + 1)