update to use ssh

main.go

@@ -1,6 +1,10 @@
 package main
 
 import (
+	"bytes"
+	"crypto/ed25519"
+	"encoding/json"
+	"encoding/pem"
 	"fmt"
 	"log"
 	_ "monitor-site/migrations"
@@ -14,12 +18,17 @@ import (
 	"github.com/pocketbase/pocketbase"
 	"github.com/pocketbase/pocketbase/apis"
 	"github.com/pocketbase/pocketbase/core"
+	"github.com/pocketbase/pocketbase/models"
 	"github.com/pocketbase/pocketbase/plugins/migratecmd"
 	"github.com/pocketbase/pocketbase/tools/cron"
+	"golang.org/x/crypto/ssh"
 )
 
+var app *pocketbase.PocketBase
+var serverConnections = make(map[string]Server)
+
 func main() {
-	app := pocketbase.New()
+	app = pocketbase.New()
 
 	// loosely check if it was executed using "go run"
 	isGoRun := strings.HasPrefix(os.Args[0], os.TempDir())
@@ -58,12 +67,12 @@ func main() {
 			// Format the time as a string
 			timeString := oneMonthAgo.Format("2006-01-02 15:04:05")
 			// collections to be cleaned
-			collections := []string{"systems", "system_stats", "container_stats"}
+			collections := []string{"system_stats", "container_stats"}
 
 			for _, collection := range collections {
 				records, err := app.Dao().FindRecordsByFilter(
 					collection,
-					fmt.Sprintf("updated <= \"%s\"", timeString), // filter
+					fmt.Sprintf("created <= \"%s\"", timeString), // filter
 					"", // sort
 					-1, // limit
 					0,  // offset
@@ -84,7 +93,220 @@ func main() {
 		return nil
 	})
 
+	app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
+		go serverUpdateTicker()
+		return nil
+	})
+
 	if err := app.Start(); err != nil {
 		log.Fatal(err)
 	}
 }
+
+func serverUpdateTicker() {
+	ticker := time.NewTicker(5 * time.Second)
+	for range ticker.C {
+		updateServers()
+	}
+}
+
+func updateServers() {
+	// serverCount := len(serverConnections)
+	// fmt.Println("server count: ", serverCount)
+	query := app.Dao().RecordQuery("systems").
+		// todo check that asc is correct
+		OrderBy("updated ASC").
+		// todo get total count of servers and divide by 4 or something
+		Limit(1)
+
+	records := []*models.Record{}
+	if err := query.All(&records); err != nil {
+		app.Logger().Error("Failed to get servers: ", "err", err)
+		// return nil, err
+	}
+
+	for _, record := range records {
+		var server Server
+		// check if server connection data exists
+		if _, ok := serverConnections[record.Id]; ok {
+			server = serverConnections[record.Id]
+		} else {
+			// create server connection struct
+			server = Server{
+				Ip:   record.Get("ip").(string),
+				Port: record.Get("port").(string),
+			}
+			client, err := getServerConnection(&server)
+			if err != nil {
+				app.Logger().Error("Failed to connect:", "err", err, "server", server.Ip, "port", server.Port)
+				// todo update record to not connected
+				record.Set("active", false)
+				delete(serverConnections, record.Id)
+				continue
+			}
+			server.Client = client
+			serverConnections[record.Id] = server
+		}
+		// get server stats
+		systemData, err := requestJson(&server)
+		if err != nil {
+			app.Logger().Error("Failed to get server stats: ", "err", err)
+			record.Set("active", false)
+			if server.Client != nil {
+				server.Client.Close()
+			}
+			delete(serverConnections, record.Id)
+			continue
+		}
+		// update system record
+		record.Set("active", true)
+		record.Set("stats", systemData.System)
+		if err := app.Dao().SaveRecord(record); err != nil {
+			app.Logger().Error("Failed to update record: ", "err", err)
+		}
+		// add new system_stats record
+		system_stats, _ := app.Dao().FindCollectionByNameOrId("system_stats")
+		system_stats_record := models.NewRecord(system_stats)
+		system_stats_record.Set("system", record.Id)
+		system_stats_record.Set("stats", systemData.System)
+		if err := app.Dao().SaveRecord(system_stats_record); err != nil {
+			app.Logger().Error("Failed to save record: ", "err", err)
+		}
+		// add new container_stats record
+		if len(systemData.Containers) > 0 {
+			container_stats, _ := app.Dao().FindCollectionByNameOrId("container_stats")
+			container_stats_record := models.NewRecord(container_stats)
+			container_stats_record.Set("system", record.Id)
+			container_stats_record.Set("stats", systemData.Containers)
+			if err := app.Dao().SaveRecord(container_stats_record); err != nil {
+				app.Logger().Error("Failed to save record: ", "err", err)
+			}
+		}
+	}
+}
+
+func getServerConnection(server *Server) (*ssh.Client, error) {
+	// app.Logger().Debug("new ssh connection", "server", server.Ip)
+	key, err := getSSHKey()
+	if err != nil {
+		app.Logger().Error("Failed to get SSH key: ", "err", err)
+		return nil, err
+	}
+	time.Sleep(time.Second)
+
+	// Create the Signer for this private key.
+	signer, err := ssh.ParsePrivateKey(key)
+	if err != nil {
+		return nil, err
+	}
+
+	config := &ssh.ClientConfig{
+		User: "u",
+		Auth: []ssh.AuthMethod{
+			ssh.PublicKeys(signer),
+		},
+		HostKeyCallback: ssh.InsecureIgnoreHostKey(),
+		Timeout:         5 * time.Second,
+	}
+
+	client, err := ssh.Dial("tcp", fmt.Sprintf("%s:%s", server.Ip, server.Port), config)
+	if err != nil {
+		return nil, err
+	}
+
+	return client, nil
+}
+
+func requestJson(server *Server) (SystemData, error) {
+	session, err := server.Client.NewSession()
+	if err != nil {
+		return SystemData{}, err
+	}
+	defer session.Close()
+
+	// Create a buffer to capture the output
+	var outputBuffer bytes.Buffer
+	session.Stdout = &outputBuffer
+
+	if err := session.Shell(); err != nil {
+		return SystemData{}, err
+	}
+
+	err = session.Wait()
+	if err != nil {
+		return SystemData{}, err
+	}
+
+	// Unmarshal the output into our struct
+	var systemData SystemData
+	err = json.Unmarshal(outputBuffer.Bytes(), &systemData)
+	if err != nil {
+		return SystemData{}, err
+	}
+
+	return systemData, nil
+}
+
+func getSSHKey() ([]byte, error) {
+	// check if the key pair already exists
+	existingKey, err := os.ReadFile("./pb_data/id_ed25519")
+	if err == nil {
+		return existingKey, nil
+	}
+
+	// Generate the Ed25519 key pair
+	pubKey, privKey, err := ed25519.GenerateKey(nil)
+	if err != nil {
+		// app.Logger().Error("Error generating key pair:", "err", err)
+		return nil, err
+	}
+
+	// Get the private key in OpenSSH format
+	privKeyBytes, err := ssh.MarshalPrivateKey(privKey, "")
+	if err != nil {
+		// app.Logger().Error("Error marshaling private key:", "err", err)
+		return nil, err
+	}
+
+	// Save the private key to a file
+	privateFile, err := os.Create("./pb_data/id_ed25519")
+	if err != nil {
+		// app.Logger().Error("Error creating private key file:", "err", err)
+		return nil, err
+	}
+	defer privateFile.Close()
+
+	if err := pem.Encode(privateFile, privKeyBytes); err != nil {
+		// app.Logger().Error("Error writing private key to file:", "err", err)
+		return nil, err
+	}
+
+	// Generate the public key in OpenSSH format
+	publicKey, err := ssh.NewPublicKey(pubKey)
+	if err != nil {
+		return nil, err
+	}
+
+	pubKeyBytes := ssh.MarshalAuthorizedKey(publicKey)
+
+	// Save the public key to a file
+	publicFile, err := os.Create("./pb_data/id_ed25519.pub")
+	if err != nil {
+		return nil, err
+	}
+	defer publicFile.Close()
+
+	if _, err := publicFile.Write(pubKeyBytes); err != nil {
+		return nil, err
+	}
+
+	app.Logger().Info("ed25519 SSH key pair generated successfully.")
+	app.Logger().Info("Private key saved to: pb_data/id_ed25519")
+	app.Logger().Info("Public key saved to: pb_data/id_ed25519.pub")
+
+	existingKey, err = os.ReadFile("./pb_data/id_ed25519")
+	if err == nil {
+		return existingKey, nil
+	}
+	return nil, err
+}

migrations/1720568457_collections_snapshot.go

@@ -15,7 +15,7 @@ func init() {
 			{
 				"id": "_pb_users_auth_",
 				"created": "2024-07-07 15:59:04.262Z",
-				"updated": "2024-07-07 15:59:04.264Z",
+				"updated": "2024-07-07 20:52:28.847Z",
 				"name": "users",
 				"type": "auth",
 				"system": false,
@@ -78,7 +78,7 @@ func init() {
 			{
 				"id": "2hz5ncl8tizk5nx",
 				"created": "2024-07-07 16:08:20.979Z",
-				"updated": "2024-07-07 20:48:21.553Z",
+				"updated": "2024-07-09 22:46:22.047Z",
 				"name": "systems",
 				"type": "base",
 				"system": false,
@@ -97,6 +97,44 @@ func init() {
 							"pattern": ""
 						}
 					},
+					{
+						"system": false,
+						"id": "4fbh8our",
+						"name": "active",
+						"type": "bool",
+						"required": false,
+						"presentable": false,
+						"unique": false,
+						"options": {}
+					},
+					{
+						"system": false,
+						"id": "ve781smf",
+						"name": "ip",
+						"type": "text",
+						"required": true,
+						"presentable": false,
+						"unique": false,
+						"options": {
+							"min": null,
+							"max": null,
+							"pattern": ""
+						}
+					},
+					{
+						"system": false,
+						"id": "pij0k2jk",
+						"name": "port",
+						"type": "text",
+						"required": true,
+						"presentable": false,
+						"unique": false,
+						"options": {
+							"min": null,
+							"max": null,
+							"pattern": ""
+						}
+					},
 					{
 						"system": false,
 						"id": "qoq64ntl",
@@ -123,7 +161,7 @@ func init() {
 			{
 				"id": "ej9oowivz8b2mht",
 				"created": "2024-07-07 16:09:09.179Z",
-				"updated": "2024-07-07 20:48:44.878Z",
+				"updated": "2024-07-07 20:52:28.848Z",
 				"name": "system_stats",
 				"type": "base",
 				"system": false,
@@ -170,7 +208,7 @@ func init() {
 			{
 				"id": "juohu4jipgc13v7",
 				"created": "2024-07-07 16:09:57.976Z",
-				"updated": "2024-07-07 20:42:14.559Z",
+				"updated": "2024-07-07 20:52:28.848Z",
 				"name": "container_stats",
 				"type": "base",
 				"system": false,

site/index.html

@@ -1,13 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
+	<head>
-    <meta charset="UTF-8" />
+		<meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Preact + TS</title>
+		<title>Home</title>
-  </head>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
-  <body>
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <div id="app"></div>
+		<link
-    <script type="module" src="/src/main.tsx"></script>
+			href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
-  </body>
+			rel="stylesheet"
+		/>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
 </html>

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>
+	)
+}

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.

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
+		color = 'red'
-		background = '#da2a49'
 	} else if (val > 50) {
-		// yellow
+		color = 'yellow'
-		background = '#daa42a'
 	}
 	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"
+					className={clsx('absolute inset-0 w-full h-full origin-left', `bg-${color}-500`)}
-					style={{ transform: `scalex(${val}%)`, background }}
+					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">
+					<span className="flex gap-1.5 items-center text-base">
-						{info.getValue() as string}{' '}
+						<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">
+			<div className="w-full">
-				<Input
+				<div className="flex items-center mb-4">
-					// @ts-ignore
+					<Input
-					placeholder="Filter..."
+						// @ts-ignore
-					value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+						placeholder="Filter..."
-					onChange={(event: Event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+						value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-					className="max-w-sm"
+						onChange={(event: Event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-				/>
+						className="max-w-sm"
-				<div className="ml-auto flex gap-3">
+					/>
-					{liveUpdates || (
+					<div className="ml-auto flex gap-2">
-						<Button
+						{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
+							<span
-							<RefreshCcw className="h-4 w-4" />
+								className={clsx('h-2.5 w-2.5 rounded-full', {
-						</Button>
+									'bg-green-500': liveUpdates,
-					)}
+									'bg-red-500': !liveUpdates,
-					<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>
-									)
 								})}
-							</TableRow>
+							/>
-						))}
+							Live Updates
-					</TableHeader>
+						</Button> */}
-					<TableBody>
+						<AddServerButton />
-						{table.getRowModel().rows?.length ? (
+					</div>
-							table.getRowModel().rows.map((row) => (
+				</div>
-								<TableRow key={row.original.id} data-state={row.getIsSelected() && 'selected'}>
+				<div className="rounded-md border overflow-hidden">
-									{row.getVisibleCells().map((cell) => (
+					<Table>
-										<TableCell key={cell.id} style={{ width: `${cell.column.getSize()}px` }}>
+						<TableHeader className="bg-muted/40">
-											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+							{table.getHeaderGroups().map((headerGroup) => (
-										</TableCell>
+								<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>
-							))
+							))}
-						) : (
+						</TableHeader>
-							<TableRow>
+						<TableBody>
-								<TableCell colSpan={columns.length} className="h-24 text-center">
+							{table.getRowModel().rows?.length ? (
-									No results.
+								table.getRowModel().rows.map((row) => (
-								</TableCell>
+									<TableRow key={row.original.id} data-state={row.getIsSelected() && 'selected'}>
-							</TableRow>
+										{row.getVisibleCells().map((cell) => (
-						)}
+											<TableCell
-					</TableBody>
+												key={cell.id}
-				</Table>
+												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>
+		</>
 	)
 }

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%;

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)
 })

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'

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
 }
 

site/tailwind.config.js

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

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'),

types.go

@@ -0,0 +1,33 @@
+package main
+
+import (
+	"golang.org/x/crypto/ssh"
+)
+
+type Server struct {
+	Ip     string
+	Port   string
+	Client *ssh.Client
+}
+
+type SystemData struct {
+	System     SystemStats      `json:"stats"`
+	Containers []ContainerStats `json:"container"`
+}
+
+type SystemStats struct {
+	Cpu      float64 `json:"cpu"`
+	Mem      float64 `json:"mem"`
+	MemUsed  float64 `json:"memUsed"`
+	MemPct   float64 `json:"memPct"`
+	Disk     float64 `json:"disk"`
+	DiskUsed float64 `json:"diskUsed"`
+	DiskPct  float64 `json:"diskPct"`
+}
+
+type ContainerStats struct {
+	Name   string  `json:"name"`
+	Cpu    float64 `json:"cpu"`
+	Mem    float64 `json:"mem"`
+	MemPct float64 `json:"memPct"`
+}