Improve system information retrieval for macOS and Windows

- Introduce `Os` enum to represent supported operating systems.
- Update `SystemInfo` interface to include OS type.
- Refactor `ContainerChart` component to use `ChartType` enum for better clarity.
- Switched to dynamic units in container memory chart.

beszel/internal/agent/system.go

@@ -22,7 +22,22 @@ import (
 func (a *Agent) initializeSystemInfo() {
 	a.systemInfo.AgentVersion = beszel.Version
 	a.systemInfo.Hostname, _ = os.Hostname()
-	a.systemInfo.KernelVersion, _ = host.KernelVersion()
+
+	platform, _, version, _ := host.PlatformInformation()
+
+	if platform == "darwin" {
+		a.systemInfo.KernelVersion = version
+		a.systemInfo.Os = system.Darwin
+	} else if strings.Contains(platform, "indows") {
+		a.systemInfo.KernelVersion = strings.Replace(platform, "Microsoft ", "", 1) + " " + version
+		a.systemInfo.Os = system.Windows
+	} else {
+		a.systemInfo.Os = system.Linux
+	}
+
+	if a.systemInfo.KernelVersion == "" {
+		a.systemInfo.KernelVersion, _ = host.KernelVersion()
+	}
 
 	// cpu model
 	if info, err := cpu.Info(); err == nil && len(info) > 0 {

beszel/internal/entities/system/system.go

@@ -64,6 +64,14 @@ type NetIoStats struct {
 	Name      string
 }
 
+type Os uint8
+
+const (
+	Linux Os = iota
+	Darwin
+	Windows
+)
+
 type Info struct {
 	Hostname      string  `json:"h"`
 	KernelVersion string  `json:"k,omitempty"`
@@ -79,6 +87,7 @@ type Info struct {
 	Podman        bool    `json:"p,omitempty"`
 	GpuPct        float64 `json:"g,omitempty"`
 	DashboardTemp float64 `json:"dt,omitempty"`
+	Os            Os      `json:"os"`
 }
 
 // Final data structure to return to the hub

beszel/site/src/components/charts/container-chart.tsx

@@ -16,16 +16,17 @@ import { useStore } from "@nanostores/react"
 import { $containerFilter } from "@/lib/stores"
 import { ChartData } from "@/types"
 import { Separator } from "../ui/separator"
+import { ChartType } from "@/lib/enums"
 
 export default memo(function ContainerChart({
 	dataKey,
 	chartData,
-	chartName,
+	chartType,
 	unit = "%",
 }: {
 	dataKey: string
 	chartData: ChartData
-	chartName: string
+	chartType: ChartType
 	unit?: string
 }) {
 	const filter = useStore($containerFilter)
@@ -33,7 +34,7 @@ export default memo(function ContainerChart({
 
 	const { containerData } = chartData
 
-	const isNetChart = chartName === "net"
+	const isNetChart = chartType === ChartType.Network
 
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -81,7 +82,7 @@ export default memo(function ContainerChart({
 			tickFormatter: (value: any) => string
 		}
 		// tick formatter
-		if (chartName === "cpu") {
+		if (chartType === ChartType.CPU) {
 			obj.tickFormatter = (value) => {
 				const val = toFixedWithoutTrailingZeros(value, 2) + unit
 				return updateYAxisWidth(val)
@@ -111,6 +112,11 @@ export default memo(function ContainerChart({
 					return null
 				}
 			}
+		} else if (chartType === ChartType.Memory) {
+			obj.toolTipFormatter = (item: any) => {
+				const { v, u } = getSizeAndUnit(item.value, false)
+				return updateYAxisWidth(toFixedFloat(v, 2) + u)
+			}
 		} else {
 			obj.toolTipFormatter = (item: any) => decimalString(item.value) + unit
 		}

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

@@ -2,6 +2,7 @@ import { t } from "@lingui/core/macro"
 import { Plural, Trans } from "@lingui/react/macro"
 import { $systems, pb, $chartTime, $containerFilter, $userSettings, $direction, $maxValues } from "@/lib/stores"
 import { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types"
+import { ChartType, Os } from "@/lib/enums"
 import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Card, CardHeader, CardTitle, CardDescription } from "../ui/card"
 import { useStore } from "@nanostores/react"
@@ -22,7 +23,7 @@ import { Separator } from "../ui/separator"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
 import { Button } from "../ui/button"
 import { Input } from "../ui/input"
-import { ChartAverage, ChartMax, Rows, TuxIcon, WindowsIcon } from "../ui/icons"
+import { ChartAverage, ChartMax, Rows, TuxIcon, WindowsIcon, AppleIcon } from "../ui/icons"
 import { useIntersectionObserver } from "@/lib/use-intersection-observer"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
 import { timeTicks } from "d3-time"
@@ -251,12 +252,23 @@ export default function SystemDetail({ name }: { name: string }) {
 		if (!system.info) {
 			return []
 		}
-		let version = system.info.k ?? ""
-		const buildIndex = version.indexOf(" Build")
-		const isWindows = buildIndex !== -1
-		if (isWindows) {
-			version = version.substring(0, buildIndex)
+
+		const osInfo = {
+			[Os.Linux]: {
+				Icon: TuxIcon,
+				value: system.info.k,
+				label: t({ comment: "Linux kernel", message: "Kernel" }),
+			},
+			[Os.Darwin]: {
+				Icon: AppleIcon,
+				value: `macOS ${system.info.k}`,
+			},
+			[Os.Windows]: {
+				Icon: WindowsIcon,
+				value: system.info.k,
+			},
 		}
+
 		let uptime: React.ReactNode
 		if (system.info.u < 172800) {
 			const hours = Math.trunc(system.info.u / 3600)
@@ -274,11 +286,7 @@ export default function SystemDetail({ name }: { name: string }) {
 				hide: system.info.h === system.host || system.info.h === system.name,
 			},
 			{ value: uptime, Icon: ClockArrowUp, label: t`Uptime`, hide: !system.info.u },
-			{
-				value: version,
-				Icon: isWindows ? WindowsIcon : TuxIcon,
-				label: isWindows ? t`Windows build` : t({ comment: "Linux kernel", message: "Kernel" }),
-			},
+			osInfo[system.info.os ?? Os.Linux],
 			{
 				value: `${system.info.m} (${system.info.c}c${system.info.t ? `/${system.info.t}t` : ""})`,
 				Icon: CpuIcon,
@@ -456,7 +464,7 @@ export default function SystemDetail({ name }: { name: string }) {
 							description={t`Average CPU utilization of containers`}
 							cornerEl={containerFilterBar}
 						>
-							<ContainerChart chartData={chartData} dataKey="c" chartName="cpu" />
+							<ContainerChart chartData={chartData} dataKey="c" chartType={ChartType.CPU} />
 						</ChartCard>
 					)}
 
@@ -477,7 +485,7 @@ export default function SystemDetail({ name }: { name: string }) {
 							description={dockerOrPodman(t`Memory usage of docker containers`, system)}
 							cornerEl={containerFilterBar}
 						>
-							<ContainerChart chartData={chartData} chartName="mem" dataKey="m" unit=" MB" />
+							<ContainerChart chartData={chartData} dataKey="m" chartType={ChartType.Memory} />
 						</ChartCard>
 					)}
 
@@ -519,7 +527,7 @@ export default function SystemDetail({ name }: { name: string }) {
 								cornerEl={containerFilterBar}
 							>
 								{/* @ts-ignore */}
-								<ContainerChart chartData={chartData} chartName="net" dataKey="n" />
+								<ContainerChart chartData={chartData} chartType={ChartType.Network} dataKey="n" />
 							</ChartCard>
 						</div>
 					)}

beszel/site/src/components/ui/icons.tsx

@@ -12,16 +12,27 @@ export function TuxIcon(props: SVGProps<SVGSVGElement>) {
 	)
 }
 
-// meteor icons (MIT) https://github.com/zkreations/icons/blob/main/LICENSE
+// icon park (Apache 2.0) https://github.com/bytedance/IconPark/blob/master/LICENSE
 export function WindowsIcon(props: SVGProps<SVGSVGElement>) {
 	return (
-		<svg viewBox="0 0 24 24" {...props}>
+		<svg {...props} viewBox="0 0 48 48">
 			<path
 				fill="none"
 				stroke="currentColor"
-				strokeLinejoin="round"
-				strokeWidth="2"
-				d="M2 12h20m-11.3 8.3V3.7M2 5l20-3v20L2 19Z"
+				strokeWidth="3.8"
+				d="m6.8 11 12.9-1.7v12.1h-13zm18-2.2 16.4-2v14.6H25zm0 18.6 16.4.4v13.4L25 38.6zm-18-.8 12.9.3v10.9l-13-2.2z"
+			/>
+		</svg>
+	)
+}
+
+// teenyicons (MIT) https://github.com/teenyicons/teenyicons/blob/master/LICENSE
+export function AppleIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 20 20" {...props}>
+			<path
+				fill="currentColor"
+				d="M14.1 4.7a5 5 0 0 1 3.8 2c-3.3 1.9-2.8 6.7.6 8L17.2 17c-.8 1.3-2 2.9-3.5 2.9-1.2 0-1.6-.9-3.3-.8s-2.2.8-3.5.8c-1.4 0-2.5-1.5-3.4-2.7-2.3-3.6-2.5-7.9-1.1-10 1-1.7 2.6-2.6 4.1-2.6 1.6 0 2.6.8 3.8.8 1.3 0 2-.8 3.8-.8M13.7 0c.2 1.2-.3 2.4-1 3.2a4 4 0 0 1-3 1.6c-.2-1.2.3-2.3 1-3.2.7-.8 2-1.5 3-1.6"
 			/>
 		</svg>
 	)

beszel/site/src/lib/enums.ts

@@ -0,0 +1,13 @@
+export enum Os {
+	Linux = 0,
+	Darwin,
+	Windows,
+	// FreeBSD,
+}
+
+export enum ChartType {
+	Memory,
+	Disk,
+	Network,
+	CPU,
+}

beszel/site/src/types.d.ts

@@ -1,4 +1,5 @@
 import { RecordModel } from "pocketbase"
+import { Os } from "./lib/enums"
 
 // global window properties
 declare global {
@@ -48,6 +49,8 @@ export interface SystemInfo {
 	g?: number
 	/** dashboard display temperature */
 	dt?: number
+	/** operating system */
+	os?: Os
 }
 
 export interface SystemStats {