fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 17:59:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

system info refactoring

Browse Source
This commit is contained in:
Henry Dollman
2024-09-18 12:47:06 -04:00
parent e287124632
commit 314cee081a
3 changed files with 72 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
beszel/internal/entities/system/system.go
View File

@@ -45,12 +45,11 @@ type NetIoStats struct {
}
type Info struct {
Hostname string `json:"h"`
KernelVersion string `json:"k"`
Cores int `json:"c"`
Threads int `json:"t"`
CpuModel string `json:"m"`
Hostname string `json:"h"`
KernelVersion string `json:"k,omitempty"`
Cores int `json:"c"`
Threads int `json:"t"`
CpuModel string `json:"m"`
// Os string `json:"o"`
Uptime uint64 `json:"u"`
Cpu float64 `json:"cpu"`

111
beszel/site/src/components/routes/system.tsx
View File

@@ -12,7 +12,6 @@ import {
MonitorIcon,
StretchHorizontalIcon,
XIcon,
BinaryIcon
} from 'lucide-react'
import ChartTimeSelect from '../charts/chart-time-select'
import {
@@ -27,6 +26,7 @@ import { scaleTime } from 'd3-scale'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
import { Button, buttonVariants } from '../ui/button'
import { Input } from '../ui/input'
import { TuxIcon } from '../ui/icons'
const CpuChart = lazy(() => import('../charts/cpu-chart'))
const ContainerCpuChart = lazy(() => import('../charts/container-cpu-chart'))
@@ -200,13 +200,37 @@ export default function SystemDetail({ name }: { name: string }) {
setDockerNetChartData(dockerNetData)
}, [])
const uptime = useMemo(() => {
let uptime = system.info?.u || 0
if (uptime < 172800) {
return `${Math.trunc(uptime / 3600)} hours`
// values for system info bar
const systemInfo = useMemo(() => {
if (!system.info) {
return []
}
return `${Math.trunc(system.info?.u / 86400)} days`
}, [system.info?.u])
console.log('doing')
let uptime: number | string = system.info.u
if (system.info.u < 172800) {
uptime = `${Math.trunc(uptime / 3600)} hours`
} else {
uptime = `${Math.trunc(system.info?.u / 86400)} days`
}
return [
{ value: system.host, Icon: GlobeIcon },
{
value: system.info.h,
Icon: MonitorIcon,
label: 'Hostname',
// hide if hostname is same as host or name
hide: system.info.h === system.host || system.info.h === system.name,
},
{ value: uptime, Icon: ClockArrowUp, label: 'Uptime' },
{ value: system.info.k, Icon: TuxIcon, label: 'Kernel' },
{ value: `${system.info.m} (${system.info.c}c/${system.info.t}t)`, Icon: CpuIcon },
] as {
value: string | number | undefined
label?: string
Icon: any
hide?: boolean
}[]
}, [system.info])
/** Space for tooltip if more than 12 containers */
const bottomSpacing = useMemo(() => {
@@ -253,58 +277,31 @@ export default function SystemDetail({ name }: { name: string }) {
</span>
{system.status}
</div>
<Separator orientation="vertical" className="h-4 bg-primary/30" />
<div className="flex gap-1.5 items-center">
<GlobeIcon className="h-4 w-4" /> {system.host}
</div>
{/* show hostname if it's different than host or name */}
{system.info?.h && system.info.h != system.host && system.info.h != system.name && (
<TooltipProvider>
<Tooltip delayDuration={150}>
<Separator orientation="vertical" className="h-4 bg-primary/30" />
<TooltipTrigger asChild>
<div className="flex gap-1.5 items-center">
<MonitorIcon className="h-4 w-4" /> {system.info.h}
</div>
</TooltipTrigger>
<TooltipContent>Hostname</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{/* kernel */}
<TooltipProvider>
<Tooltip delayDuration={150}>
<Separator orientation="vertical" className="h-4 bg-primary/30" />
<TooltipTrigger asChild>
<div className="flex gap-1.5 items-center">
<BinaryIcon className="h-4 w-4" /> {system.info.k}
</div>
</TooltipTrigger>
<TooltipContent>Kernel</TooltipContent>
</Tooltip>
</TooltipProvider>
{system.info?.u && (
<TooltipProvider>
<Tooltip delayDuration={150}>
<Separator orientation="vertical" className="h-4 bg-primary/30" />
<TooltipTrigger asChild>
<div className="flex gap-1.5 items-center">
<ClockArrowUp className="h-4 w-4" /> {uptime}
</div>
</TooltipTrigger>
<TooltipContent>Uptime</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{system.info?.m && (
<>
<Separator orientation="vertical" className="h-4 bg-primary/30" />
{systemInfo.map(({ value, label, Icon, hide }, i) => {
if (hide || !value) {
return null
}
const content = (
<div className="flex gap-1.5 items-center">
<CpuIcon className="h-4 w-4" />
{system.info.m} ({system.info.c}c/{system.info.t}t)
<Icon className="h-4 w-4" /> {value}
</div>
</>
)}
)
return (
<div key={i} className="contents">
<Separator orientation="vertical" className="h-4 bg-primary/30" />
{label ? (
<TooltipProvider>
<Tooltip delayDuration={150}>
<TooltipTrigger asChild>{content}</TooltipTrigger>
<TooltipContent>{label}</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
content
)}
</div>
)
})}
</div>
</div>
<div className="lg:ml-auto flex items-center gap-2 max-sm:-mb-1">

13
beszel/site/src/components/ui/icons.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { SVGProps } from 'react'
// linux-logo-bold from https://github.com/phosphor-icons/core (MIT license)
export function TuxIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 256 256" {...props}>
<path
fill="currentColor"
d="M231 217a12 12 0 0 1-16-2c-2-1-35-44-35-127a52 52 0 1 0-104 0c0 83-33 126-35 127a12 12 0 0 1-18-14c0-1 29-39 29-113a76 76 0 1 1 152 0c0 74 29 112 29 113a12 12 0 0 1-2 16m-127-97a16 16 0 1 0-16-16 16 16 0 0 0 16 16m64-16a16 16 0 1 0-16 16 16 16 0 0 0 16-16m-73 51 28 12a12 12 0 0 0 10 0l28-12a12 12 0 0 0-10-22l-23 10-23-10a12 12 0 0 0-10 22m33 29a57 57 0 0 0-39 15 12 12 0 0 0 17 18 33 33 0 0 1 44 0 12 12 0 1 0 17-18 57 57 0 0 0-39-15"
/>
</svg>
)
}