Add temperature chart filtering (#430)

- Refactored ContainerFilterBar to accept a dynamic store prop.
- Updated filtering logic in ContainerChart to be case-insensitive.

beszel/internal/agent/docker.go

@@ -26,6 +26,7 @@ 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
@@ -69,6 +70,8 @@ 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
@@ -80,8 +83,7 @@ func (dm *dockerManager) getDockerStats() ([]*container.Stats, error) {
 
 	var failedContainers []*container.ApiInfo
 
-	for i := range dm.apiContainerList {
-		ctr := dm.apiContainerList[i]
+	for _, ctr := range dm.apiContainerList {
 		ctr.IdShort = ctr.Id[:12]
 		dm.validIds[ctr.IdShort] = struct{}{}
 		// check if container is less than 1 minute old (possible restart)
@@ -167,22 +169,27 @@ func (dm *dockerManager) updateContainerStats(ctr *container.ApiInfo) error {
 		return err
 	}
 
-	// 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)
+	// 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)
 	}
 
-	// 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)
 	}
@@ -197,18 +204,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.PrevNet.Time).Seconds()
+		secondsElapsed := time.Since(stats.PrevRead).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/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/container/container.go

@@ -27,38 +27,41 @@ type ApiInfo struct {
 
 // Docker container resources from /containers/{id}/stats
 type ApiStats struct {
-	// Common stats
-	// Read    time.Time `json:"read"`
-	// PreRead time.Time `json:"preread"`
+	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"`
+}
 
-	// Linux specific stats, not populated on Windows.
-	// PidsStats  PidsStats  `json:"pids_stats,omitempty"`
-	// BlkioStats BlkioStats `json:"blkio_stats,omitempty"`
+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
+}
 
-	// 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
+// 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
 
-	// Shared stats
-	CPUStats CPUStats `json:"cpu_stats,omitempty"`
-	// PreCPUStats CPUStats    `json:"precpu_stats,omitempty"` // "Pre"="Previous"
-	MemoryStats MemoryStats `json:"memory_stats,omitempty"`
+	// 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
 }
 
 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 {
@@ -66,42 +69,15 @@ 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,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"`
+	Stats MemoryStatsStats `json:"stats"`
+	// private working set (Windows only)
+	PrivateWorkingSet uint64 `json:"privateworkingset,omitempty"`
 }
 
 type MemoryStatsStats struct {
@@ -119,7 +95,6 @@ type NetworkStats struct {
 type prevNetStats struct {
 	Sent uint64
 	Recv uint64
-	Time time.Time
 }
 
 // Docker container stats
@@ -131,4 +106,5 @@ 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,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/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,11 +19,12 @@ 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, PlusIcon } from "lucide-react"
+import { ChevronDownIcon, Copy, ExternalLinkIcon, 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)
@@ -72,15 +73,22 @@ function copyDockerRun(port = "45876", publicKey: string) {
 	)
 }
 
-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
+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}"`
 	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.
@@ -197,7 +205,7 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 											className="absolute end-0 top-0"
 											onClick={() => copyToClipboard(publicKey)}
 										>
-											<Copy className="h-4 w-4 " />
+											<Copy className="size-4" />
 										</Button>
 									</TooltipTrigger>
 									<TooltipContent>
@@ -215,17 +223,39 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
 							<CopyButton
 								text={t`Copy` + " docker compose"}
 								onClick={() => copyDockerCompose(isUnixSocket ? hostValue : port.current?.value, publicKey)}
-								dropdownText={t`Copy` + " docker run"}
-								dropdownOnClick={() => copyDockerRun(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" />],
+									},
+								]}
 							/>
 						</TabsContent>
 						{/* Binary */}
 						<TabsContent value="binary" className="contents">
 							<CopyButton
 								text={t`Copy Linux command`}
-								onClick={() => copyInstallCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}
-								dropdownText={t`Manual setup instructions`}
-								dropdownUrl="https://beszel.dev/guide/agent-installation#binary"
+								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" />],
+									},
+								]}
 							/>
 						</TabsContent>
 						{/* Save */}
@@ -237,19 +267,30 @@ 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
-	dropdownText: string
-	dropdownOnClick?: () => void
-	dropdownUrl?: string
+	dropdownItems: DropdownItem[]
+	icon?: React.ReactNode
 }
 
 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">
-				{props.text}
+			<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>
 			<div className="w-px h-full bg-muted"></div>
 			<DropdownMenu>
@@ -259,15 +300,24 @@ const CopyButton = memo((props: CopyButtonProps) => {
 					</Button>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="end">
-					{props.dropdownUrl ? (
-						<DropdownMenuItem asChild>
-							<a href={props.dropdownUrl} className="cursor-pointer" target="_blank" rel="noopener noreferrer">
-								{props.dropdownText}
-							</a>
+					{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>
+							)}
 						</DropdownMenuItem>
-					) : (
-						<DropdownMenuItem onClick={props.dropdownOnClick} className="cursor-pointer">{props.dropdownText}</DropdownMenuItem>
-					)}
+					))}
 				</DropdownMenuContent>
 			</DropdownMenu>
 		</div>

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
 		}
@@ -157,13 +163,14 @@ 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.includes(filter)
+						const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
 						let fillOpacity = filtered ? 0.05 : 0.4
 						let strokeOpacity = filtered ? 0.1 : 1
 						return (

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

@@ -18,8 +18,11 @@ 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) {
@@ -86,22 +89,28 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 								contentFormatter={(item) => decimalString(item.value) + " °C"}
-								// indicator="line"
+								filter={filter}
 							/>
 						}
 					/>
-					{colors.map((key) => (
-						<Line
-							key={key}
-							dataKey={key}
-							name={key}
-							type="monotoneX"
-							dot={false}
-							strokeWidth={1.5}
-							stroke={newChartData.colors[key]}
-							isAnimationActive={false}
-						/>
-					))}
+					{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.length < 12 && <ChartLegend content={<ChartLegendContent />} />}
 				</LineChart>
 			</ChartContainer>

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

@@ -1,7 +1,17 @@
 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 {
+	$systems,
+	pb,
+	$chartTime,
+	$containerFilter,
+	$userSettings,
+	$direction,
+	$maxValues,
+	$temperatureFilter,
+} 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 +32,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"
@@ -218,7 +228,7 @@ export default function SystemDetail({ name }: { name: string }) {
 				cache.set(cs_cache_key, containerData)
 			}
 			if (containerData.length) {
-				!containerFilterBar && setContainerFilterBar(<ContainerFilterBar />)
+				!containerFilterBar && setContainerFilterBar(<FilterBar />)
 			} else if (containerFilterBar) {
 				setContainerFilterBar(null)
 			}
@@ -251,12 +261,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 +295,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,
@@ -312,7 +329,13 @@ export default function SystemDetail({ name }: { name: string }) {
 			return
 		}
 		const handleKeyUp = (e: KeyboardEvent) => {
-			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+			if (
+				e.target instanceof HTMLInputElement ||
+				e.target instanceof HTMLTextAreaElement ||
+				e.shiftKey ||
+				e.ctrlKey ||
+				e.metaKey
+			) {
 				return
 			}
 			const currentIndex = systems.findIndex((s) => s.name === name)
@@ -456,7 +479,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 +500,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 +542,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>
 					)}
@@ -543,6 +566,7 @@ 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>
@@ -640,12 +664,12 @@ export default function SystemDetail({ name }: { name: string }) {
 	)
 }
 
-function ContainerFilterBar() {
-	const containerFilter = useStore($containerFilter)
+function FilterBar({ store = $containerFilter }: { store?: typeof $containerFilter }) {
+	const containerFilter = useStore(store)
 	const { t } = useLingui()
 
 	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-		$containerFilter.set(e.target.value)
+		store.set(e.target.value)
 	}, [])
 
 	return (
@@ -658,7 +682,7 @@ function ContainerFilterBar() {
 					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={() => $containerFilter.set("")}
+					onClick={() => store.set("")}
 				>
 					<XIcon className="h-4 w-4" />
 				</Button>

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

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

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

@@ -12,21 +12,42 @@ 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>
+	)
+}
+
+// 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

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

beszel/site/src/lib/stores.ts

@@ -38,6 +38,9 @@ $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,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 {