ui: truncate full path of host if using unix socket

This commit is contained in:
henrygd
2025-02-22 17:58:30 -05:00
parent 6404895a47
commit 1d13ecd8ec
3 changed files with 20 additions and 4 deletions

View File

@@ -22,7 +22,7 @@ import {
import { useEffect } from "react" import { useEffect } from "react"
import { useStore } from "@nanostores/react" import { useStore } from "@nanostores/react"
import { $systems } from "@/lib/stores" import { $systems } from "@/lib/stores"
import { isAdmin } from "@/lib/utils" import { getHostDisplayValue, isAdmin } from "@/lib/utils"
import { $router, basePath, navigate } from "./router" import { $router, basePath, navigate } from "./router"
import { Trans, t } from "@lingui/macro" import { Trans, t } from "@lingui/macro"
import { getPagePath } from "@nanostores/router" 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" /> <Server className="me-2 h-4 w-4" />
<span>{system.name}</span> <span>{system.name}</span>
<CommandShortcut>{system.host}</CommandShortcut> <CommandShortcut>{getHostDisplayValue(system)}</CommandShortcut>
</CommandItem> </CommandItem>
))} ))}
</CommandGroup> </CommandGroup>

View File

@@ -6,7 +6,15 @@ import { useStore } from "@nanostores/react"
import Spinner from "../spinner" import Spinner from "../spinner"
import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon, MonitorIcon, XIcon } from "lucide-react" import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon, MonitorIcon, XIcon } from "lucide-react"
import ChartTimeSelect from "../charts/chart-time-select" 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 { Separator } from "../ui/separator"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
import { Button } from "../ui/button" 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" /> uptime = <Plural value={Math.trunc(system.info?.u / 86400)} one="# day" other="# days" />
} }
return [ return [
{ value: system.host, Icon: GlobeIcon }, { value: getHostDisplayValue(system), Icon: GlobeIcon },
{ {
value: system.info.h, value: system.info.h,
Icon: MonitorIcon, Icon: MonitorIcon,

View File

@@ -336,3 +336,11 @@ export const alertInfo: Record<string, AlertInfo> = {
desc: () => t`Triggers when any sensor exceeds a threshold`, 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)