support xpu-smi for intel stats (#755)

beszel/internal/agent/docker.go

@@ -26,7 +26,6 @@ type dockerManager struct {
 	containerStatsMap   map[string]*container.Stats // Keeps track of container stats
 	validIds            map[string]struct{}         // Map of valid container ids, used to prune invalid containers from containerStatsMap
 	goodDockerVersion   bool                        // Whether docker version is at least 25.0.0 (one-shot works correctly)
-	isWindows           bool                        // Whether the Docker Engine API is running on Windows
 }
 
 // userAgentRoundTripper is a custom http.RoundTripper that adds a User-Agent header to all requests
@@ -70,8 +69,6 @@ func (dm *dockerManager) getDockerStats() ([]*container.Stats, error) {
 		return nil, err
 	}
 
-	dm.isWindows = strings.Contains(resp.Header.Get("Server"), "windows")
-
 	containersLength := len(dm.apiContainerList)
 
 	// store valid ids to clean up old container ids from map
@@ -83,7 +80,8 @@ func (dm *dockerManager) getDockerStats() ([]*container.Stats, error) {
 
 	var failedContainers []*container.ApiInfo
 
-	for _, ctr := range dm.apiContainerList {
+	for i := range dm.apiContainerList {
+		ctr := dm.apiContainerList[i]
 		ctr.IdShort = ctr.Id[:12]
 		dm.validIds[ctr.IdShort] = struct{}{}
 		// check if container is less than 1 minute old (possible restart)
@@ -169,27 +167,22 @@ func (dm *dockerManager) updateContainerStats(ctr *container.ApiInfo) error {
 		return err
 	}
 
-	// calculate cpu and memory stats
-	var usedMemory uint64
-	var cpuPct float64
-
-	if dm.isWindows {
-		usedMemory = res.MemoryStats.PrivateWorkingSet
-		cpuPct = res.CalculateCpuPercentWindows(stats.PrevCpu[0], stats.PrevRead)
-	} else {
-		// check if container has valid data, otherwise may be in restart loop (#103)
-		if res.MemoryStats.Usage == 0 {
-			return fmt.Errorf("%s - no memory stats - see https://github.com/henrygd/beszel/issues/144", name)
-		}
-		memCache := res.MemoryStats.Stats.InactiveFile
-		if memCache == 0 {
-			memCache = res.MemoryStats.Stats.Cache
-		}
-		usedMemory = res.MemoryStats.Usage - memCache
-
-		cpuPct = res.CalculateCpuPercentLinux(stats.PrevCpu)
+	// check if container has valid data, otherwise may be in restart loop (#103)
+	if res.MemoryStats.Usage == 0 {
+		return fmt.Errorf("%s - no memory stats - see https://github.com/henrygd/beszel/issues/144", name)
 	}
 
+	// memory (https://docs.docker.com/reference/cli/docker/container/stats/)
+	memCache := res.MemoryStats.Stats.InactiveFile
+	if memCache == 0 {
+		memCache = res.MemoryStats.Stats.Cache
+	}
+	usedMemory := res.MemoryStats.Usage - memCache
+
+	// cpu
+	cpuDelta := res.CPUStats.CPUUsage.TotalUsage - stats.PrevCpu[0]
+	systemDelta := res.CPUStats.SystemUsage - stats.PrevCpu[1]
+	cpuPct := float64(cpuDelta) / float64(systemDelta) * 100
 	if cpuPct > 100 {
 		return fmt.Errorf("%s cpu pct greater than 100: %+v", name, cpuPct)
 	}
@@ -204,18 +197,18 @@ func (dm *dockerManager) updateContainerStats(ctr *container.ApiInfo) error {
 	var sent_delta, recv_delta float64
 	// prevent first run from sending all prev sent/recv bytes
 	if initialized {
-		secondsElapsed := time.Since(stats.PrevRead).Seconds()
+		secondsElapsed := time.Since(stats.PrevNet.Time).Seconds()
 		sent_delta = float64(total_sent-stats.PrevNet.Sent) / secondsElapsed
 		recv_delta = float64(total_recv-stats.PrevNet.Recv) / secondsElapsed
 	}
 	stats.PrevNet.Sent = total_sent
 	stats.PrevNet.Recv = total_recv
+	stats.PrevNet.Time = time.Now()
 
 	stats.Cpu = twoDecimals(cpuPct)
 	stats.Mem = bytesToMegabytes(float64(usedMemory))
 	stats.NetworkSent = bytesToMegabytes(sent_delta)
 	stats.NetworkRecv = bytesToMegabytes(recv_delta)
-	stats.PrevRead = res.Read
 
 	return nil
 }

beszel/internal/agent/gpu.go

@@ -4,6 +4,7 @@ import (
 	"beszel/internal/entities/system"
 	"bufio"
 	"bytes"
+	"encoding/csv"
 	"encoding/json"
 	"fmt"
 	"os/exec"
@@ -21,11 +22,13 @@ const (
 	nvidiaSmiCmd  = "nvidia-smi"
 	rocmSmiCmd    = "rocm-smi"
 	tegraStatsCmd = "tegrastats"
+	xpuSmiCmd     = "xpu-smi"
 
 	// Polling intervals
 	nvidiaSmiInterval  = "4"    // in seconds
 	tegraStatsInterval = "3700" // in milliseconds
 	rocmSmiInterval    = 4300 * time.Millisecond
+	xpuSmiInterval     = 4
 
 	// Command retry and timeout constants
 	retryWaitTime     = 5 * time.Second
@@ -41,10 +44,11 @@ const (
 // GPUManager manages data collection for GPUs (either Nvidia or AMD)
 type GPUManager struct {
 	sync.Mutex
-	nvidiaSmi  bool
-	rocmSmi    bool
-	tegrastats bool
-	GpuDataMap map[string]*system.GPUData
+	nvidiaSmi   bool
+	rocmSmi     bool
+	tegrastats  bool
+	intelXpuSmi bool
+	GpuDataMap  map[string]*system.GPUData
 }
 
 // RocmSmiJson represents the JSON structure of rocm-smi output
@@ -160,6 +164,59 @@ func (gm *GPUManager) getJetsonParser() func(output []byte) bool {
 	}
 }
 
+func (gm *GPUManager) parseIntelData(output []byte) bool {
+	gm.Lock()
+	defer gm.Unlock()
+	reader := csv.NewReader(bytes.NewReader(output))
+	records, err := reader.ReadAll()
+	if err != nil {
+		slog.Warn("Failed to parse Intel GPU data", "err", err)
+		return false
+	}
+
+	header := []string{"Timestamp", "DeviceId", "GPU Power (W)", "GPU Frequency (MHz)", "GPU Memory Utilization (%)", "GPU Memory Used (MiB)"}
+	gpuData := &system.GPUData{Name: "GPU"}
+	gm.GpuDataMap["0"] = gpuData
+
+	for _, record := range records {
+		if strings.Join(record, ",") == strings.Join(header, ",") {
+			slog.Debug("Skipping header", "header", record)
+			continue
+		}
+		var memoryUtilization *float64
+		var memoryUsed *float64
+		for i, field := range header {
+			if field == "Timestamp" {
+				continue
+			}
+			stripped := strings.TrimSpace(record[i])
+			value, err := strconv.ParseFloat(stripped, 64)
+			if err != nil {
+				slog.Warn("Failed to parse field", "field", field, "value", stripped, "err", err)
+				continue
+			}
+
+			switch field {
+			case "GPU Power (W)":
+				gpuData.Power += value
+			case "GPU Frequency (MHz)":
+				gpuData.Usage += value
+			case "GPU Memory Utilization (%)":
+				memoryUtilization = &value
+			case "GPU Memory Used (MiB)":
+				memoryUsed = &value
+			}
+		}
+		if memoryUtilization != nil && memoryUsed != nil {
+			gpuData.MemoryUsed = *memoryUsed
+			gpuData.MemoryTotal = (*memoryUsed / *memoryUtilization) * 100 // convert to total memory
+		}
+	}
+	gpuData.Count++
+
+	return true
+}
+
 // parseNvidiaData parses the output of nvidia-smi and updates the GPUData map
 func (gm *GPUManager) parseNvidiaData(output []byte) bool {
 	gm.Lock()
@@ -278,10 +335,14 @@ func (gm *GPUManager) detectGPUs() error {
 		gm.tegrastats = true
 		gm.nvidiaSmi = false
 	}
-	if gm.nvidiaSmi || gm.rocmSmi || gm.tegrastats {
+	fmt.Println("Looking for gpus")
+	if _, err := exec.LookPath(xpuSmiCmd); err == nil {
+		gm.intelXpuSmi = true
+	}
+	if gm.nvidiaSmi || gm.rocmSmi || gm.tegrastats || gm.intelXpuSmi {
 		return nil
 	}
-	return fmt.Errorf("no GPU found - install nvidia-smi, rocm-smi, or tegrastats")
+	return fmt.Errorf("no GPU found - install nvidia-smi, rocm-smi, intel_gpu_top, or tegrastats")
 }
 
 // startCollector starts the appropriate GPU data collector based on the command
@@ -318,6 +379,10 @@ func (gm *GPUManager) startCollector(command string) {
 				time.Sleep(rocmSmiInterval)
 			}
 		}()
+	case xpuSmiCmd:
+		collector.cmdArgs = []string{"dump", "-d", "-1", "-m", "1,2,5,18", "-i", strconv.Itoa(xpuSmiInterval)}
+		collector.parse = gm.parseIntelData
+		go collector.start()
 	}
 }
 
@@ -338,6 +403,9 @@ func NewGPUManager() (*GPUManager, error) {
 	if gm.tegrastats {
 		gm.startCollector(tegraStatsCmd)
 	}
+	if gm.intelXpuSmi {
+		gm.startCollector(xpuSmiCmd)
+	}
 
 	return &gm, nil
 }

beszel/internal/agent/system.go

@@ -22,22 +22,7 @@ import (
 func (a *Agent) initializeSystemInfo() {
 	a.systemInfo.AgentVersion = beszel.Version
 	a.systemInfo.Hostname, _ = os.Hostname()
-
-	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()
-	}
+	a.systemInfo.KernelVersion, _ = host.KernelVersion()
 
 	// cpu model
 	if info, err := cpu.Info(); err == nil && len(info) > 0 {

beszel/internal/entities/container/container.go

@@ -27,41 +27,38 @@ type ApiInfo struct {
 
 // Docker container resources from /containers/{id}/stats
 type ApiStats struct {
-	Read        time.Time `json:"read"`               // Time of stats generation
-	NumProcs    uint32    `json:"num_procs,omitzero"` // Windows specific, not populated on Linux.
-	Networks    map[string]NetworkStats
-	CPUStats    CPUStats    `json:"cpu_stats"`
-	MemoryStats MemoryStats `json:"memory_stats"`
-}
+	// Common stats
+	// Read    time.Time `json:"read"`
+	// PreRead time.Time `json:"preread"`
 
-func (s *ApiStats) CalculateCpuPercentLinux(prevCpuUsage [2]uint64) float64 {
-	cpuDelta := s.CPUStats.CPUUsage.TotalUsage - prevCpuUsage[0]
-	systemDelta := s.CPUStats.SystemUsage - prevCpuUsage[1]
-	return float64(cpuDelta) / float64(systemDelta) * 100
-}
+	// Linux specific stats, not populated on Windows.
+	// PidsStats  PidsStats  `json:"pids_stats,omitempty"`
+	// BlkioStats BlkioStats `json:"blkio_stats,omitempty"`
 
-// from: https://github.com/docker/cli/blob/master/cli/command/container/stats_helpers.go#L185
-func (s *ApiStats) CalculateCpuPercentWindows(prevCpuUsage uint64, prevRead time.Time) float64 {
-	// Max number of 100ns intervals between the previous time read and now
-	possIntervals := uint64(s.Read.Sub(prevRead).Nanoseconds())
-	possIntervals /= 100                // Convert to number of 100ns intervals
-	possIntervals *= uint64(s.NumProcs) // Multiple by the number of processors
+	// Windows specific stats, not populated on Linux.
+	// NumProcs uint32 `json:"num_procs"`
+	// StorageStats StorageStats `json:"storage_stats,omitempty"`
+	// Networks request version >=1.21
+	Networks map[string]NetworkStats
 
-	// Intervals used
-	intervalsUsed := s.CPUStats.CPUUsage.TotalUsage - prevCpuUsage
-
-	// Percentage avoiding divide-by-zero
-	if possIntervals > 0 {
-		return float64(intervalsUsed) / float64(possIntervals) * 100.0
-	}
-	return 0.00
+	// Shared stats
+	CPUStats CPUStats `json:"cpu_stats,omitempty"`
+	// PreCPUStats CPUStats    `json:"precpu_stats,omitempty"` // "Pre"="Previous"
+	MemoryStats MemoryStats `json:"memory_stats,omitempty"`
 }
 
 type CPUStats struct {
 	// CPU Usage. Linux and Windows.
 	CPUUsage CPUUsage `json:"cpu_usage"`
+
 	// System Usage. Linux only.
 	SystemUsage uint64 `json:"system_cpu_usage,omitempty"`
+
+	// Online CPUs. Linux only.
+	// OnlineCPUs uint32 `json:"online_cpus,omitempty"`
+
+	// Throttling Data. Linux only.
+	// ThrottlingData ThrottlingData `json:"throttling_data,omitempty"`
 }
 
 type CPUUsage struct {
@@ -69,15 +66,42 @@ type CPUUsage struct {
 	// Units: nanoseconds (Linux)
 	// Units: 100's of nanoseconds (Windows)
 	TotalUsage uint64 `json:"total_usage"`
+
+	// Total CPU time consumed per core (Linux). Not used on Windows.
+	// Units: nanoseconds.
+	// PercpuUsage []uint64 `json:"percpu_usage,omitempty"`
+
+	// Time spent by tasks of the cgroup in kernel mode (Linux).
+	// Time spent by all container processes in kernel mode (Windows).
+	// Units: nanoseconds (Linux).
+	// Units: 100's of nanoseconds (Windows). Not populated for Hyper-V Containers.
+	// UsageInKernelmode uint64 `json:"usage_in_kernelmode"`
+
+	// Time spent by tasks of the cgroup in user mode (Linux).
+	// Time spent by all container processes in user mode (Windows).
+	// Units: nanoseconds (Linux).
+	// Units: 100's of nanoseconds (Windows). Not populated for Hyper-V Containers
+	// UsageInUsermode uint64 `json:"usage_in_usermode"`
 }
 
 type MemoryStats struct {
 	// current res_counter usage for memory
 	Usage uint64 `json:"usage,omitempty"`
 	// all the stats exported via memory.stat.
-	Stats MemoryStatsStats `json:"stats"`
-	// private working set (Windows only)
-	PrivateWorkingSet uint64 `json:"privateworkingset,omitempty"`
+	Stats MemoryStatsStats `json:"stats,omitempty"`
+	// maximum usage ever recorded.
+	// MaxUsage uint64 `json:"max_usage,omitempty"`
+	// TODO(vishh): Export these as stronger types.
+	// number of times memory usage hits limits.
+	// Failcnt uint64 `json:"failcnt,omitempty"`
+	// Limit   uint64 `json:"limit,omitempty"`
+
+	// // committed bytes
+	// Commit uint64 `json:"commitbytes,omitempty"`
+	// // peak committed bytes
+	// CommitPeak uint64 `json:"commitpeakbytes,omitempty"`
+	// // private working set
+	// PrivateWorkingSet uint64 `json:"privateworkingset,omitempty"`
 }
 
 type MemoryStatsStats struct {
@@ -95,6 +119,7 @@ type NetworkStats struct {
 type prevNetStats struct {
 	Sent uint64
 	Recv uint64
+	Time time.Time
 }
 
 // Docker container stats
@@ -106,5 +131,4 @@ type Stats struct {
 	NetworkRecv float64      `json:"nr"`
 	PrevCpu     [2]uint64    `json:"-"`
 	PrevNet     prevNetStats `json:"-"`
-	PrevRead    time.Time    `json:"-"`
 }

beszel/internal/entities/system/system.go

@@ -64,14 +64,6 @@ 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"`
@@ -87,7 +79,6 @@ 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/add-system.tsx

@@ -1,5 +1,5 @@
-import { Trans } from "@lingui/react/macro"
-import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro";
+import { t } from "@lingui/core/macro";
 import { Button } from "@/components/ui/button"
 import {
 	Dialog,
@@ -19,12 +19,11 @@ import { $publicKey, pb } from "@/lib/stores"
 import { cn, copyToClipboard, isReadOnlyUser, useLocalStorage } from "@/lib/utils"
 import { i18n } from "@lingui/core"
 import { useStore } from "@nanostores/react"
-import { ChevronDownIcon, Copy, ExternalLinkIcon, PlusIcon } from "lucide-react"
+import { ChevronDownIcon, Copy, PlusIcon } from "lucide-react"
 import { memo, useRef, useState } from "react"
 import { basePath, navigate } from "./router"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu"
 import { SystemRecord } from "@/types"
-import { AppleIcon, DockerIcon, TuxIcon, WindowsIcon } from "./ui/icons"
 
 export function AddSystemButton({ className }: { className?: string }) {
 	const [open, setOpen] = useState(false)
@@ -73,22 +72,15 @@ function copyDockerRun(port = "45876", publicKey: string) {
 	)
 }
 
-function copyLinuxCommand(port = "45876", publicKey: string, brew = false) {
-	let cmd = `curl -sL https://get.beszel.dev${
-		brew ? "/brew" : ""
-	} -o /tmp/install-agent.sh && chmod +x /tmp/install-agent.sh && /tmp/install-agent.sh -p ${port} -k "${publicKey}"`
+function copyInstallCommand(port = "45876", publicKey: string) {
+	let cmd = `curl -sL https://raw.githubusercontent.com/henrygd/beszel/main/supplemental/scripts/install-agent.sh -o install-agent.sh && chmod +x install-agent.sh && ./install-agent.sh -p ${port} -k "${publicKey}"`
+	// add china mirrors flag if zh-CN
 	if ((i18n.locale + navigator.language).includes("zh-CN")) {
 		cmd += ` --china-mirrors`
 	}
 	copyToClipboard(cmd)
 }
 
-function copyWindowsCommand(port = "45876", publicKey: string) {
-	copyToClipboard(
-		`Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser; & iwr -useb https://get.beszel.dev -OutFile "$env:TEMP\install-agent.ps1"; & "$env:TEMP\install-agent.ps1" -Key "${publicKey}" -Port ${port}`
-	)
-}
-
 /**
  * SystemDialog component for adding or editing a system.
  * @param {Object} props - The component props.
@@ -205,7 +197,7 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 											className="absolute end-0 top-0"
 											onClick={() => copyToClipboard(publicKey)}
 										>
-											<Copy className="size-4" />
+											<Copy className="h-4 w-4 " />
 										</Button>
 									</TooltipTrigger>
 									<TooltipContent>
@@ -223,39 +215,17 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 							<CopyButton
 								text={t`Copy` + " docker compose"}
 								onClick={() => copyDockerCompose(isUnixSocket ? hostValue : port.current?.value, publicKey)}
-								icon={<DockerIcon className="size-4 -me-0.5" />}
-								dropdownItems={[
-									{
-										text: t`Copy` + " docker run",
-										onClick: () => copyDockerRun(isUnixSocket ? hostValue : port.current?.value, publicKey),
-										icons: [<DockerIcon className="size-4" />],
-									},
-								]}
+								dropdownText={t`Copy` + " docker run"}
+								dropdownOnClick={() => copyDockerRun(isUnixSocket ? hostValue : port.current?.value, publicKey)}
 							/>
 						</TabsContent>
 						{/* Binary */}
 						<TabsContent value="binary" className="contents">
 							<CopyButton
 								text={t`Copy Linux command`}
-								icon={<TuxIcon className="size-4" />}
-								onClick={() => copyLinuxCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}
-								dropdownItems={[
-									{
-										text: t`Copy Homebrew command`,
-										onClick: () => copyLinuxCommand(isUnixSocket ? hostValue : port.current?.value, publicKey, true),
-										icons: [<AppleIcon className="size-4" />, <TuxIcon className="w-4 h-4" />],
-									},
-									{
-										text: t`Copy Windows command`,
-										onClick: () => copyWindowsCommand(isUnixSocket ? hostValue : port.current?.value, publicKey),
-										icons: [<WindowsIcon className="size-4" />],
-									},
-									{
-										text: t`Manual setup instructions`,
-										url: "https://beszel.dev/guide/agent-installation#binary",
-										icons: [<ExternalLinkIcon className="size-4" />],
-									},
-								]}
+								onClick={() => copyInstallCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}
+								dropdownText={t`Manual setup instructions`}
+								dropdownUrl="https://beszel.dev/guide/agent-installation#binary"
 							/>
 						</TabsContent>
 						{/* Save */}
@@ -267,30 +237,19 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 	)
 })
 
-interface DropdownItem {
-	text: string
-	onClick?: () => void
-	url?: string
-	icons?: React.ReactNode[]
-}
-
 interface CopyButtonProps {
 	text: string
 	onClick: () => void
-	dropdownItems: DropdownItem[]
-	icon?: React.ReactNode
+	dropdownText: string
+	dropdownOnClick?: () => void
+	dropdownUrl?: string
 }
 
 const CopyButton = memo((props: CopyButtonProps) => {
 	return (
 		<div className="flex gap-0 rounded-lg">
-			<Button
-				type="button"
-				variant="outline"
-				onClick={props.onClick}
-				className="rounded-e-none dark:border-e-0 grow flex items-center gap-2"
-			>
-				{props.text} {props.icon}
+			<Button type="button" variant="outline" onClick={props.onClick} className="rounded-e-none dark:border-e-0 grow">
+				{props.text}
 			</Button>
 			<div className="w-px h-full bg-muted"></div>
 			<DropdownMenu>
@@ -300,24 +259,15 @@ const CopyButton = memo((props: CopyButtonProps) => {
 					</Button>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="end">
-					{props.dropdownItems.map((item, index) => (
-						<DropdownMenuItem key={index} asChild={!!item.url}>
-							{item.url ? (
-								<a
-									href={item.url}
-									className="cursor-pointer flex items-center gap-1.5"
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									{item.text} {item.icons?.map((icon) => icon)}
-								</a>
-							) : (
-								<div onClick={item.onClick} className="cursor-pointer flex items-center gap-1.5">
-									{item.text} {item.icons?.map((icon) => icon)}
-								</div>
-							)}
+					{props.dropdownUrl ? (
+						<DropdownMenuItem asChild>
+							<a href={props.dropdownUrl} className="cursor-pointer" target="_blank" rel="noopener noreferrer">
+								{props.dropdownText}
+							</a>
 						</DropdownMenuItem>
-					))}
+					) : (
+						<DropdownMenuItem onClick={props.dropdownOnClick} className="cursor-pointer">{props.dropdownText}</DropdownMenuItem>
+					)}
 				</DropdownMenuContent>
 			</DropdownMenu>
 		</div>

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

@@ -16,17 +16,16 @@ 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,
-	chartType,
+	chartName,
 	unit = "%",
 }: {
 	dataKey: string
 	chartData: ChartData
-	chartType: ChartType
+	chartName: string
 	unit?: string
 }) {
 	const filter = useStore($containerFilter)
@@ -34,7 +33,7 @@ export default memo(function ContainerChart({
 
 	const { containerData } = chartData
 
-	const isNetChart = chartType === ChartType.Network
+	const isNetChart = chartName === "net"
 
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -82,7 +81,7 @@ export default memo(function ContainerChart({
 			tickFormatter: (value: any) => string
 		}
 		// tick formatter
-		if (chartType === ChartType.CPU) {
+		if (chartName === "cpu") {
 			obj.tickFormatter = (value) => {
 				const val = toFixedWithoutTrailingZeros(value, 2) + unit
 				return updateYAxisWidth(val)
@@ -112,11 +111,6 @@ 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
 		}
@@ -163,14 +157,13 @@ export default memo(function ContainerChart({
 					<ChartTooltip
 						animationEasing="ease-out"
 						animationDuration={150}
-						truncate={true}
 						labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 						// @ts-ignore
 						itemSorter={(a, b) => b.value - a.value}
 						content={<ChartTooltipContent filter={filter} contentFormatter={toolTipFormatter} />}
 					/>
 					{Object.keys(chartConfig).map((key) => {
-						const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
+						const filtered = filter && !key.includes(filter)
 						let fillOpacity = filtered ? 0.05 : 0.4
 						let strokeOpacity = filtered ? 0.1 : 1
 						return (

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

@@ -18,11 +18,8 @@ import {
 } from "@/lib/utils"
 import { ChartData } from "@/types"
 import { memo, useMemo } from "react"
-import { $temperatureFilter } from "@/lib/stores"
-import { useStore } from "@nanostores/react"
 
 export default memo(function TemperatureChart({ chartData }: { chartData: ChartData }) {
-	const filter = useStore($temperatureFilter)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	if (chartData.systemStats.length === 0) {
@@ -89,28 +86,22 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 								contentFormatter={(item) => decimalString(item.value) + " °C"}
-								filter={filter}
+								// indicator="line"
 							/>
 						}
 					/>
-					{colors.map((key) => {
-						const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
-						let strokeOpacity = filtered ? 0.1 : 1
-						return (
-							<Line
-								key={key}
-								dataKey={key}
-								name={key}
-								type="monotoneX"
-								dot={false}
-								strokeWidth={1.5}
-								stroke={newChartData.colors[key]}
-								strokeOpacity={strokeOpacity}
-								activeDot={{ opacity: filtered ? 0 : 1 }}
-								isAnimationActive={false}
-							/>
-						)
-					})}
+					{colors.map((key) => (
+						<Line
+							key={key}
+							dataKey={key}
+							name={key}
+							type="monotoneX"
+							dot={false}
+							strokeWidth={1.5}
+							stroke={newChartData.colors[key]}
+							isAnimationActive={false}
+						/>
+					))}
 					{colors.length < 12 && <ChartLegend content={<ChartLegendContent />} />}
 				</LineChart>
 			</ChartContainer>

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

@@ -1,17 +1,7 @@
 import { t } from "@lingui/core/macro"
 import { Plural, Trans } from "@lingui/react/macro"
-import {
-	$systems,
-	pb,
-	$chartTime,
-	$containerFilter,
-	$userSettings,
-	$direction,
-	$maxValues,
-	$temperatureFilter,
-} from "@/lib/stores"
+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"
@@ -32,7 +22,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, AppleIcon } from "../ui/icons"
+import { ChartAverage, ChartMax, Rows, TuxIcon, WindowsIcon } from "../ui/icons"
 import { useIntersectionObserver } from "@/lib/use-intersection-observer"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
 import { timeTicks } from "d3-time"
@@ -228,7 +218,7 @@ export default function SystemDetail({ name }: { name: string }) {
 				cache.set(cs_cache_key, containerData)
 			}
 			if (containerData.length) {
-				!containerFilterBar && setContainerFilterBar(<FilterBar />)
+				!containerFilterBar && setContainerFilterBar(<ContainerFilterBar />)
 			} else if (containerFilterBar) {
 				setContainerFilterBar(null)
 			}
@@ -261,23 +251,12 @@ export default function SystemDetail({ name }: { name: string }) {
 		if (!system.info) {
 			return []
 		}
-
-		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 version = system.info.k ?? ""
+		const buildIndex = version.indexOf(" Build")
+		const isWindows = buildIndex !== -1
+		if (isWindows) {
+			version = version.substring(0, buildIndex)
 		}
-
 		let uptime: React.ReactNode
 		if (system.info.u < 172800) {
 			const hours = Math.trunc(system.info.u / 3600)
@@ -295,7 +274,11 @@ 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 },
-			osInfo[system.info.os ?? Os.Linux],
+			{
+				value: version,
+				Icon: isWindows ? WindowsIcon : TuxIcon,
+				label: isWindows ? t`Windows build` : t({ comment: "Linux kernel", message: "Kernel" }),
+			},
 			{
 				value: `${system.info.m} (${system.info.c}c${system.info.t ? `/${system.info.t}t` : ""})`,
 				Icon: CpuIcon,
@@ -329,13 +312,7 @@ export default function SystemDetail({ name }: { name: string }) {
 			return
 		}
 		const handleKeyUp = (e: KeyboardEvent) => {
-			if (
-				e.target instanceof HTMLInputElement ||
-				e.target instanceof HTMLTextAreaElement ||
-				e.shiftKey ||
-				e.ctrlKey ||
-				e.metaKey
-			) {
+			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
 				return
 			}
 			const currentIndex = systems.findIndex((s) => s.name === name)
@@ -479,7 +456,7 @@ export default function SystemDetail({ name }: { name: string }) {
 							description={t`Average CPU utilization of containers`}
 							cornerEl={containerFilterBar}
 						>
-							<ContainerChart chartData={chartData} dataKey="c" chartType={ChartType.CPU} />
+							<ContainerChart chartData={chartData} dataKey="c" chartName="cpu" />
 						</ChartCard>
 					)}
 
@@ -500,7 +477,7 @@ export default function SystemDetail({ name }: { name: string }) {
 							description={dockerOrPodman(t`Memory usage of docker containers`, system)}
 							cornerEl={containerFilterBar}
 						>
-							<ContainerChart chartData={chartData} dataKey="m" chartType={ChartType.Memory} />
+							<ContainerChart chartData={chartData} chartName="mem" dataKey="m" unit=" MB" />
 						</ChartCard>
 					)}
 
@@ -542,7 +519,7 @@ export default function SystemDetail({ name }: { name: string }) {
 								cornerEl={containerFilterBar}
 							>
 								{/* @ts-ignore */}
-								<ContainerChart chartData={chartData} chartType={ChartType.Network} dataKey="n" />
+								<ContainerChart chartData={chartData} chartName="net" dataKey="n" />
 							</ChartCard>
 						</div>
 					)}
@@ -566,7 +543,6 @@ export default function SystemDetail({ name }: { name: string }) {
 							grid={grid}
 							title={t`Temperature`}
 							description={t`Temperatures of system sensors`}
-							cornerEl={<FilterBar store={$temperatureFilter} />}
 						>
 							<TemperatureChart chartData={chartData} />
 						</ChartCard>
@@ -664,12 +640,12 @@ export default function SystemDetail({ name }: { name: string }) {
 	)
 }
 
-function FilterBar({ store = $containerFilter }: { store?: typeof $containerFilter }) {
-	const containerFilter = useStore(store)
+function ContainerFilterBar() {
+	const containerFilter = useStore($containerFilter)
 	const { t } = useLingui()
 
 	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-		store.set(e.target.value)
+		$containerFilter.set(e.target.value)
 	}, [])
 
 	return (
@@ -682,7 +658,7 @@ function FilterBar({ store = $containerFilter }: { store?: typeof $containerFilt
 					size="icon"
 					aria-label="Clear"
 					className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
-					onClick={() => store.set("")}
+					onClick={() => $containerFilter.set("")}
 				>
 					<XIcon className="h-4 w-4" />
 				</Button>

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

@@ -99,7 +99,6 @@ const ChartTooltipContent = React.forwardRef<
 			unit?: string
 			filter?: string
 			contentFormatter?: (item: any, key: string) => React.ReactNode | string
-			truncate?: boolean
 		}
 >(
 	(
@@ -120,7 +119,6 @@ const ChartTooltipContent = React.forwardRef<
 			filter,
 			itemSorter,
 			contentFormatter: content = undefined,
-			truncate = false,
 		},
 		ref
 	) => {
@@ -129,7 +127,7 @@ const ChartTooltipContent = React.forwardRef<
 
 		React.useMemo(() => {
 			if (filter) {
-				payload = payload?.filter((item) => (item.name as string)?.toLowerCase().includes(filter.toLowerCase()))
+				payload = payload?.filter((item) => (item.name as string)?.includes(filter))
 			}
 			if (itemSorter) {
 				// @ts-ignore
@@ -216,15 +214,10 @@ const ChartTooltipContent = React.forwardRef<
 												nestLabel ? "items-end" : "items-center"
 											)}
 										>
-											{nestLabel ? tooltipLabel : null}
-											<span
-												className={cn(
-													"text-muted-foreground",
-													truncate ? "max-w-40 truncate leading-normal -my-1" : ""
-												)}
-											>
-												{itemConfig?.label || item.name}
-											</span>
+											<div className="grid gap-1.5">
+												{nestLabel ? tooltipLabel : null}
+												<span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+											</div>
 											{item.value !== undefined && (
 												<span className="font-medium tabular-nums text-foreground">
 													{content && typeof content === "function"

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

@@ -12,42 +12,21 @@ export function TuxIcon(props: SVGProps<SVGSVGElement>) {
 	)
 }
 
-// icon park (Apache 2.0) https://github.com/bytedance/IconPark/blob/master/LICENSE
+// meteor icons (MIT) https://github.com/zkreations/icons/blob/main/LICENSE
 export function WindowsIcon(props: SVGProps<SVGSVGElement>) {
 	return (
-		<svg {...props} viewBox="0 0 48 48">
+		<svg viewBox="0 0 24 24" {...props}>
 			<path
 				fill="none"
 				stroke="currentColor"
-				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"
+				strokeLinejoin="round"
+				strokeWidth="2"
+				d="M2 12h20m-11.3 8.3V3.7M2 5l20-3v20L2 19Z"
 			/>
 		</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>
-	)
-}
-
-// ion icons (MIT) https://github.com/ionic-team/ionicons/blob/main/LICENSE
-export function DockerIcon(props: SVGProps<SVGSVGElement>) {
-	return (
-		<svg {...props} viewBox="0 0 512 512" fill="currentColor">
-			<path d="M507 211c-1-1-14-11-42-11a133 133 0 0 0-21 2c-6-36-36-54-37-55l-7-4-5 7a102 102 0 0 0-13 30c-5 21-2 40 8 57-12 7-33 9-37 9H16a16 16 0 0 0-16 16 241 241 0 0 0 15 87c11 30 29 53 51 67 25 15 66 24 113 24a344 344 0 0 0 62-6 257 257 0 0 0 82-29 224 224 0 0 0 55-46c27-30 43-64 55-94h4c30 0 48-12 58-22a63 63 0 0 0 15-22l2-6Z" />
-			<path d="M47 236h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4H47a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m62 0h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m-125-57h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m63 0h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m62 0h45a4 4 0 0 0 4-4v-41a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v41a4 4 0 0 0 4 4m0-58h45a4 4 0 0 0 4-4V76a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4m63 116h45a4 4 0 0 0 4-4v-40a4 4 0 0 0-4-4h-45a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4" />
-		</svg>
-	)
-}
-
 // MingCute Apache License 2.0 https://github.com/Richard9394/MingCute
 export function Rows(props: SVGProps<SVGSVGElement>) {
 	return (

beszel/site/src/lib/enums.ts

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

beszel/site/src/lib/stores.ts

@@ -38,9 +38,6 @@ $userSettings.subscribe((value) => {
 /** Container chart filter */
 export const $containerFilter = atom("")
 
-/** Temperature chart filter */
-export const $temperatureFilter = atom("")
-
 /** Fallback copy to clipboard dialog content */
 export const $copyContent = atom("")
 

beszel/site/src/types.d.ts

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