From 1d13ecd8ece436763333afc5abe1fb9e2cc87904 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Sat, 22 Feb 2025 17:58:30 -0500
Subject: [PATCH] ui: truncate full path of host if using unix socket

---
 beszel/site/src/components/command-palette.tsx |  4 ++--
 beszel/site/src/components/routes/system.tsx   | 12 ++++++++++--
 beszel/site/src/lib/utils.ts                   |  8 ++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/beszel/site/src/components/command-palette.tsx b/beszel/site/src/components/command-palette.tsx
index dafff9f..cfb551a 100644
--- a/beszel/site/src/components/command-palette.tsx
+++ b/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>
diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx
index 38b1ae2..2c6545f 100644
--- a/beszel/site/src/components/routes/system.tsx
+++ b/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,
diff --git a/beszel/site/src/lib/utils.ts b/beszel/site/src/lib/utils.ts
index 3302846..f060227 100644
--- a/beszel/site/src/lib/utils.ts
+++ b/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)