site updates

site/src/components/routes/server.tsx

@@ -1,5 +1,5 @@
 import { $servers, pb } from '@/lib/stores'
-import { ContainerStatsRecord, SystemRecord, SystemStats, SystemStatsRecord } from '@/types'
+import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
 import { Suspense, lazy, useEffect, useState } from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
 import { useStore } from '@nanostores/react'
@@ -8,6 +8,7 @@ import CpuChart from '../charts/cpu-chart'
 import MemChart from '../charts/mem-chart'
 import DiskChart from '../charts/disk-chart'
 import ContainerCpuChart from '../charts/container-cpu-chart'
+import { CpuIcon } from 'lucide-react'
 
 // const CpuChart = lazy(() => import('../cpu-chart'))
 
@@ -29,7 +30,9 @@ export default function ServerDetail({ name }: { name: string }) {
 	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
 
 	const [serverStats, setServerStats] = useState([] as SystemStatsRecord[])
-	const [cpuChartData, setCpuChartData] = useState({} as { time: string; cpu: number }[])
+	const [cpuChartData, setCpuChartData] = useState(
+		{} as { max: number; data: { time: string; cpu: number }[] }
+	)
 	const [memChartData, setMemChartData] = useState(
 		{} as { time: string; mem: number; memUsed: number }[]
 	)
@@ -40,6 +43,16 @@ export default function ServerDetail({ name }: { name: string }) {
 		[] as Record<string, number | string>[]
 	)
 
+	useEffect(() => {
+		document.title = name
+		return () => {
+			setContainerCpuChartData([])
+			setCpuChartData({} as { max: number; data: { time: string; cpu: number }[] })
+			setMemChartData([] as { time: string; mem: number; memUsed: number }[])
+			setDiskChartData([] as { time: string; disk: number; diskUsed: number }[])
+		}
+	}, [name])
+
 	// get stats
 	useEffect(() => {
 		if (!('name' in server)) {
@@ -71,15 +84,14 @@ export default function ServerDetail({ name }: { name: string }) {
 			memData.push({ time: created, mem: stats.mem, memUsed: stats.memUsed })
 			diskData.push({ time: created, disk: stats.disk, diskUsed: stats.diskUsed })
 		}
-		setCpuChartData(cpuData.reverse())
+		setCpuChartData({
+			max: Math.ceil(Math.max(...cpuData.map((d) => d.cpu))),
+			data: cpuData.reverse(),
+		})
 		setMemChartData(memData.reverse())
 		setDiskChartData(diskData.reverse())
 	}, [serverStats])
 
-	useEffect(() => {
-		document.title = name
-	}, [name])
-
 	useEffect(() => {
 		if ($servers.get().length === 0) {
 			console.log('skipping')
@@ -117,28 +129,44 @@ export default function ServerDetail({ name }: { name: string }) {
 		for (let { created, stats } of containers) {
 			let obj = { time: created } as Record<string, number | string>
 			for (let { name, cpu } of stats) {
-				obj[name] = cpu * 10
+				obj[name] = cpu
 			}
 			containerCpuData.push(obj)
 		}
 		setContainerCpuChartData(containerCpuData.reverse())
-		console.log('containerCpuData', containerCpuData)
 	}, [containers])
 
 	return (
 		<>
-			<div className="grid grid-cols-2 gap-6 mb-10">
-				<Card className="pb-2 col-span-2">
+			<div className="grid gap-6 mb-10">
+				<Card className="pb-2">
 					<CardHeader>
-						<CardTitle>CPU Usage</CardTitle>
+						<CardTitle className="flex gap-2 justify-between">
+							<span>CPU Usage</span>
+							<CpuIcon className="opacity-70" />
+						</CardTitle>
 						<CardDescription>
 							Average usage of the one minute preceding the recorded time
 						</CardDescription>
 					</CardHeader>
 					<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
-						{/* <Suspense fallback={<Spinner />}> */}
-						<CpuChart chartData={cpuChartData} />
-						{/* </Suspense> */}
+						<Suspense fallback={<Spinner />}>
+							<CpuChart chartData={cpuChartData.data} max={cpuChartData.max} />
+						</Suspense>
+					</CardContent>
+				</Card>
+				<Card className="pb-2">
+					<CardHeader>
+						<CardTitle className="flex gap-2 justify-between">
+							<span>Docker CPU Usage</span>
+							<CpuIcon className="opacity-70" />
+						</CardTitle>{' '}
+						<CardDescription>CPU usage of docker containers</CardDescription>
+					</CardHeader>
+					<CardContent className={'pl-1 w-[calc(100%-2em)] h-52 relative'}>
+						<Suspense fallback={<Spinner />}>
+							<ContainerCpuChart chartData={containerCpuChartData} max={cpuChartData.max} />
+						</Suspense>
 					</CardContent>
 				</Card>
 				<Card className="pb-2">
@@ -163,21 +191,6 @@ export default function ServerDetail({ name }: { name: string }) {
 						{/* </Suspense> */}
 					</CardContent>
 				</Card>
-				<Card className="pb-2 col-span-2">
-					<CardHeader>
-						<CardTitle>Container CPU Usage</CardTitle>
-						<CardDescription>
-							Average usage of the one minute preceding the recorded time
-						</CardDescription>
-					</CardHeader>
-					<CardContent className={'pl-1 w-[calc(100%-2em)] h-64 relative'}>
-						{/* <Suspense fallback={<Spinner />}> */}
-						{containerCpuChartData.length > 0 && (
-							<ContainerCpuChart chartData={containerCpuChartData} />
-						)}
-						{/* </Suspense> */}
-					</CardContent>
-				</Card>
 			</div>
 
 			<Card>