site updates

site/src/components/routes/home.tsx

@@ -2,20 +2,15 @@ import { useEffect } from 'react'
 import { $servers, pb } from '@/lib/stores'
 import { DataTable } from '../server-table/data-table'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { useStore } from '@nanostores/react'
 import { SystemRecord } from '@/types'
+import { updateServerList } from '@/lib/utils'
 
 export function Home() {
-	const servers = useStore($servers)
-	// const [systems, setSystems] = useState([] as SystemRecord[])
-
 	useEffect(() => {
 		document.title = 'Home'
 	}, [])
 
-	useEffect(() => {
-		console.log('servers', servers)
-	}, [servers])
+	useEffect(updateServerList, [])
 
 	useEffect(() => {
 		pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
@@ -52,9 +47,9 @@ export function Home() {
 		<>
 			<Card>
 				<CardHeader>
-					<CardTitle className={'mb-3'}>All Servers</CardTitle>
+					<CardTitle className={'mb-1.5'}>All Servers</CardTitle>
 					<CardDescription>
-						Press{' '}
+						Updated in real time. Press{' '}
 						<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
 							<span className="text-xs">⌘</span>K
 						</kbd>{' '}

site/src/components/routes/server.tsx

@@ -1,36 +1,77 @@
-import { pb } from '@/lib/stores'
-import { SystemRecord } from '@/types'
+import { $servers, pb } from '@/lib/stores'
+import { ContainerStatsRecord, SystemRecord } from '@/types'
 import { useEffect, useState } from 'react'
 import { useRoute } from 'wouter'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
+import { useStore } from '@nanostores/react'
+
+function timestampToBrowserTime(timestamp: string) {
+	const date = new Date(timestamp)
+	return date.toLocaleString()
+}
 
 export function ServerDetail() {
+	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
 	}, [])
 
 	useEffect(() => {
-		pb.collection<SystemRecord>('systems')
-			.getFirstListItem(`name="${params!.name}"`)
-			.then((record) => {
-				setServer(record)
+		if ($servers.get().length === 0) {
+			console.log('skipping')
+			return
+		}
+		console.log('running')
+		const matchingServer = servers.find((s) => s.name === params!.name) as SystemRecord
+
+		setServer(matchingServer)
+
+		console.log('matchingServer', matchingServer)
+		// pb.collection<SystemRecord>('systems')
+		// 	.getOne(serverId)
+		// 	.then((record) => {
+		// 		setServer(record)
+		// 	})
+
+		pb.collection<ContainerStatsRecord>('container_stats')
+			.getList(1, 2, {
+				filter: `system="${matchingServer.id}"`,
+				fields: 'created,stats',
+				sort: '-created',
 			})
-	}, [])
+			.then((records) => {
+				console.log('records', records)
+				setContainers(records.items)
+			})
+	}, [servers])
 
 	return (
 		<>
 			<Card>
 				<CardHeader>
 					<CardTitle className={'mb-3'}>{server.name}</CardTitle>
-					<CardDescription>5.342.34.234</CardDescription>
+					<CardDescription>
+						{server.ip} - last updated: {timestampToBrowserTime(server.updated)}
+					</CardDescription>
 				</CardHeader>
 				<CardContent>
 					<pre>{JSON.stringify(server, null, 2)}</pre>
 				</CardContent>
 			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle className={'mb-3'}>Containers</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<pre>{JSON.stringify(containers, null, 2)}</pre>
+				</CardContent>
+			</Card>
 		</>
 	)
 }

site/src/components/server-table/data-table.tsx

@@ -239,7 +239,17 @@ export function DataTable() {
 						<TableBody>
 							{table.getRowModel().rows?.length ? (
 								table.getRowModel().rows.map((row) => (
-									<TableRow key={row.original.id} data-state={row.getIsSelected() && 'selected'}>
+									<TableRow
+										key={row.original.id}
+										data-state={row.getIsSelected() && 'selected'}
+										className="cursor-pointer"
+										onClick={(e) => {
+											const target = e.target as HTMLElement
+											if (target.tagName !== 'BUTTON' && !target.hasAttribute('role')) {
+												navigate(`/server/${row.original.name}`)
+											}
+										}}
+									>
 										{row.getVisibleCells().map((cell) => (
 											<TableCell
 												key={cell.id}

site/src/components/theme-provider.tsx

@@ -23,7 +23,7 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
 export function ThemeProvider({
 	children,
 	defaultTheme = 'system',
-	storageKey = 'vite-ui-theme',
+	storageKey = 'ui-theme',
 	...props
 }: ThemeProviderProps) {
 	const [theme, setTheme] = useState<Theme>(
@@ -62,10 +62,4 @@ export function ThemeProvider({
 	)
 }
 
-export const useTheme = () => {
-	const context = useContext(ThemeProviderContext)
-
-	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider')
-
-	return context
-}
+export const useTheme = () => useContext(ThemeProviderContext)

site/src/lib/utils.ts

@@ -1,6 +1,8 @@
 import { toast } from '@/components/ui/use-toast'
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+import { $servers, pb } from './stores'
+import { SystemRecord } from '@/types'
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
@@ -21,3 +23,11 @@ export async function copyToClipboard(content: string) {
 		})
 	}
 }
+
+export const updateServerList = () => {
+	pb.collection<SystemRecord>('systems')
+		.getFullList({ sort: '+name' })
+		.then((records) => {
+			$servers.set(records)
+		})
+}

site/src/main.tsx

@@ -5,15 +5,14 @@ import { Route, Switch } from 'wouter'
 import { Home } from './components/routes/home.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
 import LoginPage from './components/login.tsx'
-import { $authenticated, $servers, pb } from './lib/stores.ts'
+import { $authenticated } from './lib/stores.ts'
 import { ServerDetail } from './components/routes/server.tsx'
 import { ModeToggle } from './components/mode-toggle.tsx'
 import { CommandPalette } from './components/command-palette.tsx'
-import { cn } from './lib/utils.ts'
+import { cn, updateServerList } from './lib/utils.ts'
 import { buttonVariants } from './components/ui/button.tsx'
 import { Github } from 'lucide-react'
 import { useStore } from '@nanostores/react'
-import { SystemRecord } from './types'
 import { Toaster } from './components/ui/toaster.tsx'
 
 const App = () => {
@@ -24,13 +23,7 @@ const App = () => {
 
 const Main = () => {
 	// get servers
-	useEffect(() => {
-		pb.collection<SystemRecord>('systems')
-			.getFullList({ sort: '+name' })
-			.then((records) => {
-				$servers.set(records)
-			})
-	}, [])
+	useEffect(updateServerList, [])
 
 	return (
 		<div className="container mt-7 mb-14">

site/src/types.d.ts

@@ -17,3 +17,15 @@ export interface SystemStats {
 	memPct: number
 	memUsed: number
 }
+
+export interface ContainerStatsRecord extends RecordModel {
+	system: string
+	stats: ContainerStats
+}
+
+interface ContainerStats {
+	name: string
+	cpu: number
+	mem: number
+	mempct: number
+}