jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-03-23 14:06:18 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

add basic systemd service monitoring (#1153)

Browse Source 
Co-authored-by: Shelby Tucker <shelby.tucker@gmail.com>
This commit is contained in:
henrygd
2025-11-10 17:04:19 -05:00
parent cbe6ee6499
commit 01d20562f0
30 changed files with 2245 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
internal/site/src/components/systemd-table/systemd-table-columns.tsx Normal file
View File

@@ -0,0 +1,200 @@
import type { Column, ColumnDef } from "@tanstack/react-table"
import { Button } from "@/components/ui/button"
import { cn, decimalString, formatBytes, hourWithSeconds } from "@/lib/utils"
import type { SystemdRecord } from "@/types"
import { ServiceStatus, ServiceStatusLabels, ServiceSubState, ServiceSubStateLabels } from "@/lib/enums"
import {
ActivityIcon,
ArrowUpDownIcon,
ClockIcon,
CpuIcon,
MemoryStickIcon,
TerminalSquareIcon,
} from "lucide-react"
import { Badge } from "../ui/badge"
import { t } from "@lingui/core/macro"
// import { $allSystemsById } from "@/lib/stores"
// import { useStore } from "@nanostores/react"
function getSubStateColor(subState: ServiceSubState) {
switch (subState) {
case ServiceSubState.Running:
return "bg-green-500"
case ServiceSubState.Failed:
return "bg-red-500"
case ServiceSubState.Dead:
return "bg-yellow-500"
default:
return "bg-zinc-500"
}
}
export const systemdTableCols: ColumnDef<SystemdRecord>[] = [
{
id: "name",
sortingFn: (a, b) => a.original.name.localeCompare(b.original.name),
accessorFn: (record) => record.name,
header: ({ column }) => <HeaderButton column={column} name={t`Name`} Icon={TerminalSquareIcon} />,
cell: ({ getValue }) => {
return <span className="ms-1.5 xl:w-50 block truncate">{getValue() as string}</span>
},
},
// {
// id: "system",
// accessorFn: (record) => record.system,
// sortingFn: (a, b) => {
// const allSystems = $allSystemsById.get()
// const systemNameA = allSystems[a.original.system]?.name ?? ""
// const systemNameB = allSystems[b.original.system]?.name ?? ""
// return systemNameA.localeCompare(systemNameB)
// },
// header: ({ column }) => <HeaderButton column={column} name={t`System`} Icon={ServerIcon} />,
// cell: ({ getValue }) => {
// const allSystems = useStore($allSystemsById)
// return <span className="ms-1.5 xl:w-34 block truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
// },
// },
{
id: "state",
accessorFn: (record) => record.state,
header: ({ column }) => <HeaderButton column={column} name={t`State`} Icon={ActivityIcon} />,
cell: ({ getValue }) => {
const statusValue = getValue() as ServiceStatus
const statusLabel = ServiceStatusLabels[statusValue] || "Unknown"
return (
<Badge variant="outline" className="dark:border-white/12">
<span className={cn("size-2 me-1.5 rounded-full", getStatusColor(statusValue))} />
{statusLabel}
</Badge>
)
},
},
{
id: "sub",
accessorFn: (record) => record.sub,
header: ({ column }) => <HeaderButton column={column} name={t`Sub State`} Icon={ActivityIcon} />,
cell: ({ getValue }) => {
const subState = getValue() as ServiceSubState
const subStateLabel = ServiceSubStateLabels[subState] || "Unknown"
return (
<Badge variant="outline" className="dark:border-white/12 text-xs capitalize">
<span className={cn("size-2 me-1.5 rounded-full", getSubStateColor(subState))} />
{subStateLabel}
</Badge>
)
},
},
{
id: "cpu",
accessorFn: (record) => {
if (record.sub !== ServiceSubState.Running) {
return -1
}
return record.cpu
},
invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={`${t`CPU`} (10m)`} Icon={CpuIcon} />,
cell: ({ getValue }) => {
const val = getValue() as number
if (val < 0) {
return <span className="ms-1.5 text-muted-foreground">N/A</span>
}
return <span className="ms-1.5 tabular-nums">{`${decimalString(val, val >= 10 ? 1 : 2)}%`}</span>
},
},
{
id: "cpuPeak",
accessorFn: (record) => {
if (record.sub !== ServiceSubState.Running) {
return -1
}
return record.cpuPeak ?? 0
},
invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`CPU Peak`} Icon={CpuIcon} />,
cell: ({ getValue }) => {
const val = getValue() as number
if (val < 0) {
return <span className="ms-1.5 text-muted-foreground">N/A</span>
}
return <span className="ms-1.5 tabular-nums">{`${decimalString(val, val >= 10 ? 1 : 2)}%`}</span>
},
},
{
id: "memory",
accessorFn: (record) => record.memory,
invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`Memory`} Icon={MemoryStickIcon} />,
cell: ({ getValue }) => {
const val = getValue() as number
if (!val) {
return <span className="ms-1.5 text-muted-foreground">N/A</span>
}
const formatted = formatBytes(val, false, undefined, false)
return (
<span className="ms-1.5 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</span>
)
},
},
{
id: "memPeak",
accessorFn: (record) => record.memPeak,
invertSorting: true,
header: ({ column }) => <HeaderButton column={column} name={t`Memory Peak`} Icon={MemoryStickIcon} />,
cell: ({ getValue }) => {
const val = getValue() as number
if (!val) {
return <span className="ms-1.5 text-muted-foreground">N/A</span>
}
const formatted = formatBytes(val, false, undefined, false)
return (
<span className="ms-1.5 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</span>
)
},
},
{
id: "updated",
invertSorting: true,
accessorFn: (record) => record.updated,
header: ({ column }) => <HeaderButton column={column} name={t`Updated`} Icon={ClockIcon} />,
cell: ({ getValue }) => {
const timestamp = getValue() as number
return (
<span className="ms-1.5 tabular-nums">
{hourWithSeconds(new Date(timestamp).toISOString())}
</span>
)
},
},
]
function HeaderButton({ column, name, Icon }: { column: Column<SystemdRecord>; name: string; Icon: React.ElementType }) {
const isSorted = column.getIsSorted()
return (
<Button
className={cn("h-9 px-3 flex items-center gap-2 duration-50", isSorted && "bg-accent/70 light:bg-accent text-accent-foreground/90")}
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
{Icon && <Icon className="size-4" />}
{name}
<ArrowUpDownIcon className="size-4" />
</Button>
)
}
export function getStatusColor(status: ServiceStatus) {
switch (status) {
case ServiceStatus.Active:
return "bg-green-500"
case ServiceStatus.Failed:
return "bg-red-500"
case ServiceStatus.Reloading:
case ServiceStatus.Activating:
case ServiceStatus.Deactivating:
return "bg-yellow-500"
default:
return "bg-zinc-500"
}
}