site updates

site/src/components/routes/server.tsx

@@ -1,24 +1,32 @@
 import { $servers, pb } from '@/lib/stores'
 import { ContainerStatsRecord, SystemRecord } from '@/types'
-import { useEffect, useState } from 'react'
-import { useRoute } from 'wouter'
+import { Suspense, lazy, useEffect, useState } from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
 import { useStore } from '@nanostores/react'
+import Spinner from '../spinner'
+// import { CpuChart } from '../cpu-chart'
+
+const CpuChart = lazy(() => import('../cpu-chart'))
 
 function timestampToBrowserTime(timestamp: string) {
 	const date = new Date(timestamp)
 	return date.toLocaleString()
 }
 
-export function ServerDetail() {
+// function addColors(objects: Record<string, any>[]) {
+// 	objects.forEach((obj, index) => {
+// 		const hue = ((index * 360) / objects.length) % 360 // Distribute hues evenly
+// 		obj.fill = `hsl(${hue}, 100%, 50%)` // Set fill to HSL color with full saturation and 50% lightness
+// 	})
+// }
+
+export default function ServerDetail({ name }: { name: string }) {
 	const servers = useStore($servers)
-	const [_, params] = useRoute('/server/:name')
 	const [server, setServer] = useState({} as SystemRecord)
 	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
-	// const [serverId, setServerId] = useState('')
 
 	useEffect(() => {
-		document.title = params!.name
+		document.title = name
 	}, [])
 
 	useEffect(() => {
@@ -27,7 +35,7 @@ export function ServerDetail() {
 			return
 		}
 		console.log('running')
-		const matchingServer = servers.find((s) => s.name === params!.name) as SystemRecord
+		const matchingServer = servers.find((s) => s.name === name) as SystemRecord
 
 		setServer(matchingServer)
 
@@ -52,6 +60,20 @@ export function ServerDetail() {
 
 	return (
 		<>
+			<div className="grid grid-cols-1 gap-10">
+				<Card>
+					<CardHeader>
+						<CardTitle>CPU Usage</CardTitle>
+						<CardDescription>Showing total visitors for the last 30 minutes</CardDescription>
+					</CardHeader>
+					<CardContent className="pl-0 w-[calc(100%-2em)] h-72 relative">
+						<Suspense fallback={<Spinner />}>
+							<CpuChart />
+						</Suspense>
+					</CardContent>
+				</Card>
+			</div>
+
 			<Card>
 				<CardHeader>
 					<CardTitle className={'mb-3'}>{server.name}</CardTitle>