add pause functionality and updating favicon

main.go

@@ -16,6 +16,7 @@ import (
 	"time"
 
 	"github.com/labstack/echo/v5"
+	"github.com/pocketbase/dbx"
 	"github.com/pocketbase/pocketbase"
 	"github.com/pocketbase/pocketbase/apis"
 	"github.com/pocketbase/pocketbase/core"
@@ -130,7 +131,7 @@ func main() {
 }
 
 func serverUpdateTicker() {
-	ticker := time.NewTicker(60 * time.Second)
+	ticker := time.NewTicker(30 * time.Second)
 	for range ticker.C {
 		updateServers()
 	}
@@ -140,6 +141,7 @@ func updateServers() {
 	// serverCount := len(serverConnections)
 	// fmt.Println("server count: ", serverCount)
 	query := app.Dao().RecordQuery("systems").
+		Where(dbx.NewExp("status != \"paused\"")).
 		OrderBy("updated ASC").
 		// todo get total count of servers and divide by 4 or something
 		Limit(5)
@@ -163,12 +165,12 @@ func updateServer(record *models.Record) {
 	} else {
 		// create server connection struct
 		server = Server{
-			Ip:   record.Get("ip").(string),
+			Host: record.Get("host").(string),
 			Port: record.Get("port").(string),
 		}
 		client, err := getServerConnection(&server)
 		if err != nil {
-			app.Logger().Error("Failed to connect:", "err", err.Error(), "server", server.Ip, "port", server.Port)
+			app.Logger().Error("Failed to connect:", "err", err.Error(), "server", server.Host, "port", server.Port)
 			setInactive(record)
 			return
 		}
@@ -183,7 +185,7 @@ func updateServer(record *models.Record) {
 		return
 	}
 	// update system record
-	record.Set("active", true)
+	record.Set("status", "up")
 	record.Set("stats", systemData.System)
 	if err := app.Dao().SaveRecord(record); err != nil {
 		app.Logger().Error("Failed to update record: ", "err", err.Error())
@@ -208,7 +210,7 @@ func updateServer(record *models.Record) {
 	}
 }
 
-// set server to inactive and close connection
+// set server to status down and close connection
 func setInactive(record *models.Record) {
 	// if in map, close connection and remove from map
 	if _, ok := serverConnections[record.Id]; ok {
@@ -218,14 +220,14 @@ func setInactive(record *models.Record) {
 		delete(serverConnections, record.Id)
 	}
 	// set inactive
-	record.Set("active", false)
+	record.Set("status", "down")
 	if err := app.Dao().SaveRecord(record); err != nil {
 		app.Logger().Error("Failed to update record: ", "err", err.Error())
 	}
 }
 
 func getServerConnection(server *Server) (*ssh.Client, error) {
-	// app.Logger().Debug("new ssh connection", "server", server.Ip)
+	// app.Logger().Debug("new ssh connection", "server", server.Host)
 	key, err := getSSHKey()
 	if err != nil {
 		app.Logger().Error("Failed to get SSH key: ", "err", err.Error())
@@ -248,7 +250,7 @@ func getServerConnection(server *Server) (*ssh.Client, error) {
 		Timeout:         5 * time.Second,
 	}
 
-	client, err := ssh.Dial("tcp", fmt.Sprintf("%s:%s", server.Ip, server.Port), config)
+	client, err := ssh.Dial("tcp", fmt.Sprintf("%s:%s", server.Host, server.Port), config)
 	if err != 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 20:52:28.847Z",
+				"updated": "2024-07-09 23:42:40.542Z",
 				"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-09 22:46:22.047Z",
+				"updated": "2024-07-13 01:18:43.529Z",
 				"name": "systems",
 				"type": "base",
 				"system": false,
@@ -99,18 +99,25 @@ func init() {
 					},
 					{
 						"system": false,
-						"id": "4fbh8our",
-						"name": "active",
-						"type": "bool",
-						"required": false,
+						"id": "waj7seaf",
+						"name": "status",
+						"type": "select",
+						"required": true,
 						"presentable": false,
 						"unique": false,
-						"options": {}
+						"options": {
+							"maxSelect": 1,
+							"values": [
+								"up",
+								"down",
+								"paused"
+							]
+						}
 					},
 					{
 						"system": false,
 						"id": "ve781smf",
-						"name": "ip",
+						"name": "host",
 						"type": "text",
 						"required": true,
 						"presentable": false,
@@ -161,7 +168,7 @@ func init() {
 			{
 				"id": "ej9oowivz8b2mht",
 				"created": "2024-07-07 16:09:09.179Z",
-				"updated": "2024-07-07 20:52:28.848Z",
+				"updated": "2024-07-09 23:42:40.542Z",
 				"name": "system_stats",
 				"type": "base",
 				"system": false,
@@ -208,7 +215,7 @@ func init() {
 			{
 				"id": "juohu4jipgc13v7",
 				"created": "2024-07-07 16:09:57.976Z",
-				"updated": "2024-07-07 20:52:28.848Z",
+				"updated": "2024-07-09 23:42:40.542Z",
 				"name": "container_stats",
 				"type": "base",
 				"system": false,

site/src/components/add-server.tsx

@@ -53,6 +53,7 @@ export function AddServerButton() {
 		e.preventDefault()
 		const formData = new FormData(e.target as HTMLFormElement)
 		const data = Object.fromEntries(formData) as Record<string, any>
+		data.status = 'down'
 		data.stats = {
 			c: 0,
 			d: 0,
@@ -97,10 +98,10 @@ export function AddServerButton() {
 							<Input id="name" name="name" className="col-span-3" required />
 						</div>
 						<div className="grid grid-cols-4 items-center gap-4">
-							<Label htmlFor="ip" className="text-right">
+							<Label htmlFor="host" className="text-right">
 								Host / IP
 							</Label>
-							<Input id="ip" name="ip" className="col-span-3" required />
+							<Input id="host" name="host" className="col-span-3" required />
 						</div>
 						<div className="grid grid-cols-4 items-center gap-4">
 							<Label htmlFor="port" className="text-right">

site/src/components/charts/cpu-chart.tsx

@@ -31,16 +31,13 @@ export default function ({ chartData }: { chartData: { time: string; cpu: number
 				<YAxis
 					domain={[0, (max: number) => Math.ceil(max)]}
 					width={47}
-					// tickCount={5}
 					tickLine={false}
 					axisLine={false}
 					unit={'%'}
-					// tickFormatter={(v) => `${v}%`}
 				/>
 				{/* todo: short time if first date is same day, otherwise short date */}
 				<XAxis
 					dataKey="time"
-					tickLine={true}
 					axisLine={false}
 					tickMargin={8}
 					minTickGap={30}

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

@@ -41,18 +41,17 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
+	AlertDialogTrigger,
 } from '@/components/ui/alert-dialog'
 
 import { SystemRecord } from '@/types'
 import {
 	MoreHorizontal,
 	ArrowUpDown,
-	Copy,
 	Server,
 	Cpu,
 	MemoryStick,
 	HardDrive,
-	PauseIcon,
 	CopyIcon,
 } from 'lucide-react'
 import { useMemo, useState } from 'react'
@@ -63,17 +62,20 @@ import { cn, copyToClipboard } from '@/lib/utils'
 
 function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	const val = info.getValue() as number
-	let color = 'green'
-	if (val > 80) {
-		color = 'red'
-	} else if (val > 50) {
-		color = 'yellow'
-	}
+	// let color = 'green'
+	// if (val > 80) {
+	// 	color = 'red'
+	// } else if (val > 50) {
+	// 	color = 'yellow'
+	// }
 	return (
 		<div className="flex gap-2 items-center">
 			<span className="grow min-w-10 block bg-muted h-4 relative rounded-sm overflow-hidden">
 				<span
-					className={cn('absolute inset-0 w-full h-full origin-left', `bg-${color}-500`)}
+					className={cn(
+						'absolute inset-0 w-full h-full origin-left',
+						(val < 50 && 'bg-green-500') || (val < 80 && 'bg-yellow-500') || 'bg-red-500'
+					)}
 					style={{ transform: `scalex(${val}%)` }}
 				></span>
 			</span>
@@ -98,22 +100,25 @@ function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Ico
 
 export default function () {
 	const data = useStore($servers)
-	const [deleteServer, setDeleteServer] = useState({} as SystemRecord)
+	// const [deleteServer, setDeleteServer] = useState({} as SystemRecord)
 	const [sorting, setSorting] = useState<SortingState>([])
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 
-	const columns: ColumnDef<SystemRecord>[] = useMemo(
-		() => [
+	const columns: ColumnDef<SystemRecord>[] = useMemo(() => {
+		return [
 			{
 				// size: 70,
 				accessorKey: 'name',
-				cell: (info) => (
+				cell: (info) => {
+					const { status } = info.row.original
+					return (
 						<span className="flex gap-0.5 items-center text-base">
 							<span
-							className={cn(
-								'w-2 h-2 left-0 rounded-full',
-								info.row.original.active ? 'bg-green-500' : 'bg-red-500'
-							)}
+								className={cn('w-2 h-2 left-0 rounded-full', {
+									'bg-green-500': status === 'up',
+									'bg-red-500': status === 'down',
+									'bg-yellow-500': status === 'paused',
+								})}
 								style={{ marginBottom: '-1px' }}
 							></span>
 							<Button
@@ -125,7 +130,8 @@ export default function () {
 								<CopyIcon className="h-3 w-3" />
 							</Button>
 						</span>
-				),
+					)
+				},
 				header: ({ column }) => sortableHeader(column, 'Server', Server),
 			},
 			{
@@ -148,10 +154,10 @@ export default function () {
 				size: 32,
 				maxSize: 32,
 				cell: ({ row }) => {
-					const system = row.original
-
+					const { id, name, status, host } = row.original
 					return (
 						<div className={'flex justify-end'}>
+							<AlertDialog>
 								<DropdownMenu>
 									<DropdownMenuTrigger asChild>
 										<Button variant="ghost" className="h-8 w-8 p-0">
@@ -160,37 +166,58 @@ export default function () {
 										</Button>
 									</DropdownMenuTrigger>
 									<DropdownMenuContent align="end">
-									<DropdownMenuLabel>Actions</DropdownMenuLabel>
+										{/* <DropdownMenuLabel>Actions</DropdownMenuLabel> */}
 										{/* <DropdownMenuItem
 										onSelect={() => {
-											navigate(`/server/${system.name}`)
+											navigate(`/server/${name}`)
 										}}
 									>
 										View details
 									</DropdownMenuItem> */}
-									<DropdownMenuItem onClick={() => console.log('pause server')}>
-										Pause
+										<DropdownMenuItem
+											onClick={() => {
+												pb.collection('systems').update(id, {
+													status: status === 'paused' ? 'up' : 'paused',
+												})
+											}}
+										>
+											{status === 'paused' ? 'Resume' : 'Pause'}
 										</DropdownMenuItem>
-									<DropdownMenuItem onClick={() => copyToClipboard(system.ip)}>
+										<DropdownMenuItem onClick={() => copyToClipboard(host)}>
 											Copy host
 										</DropdownMenuItem>
 										<DropdownMenuSeparator />
-									<DropdownMenuItem
-										onSelect={() => {
-											setDeleteServer(system)
-										}}
-									>
-										Delete server
-									</DropdownMenuItem>
+										<AlertDialogTrigger asChild>
+											<DropdownMenuItem>Delete server</DropdownMenuItem>
+										</AlertDialogTrigger>
 									</DropdownMenuContent>
 								</DropdownMenu>
+								<AlertDialogContent>
+									<AlertDialogHeader>
+										<AlertDialogTitle>Are you sure you want to delete {name}?</AlertDialogTitle>
+										<AlertDialogDescription>
+											This action cannot be undone. This will permanently delete all current records
+											for <code className={'bg-muted rounded-sm px-1'}>{name}</code> from the
+											database.
+										</AlertDialogDescription>
+									</AlertDialogHeader>
+									<AlertDialogFooter>
+										<AlertDialogCancel>Cancel</AlertDialogCancel>
+										<AlertDialogAction
+											className={cn(buttonVariants({ variant: 'destructive' }))}
+											onClick={() => pb.collection('systems').delete(id)}
+										>
+											Continue
+										</AlertDialogAction>
+									</AlertDialogFooter>
+								</AlertDialogContent>
+							</AlertDialog>
 						</div>
 					)
 				},
 			},
-		],
-		[]
-	)
+		]
+	}, [])
 
 	const table = useReactTable({
 		data,
@@ -274,34 +301,6 @@ export default function () {
 					</Table>
 				</div>
 			</div>
-			<AlertDialog open={!!deleteServer?.name}>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>
-							Are you sure you want to delete {deleteServer.name}?
-						</AlertDialogTitle>
-						<AlertDialogDescription>
-							This action cannot be undone. This will permanently delete all current records for{' '}
-							<code className={'bg-muted rounded-sm px-1'}>{deleteServer.name}</code> from the
-							database.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel onClick={() => setDeleteServer({} as SystemRecord)}>
-							Cancel
-						</AlertDialogCancel>
-						<AlertDialogAction
-							className={cn(buttonVariants({ variant: 'destructive' }))}
-							onClick={() => {
-								setDeleteServer({} as SystemRecord)
-								pb.collection('systems').delete(deleteServer.id)
-							}}
-						>
-							Continue
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
 		</>
 	)
 }

site/src/main.tsx

@@ -34,11 +34,17 @@ const App = () => {
 	useEffect(() => {
 		if (!authenticated || !servers.length) {
 			updateFavicon('/favicon.svg')
-		} else if (servers.find((server) => !server.active)) {
-			updateFavicon('/favicon-red.svg')
 		} else {
-			// all servers good
-			updateFavicon('/favicon-green.svg')
+			let up = false
+			for (const server of servers) {
+				if (server.status === 'down') {
+					updateFavicon('/favicon-red.svg')
+					return
+				} else if (server.status === 'up') {
+					up = true
+				}
+			}
+			updateFavicon(up ? '/favicon-green.svg' : '/favicon.svg')
 		}
 	}, [authenticated, servers])
 

site/src/types.d.ts

@@ -2,8 +2,8 @@ import { RecordModel } from 'pocketbase'
 
 export interface SystemRecord extends RecordModel {
 	name: string
-	ip: string
-	active: boolean
+	host: string
+	status: 'up' | 'down' | 'paused'
 	port: string
 	stats: SystemStats
 }

types.go

@@ -5,7 +5,7 @@ import (
 )
 
 type Server struct {
-	Ip     string
+	Host   string
 	Port   string
 	Client *ssh.Client
 }