0.0.1-alpha.5

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 henrygd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

agent/docker-compose.yml

@@ -7,6 +7,6 @@ services:
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
     environment:
-      - PORT=45876
-      - KEY="ssh-ed25519 YOUR_PUBLIC_KEY"
-      # - FILESYSTEM=/dev/sda1 # set to the correct filesystem for disk I/O stats
+      PORT: 45876
+      KEY: 'ssh-ed25519 YOUR_PUBLIC_KEY'
+      # FILESYSTEM: /dev/sda1 # set to the correct filesystem for disk I/O stats

agent/main.go

@@ -23,7 +23,7 @@ import (
 	psutilNet "github.com/shirou/gopsutil/v4/net"
 )
 
-var Version = "0.0.1-alpha.3"
+var Version = "0.0.1-alpha.5"
 
 var containerCpuMap = make(map[string][2]uint64)
 var containerCpuMutex = &sync.Mutex{}
@@ -320,8 +320,7 @@ func main() {
 	if pubKeyEnv, exists := os.LookupEnv("KEY"); exists {
 		pubKey = []byte(pubKeyEnv)
 	} else {
-		pubKey = []byte("ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIJgPK8kpPOwPFIq6BIa7Bu/xwrjt5VRQCz3az3Glt4jp")
-		// log.Fatal("KEY environment variable is not set")
+		log.Fatal("KEY environment variable is not set")
 	}
 
 	if filesystem, exists := os.LookupEnv("FILESYSTEM"); exists {

hub/alerts.go

@@ -0,0 +1,142 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/mail"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/models"
+	"github.com/pocketbase/pocketbase/tools/mailer"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+func handleSystemAlerts(newStatus string, newRecord *models.Record, oldRecord *models.Record) {
+	alertRecords, err := app.Dao().FindRecordsByExpr("alerts",
+		dbx.NewExp("system = {:system}", dbx.Params{"system": oldRecord.Get("id")}),
+	)
+	if err != nil || len(alertRecords) == 0 {
+		// log.Println("no alerts found for system")
+		return
+	}
+	// log.Println("found alerts", len(alertRecords))
+	var systemInfo *SystemInfo
+	for _, alertRecord := range alertRecords {
+		name := alertRecord.Get("name").(string)
+		switch name {
+		case "Status":
+			handleStatusAlerts(newStatus, oldRecord, alertRecord)
+		case "CPU", "Memory", "Disk":
+			if newStatus != "up" {
+				continue
+			}
+			if systemInfo == nil {
+				systemInfo = getSystemInfo(newRecord)
+			}
+			if name == "CPU" {
+				handleSlidingValueAlert(newRecord, alertRecord, name, systemInfo.Cpu)
+			} else if name == "Memory" {
+				handleSlidingValueAlert(newRecord, alertRecord, name, systemInfo.MemPct)
+			} else if name == "Disk" {
+				handleSlidingValueAlert(newRecord, alertRecord, name, systemInfo.DiskPct)
+			}
+		}
+	}
+}
+
+func getSystemInfo(record *models.Record) *SystemInfo {
+	var SystemInfo SystemInfo
+	json.Unmarshal([]byte(record.Get("info").(types.JsonRaw)), &SystemInfo)
+	return &SystemInfo
+}
+
+func handleSlidingValueAlert(newRecord *models.Record, alertRecord *models.Record, name string, curValue float64) {
+	triggered := alertRecord.Get("triggered").(bool)
+	threshold := alertRecord.Get("value").(float64)
+	// fmt.Println(name, curValue, "threshold", threshold, "triggered", triggered)
+	var subject string
+	var body string
+	if !triggered && curValue > threshold {
+		alertRecord.Set("triggered", true)
+		systemName := newRecord.Get("name").(string)
+		subject = fmt.Sprintf("%s usage threshold exceeded on %s", name, systemName)
+		body = fmt.Sprintf("%s usage on %s is %.1f%%.\n\n- Beszel", name, systemName, curValue)
+	} else if triggered && curValue <= threshold {
+		alertRecord.Set("triggered", false)
+		systemName := newRecord.Get("name").(string)
+		subject = fmt.Sprintf("%s usage returned below threshold on %s", name, systemName)
+		body = fmt.Sprintf("%s usage on %s is below threshold at %.1f%%.\n\n%s\n\n- Beszel", name, systemName, curValue, app.Settings().Meta.AppUrl+"/system/"+systemName)
+	} else {
+		// fmt.Println(name, "not triggered")
+		return
+	}
+	if err := app.Dao().SaveRecord(alertRecord); err != nil {
+		// app.Logger().Error("failed to save alert record", "err", err.Error())
+		return
+	}
+	// expand the user relation and send the alert
+	if errs := app.Dao().ExpandRecord(alertRecord, []string{"user"}, nil); len(errs) > 0 {
+		// app.Logger().Error("failed to expand user relation", "errs", errs)
+		return
+	}
+	if user := alertRecord.ExpandedOne("user"); user != nil {
+		sendAlert(EmailData{
+			to:   user.Get("email").(string),
+			subj: subject,
+			body: body,
+		})
+	}
+}
+
+func handleStatusAlerts(newStatus string, oldRecord *models.Record, alertRecord *models.Record) error {
+	var alertStatus string
+	switch newStatus {
+	case "up":
+		if oldRecord.Get("status") == "down" {
+			alertStatus = "up"
+		}
+	case "down":
+		if oldRecord.Get("status") == "up" {
+			alertStatus = "down"
+		}
+	}
+	if alertStatus == "" {
+		return nil
+	}
+	// expand the user relation
+	if errs := app.Dao().ExpandRecord(alertRecord, []string{"user"}, nil); len(errs) > 0 {
+		return fmt.Errorf("failed to expand: %v", errs)
+	}
+	user := alertRecord.ExpandedOne("user")
+	if user == nil {
+		return nil
+	}
+	emoji := "\U0001F534"
+	if alertStatus == "up" {
+		emoji = "\u2705"
+	}
+	// send alert
+	systemName := oldRecord.Get("name").(string)
+	sendAlert(EmailData{
+		to:   user.Get("email").(string),
+		subj: fmt.Sprintf("Connection to %s is %s %v", systemName, alertStatus, emoji),
+		body: fmt.Sprintf("Connection to %s is %s\n\n- Beszel", systemName, alertStatus),
+	})
+	return nil
+}
+
+func sendAlert(data EmailData) {
+	// fmt.Println("sending alert", "to", data.to, "subj", data.subj, "body", data.body)
+	message := &mailer.Message{
+		From: mail.Address{
+			Address: app.Settings().Meta.SenderAddress,
+			Name:    app.Settings().Meta.SenderName,
+		},
+		To:      []mail.Address{{Address: data.to}},
+		Subject: data.subj,
+		Text:    data.body,
+	}
+	if err := app.NewMailClient().Send(message); err != nil {
+		app.Logger().Error("Failed to send alert: ", "err", err.Error())
+	}
+}

hub/dockerfile

@@ -31,4 +31,4 @@ COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/
 EXPOSE 8090
 
 ENTRYPOINT [ "/beszel" ]
-CMD ["serve", "--http=0.0.0.0:8090"]
+CMD ["serve", "--http=localhost:8090"]

hub/main.go

@@ -12,7 +12,6 @@ import (
 	"log"
 	"net/http"
 	"net/http/httputil"
-	"net/mail"
 	"net/url"
 	"os"
 	"strings"
@@ -26,12 +25,11 @@ import (
 	"github.com/pocketbase/pocketbase/models"
 	"github.com/pocketbase/pocketbase/plugins/migratecmd"
 	"github.com/pocketbase/pocketbase/tools/cron"
-	"github.com/pocketbase/pocketbase/tools/mailer"
 	"github.com/spf13/cobra"
 	"golang.org/x/crypto/ssh"
 )
 
-var Version = "0.0.1-alpha.3"
+var Version = "0.0.1-alpha.5"
 
 var app *pocketbase.PocketBase
 var serverConnections = make(map[string]Server)
@@ -175,7 +173,7 @@ func main() {
 		}
 
 		// alerts
-		handleStatusAlerts(newStatus, oldRecord)
+		handleSystemAlerts(newStatus, newRecord, oldRecord)
 		return nil
 	})
 
@@ -378,69 +376,6 @@ func requestJson(server *Server) (SystemData, error) {
 	return systemData, nil
 }
 
-func sendAlert(data EmailData) {
-	message := &mailer.Message{
-		From: mail.Address{
-			Address: app.Settings().Meta.SenderAddress,
-			Name:    app.Settings().Meta.SenderName,
-		},
-		To:      []mail.Address{{Address: data.to}},
-		Subject: data.subj,
-		Text:    data.body,
-	}
-	if err := app.NewMailClient().Send(message); err != nil {
-		app.Logger().Error("Failed to send alert: ", "err", err.Error())
-	}
-}
-
-func handleStatusAlerts(newStatus string, oldRecord *models.Record) error {
-	var alertStatus string
-	switch newStatus {
-	case "up":
-		if oldRecord.Get("status") == "down" {
-			alertStatus = "up"
-		}
-	case "down":
-		if oldRecord.Get("status") == "up" {
-			alertStatus = "down"
-		}
-	}
-	if alertStatus == "" {
-		return nil
-	}
-	alerts, err := app.Dao().FindRecordsByFilter("alerts", "name = 'status' && system = {:system}", "-created", -1, 0, dbx.Params{
-		"system": oldRecord.Get("id")})
-	if err != nil {
-		log.Println("failed to get users", "err", err.Error())
-		return nil
-	}
-	if len(alerts) == 0 {
-		return nil
-	}
-	// expand the user relation
-	if errs := app.Dao().ExpandRecords(alerts, []string{"user"}, nil); len(errs) > 0 {
-		return fmt.Errorf("failed to expand: %v", errs)
-	}
-	systemName := oldRecord.Get("name").(string)
-	emoji := "\U0001F534"
-	if alertStatus == "up" {
-		emoji = "\u2705"
-	}
-	for _, alert := range alerts {
-		user := alert.ExpandedOne("user")
-		if user == nil {
-			continue
-		}
-		// send alert
-		sendAlert(EmailData{
-			to:   user.Get("email").(string),
-			subj: fmt.Sprintf("Connection to %s is %s %v", systemName, alertStatus, emoji),
-			body: fmt.Sprintf("Connection to %s is %s\n\n- Beszel", systemName, alertStatus),
-		})
-	}
-	return nil
-}
-
 func getSSHKey() ([]byte, error) {
 	dataDir := app.DataDir()
 	// check if the key pair already exists

hub/migrations/1720568457_collections_snapshot.go

@@ -15,7 +15,7 @@ func init() {
 			{
 				"id": "2hz5ncl8tizk5nx",
 				"created": "2024-07-07 16:08:20.979Z",
-				"updated": "2024-07-17 15:27:00.429Z",
+				"updated": "2024-07-22 19:39:17.434Z",
 				"name": "systems",
 				"type": "base",
 				"system": false,
@@ -102,7 +102,7 @@ func init() {
 						"unique": false,
 						"options": {
 							"collectionId": "_pb_users_auth_",
-							"cascadeDelete": false,
+							"cascadeDelete": true,
 							"minSelect": null,
 							"maxSelect": null,
 							"displayFields": null
@@ -250,7 +250,7 @@ func init() {
 			{
 				"id": "_pb_users_auth_",
 				"created": "2024-07-14 16:25:18.226Z",
-				"updated": "2024-07-20 00:55:02.071Z",
+				"updated": "2024-07-22 20:10:20.670Z",
 				"name": "users",
 				"type": "auth",
 				"system": false,
@@ -304,7 +304,7 @@ func init() {
 				"options": {
 					"allowEmailAuth": true,
 					"allowOAuth2Auth": true,
-					"allowUsernameAuth": true,
+					"allowUsernameAuth": false,
 					"exceptEmailDomains": null,
 					"manageRule": null,
 					"minPasswordLength": 8,
@@ -316,7 +316,7 @@ func init() {
 			{
 				"id": "elngm8x1l60zi2v",
 				"created": "2024-07-15 01:16:04.044Z",
-				"updated": "2024-07-15 22:44:12.297Z",
+				"updated": "2024-07-22 19:13:16.498Z",
 				"name": "alerts",
 				"type": "base",
 				"system": false,
@@ -364,16 +364,43 @@ func init() {
 						"options": {
 							"maxSelect": 1,
 							"values": [
-								"status"
+								"Status",
+								"CPU",
+								"Memory",
+								"Disk"
 							]
 						}
+					},
+					{
+						"system": false,
+						"id": "o2ablxvn",
+						"name": "value",
+						"type": "number",
+						"required": false,
+						"presentable": false,
+						"unique": false,
+						"options": {
+							"min": null,
+							"max": null,
+							"noDecimal": false
+						}
+					},
+					{
+						"system": false,
+						"id": "6hgdf6hs",
+						"name": "triggered",
+						"type": "bool",
+						"required": false,
+						"presentable": false,
+						"unique": false,
+						"options": {}
 					}
 				],
 				"indexes": [],
 				"listRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
 				"viewRule": "",
 				"createRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
-				"updateRule": null,
+				"updateRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
 				"deleteRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
 				"options": {}
 			}

hub/site/package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",

hub/site/src/components/add-system.tsx

@@ -19,7 +19,7 @@ import { useStore } from '@nanostores/react'
 import { copyToClipboard } from '@/lib/utils'
 import { SystemStats } from '@/types'
 
-export function AddServerButton() {
+export function AddSystemButton() {
 	const [open, setOpen] = useState(false)
 	const port = useRef() as MutableRefObject<HTMLInputElement>
 	const publicKey = useStore($publicKey)
@@ -27,16 +27,16 @@ export function AddServerButton() {
 	function copyDockerCompose(port: string) {
 		copyToClipboard(`services:
   beszel-agent:
-    image: 'henrygd/beszel-agent'
-    container_name: 'beszel-agent'
+    image: "henrygd/beszel-agent"
+    container_name: "beszel-agent"
     restart: unless-stopped
     network_mode: host
-		volumes:
+    volumes:
       - /var/run/docker.sock:/var/run/docker.sock
     environment:
-		  - PORT=${port}
-      - KEY="${publicKey}"
-			# - FILESYSTEM=/dev/sda1 # set to the correct filesystem for disk I/O stats`)
+      PORT: ${port}
+      KEY: "${publicKey}"
+      # FILESYSTEM: /dev/sda1 # set to the correct filesystem for disk I/O stats`)
 	}
 
 	useEffect(() => {

hub/site/src/components/command-palette.tsx

@@ -1,7 +1,4 @@
-'use client'
-
 import {
-	Database,
 	DatabaseBackupIcon,
 	Github,
 	LayoutDashboard,
@@ -30,7 +27,7 @@ import { navigate } from './router'
 
 export default function CommandPalette() {
 	const [open, setOpen] = useState(false)
-	const servers = useStore($systems)
+	const systems = useStore($systems)
 
 	useEffect(() => {
 		const down = (e: KeyboardEvent) => {
@@ -72,22 +69,26 @@ export default function CommandPalette() {
 						<CommandShortcut>GitHub</CommandShortcut>
 					</CommandItem>
 				</CommandGroup>
-				<CommandSeparator />
-				<CommandGroup heading="Servers">
-					{servers.map((server) => (
-						<CommandItem
-							key={server.id}
-							onSelect={() => {
-								navigate(`/server/${server.name}`)
-								setOpen((open) => !open)
-							}}
-						>
-							<Server className="mr-2 h-4 w-4" />
-							<span>{server.name}</span>
-							<CommandShortcut>{server.host}</CommandShortcut>
-						</CommandItem>
-					))}
-				</CommandGroup>
+				{systems.length > 0 && (
+					<>
+						<CommandSeparator />
+						<CommandGroup heading="Systems">
+							{systems.map((system) => (
+								<CommandItem
+									key={system.id}
+									onSelect={() => {
+										navigate(`/system/${system.name}`)
+										setOpen(false)
+									}}
+								>
+									<Server className="mr-2 h-4 w-4" />
+									<span>{system.name}</span>
+									<CommandShortcut>{system.host}</CommandShortcut>
+								</CommandItem>
+							))}
+						</CommandGroup>
+					</>
+				)}
 				{isAdmin() && (
 					<>
 						<CommandSeparator />
@@ -95,6 +96,7 @@ export default function CommandPalette() {
 							<CommandItem
 								keywords={['pocketbase']}
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/', '_blank')
 								}}
 							>
@@ -104,6 +106,7 @@ export default function CommandPalette() {
 							</CommandItem>
 							<CommandItem
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/#/logs', '_blank')
 								}}
 							>
@@ -113,6 +116,7 @@ export default function CommandPalette() {
 							</CommandItem>
 							<CommandItem
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/#/settings/backups', '_blank')
 								}}
 							>
@@ -123,6 +127,7 @@ export default function CommandPalette() {
 							<CommandItem
 								keywords={['oauth', 'oicd']}
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/#/settings/auth-providers', '_blank')
 								}}
 							>
@@ -133,6 +138,7 @@ export default function CommandPalette() {
 							<CommandItem
 								keywords={['email']}
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/#/settings/mail', '_blank')
 								}}
 							>

hub/site/src/components/router.tsx

@@ -3,7 +3,7 @@ import { createRouter } from '@nanostores/router'
 export const $router = createRouter(
 	{
 		home: '/',
-		server: '/server/:name',
+		server: '/system/:name',
 		'forgot-password': '/forgot-password',
 	},
 	{ links: false }

hub/site/src/components/routes/home.tsx

@@ -1,7 +1,7 @@
 import { Suspense, lazy, useEffect } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
 
-const SystemsTable = lazy(() => import('../server-table/systems-table'))
+const SystemsTable = lazy(() => import('../systems-table/systems-table'))
 
 export default function () {
 	useEffect(() => {

hub/site/src/components/routes/system.tsx

@@ -20,14 +20,14 @@ const DiskIoChart = lazy(() => import('../charts/disk-io-chart'))
 const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
 
 export default function ServerDetail({ name }: { name: string }) {
-	const servers = useStore($systems)
+	const systems = useStore($systems)
 	const updatedSystem = useStore($updatedSystem)
 	const chartTime = useStore($chartTime)
 	const [ticks, setTicks] = useState([] as number[])
 	const [server, setServer] = useState({} as SystemRecord)
 	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
 
-	const [serverStats, setServerStats] = useState([] as SystemStatsRecord[])
+	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
 	const [cpuChartData, setCpuChartData] = useState([] as { time: number; cpu: number }[])
 	const [memChartData, setMemChartData] = useState(
 		[] as { time: number; mem: number; memUsed: number; memCache: number }[]
@@ -57,7 +57,7 @@ export default function ServerDetail({ name }: { name: string }) {
 	}, [name])
 
 	const resetCharts = useCallback(() => {
-		setServerStats([])
+		setSystemStats([])
 		setCpuChartData([])
 		setMemChartData([])
 		setDiskChartData([])
@@ -72,11 +72,11 @@ export default function ServerDetail({ name }: { name: string }) {
 		if (server.id && server.name === name) {
 			return
 		}
-		const matchingServer = servers.find((s) => s.name === name) as SystemRecord
+		const matchingServer = systems.find((s) => s.name === name) as SystemRecord
 		if (matchingServer) {
 			setServer(matchingServer)
 		}
-	}, [name, server, servers])
+	}, [name, server, systems])
 
 	// get stats
 	useEffect(() => {
@@ -95,7 +95,7 @@ export default function ServerDetail({ name }: { name: string }) {
 			})
 			.then((records) => {
 				// console.log('sctats', records)
-				setServerStats(records)
+				setSystemStats(records)
 			})
 	}, [server, chartTime])
 
@@ -107,7 +107,7 @@ export default function ServerDetail({ name }: { name: string }) {
 
 	// create cpu / mem / disk data for charts
 	useEffect(() => {
-		if (!serverStats.length) {
+		if (!systemStats.length) {
 			return
 		}
 		const cpuData = [] as typeof cpuChartData
@@ -115,7 +115,7 @@ export default function ServerDetail({ name }: { name: string }) {
 		const diskData = [] as typeof diskChartData
 		const diskIoData = [] as typeof diskIoChartData
 		const networkData = [] as typeof bandwidthChartData
-		for (let { created, stats } of serverStats) {
+		for (let { created, stats } of systemStats) {
 			const time = new Date(created).getTime()
 			cpuData.push({ time, cpu: stats.cpu })
 			memData.push({
@@ -133,17 +133,17 @@ export default function ServerDetail({ name }: { name: string }) {
 		setDiskChartData(diskData)
 		setDiskIoChartData(diskIoData)
 		setBandwidthChartData(networkData)
-	}, [serverStats])
+	}, [systemStats])
 
 	useEffect(() => {
-		if (!serverStats.length) {
+		if (!systemStats.length) {
 			return
 		}
 		const now = new Date()
 		const startTime = chartTimeData[chartTime].getOffset(now)
 		const scale = scaleTime([startTime.getTime(), now], [0, cpuChartData.length])
 		setTicks(scale.ticks().map((d) => d.getTime()))
-	}, [chartTime, serverStats])
+	}, [chartTime, systemStats])
 
 	// get container stats
 	useEffect(() => {

hub/site/src/components/systems-table/systems-table.tsx

@@ -59,7 +59,7 @@ import {
 import { useMemo, useState } from 'react'
 import { $systems, pb } from '@/lib/stores'
 import { useStore } from '@nanostores/react'
-import { AddServerButton } from '../add-server'
+import { AddSystemButton } from '../add-system'
 import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils'
 import AlertsButton from '../table-alerts'
 import { navigate } from '../router'
@@ -133,7 +133,7 @@ export default function SystemsTable() {
 						</span>
 					)
 				},
-				header: ({ column }) => sortableHeader(column, 'Server', Server),
+				header: ({ column }) => sortableHeader(column, 'System', Server),
 			},
 			{
 				accessorKey: 'info.cpu',
@@ -259,7 +259,7 @@ export default function SystemsTable() {
 						className="max-w-sm"
 					/>
 					<div className={cn('ml-auto flex gap-2', isReadOnlyUser() && 'hidden')}>
-						<AddServerButton />
+						<AddSystemButton />
 					</div>
 				</div>
 				<div className="rounded-md border overflow-hidden">
@@ -291,7 +291,7 @@ export default function SystemsTable() {
 										onClick={(e) => {
 											const target = e.target as HTMLElement
 											if (!target.closest('[data-nolink]') && e.currentTarget.contains(target)) {
-												navigate(`/server/${row.original.name}`)
+												navigate(`/system/${row.original.name}`)
 											}
 										}}
 									>
@@ -314,7 +314,7 @@ export default function SystemsTable() {
 							) : (
 								<TableRow>
 									<TableCell colSpan={columns.length} className="h-24 text-center">
-										No servers found
+										No systems found
 									</TableCell>
 								</TableRow>
 							)}

hub/site/src/components/table-alerts.tsx

@@ -13,9 +13,18 @@ import { cn, isAdmin } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Switch } from '@/components/ui/switch'
 import { AlertRecord, SystemRecord } from '@/types'
-import { useMemo, useState } from 'react'
+import { lazy, Suspense, useMemo, useState } from 'react'
 import { toast } from './ui/use-toast'
 
+const Slider = lazy(() => import('./ui/slider'))
+
+const failedUpdateToast = () =>
+	toast({
+		title: 'Failed to update alert',
+		description: 'Please check logs for more details.',
+		variant: 'destructive',
+	})
+
 export default function AlertsButton({ system }: { system: SystemRecord }) {
 	const alerts = useStore($alerts)
 
@@ -38,7 +47,7 @@ export default function AlertsButton({ system }: { system: SystemRecord }) {
 					/>
 				</Button>
 			</DialogTrigger>
-			<DialogContent>
+			<DialogContent className="max-h-full overflow-auto">
 				<DialogHeader>
 					<DialogTitle className="mb-1">Alerts for {system.name}</DialogTitle>
 					<DialogDescription>
@@ -54,38 +63,57 @@ export default function AlertsButton({ system }: { system: SystemRecord }) {
 								to ensure alerts are delivered.{' '}
 							</span>
 						)}
-						Webhook delivery and more alert options will be added in the future.
 					</DialogDescription>
 				</DialogHeader>
-				<Alert system={system} alerts={systemAlerts} />
+				<div className="grid gap-3">
+					<AlertStatus system={system} alerts={systemAlerts} />
+					<AlertWithSlider
+						system={system}
+						alerts={systemAlerts}
+						name="CPU"
+						title="CPU usage"
+						description="Triggers when CPU usage exceeds a threshold."
+					/>
+					<AlertWithSlider
+						system={system}
+						alerts={systemAlerts}
+						name="Memory"
+						title="Memory usage"
+						description="Triggers when memory usage exceeds a threshold."
+					/>
+					<AlertWithSlider
+						system={system}
+						alerts={systemAlerts}
+						name="Disk"
+						title="Disk usage"
+						description="Triggers when disk usage exceeds a threshold."
+					/>
+				</div>
 			</DialogContent>
 		</Dialog>
 	)
 }
 
-function Alert({ system, alerts }: { system: SystemRecord; alerts: AlertRecord[] }) {
+function AlertStatus({ system, alerts }: { system: SystemRecord; alerts: AlertRecord[] }) {
 	const [pendingChange, setPendingChange] = useState(false)
 
 	const alert = useMemo(() => {
-		return alerts.find((alert) => alert.name === 'status')
+		return alerts.find((alert) => alert.name === 'Status')
 	}, [alerts])
 
 	return (
 		<label
-			htmlFor="status"
+			htmlFor="alert-status"
 			className="space-y-2 flex flex-row items-center justify-between rounded-lg border p-4 cursor-pointer"
 		>
 			<div className="grid gap-0.5 select-none">
-				<p className="font-medium text-base">System status</p>
-				<span
-					id=":r3m:-form-item-description"
-					className="block text-[0.8rem] text-foreground opacity-80"
-				>
+				<p className="font-medium text-[1.05em]">System status</p>
+				<span className="block text-[0.85em] text-foreground opacity-80">
 					Triggers when status switches between up and down.
 				</span>
 			</div>
 			<Switch
-				id="status"
+				id="alert-status"
 				className={cn('transition-opacity', pendingChange && 'opacity-40')}
 				checked={!!alert}
 				value={!!alert ? 'on' : 'off'}
@@ -101,15 +129,11 @@ function Alert({ system, alerts }: { system: SystemRecord; alerts: AlertRecord[]
 							pb.collection('alerts').create({
 								system: system.id,
 								user: pb.authStore.model!.id,
-								name: 'status',
+								name: 'Status',
 							})
 						}
 					} catch (e) {
-						toast({
-							title: 'Failed to update alert',
-							description: 'Please check logs for more details.',
-							variant: 'destructive',
-						})
+						failedUpdateToast()
 					} finally {
 						setPendingChange(false)
 					}
@@ -118,3 +142,93 @@ function Alert({ system, alerts }: { system: SystemRecord; alerts: AlertRecord[]
 		</label>
 	)
 }
+
+function AlertWithSlider({
+	system,
+	alerts,
+	name,
+	title,
+	description,
+}: {
+	system: SystemRecord
+	alerts: AlertRecord[]
+	name: string
+	title: string
+	description: string
+}) {
+	const [pendingChange, setPendingChange] = useState(false)
+	const [liveValue, setLiveValue] = useState(50)
+
+	const alert = useMemo(() => {
+		const alert = alerts.find((alert) => alert.name === name)
+		if (alert) {
+			setLiveValue(alert.value)
+		}
+		return alert
+	}, [alerts])
+
+	return (
+		<div className="rounded-lg border">
+			<label
+				htmlFor={`alert-${name}`}
+				className={cn('space-y-2 flex flex-row items-center justify-between cursor-pointer p-4', {
+					'pb-0': !!alert,
+				})}
+			>
+				<div className="grid gap-0.5 select-none">
+					<p className="font-medium text-[1.05em]">{title}</p>
+					<span className="block text-[0.85em] text-foreground opacity-80">{description}</span>
+				</div>
+				<Switch
+					id={`alert-${name}`}
+					className={cn('transition-opacity', pendingChange && 'opacity-40')}
+					checked={!!alert}
+					value={!!alert ? 'on' : 'off'}
+					onCheckedChange={async (active) => {
+						if (pendingChange) {
+							return
+						}
+						setPendingChange(true)
+						try {
+							if (!active && alert) {
+								await pb.collection('alerts').delete(alert.id)
+							} else if (active) {
+								pb.collection('alerts').create({
+									system: system.id,
+									user: pb.authStore.model!.id,
+									name,
+									value: liveValue,
+								})
+							}
+						} catch (e) {
+							failedUpdateToast()
+						} finally {
+							setPendingChange(false)
+						}
+					}}
+				/>
+			</label>
+			{alert && (
+				<div className="flex mt-2 mb-3 gap-3 px-4">
+					<Suspense>
+						<Slider
+							defaultValue={[liveValue]}
+							onValueCommit={(val) => {
+								pb.collection('alerts').update(alert.id, {
+									value: val[0],
+								})
+							}}
+							onValueChange={(val) => {
+								setLiveValue(val[0])
+							}}
+							min={10}
+							max={99}
+							// step={1}
+						/>
+					</Suspense>
+					<span className="tabular-nums tracking-tighter text-[.92em]">{liveValue}%</span>
+				</div>
+			)}
+		</div>
+	)
+}

hub/site/src/components/ui/slider.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn('relative flex w-full touch-none select-none items-center', className)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export default Slider

hub/site/src/lib/utils.ts

@@ -26,18 +26,26 @@ export async function copyToClipboard(content: string) {
 		})
 	}
 }
-
-export const updateServerList = () => {
-	pb.collection<SystemRecord>('systems')
-		.getFullList({ sort: '+name' })
-		.then((records) => {
-			$systems.set(records)
+const verifyAuth = () => {
+	pb.collection('users')
+		.authRefresh()
+		.catch(() => {
+			pb.authStore.clear()
 		})
 }
 
+export const updateSystemList = async () => {
+	try {
+		const records = await pb.collection<SystemRecord>('systems').getFullList({ sort: '+name' })
+		$systems.set(records)
+	} catch (e) {
+		verifyAuth()
+	}
+}
+
 export const updateAlerts = () => {
 	pb.collection('alerts')
-		.getFullList<AlertRecord>({ fields: 'id,name,system' })
+		.getFullList<AlertRecord>({ fields: 'id,name,system,value' })
 		.then((records) => {
 			$alerts.set(records)
 		})

hub/site/src/main.tsx

@@ -11,7 +11,7 @@ import {
 	updateAlerts,
 	updateFavicon,
 	updateRecordList,
-	updateServerList,
+	updateSystemList,
 } from './lib/utils.ts'
 import { buttonVariants } from './components/ui/button.tsx'
 import {
@@ -44,16 +44,16 @@ import {
 } from './components/ui/dropdown-menu.tsx'
 import { AlertRecord, SystemRecord } from './types'
 import { $router, Link, navigate } from './components/router.tsx'
-import ServerDetail from './components/routes/server.tsx'
+import ServerDetail from './components/routes/system.tsx'
 
-// const ServerDetail = lazy(() => import('./components/routes/server.tsx'))
+// const ServerDetail = lazy(() => import('./components/routes/system.tsx'))
 const CommandPalette = lazy(() => import('./components/command-palette.tsx'))
 const LoginPage = lazy(() => import('./components/login/login.tsx'))
 
 const App = () => {
 	const page = useStore($router)
 	const authenticated = useStore($authenticated)
-	const servers = useStore($systems)
+	const systems = useStore($systems)
 
 	useEffect(() => {
 		// change auth store on auth change
@@ -61,7 +61,7 @@ const App = () => {
 			$authenticated.set(pb.authStore.isValid)
 		})
 		// get servers / alerts
-		updateServerList()
+		updateSystemList()
 		updateAlerts()
 		// subscribe to real time updates for systems / alerts
 		pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
@@ -79,15 +79,15 @@ const App = () => {
 
 	// update favicon
 	useEffect(() => {
-		if (!authenticated || !servers.length) {
+		if (!authenticated || !systems.length) {
 			updateFavicon('favicon.svg')
 		} else {
 			let up = false
-			for (const server of servers) {
-				if (server.status === 'down') {
+			for (const system of systems) {
+				if (system.status === 'down') {
 					updateFavicon('favicon-red.svg')
 					return () => updateFavicon('favicon.svg')
-				} else if (server.status === 'up') {
+				} else if (system.status === 'up') {
 					up = true
 				}
 			}
@@ -97,7 +97,7 @@ const App = () => {
 		return () => {
 			updateFavicon('favicon.svg')
 		}
-	}, [authenticated, servers])
+	}, [authenticated, systems])
 
 	if (!page) {
 		return <h1 className="text-3xl text-center my-14">404</h1>

readme.md

@@ -28,23 +28,39 @@ A lightweight server resource monitoring hub with historical data, docker stats,
 
 Beszel has two components: the hub and the agent.
 
-The hub is a web application, built on top of [PocketBase](https://pocketbase.io/), that provides a dashboard to view and manage your connected systems.
+The hub is a web application that provides a dashboard to view and manage your connected systems. It's built on top of [PocketBase](https://pocketbase.io/).
 
 The agent runs on each system you want to monitor. It creates a minimal SSH server through which it communicates system metrics to the hub.
 
+[![Docker Image Size (tag)](https://img.shields.io/docker/image-size/henrygd/beszel-agent/0.0.1-alpha.3?logo=docker&label=agent%20image%20size)](https://hub.docker.com/r/henrygd/beszel-agent)
+[![Docker Image Size (tag)](https://img.shields.io/docker/image-size/henrygd/beszel/0.0.1-alpha.3?logo=docker&label=hub%20image%20size)](https://hub.docker.com/r/henrygd/beszel)
+
+## Getting started
+
+If using the binary instead of docker, ignore 4-5 and run the agent using the binary instead.
+
+1. Start the hub (see [Installation](#installation)). The binary command is `beszel serve`.
+2. Open http://localhost:8090 and create an admin user.
+3. Click "Add system." Enter the name and host of the system you want to monitor.
+4. Click "Copy docker compose" to copy the agent's docker-compose.yml file to your clipboard.
+5. On the agent system, create the compose file and run `docker compose up` to start the agent.
+6. Back in the hub, click the "Add system" button in the dialog to finish adding the system.
+
+If all goes well, you should see the system flip to green. If it goes red, check the Logs page, and see [troubleshooting tips](#faq--troubleshooting).
+
 ## Installation
 
-The hub and agent are distributed as single binary files, as well as docker images.
+You may choose to install the hub and agent as single binaries, or as docker images.
 
 ### Docker
 
 **Hub**: See the example [docker-compose.yml](/hub/docker-compose.yml) file.
 
-**Agent**: The hub provides compose content when adding a system to monitor, but you can also reference the example [docker-compose.yml](/agent/docker-compose.yml) file.
+**Agent**: The hub provides compose content for the agent, but you can also reference the example [docker-compose.yml](/agent/docker-compose.yml) file.
 
-The agent uses the `host` network mode, which automatically exposes the port. So change the port using an environment variable if you need to. It's set up this way so that can access stats for your host network interfaces.
+The agent uses the host network mode so it can access network interface stats. This automatically exposes the port, so change the port using an environment variable if you need to.
 
-If you don't want to use the host network, you may remove that line from the compose file and manually expose the port. This will prevent the network stats from populating.
+If you don't need network stats, remove that line from the compose file and map the port manually.
 
 > **Note**: The docker version of the agent cannot automatically detect the filesystem to use for disk I/O stats, so include the `FILESYSTEM` environment variable if you want that to work ([instructions here](#finding-the-correct-filesystem)).
 
@@ -78,10 +94,11 @@ Use `beszel update` and `beszel-agent update` to update to the latest version.
 
 ### Agent
 
-| Name         | Default | Description                                      |
-| ------------ | ------- | ------------------------------------------------ |
-| `FILESYSTEM` | unset   | Filesystem / partition to use for disk I/O stats |
-| `PORT`       | 45876   | Port to listen on                                |
+| Name         | Default | Description                                                |
+| ------------ | ------- | ---------------------------------------------------------- |
+| `FILESYSTEM` | unset   | Filesystem / partition to use for disk I/O stats           |
+| `KEY`        | unset   | Public SSH key to use for authentication. Provided in hub. |
+| `PORT`       | 45876   | Port to listen on                                          |
 
 ## OAuth / OIDC setup