extra fs charts and filter bar for container charts

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

@@ -9,7 +9,7 @@ import { useMemo, useRef } from 'react'
 import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
+import { $chartTime, $containerFilter } from '@/lib/stores'
 
 export default function ContainerCpuChart({
 	chartData,
@@ -21,6 +21,7 @@ export default function ContainerCpuChart({
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
+	const filter = useStore($containerFilter)
 
 	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
@@ -109,23 +110,27 @@ export default function ContainerCpuChart({
 						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
 						// @ts-ignore
 						itemSorter={(a, b) => b.value - a.value}
-						content={<ChartTooltipContent unit="%" indicator="line" />}
+						content={<ChartTooltipContent filter={filter} unit="%" indicator="line" />}
 					/>
-					{Object.keys(chartConfig).map((key) => (
-						<Area
-							key={key}
-							// isAnimationActive={chartData.length < 20}
-							isAnimationActive={false}
-							// animateNewValues={false}
-							// animationDuration={1200}
-							dataKey={key}
-							type="monotoneX"
-							fill={chartConfig[key].color}
-							fillOpacity={0.4}
-							stroke={chartConfig[key].color}
-							stackId="a"
-						/>
-					))}
+					{Object.keys(chartConfig).map((key) => {
+						const filtered = filter && !key.includes(filter)
+						let fillOpacity = filtered ? 0.05 : 0.4
+						let strokeOpacity = filtered ? 0.1 : 1
+						return (
+							<Area
+								key={key}
+								isAnimationActive={false}
+								dataKey={key}
+								type="monotoneX"
+								fill={chartConfig[key].color}
+								fillOpacity={fillOpacity}
+								stroke={chartConfig[key].color}
+								strokeOpacity={strokeOpacity}
+								activeDot={{ opacity: filtered ? 0 : 1 }}
+								stackId="a"
+							/>
+						)
+					})}
 				</AreaChart>
 			</ChartContainer>
 		</div>

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

@@ -15,7 +15,7 @@ import {
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
+import { $chartTime, $containerFilter } from '@/lib/stores'
 
 export default function ContainerMemChart({
 	chartData,
@@ -27,6 +27,7 @@ export default function ContainerMemChart({
 	const chartTime = useStore($chartTime)
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
+	const filter = useStore($containerFilter)
 
 	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
@@ -114,21 +115,27 @@ export default function ContainerMemChart({
 						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
 						// @ts-ignore
 						itemSorter={(a, b) => b.value - a.value}
-						content={<ChartTooltipContent unit=" MB" indicator="line" />}
+						content={<ChartTooltipContent filter={filter} unit=" MB" indicator="line" />}
 					/>
-					{Object.keys(chartConfig).map((key) => (
-						<Area
-							key={key}
-							// animationDuration={1200}
-							isAnimationActive={false}
-							dataKey={key}
-							type="monotoneX"
-							fill={chartConfig[key].color}
-							fillOpacity={0.4}
-							stroke={chartConfig[key].color}
-							stackId="a"
-						/>
-					))}
+					{Object.keys(chartConfig).map((key) => {
+						const filtered = filter && !key.includes(filter)
+						let fillOpacity = filtered ? 0.05 : 0.4
+						let strokeOpacity = filtered ? 0.1 : 1
+						return (
+							<Area
+								key={key}
+								isAnimationActive={false}
+								dataKey={key}
+								type="monotoneX"
+								fill={chartConfig[key].color}
+								strokeOpacity={strokeOpacity}
+								fillOpacity={fillOpacity}
+								stroke={chartConfig[key].color}
+								activeDot={filtered ? false : {}}
+								stackId="a"
+							/>
+						)
+					})}
 				</AreaChart>
 			</ChartContainer>
 		</div>

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

@@ -15,7 +15,7 @@ import {
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
+import { $chartTime, $containerFilter } from '@/lib/stores'
 import { Separator } from '@/components/ui/separator'
 
 export default function ContainerCpuChart({
@@ -28,6 +28,7 @@ export default function ContainerCpuChart({
 	const chartTime = useStore($chartTime)
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
+	const filter = useStore($containerFilter)
 
 	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
@@ -116,6 +117,7 @@ export default function ContainerCpuChart({
 						itemSorter={(a, b) => b.value - a.value}
 						content={
 							<ChartTooltipContent
+								filter={filter}
 								indicator="line"
 								contentFormatter={(item, key) => {
 									try {
@@ -136,20 +138,27 @@ export default function ContainerCpuChart({
 							/>
 						}
 					/>
-					{Object.keys(chartConfig).map((key) => (
-						<Area
-							key={key}
-							name={key}
-							// animationDuration={1200}
-							isAnimationActive={false}
-							dataKey={(data) => data?.[key]?.[2] ?? 0}
-							type="monotoneX"
-							fill={chartConfig[key].color}
-							fillOpacity={0.4}
-							stroke={chartConfig[key].color}
-							stackId="a"
-						/>
-					))}
+					{Object.keys(chartConfig).map((key) => {
+						const filtered = filter && !key.includes(filter)
+						let fillOpacity = filtered ? 0.05 : 0.4
+						let strokeOpacity = filtered ? 0.1 : 1
+						return (
+							<Area
+								key={key}
+								name={key}
+								// animationDuration={1200}
+								isAnimationActive={false}
+								dataKey={(data) => data?.[key]?.[2] ?? 0}
+								type="monotoneX"
+								fill={chartConfig[key].color}
+								fillOpacity={fillOpacity}
+								stroke={chartConfig[key].color}
+								strokeOpacity={strokeOpacity}
+								activeDot={{ opacity: filtered ? 0 : 1 }}
+								stackId="a"
+							/>
+						)
+					})}
 				</AreaChart>
 			</ChartContainer>
 		</div>

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

@@ -22,22 +22,9 @@ export default function DiskChart({
 	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	const diskSize = useMemo(() => {
-		return Math.round(systemData[0]?.stats.d)
+		return Math.round(systemData.at(-1)?.stats.d ?? NaN)
 	}, [systemData])
 
-	// const ticks = useMemo(() => {
-	// 	let ticks = [0]
-	// 	for (let i = 1; i < diskSize; i += diskSize / 5) {
-	// 		ticks.push(Math.trunc(i))
-	// 	}
-	// 	ticks.push(diskSize)
-	// 	return ticks
-	// }, [diskSize])
-
-	// if (!systemData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
 	return (
 		<div ref={chartRef}>
 			{/* {!yAxisSet && <Spinner />} */}
@@ -63,6 +50,7 @@ export default function DiskChart({
 						width={yAxisWidth}
 						domain={[0, diskSize]}
 						tickCount={9}
+						minTickGap={6}
 						tickLine={false}
 						axisLine={false}
 						unit={' GB'}

beszel/site/src/components/charts/extra-fs-disk-chart.tsx

@@ -0,0 +1,92 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+import { useMemo, useRef } from 'react'
+// import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+import { SystemStatsRecord } from '@/types'
+
+export default function ExFsDiskChart({
+	ticks,
+	systemData,
+	fs,
+}: {
+	ticks: number[]
+	systemData: SystemStatsRecord[]
+	fs: string
+}) {
+	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	const diskSize = useMemo(() => {
+		const size = systemData.at(-1)?.stats.efs?.[fs].d ?? 0
+		return size > 10 ? Math.round(size) : size
+	}, [systemData])
+
+	return (
+		<div ref={chartRef}>
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
+				<AreaChart
+					accessibilityLayer
+					data={systemData}
+					margin={{
+						top: 10,
+					}}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						domain={[0, diskSize]}
+						tickCount={9}
+						minTickGap={6}
+						tickLine={false}
+						axisLine={false}
+						unit={' GB'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit=" GB"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey={`stats.efs.${fs}.du`}
+						name="Disk Usage"
+						type="monotoneX"
+						fill="hsl(var(--chart-4))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-4))"
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+}

beszel/site/src/components/charts/extra-fs-disk-io-chart.tsx

@@ -0,0 +1,111 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import {
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+import { SystemStatsRecord } from '@/types'
+import { useMemo, useRef } from 'react'
+
+export default function ExFsDiskIoChart({
+	ticks,
+	systemData,
+	fs,
+}: {
+	ticks: number[]
+	systemData: SystemStatsRecord[]
+	fs: string
+}) {
+	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	// if (!systemData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }
+
+	return (
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
+				<AreaChart
+					accessibilityLayer
+					data={systemData}
+					margin={{
+						left: 0,
+						right: 0,
+						top: 10,
+						bottom: 0,
+					}}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickLine={false}
+						axisLine={false}
+						unit={' MB/s'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit=" MB/s"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey={`stats.efs.${fs}.w`}
+						name="Write"
+						type="monotoneX"
+						fill="hsl(var(--chart-3))"
+						fillOpacity={0.3}
+						stroke="hsl(var(--chart-3))"
+						// animationDuration={1200}
+						isAnimationActive={false}
+					/>
+					<Area
+						dataKey={`stats.efs.${fs}.r`}
+						name="Read"
+						type="monotoneX"
+						fill="hsl(var(--chart-1))"
+						fillOpacity={0.3}
+						stroke="hsl(var(--chart-1))"
+						// animationDuration={1200}
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+}

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

@@ -51,7 +51,7 @@ export default function () {
 						<Input
 							placeholder="Filter..."
 							onChange={(e) => setFilter(e.target.value)}
-							className="w-full md:w-56 lg:w-80 ml-auto pl-4"
+							className="w-full md:w-56 lg:w-80 ml-auto px-4"
 						/>
 					</div>
 				</CardHeader>

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

@@ -1,10 +1,17 @@
-import { $systems, pb, $chartTime } from '@/lib/stores'
+import { $systems, pb, $chartTime, $containerFilter } from '@/lib/stores'
 import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
 import { useStore } from '@nanostores/react'
 import Spinner from '../spinner'
-import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon } from 'lucide-react'
+import {
+	ClockArrowUp,
+	CpuIcon,
+	GlobeIcon,
+	LayoutGridIcon,
+	StretchHorizontalIcon,
+	XIcon,
+} from 'lucide-react'
 import ChartTimeSelect from '../charts/chart-time-select'
 import {
 	chartTimeData,
@@ -16,8 +23,8 @@ import {
 import { Separator } from '../ui/separator'
 import { scaleTime } from 'd3-scale'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
-import { Toggle } from '../ui/toggle'
-import { buttonVariants } from '../ui/button'
+import { Button, buttonVariants } from '../ui/button'
+import { Input } from '../ui/input'
 
 const CpuChart = lazy(() => import('../charts/cpu-chart'))
 const ContainerCpuChart = lazy(() => import('../charts/container-cpu-chart'))
@@ -29,6 +36,8 @@ const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
 const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
 const SwapChart = lazy(() => import('../charts/swap-chart'))
 const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
+const ExFsDiskChart = lazy(() => import('../charts/extra-fs-disk-chart'))
+const ExFsDiskIoChart = lazy(() => import('../charts/extra-fs-disk-io-chart'))
 
 export default function SystemDetail({ name }: { name: string }) {
 	const systems = useStore($systems)
@@ -38,6 +47,7 @@ export default function SystemDetail({ name }: { name: string }) {
 	const [system, setSystem] = useState({} as SystemRecord)
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
 	const [hasDockerStats, setHasDocker] = useState(false)
+	const netCardRef = useRef<HTMLDivElement>(null)
 	const [dockerCpuChartData, setDockerCpuChartData] = useState<Record<string, number | string>[]>(
 		[]
 	)
@@ -62,6 +72,7 @@ export default function SystemDetail({ name }: { name: string }) {
 		setDockerCpuChartData([])
 		setDockerMemChartData([])
 		setDockerNetChartData([])
+		$containerFilter.set('')
 	}
 
 	useEffect(resetCharts, [chartTime])
@@ -114,7 +125,7 @@ export default function SystemDetail({ name }: { name: string }) {
 			if (prevTime) {
 				const interval = record.created - prevTime
 				// if interval is too large, add a null record
-				if (interval - interval * 0.5 > expectedInterval) {
+				if (interval > expectedInterval / 2 + expectedInterval) {
 					// @ts-ignore
 					modifiedRecords.push({ created: null, stats: null })
 				}
@@ -195,169 +206,251 @@ export default function SystemDetail({ name }: { name: string }) {
 		return `${Math.trunc(system.info?.u / 86400)} days`
 	}, [system.info?.u])
 
+	/** Space for tooltip if more than 12 containers */
+	const bottomSpacing = useMemo(() => {
+		if (!netCardRef.current || !dockerNetChartData.length) {
+			return 0
+		}
+		const tooltipHeight = (Object.keys(dockerNetChartData[0]).length - 11) * 17.8 - 40
+		const wrapperEl = document.getElementById('chartwrap') as HTMLDivElement
+		const wrapperRect = wrapperEl.getBoundingClientRect()
+		const chartRect = netCardRef.current.getBoundingClientRect()
+		const distanceToBottom = wrapperRect.bottom - chartRect.bottom
+		return tooltipHeight - distanceToBottom
+	}, [netCardRef.current, dockerNetChartData])
+
 	if (!system.id) {
 		return null
 	}
 
 	return (
-		<div className="grid lg:grid-cols-2 gap-4 mb-10">
-			<Card className="col-span-full">
-				<div className="grid lg:flex items-center gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
-					<div>
-						<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
-						<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
-							<div className="capitalize flex gap-2 items-center">
-								<span className={cn('relative flex h-3 w-3')}>
-									{system.status === 'up' && (
+		<>
+			<div id="chartwrap" className="grid gap-4 mb-10">
+				{/* system info */}
+				<Card>
+					<div className="grid lg:flex items-center gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
+						<div>
+							<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
+							<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
+								<div className="capitalize flex gap-2 items-center">
+									<span className={cn('relative flex h-3 w-3')}>
+										{system.status === 'up' && (
+											<span
+												className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
+												style={{ animationDuration: '1.5s' }}
+											></span>
+										)}
 										<span
-											className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
-											style={{ animationDuration: '1.5s' }}
+											className={cn('relative inline-flex rounded-full h-3 w-3', {
+												'bg-green-500': system.status === 'up',
+												'bg-red-500': system.status === 'down',
+												'bg-primary/40': system.status === 'paused',
+												'bg-yellow-500': system.status === 'pending',
+											})}
 										></span>
-									)}
-									<span
-										className={cn('relative inline-flex rounded-full h-3 w-3', {
-											'bg-green-500': system.status === 'up',
-											'bg-red-500': system.status === 'down',
-											'bg-primary/40': system.status === 'paused',
-											'bg-yellow-500': system.status === 'pending',
-										})}
-									></span>
-								</span>
-								{system.status}
-							</div>
-							<Separator orientation="vertical" className="h-4 bg-primary/30" />
-							<div className="flex gap-1.5">
-								<GlobeIcon className="h-4 w-4 mt-[1px]" /> {system.host}
-							</div>
-							{system.info?.u && (
-								<TooltipProvider>
-									<Tooltip>
+									</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>
+								{system.info?.u && (
+									<TooltipProvider>
+										<Tooltip>
+											<Separator orientation="vertical" className="h-4 bg-primary/30" />
+											<TooltipTrigger asChild>
+												<div className="flex gap-1.5">
+													<ClockArrowUp className="h-4 w-4 mt-[1px]" /> {uptime}
+												</div>
+											</TooltipTrigger>
+											<TooltipContent>Uptime</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								)}
+								{system.info?.m && (
+									<>
 										<Separator orientation="vertical" className="h-4 bg-primary/30" />
-										<TooltipTrigger asChild>
-											<div className="flex gap-1.5">
-												<ClockArrowUp className="h-4 w-4 mt-[1px]" /> {uptime}
-											</div>
-										</TooltipTrigger>
-										<TooltipContent>Uptime</TooltipContent>
-									</Tooltip>
-								</TooltipProvider>
-							)}
-							{system.info?.m && (
-								<>
-									<Separator orientation="vertical" className="h-4 bg-primary/30" />
-									<div className="flex gap-1.5">
-										<CpuIcon className="h-4 w-4 mt-[1px]" />
-										{system.info.m} ({system.info.c}c / {system.info.t}t)
-									</div>
-								</>
-							)}
+										<div className="flex gap-1.5">
+											<CpuIcon className="h-4 w-4 mt-[1px]" />
+											{system.info.m} ({system.info.c}c / {system.info.t}t)
+										</div>
+									</>
+								)}
+							</div>
 						</div>
-					</div>
-					<div className="lg:ml-auto flex items-center gap-2 max-sm:-mb-1">
-						<ChartTimeSelect className="w-full lg:w-40" />
-						<TooltipProvider delayDuration={100}>
-							<Tooltip>
-								<TooltipTrigger asChild className="hidden lg:block opacity-85">
-									<span>
-										<Toggle
+						<div className="lg:ml-auto flex items-center gap-2 max-sm:-mb-1">
+							<ChartTimeSelect className="w-full lg:w-40" />
+							<TooltipProvider delayDuration={100}>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
 											aria-label="Toggle grid"
 											className={cn(
-												'p-0 border border-card',
-												buttonVariants({ variant: 'ghost', size: 'icon' })
+												buttonVariants({ variant: 'outline', size: 'icon' }),
+												'hidden lg:flex p-0 text-primary'
 											)}
-											pressed={grid}
-											onPressedChange={setGrid}
+											onClick={() => setGrid(!grid)}
 										>
-											<LayoutGridIcon className="h-[1.2rem] w-[1.2rem]" />
-										</Toggle>
-									</span>
-								</TooltipTrigger>
-								<TooltipContent>Toggle grid</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
+											{grid ? (
+												<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-85" />
+											) : (
+												<StretchHorizontalIcon className="h-[1.2rem] w-[1.2rem] opacity-85" />
+											)}
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Toggle grid</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</div>
 					</div>
-				</div>
-			</Card>
+				</Card>
 
-			<ChartCard
-				grid={grid}
-				title="Total CPU Usage"
-				description="Average system-wide CPU utilization"
-			>
-				<CpuChart ticks={ticks} systemData={systemStats} />
-			</ChartCard>
-
-			{hasDockerStats && (
-				<ChartCard
-					grid={grid}
-					title="Docker CPU Usage"
-					description="CPU utilization of docker containers"
-				>
-					<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
-				</ChartCard>
-			)}
-
-			<ChartCard
-				grid={grid}
-				title="Total Memory Usage"
-				description="Precise utilization at the recorded time"
-			>
-				<MemChart ticks={ticks} systemData={systemStats} />
-			</ChartCard>
-
-			{hasDockerStats && (
-				<ChartCard
-					grid={grid}
-					title="Docker Memory Usage"
-					description="Memory usage of docker containers"
-				>
-					<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
-				</ChartCard>
-			)}
-
-			{(systemStats.at(-1)?.stats.s ?? 0) > 0 && (
-				<ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system">
-					<SwapChart ticks={ticks} systemData={systemStats} />
-				</ChartCard>
-			)}
-
-			<ChartCard grid={grid} title="Disk Space" description="Usage of root partition">
-				<DiskChart ticks={ticks} systemData={systemStats} />
-			</ChartCard>
-
-			{systemStats.at(-1)?.stats.t && (
-				<ChartCard grid={grid} title="Temperature" description="Temperatures of system sensors">
-					<TemperatureChart ticks={ticks} systemData={systemStats} />
-				</ChartCard>
-			)}
-
-			<ChartCard grid={grid} title="Disk I/O" description="Throughput of root filesystem">
-				<DiskIoChart ticks={ticks} systemData={systemStats} />
-			</ChartCard>
-
-			<ChartCard grid={grid} title="Bandwidth" description="Network traffic of public interfaces">
-				<BandwidthChart ticks={ticks} systemData={systemStats} />
-			</ChartCard>
-
-			{hasDockerStats && dockerNetChartData.length > 0 && (
-				<>
+				{/* main charts */}
+				<div className="grid lg:grid-cols-2 gap-4">
 					<ChartCard
 						grid={grid}
-						title="Docker Network I/O"
-						description="Includes traffic between internal services"
+						title="Total CPU Usage"
+						description="Average system-wide CPU utilization"
 					>
-						<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} />
+						<CpuChart ticks={ticks} systemData={systemStats} />
 					</ChartCard>
-					{/* add space for tooltip if more than 12 containers */}
-					{Object.keys(dockerNetChartData[0]).length > 12 && (
-						<span
-							className="block"
-							style={{
-								height: (Object.keys(dockerNetChartData[0]).length - 13) * 18,
-							}}
-						/>
+
+					{hasDockerStats && (
+						<ChartCard
+							grid={grid}
+							title="Docker CPU Usage"
+							description="CPU utilization of docker containers"
+							isContainerChart={true}
+						>
+							<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
+						</ChartCard>
 					)}
-				</>
+
+					<ChartCard
+						grid={grid}
+						title="Total Memory Usage"
+						description="Precise utilization at the recorded time"
+					>
+						<MemChart ticks={ticks} systemData={systemStats} />
+					</ChartCard>
+
+					{hasDockerStats && (
+						<ChartCard
+							grid={grid}
+							title="Docker Memory Usage"
+							description="Memory usage of docker containers"
+							isContainerChart={true}
+						>
+							<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
+						</ChartCard>
+					)}
+
+					{(systemStats.at(-1)?.stats.s ?? 0) > 0 && (
+						<ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system">
+							<SwapChart ticks={ticks} systemData={systemStats} />
+						</ChartCard>
+					)}
+
+					<ChartCard grid={grid} title="Disk Space" description="Usage of root partition">
+						<DiskChart ticks={ticks} systemData={systemStats} />
+					</ChartCard>
+
+					<ChartCard grid={grid} title="Disk I/O" description="Throughput of root filesystem">
+						<DiskIoChart ticks={ticks} systemData={systemStats} />
+					</ChartCard>
+
+					<ChartCard
+						grid={grid}
+						title="Bandwidth"
+						description="Network traffic of public interfaces"
+					>
+						<BandwidthChart ticks={ticks} systemData={systemStats} />
+					</ChartCard>
+
+					{hasDockerStats && dockerNetChartData.length > 0 && (
+						<div
+							ref={netCardRef}
+							className={cn({
+								'col-span-full': !grid,
+							})}
+						>
+							<ChartCard
+								title="Docker Network I/O"
+								description="Includes traffic between internal services"
+								isContainerChart={true}
+							>
+								<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} />
+							</ChartCard>
+						</div>
+					)}
+
+					{systemStats.at(-1)?.stats.t && (
+						<ChartCard grid={grid} title="Temperature" description="Temperatures of system sensors">
+							<TemperatureChart ticks={ticks} systemData={systemStats} />
+						</ChartCard>
+					)}
+				</div>
+
+				{/* extra filesystem charts */}
+				{Object.keys(systemStats.at(-1)?.stats.efs ?? {}).length > 0 && (
+					<div className="grid lg:grid-cols-2 gap-4">
+						{Object.keys(systemStats.at(-1)?.stats.efs ?? {}).map((extraFsName) => {
+							return (
+								<div key={extraFsName} className="contents">
+									<ChartCard
+										grid={true}
+										title={`${extraFsName} Usage`}
+										description={`Disk usage of ${extraFsName}`}
+									>
+										<ExFsDiskChart ticks={ticks} systemData={systemStats} fs={extraFsName} />
+									</ChartCard>
+									<ChartCard
+										grid={true}
+										title={`${extraFsName} I/O`}
+										description={`Throughput of of ${extraFsName}`}
+									>
+										<ExFsDiskIoChart ticks={ticks} systemData={systemStats} fs={extraFsName} />
+									</ChartCard>
+								</div>
+							)
+						})}
+					</div>
+				)}
+			</div>
+
+			{/* add space for tooltip if more than 12 containers */}
+			{bottomSpacing > 0 && <span className="block" style={{ height: bottomSpacing }} />}
+		</>
+	)
+}
+
+function ContainerFilterBar() {
+	const containerFilter = useStore($containerFilter)
+
+	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		$containerFilter.set(e.target.value)
+	}, []) // Use an empty dependency array to prevent re-creation
+
+	return (
+		<div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:right-3.5">
+			<Input
+				placeholder="Filter..."
+				className="pl-4 pr-8"
+				value={containerFilter}
+				onChange={handleChange}
+			/>
+			{containerFilter && (
+				<Button
+					type="button"
+					variant="ghost"
+					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('')}
+				>
+					<XIcon className="h-4 w-4" />
+				</Button>
 			)}
 		</div>
 	)
@@ -368,22 +461,26 @@ function ChartCard({
 	description,
 	children,
 	grid,
+	isContainerChart,
 }: {
 	title: string
 	description: string
 	children: React.ReactNode
-	grid: boolean
+	grid?: boolean
+	isContainerChart?: boolean
 }) {
 	const target = useRef<HTMLDivElement>(null)
 	const [isInViewport, wrappedTargetRef] = useClampedIsInViewport({ target: target })
+
 	return (
 		<Card
-			className={cn('pb-2 sm:pb-4 even:last-of-type:col-span-full', { 'col-span-full': !grid })}
+			className={cn('pb-2 sm:pb-4 odd:last-of-type:col-span-full', { 'col-span-full': !grid })}
 			ref={wrappedTargetRef}
 		>
 			<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
 				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
+				{isContainerChart && <ContainerFilterBar />}
 			</CardHeader>
 			<CardContent className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
 				{<Spinner />}

beszel/site/src/components/systems-table/systems-table.tsx

@@ -72,7 +72,7 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 				<span
 					className={cn(
 						'absolute inset-0 w-full h-full origin-left',
-						(val < 60 && 'bg-green-500') || (val < 90 && 'bg-yellow-500') || 'bg-red-600'
+						(val < 65 && 'bg-green-500') || (val < 90 && 'bg-yellow-500') || 'bg-red-600'
 					)}
 					style={{ transform: `scalex(${val}%)` }}
 				></span>

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

@@ -100,6 +100,7 @@ const ChartTooltipContent = React.forwardRef<
 			nameKey?: string
 			labelKey?: string
 			unit?: string
+			filter?: string
 			contentFormatter?: (item: any, key: string) => React.ReactNode | string
 		}
 >(
@@ -119,6 +120,7 @@ const ChartTooltipContent = React.forwardRef<
 			nameKey,
 			labelKey,
 			unit,
+			filter,
 			itemSorter,
 			contentFormatter: content = undefined,
 		},
@@ -127,6 +129,9 @@ const ChartTooltipContent = React.forwardRef<
 		const { config } = useChart()
 
 		React.useMemo(() => {
+			if (filter) {
+				payload = payload?.filter((item) => (item.name as string)?.includes(filter))
+			}
 			if (itemSorter) {
 				// @ts-ignore
 				payload?.sort(itemSorter)

beszel/site/src/lib/stores.ts

@@ -22,3 +22,6 @@ export const $hubVersion = atom('')
 
 /** Chart time period */
 export const $chartTime = atom('1h') as WritableAtom<ChartTimes>
+
+/** Container chart filter */
+export const $containerFilter = atom('')

beszel/site/src/types.d.ts

@@ -59,6 +59,19 @@ export interface SystemStats {
 	nr: number
 	/** temperatures */
 	t?: Record<string, number>
+	/** extra filesystems */
+	efs?: Record<string, ExtraFsStats>
+}
+
+export interface ExtraFsStats {
+	/** disk size (gb) */
+	d: number
+	/** disk used (gb) */
+	du: number
+	/** total read (mb) */
+	r: number
+	/** total write (mb) */
+	w: number
 }
 
 export interface ContainerStatsRecord extends RecordModel {