simplify system chart data

hub/site/src/components/charts/bandwidth-chart.tsx

@@ -1,45 +1,30 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import { chartTimeData, formatShortDate } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
-
-const chartConfig = {
-	recv: {
-		label: 'Received',
-		color: 'hsl(var(--chart-2))',
-	},
-	sent: {
-		label: 'Sent',
-		color: 'hsl(var(--chart-5))',
-	},
-} satisfies ChartConfig
+import { SystemStatsRecord } from '@/types'
 
 export default function BandwidthChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; sent: number; recv: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
 
-	if (!chartData.length || !ticks.length) {
+	if (!systemData.length || !ticks.length) {
 		return <Spinner />
 	}
 
 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 			<AreaChart
 				accessibilityLayer
-				data={chartData}
+				data={systemData}
 				margin={{
 					left: 0,
 					right: 0,
@@ -63,7 +48,7 @@ export default function BandwidthChart({
 					unit={' MB/s'}
 				/>
 				<XAxis
-					dataKey="time"
+					dataKey="created"
 					domain={[ticks[0], ticks.at(-1)!]}
 					ticks={ticks}
 					type="number"
@@ -79,25 +64,27 @@ export default function BandwidthChart({
 					content={
 						<ChartTooltipContent
 							unit=" MB/s"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 							indicator="line"
 						/>
 					}
 				/>
 				<Area
-					dataKey="sent"
+					dataKey="stats.ns"
+					name="Sent"
 					type="monotoneX"
-					fill="var(--color-sent)"
+					fill="hsl(var(--chart-5))"
 					fillOpacity={0.4}
-					stroke="var(--color-sent)"
+					stroke="hsl(var(--chart-5))"
 					animationDuration={1200}
 				/>
 				<Area
-					dataKey="recv"
+					dataKey="stats.nr"
+					name="Received"
 					type="monotoneX"
-					fill="var(--color-recv)"
+					fill="hsl(var(--chart-2))"
 					fillOpacity={0.4}
-					stroke="var(--color-recv)"
+					stroke="hsl(var(--chart-2))"
 					animationDuration={1200}
 				/>
 			</AreaChart>

hub/site/src/components/charts/cpu-chart.tsx

@@ -1,39 +1,28 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import { chartTimeData, formatShortDate } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
-
-const chartConfig = {
-	cpu: {
-		label: 'CPU Usage',
-		color: 'hsl(var(--chart-1))',
-	},
-} satisfies ChartConfig
+import { SystemStatsRecord } from '@/types'
 
 export default function CpuChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; cpu: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
 
-	if (!chartData.length || !ticks.length) {
+	if (!systemData.length || !ticks.length) {
 		return <Spinner />
 	}
 
 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-			<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
+		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+			<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
 				<CartesianGrid vertical={false} />
 				<YAxis
 					// domain={[0, (max: number) => Math.ceil(max)]}
@@ -43,7 +32,7 @@ export default function CpuChart({
 					unit={'%'}
 				/>
 				<XAxis
-					dataKey="time"
+					dataKey="created"
 					domain={[ticks[0], ticks.at(-1)!]}
 					ticks={ticks}
 					type="number"
@@ -59,17 +48,18 @@ export default function CpuChart({
 					content={
 						<ChartTooltipContent
 							unit="%"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 							indicator="line"
 						/>
 					}
 				/>
 				<Area
-					dataKey="cpu"
+					dataKey="stats.cpu"
+					name="CPU Usage"
 					type="monotoneX"
-					fill="var(--color-cpu)"
+					fill="hsl(var(--chart-1))"
 					fillOpacity={0.4}
-					stroke="var(--color-cpu)"
+					stroke="hsl(var(--chart-1))"
 					animationDuration={1200}
 					// animationEasing="ease-out"
 					// animateNewValues={false}

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

@@ -1,36 +1,25 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { chartTimeData, formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
 import { useMemo } from 'react'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
-
-const chartConfig = {
-	diskUsed: {
-		label: 'Disk Usage',
-		color: 'hsl(var(--chart-4))',
-	},
-} satisfies ChartConfig
+import { SystemStatsRecord } from '@/types'
 
 export default function DiskChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; disk: number; diskUsed: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
 
 	const diskSize = useMemo(() => {
-		return Math.round(chartData[0]?.disk)
-	}, [chartData])
+		return Math.round(systemData[0]?.stats.d)
+	}, [systemData])
 
 	// const ticks = useMemo(() => {
 	// 	let ticks = [0]
@@ -41,15 +30,15 @@ export default function DiskChart({
 	// 	return ticks
 	// }, [diskSize])
 
-	if (!chartData.length || !ticks.length) {
+	if (!systemData.length || !ticks.length) {
 		return <Spinner />
 	}
 
 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 			<AreaChart
 				accessibilityLayer
-				data={chartData}
+				data={systemData}
 				margin={{
 					left: 0,
 					right: 0,
@@ -68,7 +57,7 @@ export default function DiskChart({
 					unit={' GB'}
 				/>
 				<XAxis
-					dataKey="time"
+					dataKey="created"
 					domain={[ticks[0], ticks.at(-1)!]}
 					ticks={ticks}
 					type="number"
@@ -84,17 +73,18 @@ export default function DiskChart({
 					content={
 						<ChartTooltipContent
 							unit=" GB"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 							indicator="line"
 						/>
 					}
 				/>
 				<Area
-					dataKey="diskUsed"
+					dataKey="stats.du"
+					name="Disk Usage"
 					type="monotoneX"
-					fill="var(--color-diskUsed)"
+					fill="hsl(var(--chart-4))"
 					fillOpacity={0.4}
-					stroke="var(--color-diskUsed)"
+					stroke="hsl(var(--chart-4))"
 					animationDuration={1200}
 				/>
 			</AreaChart>

hub/site/src/components/charts/disk-io-chart.tsx

@@ -1,45 +1,30 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import { chartTimeData, formatShortDate } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
-
-const chartConfig = {
-	read: {
-		label: 'Read',
-		color: 'hsl(var(--chart-1))',
-	},
-	write: {
-		label: 'Write',
-		color: 'hsl(var(--chart-3))',
-	},
-} satisfies ChartConfig
+import { SystemStatsRecord } from '@/types'
 
 export default function DiskIoChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; read: number; write: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
 
-	if (!chartData.length || !ticks.length) {
+	if (!systemData.length || !ticks.length) {
 		return <Spinner />
 	}
 
 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 			<AreaChart
 				accessibilityLayer
-				data={chartData}
+				data={systemData}
 				margin={{
 					left: 0,
 					right: 0,
@@ -63,7 +48,7 @@ export default function DiskIoChart({
 					unit={' MB/s'}
 				/>
 				<XAxis
-					dataKey="time"
+					dataKey="created"
 					domain={[ticks[0], ticks.at(-1)!]}
 					ticks={ticks}
 					type="number"
@@ -79,25 +64,27 @@ export default function DiskIoChart({
 					content={
 						<ChartTooltipContent
 							unit=" MB/s"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 							indicator="line"
 						/>
 					}
 				/>
 				<Area
-					dataKey="write"
+					dataKey="stats.dw"
+					name="Write"
 					type="monotoneX"
-					fill="var(--color-write)"
+					fill="hsl(var(--chart-3))"
 					fillOpacity={0.4}
-					stroke="var(--color-write)"
+					stroke="hsl(var(--chart-3))"
 					animationDuration={1200}
 				/>
 				<Area
-					dataKey="read"
+					dataKey="stats.dr"
+					name="Read"
 					type="monotoneX"
-					fill="var(--color-read)"
+					fill="hsl(var(--chart-1))"
 					fillOpacity={0.4}
-					stroke="var(--color-read)"
+					stroke="hsl(var(--chart-1))"
 					animationDuration={1200}
 				/>
 			</AreaChart>

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

@@ -1,54 +1,36 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import { chartTimeData, formatShortDate } from '@/lib/utils'
 import { useMemo } from 'react'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
+import { SystemStatsRecord } from '@/types'
 
 export default function MemChart({
-	chartData,
 	ticks,
+	systemData,
 }: {
-	chartData: { time: number; mem: number; memUsed: number; memCache: number }[]
 	ticks: number[]
+	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
 
 	const totalMem = useMemo(() => {
-		const maxMem = Math.ceil(chartData[0]?.mem)
+		const maxMem = Math.ceil(systemData[0]?.stats.m)
 		return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
-	}, [chartData])
+	}, [systemData])
 
-	const chartConfig = useMemo(
-		() => ({
-			memCache: {
-				label: 'Cache / Buffers',
-				color: 'hsl(var(--chart-2))',
-			},
-			memUsed: {
-				label: 'Used',
-				color: 'hsl(var(--chart-2))',
-			},
-		}),
-		[]
-	) satisfies ChartConfig
-
-	if (!chartData.length || !ticks.length) {
+	if (!systemData.length || !ticks.length) {
 		return <Spinner />
 	}
 
 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 			<AreaChart
 				accessibilityLayer
-				data={chartData}
+				data={systemData}
 				margin={{
 					top: 10,
 				}}
@@ -64,7 +46,7 @@ export default function MemChart({
 					unit={' GB'}
 				/>
 				<XAxis
-					dataKey="time"
+					dataKey="created"
 					domain={[ticks[0], ticks.at(-1)!]}
 					ticks={ticks}
 					type="number"
@@ -83,27 +65,29 @@ export default function MemChart({
 							unit=" GB"
 							// @ts-ignore
 							itemSorter={(a, b) => a.name.localeCompare(b.name)}
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 							indicator="line"
 						/>
 					}
 				/>
 				<Area
-					dataKey="memUsed"
+					dataKey="stats.mu"
+					name="Used"
 					type="monotoneX"
-					fill="var(--color-memUsed)"
+					fill="hsl(var(--chart-2))"
 					fillOpacity={0.4}
-					stroke="var(--color-memUsed)"
+					stroke="hsl(var(--chart-2))"
 					stackId="a"
 					animationDuration={1200}
 				/>
 				<Area
-					dataKey="memCache"
+					dataKey="stats.mb"
+					name="Cache / Buffers"
 					type="monotoneX"
-					fill="var(--color-memCache)"
+					fill="hsl(var(--chart-2))"
 					fillOpacity={0.2}
 					strokeOpacity={0.3}
-					stroke="var(--color-memCache)"
+					stroke="hsl(var(--chart-2))"
 					stackId="a"
 					animationDuration={1200}
 				/>

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

@@ -25,22 +25,7 @@ export default function ServerDetail({ name }: { name: string }) {
 	const chartTime = useStore($chartTime)
 	const [ticks, setTicks] = useState([] as number[])
 	const [server, setServer] = useState({} as SystemRecord)
-	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
-
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
-	const [cpuChartData, setCpuChartData] = useState([] as { time: number; cpu: number }[])
-	const [memChartData, setMemChartData] = useState(
-		[] as { time: number; mem: number; memUsed: number; memCache: number }[]
-	)
-	const [diskChartData, setDiskChartData] = useState(
-		[] as { time: number; disk: number; diskUsed: number }[]
-	)
-	const [diskIoChartData, setDiskIoChartData] = useState(
-		[] as { time: number; read: number; write: number }[]
-	)
-	const [bandwidthChartData, setBandwidthChartData] = useState(
-		[] as { time: number; sent: number; recv: number }[]
-	)
 	const [dockerCpuChartData, setDockerCpuChartData] = useState(
 		[] as Record<string, number | string>[]
 	)
@@ -58,10 +43,6 @@ export default function ServerDetail({ name }: { name: string }) {
 
 	const resetCharts = useCallback(() => {
 		setSystemStats([])
-		setCpuChartData([])
-		setMemChartData([])
-		setDiskChartData([])
-		setBandwidthChartData([])
 		setDockerCpuChartData([])
 		setDockerMemChartData([])
 	}, [])
@@ -78,6 +59,13 @@ export default function ServerDetail({ name }: { name: string }) {
 		}
 	}, [name, server, systems])
 
+	// update server when new data is available
+	useEffect(() => {
+		if (updatedSystem.id === server.id) {
+			setServer(updatedSystem)
+		}
+	}, [updatedSystem])
+
 	// get stats
 	useEffect(() => {
 		if (!server.id || !chartTime) {
@@ -94,54 +82,21 @@ export default function ServerDetail({ name }: { name: string }) {
 				sort: 'created',
 			})
 			.then((records) => {
-				// console.log('sctats', records)
+				// convert created time to ms value
+				for (const record of records) {
+					record.created = new Date(record.created).getTime()
+				}
 				setSystemStats(records)
 			})
 	}, [server, chartTime])
 
-	useEffect(() => {
-		if (updatedSystem.id === server.id) {
-			setServer(updatedSystem)
-		}
-	}, [updatedSystem])
-
-	// create cpu / mem / disk data for charts
-	useEffect(() => {
-		if (!systemStats.length) {
-			return
-		}
-		const cpuData = [] as typeof cpuChartData
-		const memData = [] as typeof memChartData
-		const diskData = [] as typeof diskChartData
-		const diskIoData = [] as typeof diskIoChartData
-		const networkData = [] as typeof bandwidthChartData
-		for (let { created, stats } of systemStats) {
-			const time = new Date(created).getTime()
-			cpuData.push({ time, cpu: stats.cpu })
-			memData.push({
-				time,
-				mem: stats.m,
-				memUsed: stats.mu,
-				memCache: stats.mb,
-			})
-			diskData.push({ time, disk: stats.d, diskUsed: stats.du })
-			diskIoData.push({ time, read: stats.dr, write: stats.dw })
-			networkData.push({ time, sent: stats.ns, recv: stats.nr })
-		}
-		setCpuChartData(cpuData)
-		setMemChartData(memData)
-		setDiskChartData(diskData)
-		setDiskIoChartData(diskIoData)
-		setBandwidthChartData(networkData)
-	}, [systemStats])
-
 	useEffect(() => {
 		if (!systemStats.length) {
 			return
 		}
 		const now = new Date()
 		const startTime = chartTimeData[chartTime].getOffset(now)
-		const scale = scaleTime([startTime.getTime(), now], [0, cpuChartData.length])
+		const scale = scaleTime([startTime.getTime(), now], [0, systemStats.length])
 		setTicks(scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime()))
 	}, [chartTime, systemStats])
 
@@ -161,12 +116,13 @@ export default function ServerDetail({ name }: { name: string }) {
 				sort: 'created',
 			})
 			.then((records) => {
-				setContainers(records)
+				makeContainerData(records)
+				// setContainers(records)
 			})
 	}, [server, chartTime])
 
 	// container stats for charts
-	useEffect(() => {
+	const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => {
 		// console.log('containers', containers)
 		const dockerCpuData = [] as Record<string, number | string>[]
 		const dockerMemData = [] as Record<string, number | string>[]
@@ -182,10 +138,10 @@ export default function ServerDetail({ name }: { name: string }) {
 			dockerCpuData.push(cpuData)
 			dockerMemData.push(memData)
 		}
-		// console.log('containerMemData', containerMemData)
 		setDockerCpuChartData(dockerCpuData)
 		setDockerMemChartData(dockerMemData)
-	}, [containers])
+	}, [])
+
 	const uptime = useMemo(() => {
 		let uptime = server.info?.u || 0
 		if (uptime < 172800) {
@@ -254,7 +210,7 @@ export default function ServerDetail({ name }: { name: string }) {
 			</Card>
 
 			<ChartCard title="Total CPU Usage" description="Average system-wide CPU utilization">
-				<CpuChart chartData={cpuChartData} ticks={ticks} />
+				<CpuChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 
 			{dockerCpuChartData.length > 0 && (
@@ -264,7 +220,7 @@ export default function ServerDetail({ name }: { name: string }) {
 			)}
 
 			<ChartCard title="Total Memory Usage" description="Precise utilization at the recorded time">
-				<MemChart chartData={memChartData} ticks={ticks} />
+				<MemChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 
 			{dockerMemChartData.length > 0 && (
@@ -277,15 +233,15 @@ export default function ServerDetail({ name }: { name: string }) {
 				title="Disk Usage"
 				description="Usage of partition where the root filesystem is mounted"
 			>
-				<DiskChart chartData={diskChartData} ticks={ticks} />
+				<DiskChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 
 			<ChartCard title="Disk I/O" description="Throughput of root filesystem">
-				<DiskIoChart chartData={diskIoChartData} ticks={ticks} />
+				<DiskIoChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 
 			<ChartCard title="Bandwidth" description="Network traffic of public interfaces">
-				<BandwidthChart chartData={bandwidthChartData} ticks={ticks} />
+				<BandwidthChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 		</div>
 	)

hub/site/src/types.d.ts

@@ -57,6 +57,7 @@ export interface SystemStats {
 export interface ContainerStatsRecord extends RecordModel {
 	system: string
 	stats: ContainerStats[]
+	created: string | number
 }
 
 interface ContainerStats {
@@ -71,6 +72,7 @@ interface ContainerStats {
 export interface SystemStatsRecord extends RecordModel {
 	system: string
 	stats: SystemStats
+	created: string | number
 }
 
 export interface AlertRecord extends RecordModel {