add max 1 min memory

beszel/internal/entities/system/system.go

@@ -39,6 +39,7 @@ type Stats struct {
 	// TODO: remove other load fields in future release in favor of load avg array
 	LoadAvg [3]float64 `json:"la,omitempty" cbor:"28,keyasint"`
 	Battery [2]uint8   `json:"bat,omitzero" cbor:"29,keyasint,omitzero"` // [percent, charge state, current]
+	MaxMem  float64    `json:"mm,omitempty" cbor:"30,keyasint,omitempty"`
 }
 
 type GPUData struct {

beszel/internal/records/records.go

@@ -214,6 +214,7 @@ func (rm *RecordManager) AverageSystemStats(db dbx.Builder, records RecordIds) *
 		sum.Battery[1] = stats.Battery[1]
 		// Set peak values
 		sum.MaxCpu = max(sum.MaxCpu, stats.MaxCpu, stats.Cpu)
+		sum.MaxMem = max(sum.MaxMem, stats.MaxMem, stats.MemUsed)
 		sum.MaxNetworkSent = max(sum.MaxNetworkSent, stats.MaxNetworkSent, stats.NetworkSent)
 		sum.MaxNetworkRecv = max(sum.MaxNetworkRecv, stats.MaxNetworkRecv, stats.NetworkRecv)
 		sum.MaxDiskReadPs = max(sum.MaxDiskReadPs, stats.MaxDiskReadPs, stats.DiskReadPs)

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

@@ -7,7 +7,7 @@ import { useMemo } from "react"
 export type DataPoint = {
 	label: string
 	dataKey: (data: SystemStatsRecord) => number | undefined
-	color: string
+	color: number | string
 	opacity: number
 }
 

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

@@ -6,7 +6,7 @@ import { ChartData } from "@/types"
 import { useLingui } from "@lingui/react/macro"
 import { Unit } from "@/lib/enums"
 
-export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
+export default memo(function MemChart({ chartData, showMax }: { chartData: ChartData; showMax: boolean }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { t } = useLingui()
 
@@ -66,7 +66,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 					<Area
 						name={t`Used`}
 						order={3}
-						dataKey="stats.mu"
+						dataKey={({ stats }) => (showMax ? stats?.mm : stats?.mu)}
 						type="monotoneX"
 						fill="var(--chart-2)"
 						fillOpacity={0.4}
@@ -74,31 +74,31 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						stackId="1"
 						isAnimationActive={false}
 					/>
-					{chartData.systemStats.at(-1)?.stats.mz && (
-						<Area
-							name="ZFS ARC"
-							order={2}
-							dataKey="stats.mz"
-							type="monotoneX"
-							fill="hsla(175 60% 45% / 0.8)"
-							fillOpacity={0.5}
-							stroke="hsla(175 60% 45% / 0.8)"
-							stackId="1"
-							isAnimationActive={false}
-						/>
-					)}
+					{/* {chartData.systemStats.at(-1)?.stats.mz && ( */}
+					<Area
+						name="ZFS ARC"
+						order={2}
+						dataKey={({ stats }) => (showMax ? null : stats?.mz)}
+						type="monotoneX"
+						fill="hsla(175 60% 45% / 0.8)"
+						fillOpacity={0.5}
+						stroke="hsla(175 60% 45% / 0.8)"
+						stackId="1"
+						isAnimationActive={false}
+					/>
+					{/* )} */}
 					<Area
 						name={t`Cache / Buffers`}
 						order={1}
-						dataKey="stats.mb"
+						dataKey={({ stats }) => (showMax ? null : stats?.mb)}
 						type="monotoneX"
 						fill="hsla(160 60% 45% / 0.5)"
 						fillOpacity={0.4}
-						// strokeOpacity={1}
 						stroke="hsla(160 60% 45% / 0.5)"
 						stackId="1"
 						isAnimationActive={false}
 					/>
+					{/* <ChartLegend content={<ChartLegendContent />} /> */}
 				</AreaChart>
 			</ChartContainer>
 		</div>

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

@@ -486,7 +486,7 @@ export default function SystemDetail({ name }: { name: string }) {
 								{
 									label: t`CPU Usage`,
 									dataKey: ({ stats }) => (showMax ? stats?.cpum : stats?.cpu),
-									color: "1",
+									color: 1,
 									opacity: 0.4,
 								},
 							]}
@@ -512,8 +512,9 @@ export default function SystemDetail({ name }: { name: string }) {
 						grid={grid}
 						title={t`Memory Usage`}
 						description={t`Precise utilization at the recorded time`}
+						cornerEl={maxValSelect}
 					>
-						<MemChart chartData={chartData} />
+						<MemChart chartData={chartData} showMax={showMax} />
 					</ChartCard>
 
 					{containerFilterBar && (
@@ -546,13 +547,13 @@ export default function SystemDetail({ name }: { name: string }) {
 								{
 									label: t({ message: "Write", comment: "Disk write" }),
 									dataKey: ({ stats }) => (showMax ? stats?.dwm : stats?.dw),
-									color: "3",
+									color: 3,
 									opacity: 0.3,
 								},
 								{
 									label: t({ message: "Read", comment: "Disk read" }),
 									dataKey: ({ stats }) => (showMax ? stats?.drm : stats?.dr),
-									color: "1",
+									color: 1,
 									opacity: 0.3,
 								},
 							]}
@@ -587,7 +588,7 @@ export default function SystemDetail({ name }: { name: string }) {
 										}
 										return data?.stats?.b?.[0] ?? data?.stats?.ns * 1024 * 1024
 									},
-									color: "5",
+									color: 5,
 									opacity: 0.2,
 								},
 								{
@@ -598,7 +599,7 @@ export default function SystemDetail({ name }: { name: string }) {
 										}
 										return data?.stats?.b?.[1] ?? data?.stats?.nr * 1024 * 1024
 									},
-									color: "2",
+									color: 2,
 									opacity: 0.2,
 								},
 							]}
@@ -687,7 +688,7 @@ export default function SystemDetail({ name }: { name: string }) {
 									{
 										label: t`Charge`,
 										dataKey: ({ stats }) => stats?.bat?.[0],
-										color: "1",
+										color: 1,
 										opacity: 0.35,
 									},
 								]}
@@ -730,7 +731,7 @@ export default function SystemDetail({ name }: { name: string }) {
 												{
 													label: t`Usage`,
 													dataKey: ({ stats }) => stats?.g?.[id]?.u ?? 0,
-													color: "1",
+													color: 1,
 													opacity: 0.35,
 												},
 											]}
@@ -750,7 +751,7 @@ export default function SystemDetail({ name }: { name: string }) {
 												{
 													label: t`Usage`,
 													dataKey: ({ stats }) => stats?.g?.[id]?.mu ?? 0,
-													color: "2",
+													color: 2,
 													opacity: 0.25,
 												},
 											]}
@@ -802,13 +803,13 @@ export default function SystemDetail({ name }: { name: string }) {
 												{
 													label: t`Write`,
 													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "wm" : "w"] ?? 0,
-													color: "3",
+													color: 3,
 													opacity: 0.3,
 												},
 												{
 													label: t`Read`,
 													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "rm" : "r"] ?? 0,
-													color: "1",
+													color: 1,
 													opacity: 0.3,
 												},
 											]}

beszel/site/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { plural, t } from "@lingui/core/macro"
+import { t } from "@lingui/core/macro"
 import { toast } from "@/components/ui/use-toast"
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"

beszel/site/src/types.d.ts

@@ -30,7 +30,6 @@ export interface SystemRecord extends RecordModel {
 	info: SystemInfo
 	v: string
 	updated: string
-	
 }
 
 export interface SystemInfo {
@@ -100,6 +99,8 @@ export interface SystemStats {
 	mp: number
 	/** memory buffer + cache (gb) */
 	mb: number
+	/** max used memory (gb) */
+	mm?: number
 	/** zfs arc memory (gb) */
 	mz?: number
 	/** swap space (gb) */