update to use ssh

2025-10-19 17:59:28 +08:00 · 2024-07-09 19:44:09 -04:00
parent 04c14ad4ab
commit 7af8671134
14 changed files with 639 additions and 181 deletions
--- a/site/bun.lockb
+++ b/site/bun.lockb
--- a/site/index.html
+++ b/site/index.html
@@ -1,13 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Preact + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Home</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+			rel="stylesheet"
+		/>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
 </html>
--- a/site/src/components/add-server.tsx
+++ b/site/src/components/add-server.tsx
@@ -0,0 +1,119 @@
+import { Button } from '@/components/ui/button'
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { pb } from '@/lib/stores'
+import { Plus } from 'lucide-react'
+import { MutableRef, useRef, useState } from 'preact/hooks'
+
+function copyDockerCompose(port: string) {
+	console.log('copying docker compose')
+	navigator.clipboard.writeText(`services:
+  agent:
+    image: 'henrygd/monitor-agent'
+    container_name: 'monitor-agent'
+    restart: unless-stopped
+    ports:
+      - '${port}:45876'
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock`)
+}
+
+export function AddServerButton() {
+	const [open, setOpen] = useState(false)
+	const port = useRef() as MutableRef<HTMLInputElement>
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault()
+		const formData = new FormData(e.target as HTMLFormElement)
+		const stats = {
+			cpu: 0,
+			mem: 0,
+			memUsed: 0,
+			memPct: 0,
+			disk: 0,
+			diskUsed: 0,
+			diskPct: 0,
+		}
+		const data = { stats } as Record<string, any>
+		for (const [key, value] of formData) {
+			data[key.slice(2)] = value
+		}
+		console.log(data)
+
+		try {
+			const record = await pb.collection('systems').create(data)
+			console.log(record)
+			setOpen(false)
+		} catch (e) {
+			console.log(e)
+		}
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline" className="flex gap-1">
+					<Plus className="h-4 w-4 mr-auto" />
+					Add Server
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>Add New Server</DialogTitle>
+					<DialogDescription>
+						The agent must be running on the server to connect. Copy the{' '}
+						<code class="bg-muted px-1 rounded-sm">docker-compose.yml</code> for the agent below.
+					</DialogDescription>
+				</DialogHeader>
+				<form name="testing" action="/" onSubmit={handleSubmit}>
+					<div className="grid gap-4 py-4">
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label for="s-name" className="text-right">
+								Name
+							</Label>
+							<Input id="s-name" name="s-name" className="col-span-3" required />
+						</div>
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label for="s-ip" className="text-right">
+								IP Address
+							</Label>
+							<Input id="s-ip" name="s-ip" className="col-span-3" required />
+						</div>
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label for="s-port" className="text-right">
+								Port
+							</Label>
+							<Input
+								ref={port}
+								name="s-port"
+								id="s-port"
+								defaultValue="45876"
+								className="col-span-3"
+								required
+							/>
+						</div>
+					</div>
+					<DialogFooter>
+						<Button
+							type="button"
+							variant={'ghost'}
+							onClick={() => copyDockerCompose(port.current.value)}
+						>
+							Copy docker compose
+						</Button>
+						<Button>Add server</Button>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	)
+}
--- a/site/src/components/routes/home.tsx
+++ b/site/src/components/routes/home.tsx
@@ -53,7 +53,7 @@ export function Home() {
 					<CardTitle className={'mb-3'}>All Servers</CardTitle>
 					<CardDescription>
 						Press{' '}
-						<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+						<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>{' '}
 						to open the command palette.
--- a/site/src/components/server-table/data-table.tsx
+++ b/site/src/components/server-table/data-table.tsx
@@ -20,7 +20,7 @@ import {
 	TableRow,
 } from '@/components/ui/table'

-import { Button } from '@/components/ui/button'
+import { Button, buttonVariants } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'

 import {
@@ -44,28 +44,29 @@ import {
 } from '@/components/ui/alert-dialog'

 import { SystemRecord } from '@/types'
-import { MoreHorizontal, ArrowUpDown, Copy, RefreshCcw, Eye } from 'lucide-react'
+import { MoreHorizontal, ArrowUpDown, Copy, RefreshCcw } from 'lucide-react'
 import { useMemo, useState } from 'preact/hooks'
 import { navigate } from 'wouter-preact/use-browser-location'
 import { $servers, pb } from '@/lib/stores'
 import { useStore } from '@nanostores/preact'
+import { AddServerButton } from '../add-server'
+import clsx from 'clsx'
+import { cn } from '@/lib/utils'

 function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	const val = info.getValue() as number
-	let background = '#42b768'
+	let color = 'green'
 	if (val > 80) {
-		// red
-		background = '#da2a49'
+		color = 'red'
 	} else if (val > 50) {
-		// yellow
-		background = '#daa42a'
+		color = 'yellow'
 	}
 	return (
 		<div class="flex gap-2 items-center">
 			<span class="grow block bg-muted h-4 relative rounded-sm overflow-hidden">
 				<span
-					className="absolute inset-0 w-full h-full origin-left"
-					style={{ transform: `scalex(${val}%)`, background }}
+					className={clsx('absolute inset-0 w-full h-full origin-left', `bg-${color}-500`)}
+					style={{ transform: `scalex(${val}%)` }}
 				></span>
 			</span>
 			<span class="w-16">{val.toFixed(2)}%</span>
@@ -90,6 +91,8 @@ export function DataTable() {
 	const data = useStore($servers)
 	const [liveUpdates, setLiveUpdates] = useState(true)
 	const [deleteServer, setDeleteServer] = useState({} as SystemRecord)
+	const [sorting, setSorting] = useState<SortingState>([])
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])

 	const columns: ColumnDef<SystemRecord>[] = useMemo(
 		() => [
@@ -97,8 +100,15 @@ export function DataTable() {
 				// size: 70,
 				accessorKey: 'name',
 				cell: (info) => (
-					<span className="flex gap-2 items-center text-base">
-						{info.getValue() as string}{' '}
+					<span className="flex gap-1.5 items-center text-base">
+						<span
+							className={clsx(
+								'w-2.5 h-2.5 block left-0 rounded-full',
+								info.row.original.active ? 'bg-green-500' : 'bg-red-500'
+							)}
+							style={{ marginBottom: '-1px' }}
+						></span>
+						{info.getValue() as string}
 						<button
 							title={`Copy "${info.getValue() as string}" to clipboard`}
 							class="opacity-50 hover:opacity-70 active:opacity-100 duration-75"
@@ -106,7 +116,6 @@ export function DataTable() {
 						>
 							<Copy className="h-3.5 w-3.5 " />
 						</button>
-						{/* </Button> */}
 					</span>
 				),
 				header: ({ column }) => sortableHeader(column, 'Server'),
@@ -151,7 +160,7 @@ export function DataTable() {
 									>
 										View details
 									</DropdownMenuItem>
-									<DropdownMenuItem onClick={() => navigator.clipboard.writeText(system.id)}>
+									<DropdownMenuItem onClick={() => navigator.clipboard.writeText(system.ip)}>
 										Copy IP address
 									</DropdownMenuItem>
 									<DropdownMenuSeparator />
@@ -172,10 +181,6 @@ export function DataTable() {
 		[]
 	)

-	const [sorting, setSorting] = useState<SortingState>([])
-
-	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-
 	const table = useReactTable({
 		data,
 		columns,
@@ -191,79 +196,89 @@ export function DataTable() {
 	})

 	return (
-		<div className="w-full">
-			<div className="flex items-center mb-4">
-				<Input
-					// @ts-ignore
-					placeholder="Filter..."
-					value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-					onChange={(event: Event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-					className="max-w-sm"
-				/>
-				<div className="ml-auto flex gap-3">
-					{liveUpdates || (
-						<Button
+		<>
+			<div className="w-full">
+				<div className="flex items-center mb-4">
+					<Input
+						// @ts-ignore
+						placeholder="Filter..."
+						value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+						onChange={(event: Event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+						className="max-w-sm"
+					/>
+					<div className="ml-auto flex gap-2">
+						{liveUpdates || (
+							<Button
+								variant="outline"
+								onClick={() => {
+									alert('todo: refresh')
+								}}
+								className="flex gap-2"
+							>
+								<RefreshCcw className="h-4 w-4" />
+								Refresh
+							</Button>
+						)}
+						{/* <Button
 							variant="outline"
 							onClick={() => {
-								alert('todo: refresh')
+								setLiveUpdates(!liveUpdates)
 							}}
 							className="flex gap-2"
 						>
-							Refresh
-							<RefreshCcw className="h-4 w-4" />
-						</Button>
-					)}
-					<Button
-						variant="outline"
-						onClick={() => {
-							setLiveUpdates(!liveUpdates)
-						}}
-						className="flex gap-2"
-					>
-						Live Updates
-						<div
-							className={`h-2.5 w-2.5 rounded-full ${liveUpdates ? 'bg-green-500' : 'bg-red-500'}`}
-						/>
-					</Button>
-				</div>
-			</div>
-			<div className="rounded-md border">
-				<Table>
-					<TableHeader className="bg-muted/40">
-						{table.getHeaderGroups().map((headerGroup) => (
-							<TableRow key={headerGroup.id}>
-								{headerGroup.headers.map((header) => {
-									return (
-										<TableHead className="px-2" key={header.id}>
-											{header.isPlaceholder
-												? null
-												: flexRender(header.column.columnDef.header, header.getContext())}
-										</TableHead>
-									)
+							<span
+								className={clsx('h-2.5 w-2.5 rounded-full', {
+									'bg-green-500': liveUpdates,
+									'bg-red-500': !liveUpdates,
 								})}
-							</TableRow>
-						))}
-					</TableHeader>
-					<TableBody>
-						{table.getRowModel().rows?.length ? (
-							table.getRowModel().rows.map((row) => (
-								<TableRow key={row.original.id} data-state={row.getIsSelected() && 'selected'}>
-									{row.getVisibleCells().map((cell) => (
-										<TableCell key={cell.id} style={{ width: `${cell.column.getSize()}px` }}>
-											{flexRender(cell.column.columnDef.cell, cell.getContext())}
-										</TableCell>
-									))}
+							/>
+							Live Updates
+						</Button> */}
+						<AddServerButton />
+					</div>
+				</div>
+				<div className="rounded-md border overflow-hidden">
+					<Table>
+						<TableHeader className="bg-muted/40">
+							{table.getHeaderGroups().map((headerGroup) => (
+								<TableRow key={headerGroup.id}>
+									{headerGroup.headers.map((header) => {
+										return (
+											<TableHead className="px-2" key={header.id}>
+												{header.isPlaceholder
+													? null
+													: flexRender(header.column.columnDef.header, header.getContext())}
+											</TableHead>
+										)
+									})}
 								</TableRow>
-							))
-						) : (
-							<TableRow>
-								<TableCell colSpan={columns.length} className="h-24 text-center">
-									No results.
-								</TableCell>
-							</TableRow>
-						)}
-					</TableBody>
-				</Table>
+							))}
+						</TableHeader>
+						<TableBody>
+							{table.getRowModel().rows?.length ? (
+								table.getRowModel().rows.map((row) => (
+									<TableRow key={row.original.id} data-state={row.getIsSelected() && 'selected'}>
+										{row.getVisibleCells().map((cell) => (
+											<TableCell
+												key={cell.id}
+												style={{ width: `${cell.column.getSize()}px` }}
+												className={'overflow-hidden relative'}
+											>
+												{flexRender(cell.column.columnDef.cell, cell.getContext())}
+											</TableCell>
+										))}
+									</TableRow>
+								))
+							) : (
+								<TableRow>
+									<TableCell colSpan={columns.length} className="h-24 text-center">
+										No servers found
+									</TableCell>
+								</TableRow>
+							)}
+						</TableBody>
+					</Table>
+				</div>
 			</div>
 			<AlertDialog open={deleteServer?.name}>
 				<AlertDialogContent>
@@ -281,6 +296,7 @@ export function DataTable() {
 							Cancel
 						</AlertDialogCancel>
 						<AlertDialogAction
+							className={cn(buttonVariants({ variant: 'destructive' }))}
 							onClick={() => {
 								setDeleteServer({} as SystemRecord)
 								pb.collection('systems').delete(deleteServer.id)
@@ -291,6 +307,6 @@ export function DataTable() {
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
-		</div>
+		</>
 	)
 }
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -13,7 +13,7 @@
 		--primary-foreground: 0 0% 100%;
 		--secondary: 240 4.76% 95.88%;
 		--secondary-foreground: 240 5.88% 10%;
-		--muted: 0 5.56% 94%;
+		--muted: 26 6% 90%;
 		--muted-foreground: 24 2.79% 35.1%;
 		--accent: 20 23.08% 93%;
 		--accent-foreground: 240 5.88% 10%;
--- a/site/src/lib/stores.ts
+++ b/site/src/lib/stores.ts
@@ -6,9 +6,9 @@ export const pb = new PocketBase('/')
 // @ts-ignore
 pb.authStore.storageKey = 'pb_admin_auth'

-export const $authenticated = atom(pb.authStore.isValid)
 export const $servers = atom([] as SystemRecord[])

+export const $authenticated = atom(pb.authStore.isValid)
 pb.authStore.onChange(() => {
 	$authenticated.set(pb.authStore.isValid)
 })
--- a/site/src/main.tsx
+++ b/site/src/main.tsx
@@ -1,6 +1,6 @@
 import './index.css'
 import { render } from 'preact'
-import { Link, Route, Switch } from 'wouter-preact'
+import { Route, Switch } from 'wouter-preact'
 import { Home } from './components/routes/home.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
 import LoginPage from './components/login.tsx'
--- a/site/src/types.d.ts
+++ b/site/src/types.d.ts
@@ -2,6 +2,9 @@ import { RecordModel } from 'pocketbase'

 export interface SystemRecord extends RecordModel {
 	name: string
+	ip: string
+	active: boolean
+	port: string
 	stats: SystemStats
 }

--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -1,77 +1,95 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-  ],
-  prefix: "",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-}
+	darkMode: ['class'],
+	content: [
+		'./pages/**/*.{ts,tsx}',
+		'./components/**/*.{ts,tsx}',
+		'./app/**/*.{ts,tsx}',
+		'./src/**/*.{ts,tsx}',
+	],
+	prefix: '',
+	theme: {
+		container: {
+			center: true,
+			padding: '2rem',
+			screens: {
+				'2xl': '1400px',
+			},
+		},
+		fontFamily: {
+			sans: ['Inter', 'sans-serif'],
+			// body: ['Inter', 'sans-serif'],
+			// display: ['Inter', 'sans-serif'],
+		},
+		extend: {
+			colors: {
+				green: {
+					50: '#EBF9F0',
+					100: '#D8F3E1',
+					200: '#ADE6C0',
+					300: '#85DBA2',
+					400: '#5ACE81',
+					500: '#38BB63',
+					600: '#2D954F',
+					700: '#22723D',
+					800: '#164B28',
+					900: '#0C2715',
+					950: '#06140A',
+				},
+				border: 'hsl(var(--border))',
+				input: 'hsl(var(--input))',
+				ring: 'hsl(var(--ring))',
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				primary: {
+					DEFAULT: 'hsl(var(--primary))',
+					foreground: 'hsl(var(--primary-foreground))',
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))',
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))',
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))',
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))',
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))',
+				},
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))',
+				},
+			},
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)',
+			},
+			keyframes: {
+				'accordion-down': {
+					from: { height: '0' },
+					to: { height: 'var(--radix-accordion-content-height)' },
+				},
+				'accordion-up': {
+					from: { height: 'var(--radix-accordion-content-height)' },
+					to: { height: '0' },
+				},
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out',
+			},
+		},
+	},
+	plugins: [require('tailwindcss-animate')],
+}
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@@ -4,6 +4,9 @@ import path from 'path'

 export default defineConfig({
 	plugins: [preact()],
+	esbuild: {
+		legalComments: 'external',
+	},
 	resolve: {
 		alias: {
 			'@': path.resolve(__dirname, './src'),