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>
+	)
+}