release 0.6.1

* removes unused things from chart.tsx
* updates y axis width only if it grows
* add generic area chart component and remove individual cpu, bandwidth, disk io charts

.github/workflows/docker-images.yml

@@ -3,7 +3,7 @@ name: Make docker images
 on:
   push:
     tags:
-      - '*'
+      - 'v*'
 
 jobs:
   build:
@@ -71,5 +71,3 @@ jobs:
           push: ${{ github.ref_type == 'tag' }}
           tags: ${{ steps.metadata.outputs.tags }}
           labels: ${{ steps.metadata.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha

.gitignore

@@ -11,4 +11,3 @@ dist
 beszel/cmd/hub/hub
 beszel/cmd/agent/agent
 node_modules
-package-lock.json

SECURITY.md

@@ -0,0 +1,9 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+If you find a vulnerability in the latest version, please email me directly at hank@henrygd.me, or [submit a private advisory](https://github.com/henrygd/beszel/security/advisories/new).
+
+If you submit an advisory, open an empty issue as well to let me know that you did (or email me), as I'm not sure if I get notifications for that.
+
+If the issue is low severity (use best judgement) you may open an issue for it instead of contacting me directly.

beszel/cmd/agent/agent.go

@@ -3,7 +3,6 @@ package main
 import (
 	"beszel"
 	"beszel/internal/agent"
-	"beszel/internal/update"
 	"fmt"
 	"log"
 	"os"
@@ -17,7 +16,7 @@ func main() {
 		case "-v":
 			fmt.Println(beszel.AppName+"-agent", beszel.Version)
 		case "update":
-			update.UpdateBeszelAgent()
+			agent.Update()
 		}
 		os.Exit(0)
 	}
@@ -38,5 +37,5 @@ func main() {
 		addr = portEnvVar
 	}
 
-	agent.NewAgent(pubKey, addr).Run()
+	agent.NewAgent().Run(pubKey, addr)
 }

beszel/cmd/hub/hub.go

@@ -3,7 +3,6 @@ package main
 import (
 	"beszel"
 	"beszel/internal/hub"
-	"beszel/internal/update"
 	_ "beszel/migrations"
 
 	"github.com/pocketbase/pocketbase"
@@ -22,7 +21,7 @@ func main() {
 	app.RootCmd.AddCommand(&cobra.Command{
 		Use:   "update",
 		Short: "Update " + beszel.AppName + " to the latest version",
-		Run:   func(_ *cobra.Command, _ []string) { update.UpdateBeszel() },
+		Run:   hub.Update,
 	})
 
 	hub.NewHub(app).Run()

beszel/go.mod

@@ -4,45 +4,49 @@ go 1.22.4
 
 require (
 	github.com/blang/semver v3.5.1+incompatible
+	github.com/containrrr/shoutrrr v0.8.0
 	github.com/gliderlabs/ssh v0.3.7
 	github.com/goccy/go-json v0.10.3
 	github.com/labstack/echo/v5 v5.0.0-20230722203903-ec5b858dab61
 	github.com/pocketbase/dbx v1.10.1
-	github.com/pocketbase/pocketbase v0.22.20
+	github.com/pocketbase/pocketbase v0.22.22
 	github.com/rhysd/go-github-selfupdate v1.2.3
-	github.com/shirou/gopsutil/v4 v4.24.8
+	github.com/shirou/gopsutil/v4 v4.24.9
+	github.com/spf13/cast v1.7.0
 	github.com/spf13/cobra v1.8.1
-	golang.org/x/crypto v0.26.0
+	golang.org/x/crypto v0.28.0
 )
 
 require (
 	github.com/AlecAivazis/survey/v2 v2.3.7 // indirect
 	github.com/anmitsu/go-shlex v0.0.0-20200514113438-38f4b401e2be // indirect
 	github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2 // indirect
-	github.com/aws/aws-sdk-go-v2 v1.30.5 // indirect
-	github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.4 // indirect
-	github.com/aws/aws-sdk-go-v2/config v1.27.32 // indirect
-	github.com/aws/aws-sdk-go-v2/credentials v1.17.31 // indirect
-	github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.13 // indirect
-	github.com/aws/aws-sdk-go-v2/feature/s3/manager v1.17.17 // indirect
-	github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.17 // indirect
-	github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.17 // indirect
+	github.com/aws/aws-sdk-go-v2 v1.32.2 // indirect
+	github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.6 // indirect
+	github.com/aws/aws-sdk-go-v2/config v1.28.0 // indirect
+	github.com/aws/aws-sdk-go-v2/credentials v1.17.41 // indirect
+	github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.17 // indirect
+	github.com/aws/aws-sdk-go-v2/feature/s3/manager v1.17.33 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.21 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.21 // indirect
 	github.com/aws/aws-sdk-go-v2/internal/ini v1.8.1 // indirect
-	github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.17 // indirect
-	github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.11.4 // indirect
-	github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.19 // indirect
-	github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.19 // indirect
-	github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.17 // indirect
-	github.com/aws/aws-sdk-go-v2/service/s3 v1.61.1 // indirect
-	github.com/aws/aws-sdk-go-v2/service/sso v1.22.6 // indirect
-	github.com/aws/aws-sdk-go-v2/service/ssooidc v1.26.6 // indirect
-	github.com/aws/aws-sdk-go-v2/service/sts v1.30.6 // indirect
-	github.com/aws/smithy-go v1.20.4 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.21 // indirect
+	github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.0 // indirect
+	github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.4.2 // indirect
+	github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.2 // indirect
+	github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.18.2 // indirect
+	github.com/aws/aws-sdk-go-v2/service/s3 v1.66.0 // indirect
+	github.com/aws/aws-sdk-go-v2/service/sso v1.24.2 // indirect
+	github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.2 // indirect
+	github.com/aws/aws-sdk-go-v2/service/sts v1.32.2 // indirect
+	github.com/aws/smithy-go v1.22.0 // indirect
+	github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc // indirect
 	github.com/disintegration/imaging v1.6.2 // indirect
 	github.com/domodwyer/mailyak/v3 v3.6.2 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/ebitengine/purego v0.8.0 // indirect
 	github.com/fatih/color v1.17.0 // indirect
-	github.com/gabriel-vasile/mimetype v1.4.5 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.6 // indirect
 	github.com/ganigeorgiev/fexpr v0.4.1 // indirect
 	github.com/go-ole/go-ole v1.3.0 // indirect
 	github.com/go-ozzo/ozzo-validation/v4 v4.3.0 // indirect
@@ -56,16 +60,15 @@ require (
 	github.com/inconshreveable/go-update v0.0.0-20160112193335-8152e7eb6ccf // indirect
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
-	github.com/lufia/plan9stats v0.0.0-20240819163618-b1d8f4d146e7 // indirect
+	github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/mattn/go-sqlite3 v1.14.22 // indirect
+	github.com/mattn/go-sqlite3 v1.14.24 // indirect
 	github.com/mgutz/ansi v0.0.0-20200706080929-d51e80ef957d // indirect
 	github.com/ncruces/go-strftime v0.1.9 // indirect
+	github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 // indirect
 	github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/shoenig/go-m1cpu v0.1.6 // indirect
-	github.com/spf13/cast v1.7.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/tcnksm/go-gitconfig v0.1.2 // indirect
 	github.com/tklauser/go-sysconf v0.3.14 // indirect
@@ -75,25 +78,26 @@ require (
 	github.com/valyala/fasttemplate v1.2.2 // indirect
 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
 	go.opencensus.io v0.24.0 // indirect
-	gocloud.dev v0.39.0 // indirect
-	golang.org/x/image v0.19.0 // indirect
-	golang.org/x/net v0.28.0 // indirect
-	golang.org/x/oauth2 v0.22.0 // indirect
+	gocloud.dev v0.40.0 // indirect
+	golang.org/x/exp v0.0.0-20241009180824-f66d83c29e7c // indirect
+	golang.org/x/image v0.21.0 // indirect
+	golang.org/x/net v0.30.0 // indirect
+	golang.org/x/oauth2 v0.23.0 // indirect
 	golang.org/x/sync v0.8.0 // indirect
-	golang.org/x/sys v0.24.0 // indirect
-	golang.org/x/term v0.23.0 // indirect
-	golang.org/x/text v0.17.0 // indirect
-	golang.org/x/time v0.6.0 // indirect
+	golang.org/x/sys v0.26.0 // indirect
+	golang.org/x/term v0.25.0 // indirect
+	golang.org/x/text v0.19.0 // indirect
+	golang.org/x/time v0.7.0 // indirect
 	golang.org/x/xerrors v0.0.0-20240903120638-7835f813f4da // indirect
-	google.golang.org/api v0.196.0 // indirect
-	google.golang.org/genproto/googleapis/rpc v0.0.0-20240903143218-8af14fe29dc1 // indirect
-	google.golang.org/grpc v1.66.0 // indirect
-	google.golang.org/protobuf v1.34.2 // indirect
-	modernc.org/gc/v3 v3.0.0-20240801135723-a856999a2e4a // indirect
-	modernc.org/libc v1.60.1 // indirect
+	google.golang.org/api v0.201.0 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20241015192408-796eee8c2d53 // indirect
+	google.golang.org/grpc v1.67.1 // indirect
+	google.golang.org/protobuf v1.35.1 // indirect
+	modernc.org/gc/v3 v3.0.0-20241004144649-1aea3fae8852 // indirect
+	modernc.org/libc v1.61.0 // indirect
 	modernc.org/mathutil v1.6.0 // indirect
 	modernc.org/memory v1.8.0 // indirect
-	modernc.org/sqlite v1.32.0 // indirect
+	modernc.org/sqlite v1.33.1 // indirect
 	modernc.org/strutil v1.2.0 // indirect
 	modernc.org/token v1.1.0 // indirect
 )

beszel/go.sum

@@ -1,12 +1,13 @@
 cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
-cloud.google.com/go v0.115.1 h1:Jo0SM9cQnSkYfp44+v+NQXHpcHqlnRJk2qxh6yvxxxQ=
-cloud.google.com/go v0.115.1/go.mod h1:DuujITeaufu3gL68/lOFIirVNJwQeyf5UXyi+Wbgknc=
-cloud.google.com/go/auth v0.9.3 h1:VOEUIAADkkLtyfr3BLa3R8Ed/j6w1jTBmARx+wb5w5U=
-cloud.google.com/go/auth v0.9.3/go.mod h1:7z6VY+7h3KUdRov5F1i8NDP5ZzWKYmEPO842BgCsmTk=
+cloud.google.com/go v0.116.0 h1:B3fRrSDkLRt5qSHWe40ERJvhvnQwdZiHu0bJOpldweE=
+cloud.google.com/go v0.116.0/go.mod h1:cEPSRWPzZEswwdr9BxE6ChEn01dWlTaF05LiC2Xs70U=
+cloud.google.com/go/auth v0.9.8 h1:+CSJ0Gw9iVeSENVCKJoLHhdUykDgXSc4Qn+gu2BRtR8=
+cloud.google.com/go/auth v0.9.8/go.mod h1:xxA5AqpDrvS+Gkmo9RqrGGRh6WSNKKOXhY3zNOr38tI=
 cloud.google.com/go/auth/oauth2adapt v0.2.4 h1:0GWE/FUsXhf6C+jAkWgYm7X9tK8cuEIfy19DBn6B6bY=
 cloud.google.com/go/auth/oauth2adapt v0.2.4/go.mod h1:jC/jOpwFP6JBxhB3P5Rr0a9HLMC/Pe3eaL4NmdvqPtc=
-cloud.google.com/go/compute/metadata v0.5.0 h1:Zr0eK8JbFv6+Wi4ilXAR8FJ3wyNdpxHKJNPos6LTZOY=
-cloud.google.com/go/compute/metadata v0.5.0/go.mod h1:aHnloV2TPI38yx4s9+wAZhHykWvVCfu7hQbF+9CWoiY=
+cloud.google.com/go/compute v1.14.0 h1:hfm2+FfxVmnRlh6LpB7cg1ZNU+5edAHmW679JePztk0=
+cloud.google.com/go/compute/metadata v0.5.2 h1:UxK4uu/Tn+I3p2dYWTfiX4wva7aYlKixAHn3fyqngqo=
+cloud.google.com/go/compute/metadata v0.5.2/go.mod h1:C66sj2AluDcIqakBq/M8lw8/ybHgOZqin2obFxa/E5k=
 cloud.google.com/go/iam v1.1.13 h1:7zWBXG9ERbMLrzQBRhFliAV+kjcRToDTgQT3CTwYyv4=
 cloud.google.com/go/iam v1.1.13/go.mod h1:K8mY0uSXwEXS30KrnVb+j54LB/ntfZu1dr+4zFMNbus=
 cloud.google.com/go/storage v1.43.0 h1:CcxnSohZwizt4LCzQHWvBf1/kvtHUn7gk9QERXPyXFs=
@@ -25,61 +26,66 @@ github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2 h1:DklsrG3d
 github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2/go.mod h1:WaHUgvxTVq04UNunO+XhnAqY/wQc+bxr74GqbsZ/Jqw=
 github.com/aws/aws-sdk-go v1.55.5 h1:KKUZBfBoyqy5d3swXyiC7Q76ic40rYcbqH7qjh59kzU=
 github.com/aws/aws-sdk-go v1.55.5/go.mod h1:eRwEWoyTWFMVYVQzKMNHWP5/RV4xIUGMQfXQHfHkpNU=
-github.com/aws/aws-sdk-go-v2 v1.30.5 h1:mWSRTwQAb0aLE17dSzztCVJWI9+cRMgqebndjwDyK0g=
-github.com/aws/aws-sdk-go-v2 v1.30.5/go.mod h1:CT+ZPWXbYrci8chcARI3OmI/qgd+f6WtuLOoaIA8PR0=
-github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.4 h1:70PVAiL15/aBMh5LThwgXdSQorVr91L127ttckI9QQU=
-github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.4/go.mod h1:/MQxMqci8tlqDH+pjmoLu1i0tbWCUP1hhyMRuFxpQCw=
-github.com/aws/aws-sdk-go-v2/config v1.27.32 h1:jnAMVTJTpAQlePCUUlnXnllHEMGVWmvUJOiGjgtS9S0=
-github.com/aws/aws-sdk-go-v2/config v1.27.32/go.mod h1:JibtzKJoXT0M/MhoYL6qfCk7nm/MppwukDFZtdgVRoY=
-github.com/aws/aws-sdk-go-v2/credentials v1.17.31 h1:jtyfcOfgoqWA2hW/E8sFbwdfgwD3APnF9CLCKE8dTyw=
-github.com/aws/aws-sdk-go-v2/credentials v1.17.31/go.mod h1:RSgY5lfCfw+FoyKWtOpLolPlfQVdDBQWTUniAaE+NKY=
-github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.13 h1:pfQ2sqNpMVK6xz2RbqLEL0GH87JOwSxPV2rzm8Zsb74=
-github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.13/go.mod h1:NG7RXPUlqfsCLLFfi0+IpKN4sCB9D9fw/qTaSB+xRoU=
-github.com/aws/aws-sdk-go-v2/feature/s3/manager v1.17.17 h1:QbV9wh6vtB3UAZvdfktPj8jT+w6yIrKYd4PngLWDmCE=
-github.com/aws/aws-sdk-go-v2/feature/s3/manager v1.17.17/go.mod h1:0trBfk2z3LEozr2WZz7IxcRJWl2jv0Ro7JpByqh3coQ=
-github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.17 h1:pI7Bzt0BJtYA0N/JEC6B8fJ4RBrEMi1LBrkMdFYNSnQ=
-github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.17/go.mod h1:Dh5zzJYMtxfIjYW+/evjQ8uj2OyR/ve2KROHGHlSFqE=
-github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.17 h1:Mqr/V5gvrhA2gvgnF42Zh5iMiQNcOYthFYwCyrnuWlc=
-github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.17/go.mod h1:aLJpZlCmjE+V+KtN1q1uyZkfnUWpQGpbsn89XPKyzfU=
+github.com/aws/aws-sdk-go-v2 v1.32.2 h1:AkNLZEyYMLnx/Q/mSKkcMqwNFXMAvFto9bNsHqcTduI=
+github.com/aws/aws-sdk-go-v2 v1.32.2/go.mod h1:2SK5n0a2karNTv5tbP1SjsX0uhttou00v/HpXKM1ZUo=
+github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.6 h1:pT3hpW0cOHRJx8Y0DfJUEQuqPild8jRGmSFmBgvydr0=
+github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.6/go.mod h1:j/I2++U0xX+cr44QjHay4Cvxj6FUbnxrgmqN3H1jTZA=
+github.com/aws/aws-sdk-go-v2/config v1.28.0 h1:FosVYWcqEtWNxHn8gB/Vs6jOlNwSoyOCA/g/sxyySOQ=
+github.com/aws/aws-sdk-go-v2/config v1.28.0/go.mod h1:pYhbtvg1siOOg8h5an77rXle9tVG8T+BWLWAo7cOukc=
+github.com/aws/aws-sdk-go-v2/credentials v1.17.41 h1:7gXo+Axmp+R4Z+AK8YFQO0ZV3L0gizGINCOWxSLY9W8=
+github.com/aws/aws-sdk-go-v2/credentials v1.17.41/go.mod h1:u4Eb8d3394YLubphT4jLEwN1rLNq2wFOlT6OuxFwPzU=
+github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.17 h1:TMH3f/SCAWdNtXXVPPu5D6wrr4G5hI1rAxbcocKfC7Q=
+github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.17/go.mod h1:1ZRXLdTpzdJb9fwTMXiLipENRxkGMTn1sfKexGllQCw=
+github.com/aws/aws-sdk-go-v2/feature/s3/manager v1.17.33 h1:X+4YY5kZRI/cOoSMVMGTqFXHAMg1bvvay7IBcqHpybQ=
+github.com/aws/aws-sdk-go-v2/feature/s3/manager v1.17.33/go.mod h1:DPynzu+cn92k5UQ6tZhX+wfTB4ah6QDU/NgdHqatmvk=
+github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.21 h1:UAsR3xA31QGf79WzpG/ixT9FZvQlh5HY1NRqSHBNOCk=
+github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.21/go.mod h1:JNr43NFf5L9YaG3eKTm7HQzls9J+A9YYcGI5Quh1r2Y=
+github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.21 h1:6jZVETqmYCadGFvrYEQfC5fAQmlo80CeL5psbno6r0s=
+github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.21/go.mod h1:1SR0GbLlnN3QUmYaflZNiH1ql+1qrSiB2vwcJ+4UM60=
 github.com/aws/aws-sdk-go-v2/internal/ini v1.8.1 h1:VaRN3TlFdd6KxX1x3ILT5ynH6HvKgqdiXoTxAF4HQcQ=
 github.com/aws/aws-sdk-go-v2/internal/ini v1.8.1/go.mod h1:FbtygfRFze9usAadmnGJNc8KsP346kEe+y2/oyhGAGc=
-github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.17 h1:Roo69qTpfu8OlJ2Tb7pAYVuF0CpuUMB0IYWwYP/4DZM=
-github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.17/go.mod h1:NcWPxQzGM1USQggaTVwz6VpqMZPX1CvDJLDh6jnOCa4=
-github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.11.4 h1:KypMCbLPPHEmf9DgMGw51jMj77VfGPAN2Kv4cfhlfgI=
-github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.11.4/go.mod h1:Vz1JQXliGcQktFTN/LN6uGppAIRoLBR2bMvIMP0gOjc=
-github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.19 h1:FLMkfEiRjhgeDTCjjLoc3URo/TBkgeQbocA78lfkzSI=
-github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.19/go.mod h1:Vx+GucNSsdhaxs3aZIKfSUjKVGsxN25nX2SRcdhuw08=
-github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.19 h1:rfprUlsdzgl7ZL2KlXiUAoJnI/VxfHCvDFr2QDFj6u4=
-github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.19/go.mod h1:SCWkEdRq8/7EK60NcvvQ6NXKuTcchAD4ROAsC37VEZE=
-github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.17 h1:u+EfGmksnJc/x5tq3A+OD7LrMbSSR/5TrKLvkdy/fhY=
-github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.17/go.mod h1:VaMx6302JHax2vHJWgRo+5n9zvbacs3bLU/23DNQrTY=
-github.com/aws/aws-sdk-go-v2/service/s3 v1.61.1 h1:6ZRIbdMbN83W2/EIAU5z8FQZpmuULsBojTaok+uBEIg=
-github.com/aws/aws-sdk-go-v2/service/s3 v1.61.1/go.mod h1:5FmD/Dqq57gP+XwaUnd5WFPipAuzrf0HmupX27Gvjvc=
-github.com/aws/aws-sdk-go-v2/service/sso v1.22.6 h1:o++HUDXlbrTl4PSal3YHtdErQxB8mDGAtkKNXBWPfIU=
-github.com/aws/aws-sdk-go-v2/service/sso v1.22.6/go.mod h1:eEygMHnTKH/3kNp9Jr1n3PdejuSNcgwLe1dWgQtO0VQ=
-github.com/aws/aws-sdk-go-v2/service/ssooidc v1.26.6 h1:yCHcQCOwTfIsc8DoEhM3qXPxD+j8CbI6t1K3dNzsWV0=
-github.com/aws/aws-sdk-go-v2/service/ssooidc v1.26.6/go.mod h1:bCbAxKDqNvkHxRaIMnyVPXPo+OaPRwvmgzMxbz1VKSA=
-github.com/aws/aws-sdk-go-v2/service/sts v1.30.6 h1:TrQadF7GcqvQ63kgwEcjlrVc2Fa0wpgLT0xtc73uAd8=
-github.com/aws/aws-sdk-go-v2/service/sts v1.30.6/go.mod h1:NXi1dIAGteSaRLqYgarlhP/Ij0cFT+qmCwiJqWh/U5o=
-github.com/aws/smithy-go v1.20.4 h1:2HK1zBdPgRbjFOHlfeQZfpC4r72MOb9bZkiFwggKO+4=
-github.com/aws/smithy-go v1.20.4/go.mod h1:irrKGvNn1InZwb2d7fkIRNucdfwR8R+Ts3wxYa/cJHg=
+github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.21 h1:7edmS3VOBDhK00b/MwGtGglCm7hhwNYnjJs/PgFdMQE=
+github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.21/go.mod h1:Q9o5h4HoIWG8XfzxqiuK/CGUbepCJ8uTlaE3bAbxytQ=
+github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.0 h1:TToQNkvGguu209puTojY/ozlqy2d/SFNcoLIqTFi42g=
+github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.0/go.mod h1:0jp+ltwkf+SwG2fm/PKo8t4y8pJSgOCO4D8Lz3k0aHQ=
+github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.4.2 h1:4FMHqLfk0efmTqhXVRL5xYRqlEBNBiRI7N6w4jsEdd4=
+github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.4.2/go.mod h1:LWoqeWlK9OZeJxsROW2RqrSPvQHKTpp69r/iDjwsSaw=
+github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.2 h1:s7NA1SOw8q/5c0wr8477yOPp0z+uBaXBnLE0XYb0POA=
+github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.2/go.mod h1:fnjjWyAW/Pj5HYOxl9LJqWtEwS7W2qgcRLWP+uWbss0=
+github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.18.2 h1:t7iUP9+4wdc5lt3E41huP+GvQZJD38WLsgVp4iOtAjg=
+github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.18.2/go.mod h1:/niFCtmuQNxqx9v8WAPq5qh7EH25U4BF6tjoyq9bObM=
+github.com/aws/aws-sdk-go-v2/service/s3 v1.66.0 h1:xA6XhTF7PE89BCNHJbQi8VvPzcgMtmGC5dr8S8N7lHk=
+github.com/aws/aws-sdk-go-v2/service/s3 v1.66.0/go.mod h1:cB6oAuus7YXRZhWCc1wIwPywwZ1XwweNp2TVAEGYeB8=
+github.com/aws/aws-sdk-go-v2/service/sso v1.24.2 h1:bSYXVyUzoTHoKalBmwaZxs97HU9DWWI3ehHSAMa7xOk=
+github.com/aws/aws-sdk-go-v2/service/sso v1.24.2/go.mod h1:skMqY7JElusiOUjMJMOv1jJsP7YUg7DrhgqZZWuzu1U=
+github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.2 h1:AhmO1fHINP9vFYUE0LHzCWg/LfUWUF+zFPEcY9QXb7o=
+github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.2/go.mod h1:o8aQygT2+MVP0NaV6kbdE1YnnIM8RRVQzoeUH45GOdI=
+github.com/aws/aws-sdk-go-v2/service/sts v1.32.2 h1:CiS7i0+FUe+/YY1GvIBLLrR/XNGZ4CtM1Ll0XavNuVo=
+github.com/aws/aws-sdk-go-v2/service/sts v1.32.2/go.mod h1:HtaiBI8CjYoNVde8arShXb94UbQQi9L4EMr6D+xGBwo=
+github.com/aws/smithy-go v1.22.0 h1:uunKnWlcoL3zO7q+gG2Pk53joueEOsnNB28QdMsmiMM=
+github.com/aws/smithy-go v1.22.0/go.mod h1:irrKGvNn1InZwb2d7fkIRNucdfwR8R+Ts3wxYa/cJHg=
 github.com/blang/semver v3.5.1+incompatible h1:cQNTCjp13qL8KC3Nbxr/y2Bqb63oX6wdnnjpJbkM4JQ=
 github.com/blang/semver v3.5.1+incompatible/go.mod h1:kRBLl5iJ+tD4TcOOxsy/0fnwebNt5EWlYSAyrTnjyyk=
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
 github.com/cncf/udpa/go v0.0.0-20191209042840-269d4d468f6f/go.mod h1:M8M6+tZqaGXZJjfX53e64911xZQV5JYwmTeXPW+k8Sc=
+github.com/containrrr/shoutrrr v0.8.0 h1:mfG2ATzIS7NR2Ec6XL+xyoHzN97H8WPjir8aYzJUSec=
+github.com/containrrr/shoutrrr v0.8.0/go.mod h1:ioyQAyu1LJY6sILuNyKaQaw+9Ttik5QePU8atnAdO2o=
 github.com/cpuguy83/go-md2man/v2 v2.0.4/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
 github.com/creack/pty v1.1.17 h1:QeVUsEDNrLBW4tMgZHvxy18sKtr6VI492kBhUfhDJNI=
 github.com/creack/pty v1.1.17/go.mod h1:MOBLtS5ELjhRRrroQr9kyvTxUAFNvYEK993ew/Vr4O4=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
+github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
 github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
 github.com/domodwyer/mailyak/v3 v3.6.2 h1:x3tGMsyFhTCaxp6ycgR0FE/bu5QiNp+hetUuCOBXMn8=
 github.com/domodwyer/mailyak/v3 v3.6.2/go.mod h1:lOm/u9CyCVWHeaAmHIdF4RiKVxKUT/H5XX10lIKAL6c=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/ebitengine/purego v0.8.0 h1:JbqvnEzRvPpxhCJzJJ2y0RbiZ8nyjccVUrSM3q+GvvE=
+github.com/ebitengine/purego v0.8.0/go.mod h1:iIjxzd6CiRiOG0UyXP+V1+jWqUXVjPKLAI0mRfJZTmQ=
 github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1mIlRU8Am5FuJP05cCM98=
@@ -91,8 +97,8 @@ github.com/felixge/httpsnoop v1.0.4/go.mod h1:m8KPJKqk1gH5J9DgRY2ASl2lWCfGKXixSw
 github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=
 github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
-github.com/gabriel-vasile/mimetype v1.4.5 h1:J7wGKdGu33ocBOhGy0z653k/lFKLFDPJMG8Gql0kxn4=
-github.com/gabriel-vasile/mimetype v1.4.5/go.mod h1:ibHel+/kbxn9x2407k1izTA1S81ku1z/DlgOW2QE0M4=
+github.com/gabriel-vasile/mimetype v1.4.6 h1:3+PzJTKLkvgjeTbts6msPJt4DixhT4YtFNf1gtGe3zc=
+github.com/gabriel-vasile/mimetype v1.4.6/go.mod h1:JX1qVKqZd40hUPpAfiNTe0Sne7hdfKSbOqqmkq8GCXc=
 github.com/ganigeorgiev/fexpr v0.4.1 h1:hpUgbUEEWIZhSDBtf4M9aUNfQQ0BZkGRaMePy7Gcx5k=
 github.com/ganigeorgiev/fexpr v0.4.1/go.mod h1:RyGiGqmeXhEQ6+mlGdnUleLHgtzzu/VGO2WtJkF5drE=
 github.com/gliderlabs/ssh v0.3.7 h1:iV3Bqi942d9huXnzEF2Mt+CY9gLu8DNM4Obd+8bODRE=
@@ -109,6 +115,8 @@ github.com/go-ozzo/ozzo-validation/v4 v4.3.0/go.mod h1:2NKgrcHl3z6cJs+3Oo940FPRi
 github.com/go-sql-driver/mysql v1.4.1/go.mod h1:zAC/RDZ24gD3HViQzih4MyKcchzm+sOG5ZlKdlhCg5w=
 github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
 github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
+github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572 h1:tfuBGBXKqDEevZMzYi5KSi8KkcZtzBcTgAUUtapy0OI=
+github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572/go.mod h1:9Pwr4B2jHnOSGXyyzV8ROjYa2ojvAY6HCGYYfMoC3Ls=
 github.com/goccy/go-json v0.10.3 h1:KZ5WoDbxAIgm2HNbYckL0se1fHD6rz5j4ywS6ebzDqA=
 github.com/goccy/go-json v0.10.3/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
 github.com/golang-jwt/jwt/v4 v4.5.0 h1:7cYmW1XlMY7h7ii7UhUyChSgS5wUJEnm9uZVTGqOWzg=
@@ -153,8 +161,8 @@ github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/google/wire v0.6.0 h1:HBkoIh4BdSxoyo9PveV8giw7ZsaBOvzWKfcg/6MrVwI=
 github.com/google/wire v0.6.0/go.mod h1:F4QhpQ9EDIdJ1Mbop/NZBRB+5yrR6qg3BnctaoUk6NA=
-github.com/googleapis/enterprise-certificate-proxy v0.3.3 h1:QRje2j5GZimBzlbhGA2V2QlGNgL8G6e+wGo/+/2bWI0=
-github.com/googleapis/enterprise-certificate-proxy v0.3.3/go.mod h1:YKe7cfqYXjKGpGvmSg28/fFvhNzinZQm8DGnaburhGA=
+github.com/googleapis/enterprise-certificate-proxy v0.3.4 h1:XYIDZApgAnrN1c855gTgghdIA6Stxb52D5RnLI1SLyw=
+github.com/googleapis/enterprise-certificate-proxy v0.3.4/go.mod h1:YKe7cfqYXjKGpGvmSg28/fFvhNzinZQm8DGnaburhGA=
 github.com/googleapis/gax-go/v2 v2.13.0 h1:yitjD5f7jQHhyDsnhKEBU52NdvvdSeGzlAnDPT0hH1s=
 github.com/googleapis/gax-go/v2 v2.13.0/go.mod h1:Z/fvTZXF8/uw7Xu5GuslPw+bplx6SS338j1Is2S+B7A=
 github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
@@ -166,6 +174,8 @@ github.com/inconshreveable/go-update v0.0.0-20160112193335-8152e7eb6ccf h1:WfD7V
 github.com/inconshreveable/go-update v0.0.0-20160112193335-8152e7eb6ccf/go.mod h1:hyb9oH7vZsitZCiBt0ZvifOrB+qc8PS5IiilCIb87rg=
 github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2s0bqwp9tc8=
 github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
+github.com/jarcoal/httpmock v1.3.0 h1:2RJ8GP0IIaWwcC9Fp2BmVi8Kog3v2Hn7VXM3fTd+nuc=
+github.com/jarcoal/httpmock v1.3.0/go.mod h1:3yb8rc4BI7TCBhFY8ng0gjuLKJNquuDNiPaZjnENuYg=
 github.com/jmespath/go-jmespath v0.4.0 h1:BEgLn5cpjn8UN1mAw4NjwDrS35OdebyEtFe+9YPoQUg=
 github.com/jmespath/go-jmespath v0.4.0/go.mod h1:T8mJZnbsbmF+m6zOOFylbeCJqk5+pHWvzYPziyZiYoo=
 github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 h1:Z9n2FFNUXsshfwJMBgNA0RU6/i7WVaAegv3PtuIHPMs=
@@ -179,8 +189,8 @@ github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/labstack/echo/v5 v5.0.0-20230722203903-ec5b858dab61 h1:FwuzbVh87iLiUQj1+uQUsuw9x5t9m5n5g7rG7o4svW4=
 github.com/labstack/echo/v5 v5.0.0-20230722203903-ec5b858dab61/go.mod h1:paQfF1YtHe+GrGg5fOgjsjoCX/UKDr9bc1DoWpZfns8=
-github.com/lufia/plan9stats v0.0.0-20240819163618-b1d8f4d146e7 h1:5RK988zAqB3/AN3opGfRpoQgAVqr6/A5+qRTi67VUZY=
-github.com/lufia/plan9stats v0.0.0-20240819163618-b1d8f4d146e7/go.mod h1:ilwx/Dta8jXAgpFYFvSWEMwxmbWXyiUHkd5FwyKhb5k=
+github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683 h1:7UMa6KCCMjZEMDtTVdcGu0B1GmmC7QJKiCCjyTAWQy0=
+github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683/go.mod h1:ilwx/Dta8jXAgpFYFvSWEMwxmbWXyiUHkd5FwyKhb5k=
 github.com/mattn/go-colorable v0.1.2/go.mod h1:U0ppj6V5qS13XJ6of8GYAs25YV2eR4EVcfRqFIhoBtE=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
 github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
@@ -188,22 +198,27 @@ github.com/mattn/go-isatty v0.0.8/go.mod h1:Iq45c/XA43vh69/j3iqttzPXn0bhXyGjM0Hd
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
-github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+github.com/mattn/go-sqlite3 v1.14.24 h1:tpSp2G2KyMnnQu99ngJ47EIkWVmliIizyZBfPrBWDRM=
+github.com/mattn/go-sqlite3 v1.14.24/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/mgutz/ansi v0.0.0-20170206155736-9520e82c474b/go.mod h1:01TrycV0kFyexm33Z7vhZRXopbI8J3TDReVlkTgMUxE=
 github.com/mgutz/ansi v0.0.0-20200706080929-d51e80ef957d h1:5PJl274Y63IEHC+7izoQE9x6ikvDFZS2mDVS3drnohI=
 github.com/mgutz/ansi v0.0.0-20200706080929-d51e80ef957d/go.mod h1:01TrycV0kFyexm33Z7vhZRXopbI8J3TDReVlkTgMUxE=
 github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
 github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/onsi/ginkgo v1.6.0 h1:Ix8l273rp3QzYgXSR+c8d1fTG7UPgYkOSELPhiY/YGw=
 github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
-github.com/onsi/gomega v1.4.2 h1:3mYCb7aPxS/RU7TI1y4rkEn1oKmPRjNJLNEXgw7MH2I=
+github.com/onsi/ginkgo/v2 v2.9.2 h1:BA2GMJOtfGAfagzYtrAlufIP0lq6QERkFmHLMLPwFSU=
+github.com/onsi/ginkgo/v2 v2.9.2/go.mod h1:WHcJJG2dIlcCqVfBAwUCrJxSPFb6v4azBwgxeMeDuts=
 github.com/onsi/gomega v1.4.2/go.mod h1:ex+gbHU/CVuBBDIJjb2X0qEXbFg53c61hWP/1CpauHY=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/onsi/gomega v1.27.6 h1:ENqfyGeS5AX/rlXDd/ETokDz93u0YufY1Pgxuy/PvWE=
+github.com/onsi/gomega v1.27.6/go.mod h1:PIQNjfQwkP3aQAH7lf7j87O/5FiNr+ZR8+ipb+qQlhg=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRIccs7FGNTlIRMkT8wgtp5eCXdBlqhYGL6U=
+github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/pocketbase/dbx v1.10.1 h1:cw+vsyfCJD8YObOVeqb93YErnlxwYMkNZ4rwN0G0AaA=
 github.com/pocketbase/dbx v1.10.1/go.mod h1:xXRCIAKTHMgUCyCKZm55pUOdvFziJjQfXaWKhu2vhMs=
-github.com/pocketbase/pocketbase v0.22.20 h1:yUkhO5bTPWlzD4ZK6EQlS4R3AcHKDlBD+DxxU2BR83I=
-github.com/pocketbase/pocketbase v0.22.20/go.mod h1:Cw5E4uoGhKItBIE2lJL3NfmiUr9Syk2xaNJ2G7Dssow=
+github.com/pocketbase/pocketbase v0.22.22 h1:iA128U+cmM9euxPpuCN7blmQ2FZNzOix2aUUcnbbQu8=
+github.com/pocketbase/pocketbase v0.22.22/go.mod h1:u+l7T04g7eBXetoodXLch3WoV/QonRf1qYq+2vuTKuI=
 github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 h1:o4JXh1EVt9k/+g42oCprj/FisM4qX9L3sZB3upGN2ZU=
 github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
 github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
@@ -214,12 +229,8 @@ github.com/rhysd/go-github-selfupdate v1.2.3/go.mod h1:mp/N8zj6jFfBQy/XMYoWsmfzx
 github.com/rogpeppe/go-internal v1.9.0 h1:73kH8U+JUqXU8lRuOHeVHaa/SZPifC7BkcraZVejAe8=
 github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
-github.com/shirou/gopsutil/v4 v4.24.8 h1:pVQjIenQkIhqO81mwTaXjTzOMT7d3TZkf43PlVFHENI=
-github.com/shirou/gopsutil/v4 v4.24.8/go.mod h1:wE0OrJtj4dG+hYkxqDH3QiBICdKSf04/npcvLLc/oRg=
-github.com/shoenig/go-m1cpu v0.1.6 h1:nxdKQNcEB6vzgA2E2bvzKIYRuNj7XNJ4S/aRSwKzFtM=
-github.com/shoenig/go-m1cpu v0.1.6/go.mod h1:1JJMcUBvfNwpq05QDQVAnx3gUHr9IYF7GNg9SUEw2VQ=
-github.com/shoenig/test v0.6.4 h1:kVTaSd7WLz5WZ2IaoM0RSzRsUD+m8wRR+5qvntpn4LU=
-github.com/shoenig/test v0.6.4/go.mod h1:byHiCGXqrVaflBLAMq/srcZIHynQPQgeyvkvXnjqq0k=
+github.com/shirou/gopsutil/v4 v4.24.9 h1:KIV+/HaHD5ka5f570RZq+2SaeFsb/pq+fp2DGNWYoOI=
+github.com/shirou/gopsutil/v4 v4.24.9/go.mod h1:3fkaHNeYsUFCGZ8+9vZVWtbyM1k2eRnlL+bWO8Bxa/Q=
 github.com/spf13/cast v1.7.0 h1:ntdiHjuueXFgm5nzDRdOS4yfT43P5Fnud6DH50rz/7w=
 github.com/spf13/cast v1.7.0/go.mod h1:ancEpBxwJDODSW/UG4rDrAqiKolqNNh2DX3mk86cAdo=
 github.com/spf13/cobra v1.8.1 h1:e5/vxKd/rZsfSJMUX1agtjeTDf+qv1/JdBF8gg5k9ZM=
@@ -264,24 +275,26 @@ go.opentelemetry.io/otel/metric v1.29.0 h1:vPf/HFWTNkPu1aYeIsc98l4ktOQaL6LeSoeV2
 go.opentelemetry.io/otel/metric v1.29.0/go.mod h1:auu/QWieFVWx+DmQOUMgj0F8LHWdgalxXqvp7BII/W8=
 go.opentelemetry.io/otel/trace v1.29.0 h1:J/8ZNK4XgR7a21DZUAsbF8pZ5Jcw1VhACmnYt39JTi4=
 go.opentelemetry.io/otel/trace v1.29.0/go.mod h1:eHl3w0sp3paPkYstJOmAimxhiFXPg+MMTlEh3nsQgWQ=
-gocloud.dev v0.39.0 h1:EYABYGhAalPUaMrbSKOr5lejxoxvXj99nE8XFtsDgds=
-gocloud.dev v0.39.0/go.mod h1:drz+VyYNBvrMTW0KZiBAYEdl8lbNZx+OQ7oQvdrFmSQ=
+gocloud.dev v0.40.0 h1:f8LgP+4WDqOG/RXoUcyLpeIAGOcAbZrZbDQCUee10ng=
+gocloud.dev v0.40.0/go.mod h1:drz+VyYNBvrMTW0KZiBAYEdl8lbNZx+OQ7oQvdrFmSQ=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20201221181555-eec23a3978ad/go.mod h1:jdWPYTVW3xRLrWPugEBEK3UY2ZEsg3UU495nc5E+M+I=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
-golang.org/x/crypto v0.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
-golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
+golang.org/x/crypto v0.28.0 h1:GBDwsMXVQi34v5CCYUm2jkJvu4cbtru2U4TN2PSyQnw=
+golang.org/x/crypto v0.28.0/go.mod h1:rmgy+3RHxRZMyY0jjAJShp2zgEdOqj2AO7U0pYmeQ7U=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
+golang.org/x/exp v0.0.0-20241009180824-f66d83c29e7c h1:7dEasQXItcW1xKJ2+gg5VOiBnqWrJc+rq0DPKyvvdbY=
+golang.org/x/exp v0.0.0-20241009180824-f66d83c29e7c/go.mod h1:NQtJDoLvd6faHhE7m4T/1IY708gDefGGjR/iUW8yQQ8=
 golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
-golang.org/x/image v0.19.0 h1:D9FX4QWkLfkeqaC62SonffIIuYdOk/UE2XKUBgRIBIQ=
-golang.org/x/image v0.19.0/go.mod h1:y0zrRqlQRWQ5PXaYCOMLTW2fpsxZ8Qh9I/ohnInJEys=
+golang.org/x/image v0.21.0 h1:c5qV36ajHpdj4Qi0GnE0jUc/yuo33OLFaa0d+crTD5s=
+golang.org/x/image v0.21.0/go.mod h1:vUbsLavqK/W303ZroQQVKQ+Af3Yl6Uz1Ppu5J/cLz78=
 golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
 golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
 golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
-golang.org/x/mod v0.19.0 h1:fEdghXQSo20giMthA7cd28ZC+jts4amQ3YMXiP5oMQ8=
-golang.org/x/mod v0.19.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/mod v0.21.0 h1:vvrHzRwRfVKSiLrG+d4FMl/Qi4ukBCE6kZlTUkDYRT0=
+golang.org/x/mod v0.21.0/go.mod h1:6SkKJ3Xj0I0BrPOZoBy3bdMptDDU9oJrpohJ3eWZ1fY=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -293,12 +306,12 @@ golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLL
 golang.org/x/net v0.0.0-20201110031124-69a78807bb2b/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
-golang.org/x/net v0.28.0 h1:a9JDOJc5GMUJ0+UDqmLT86WiEy7iWyIhz8gz8E4e5hE=
-golang.org/x/net v0.28.0/go.mod h1:yqtgsTWOOnlGLG9GFRrK3++bGOUEkNBoHZc8MEDWPNg=
+golang.org/x/net v0.30.0 h1:AcW1SDZMkb8IpzCdQUaIq2sP4sZ4zw+55h6ynffypl4=
+golang.org/x/net v0.30.0/go.mod h1:2wGyMJ5iFasEhkwi13ChkO/t1ECNC4X4eBKkVFyYFlU=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20181106182150-f42d05182288/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
-golang.org/x/oauth2 v0.22.0 h1:BzDx2FehcG7jJwgWLELCdmLuxk2i+x9UDpSiss2u0ZA=
-golang.org/x/oauth2 v0.22.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
+golang.org/x/oauth2 v0.23.0 h1:PbgcYx2W7i4LvjJWEbf0ngHV6qJYr86PkAV3bXdLEbs=
+golang.org/x/oauth2 v0.23.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -321,23 +334,23 @@ golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.24.0 h1:Twjiwq9dn6R1fQcyiK+wQyHWfaz/BJB+YIpzU/Cv3Xg=
-golang.org/x/sys v0.24.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.26.0 h1:KHjCJyddX0LoSTb3J+vWpupP9p0oznkqVk/IfjymZbo=
+golang.org/x/sys v0.26.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201117132131-f5c789dd3221/go.mod h1:Nr5EML6q2oocZ2LXRh80K7BxOlk5/8JxuGnuhpl+muw=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
-golang.org/x/term v0.23.0 h1:F6D4vR+EHoL9/sWAWgAR1H2DcHr4PareCbAaCo1RpuU=
-golang.org/x/term v0.23.0/go.mod h1:DgV24QBUrK6jhZXl+20l6UWznPlwAHm1Q1mGHtydmSk=
+golang.org/x/term v0.25.0 h1:WtHI/ltw4NvSUig5KARz9h521QvRC8RmF/cuYqifU24=
+golang.org/x/term v0.25.0/go.mod h1:RPyXicDX+6vLxogjjRxjgD2TKtmAO6NZBsBRfrOLu7M=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.5/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/text v0.4.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
-golang.org/x/text v0.17.0 h1:XtiM5bkSOt+ewxlOE/aE/AKEHibwj/6gvWMl9Rsh0Qc=
-golang.org/x/text v0.17.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
-golang.org/x/time v0.6.0 h1:eTDhh4ZXt5Qf0augr54TN6suAUudPcawVZeIAPU7D4U=
-golang.org/x/time v0.6.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
+golang.org/x/text v0.19.0 h1:kTxAhCbGbxhK0IwgSKiMO5awPoDQ0RpfiVYBfK860YM=
+golang.org/x/text v0.19.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
+golang.org/x/time v0.7.0 h1:ntUhktv3OPE6TgYxXWv9vKvUSJyIFJlyohwbkEwPrKQ=
+golang.org/x/time v0.7.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
@@ -345,14 +358,14 @@ golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3
 golang.org/x/tools v0.0.0-20190524140312-2c0ae7006135/go.mod h1:RgjU9mgBXZiqYHBnxXauZ1Gv1EHHAz9KjViQ78xBX0Q=
 golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
-golang.org/x/tools v0.23.0 h1:SGsXPZ+2l4JsgaCKkx+FQ9YZ5XEtA1GZYuoDjenLjvg=
-golang.org/x/tools v0.23.0/go.mod h1:pnu6ufv6vQkll6szChhK3C3L/ruaIv5eBeztNG8wtsI=
+golang.org/x/tools v0.26.0 h1:v/60pFQmzmT9ExmjDv2gGIfi3OqfKoEP6I5+umXlbnQ=
+golang.org/x/tools v0.26.0/go.mod h1:TPVVj70c7JJ3WCazhD8OdXcZg/og+b9+tH/KxylGwH0=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20240903120638-7835f813f4da h1:noIWHXmPHxILtqtCOPIhSt0ABwskkZKjD3bXGnZGpNY=
 golang.org/x/xerrors v0.0.0-20240903120638-7835f813f4da/go.mod h1:NDW/Ps6MPRej6fsCIbMTohpP40sJ/P/vI1MoTEGwX90=
-google.golang.org/api v0.196.0 h1:k/RafYqebaIJBO3+SMnfEGtFVlvp5vSgqTUF54UN/zg=
-google.golang.org/api v0.196.0/go.mod h1:g9IL21uGkYgvQ5BZg6BAtoGJQIm8r6EgaAbpNey5wBE=
+google.golang.org/api v0.201.0 h1:+7AD9JNM3tREtawRMu8sOjSbb8VYcYXJG/2eEOmfDu0=
+google.golang.org/api v0.201.0/go.mod h1:HVY0FCHVs89xIW9fzf/pBvOEm+OolHa86G/txFezyq4=
 google.golang.org/appengine v1.1.0/go.mod h1:EbEs0AVv82hx2wNQdGPgUI5lhzA/G0D9YwlJXL52JkM=
 google.golang.org/appengine v1.3.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
 google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
@@ -360,19 +373,19 @@ google.golang.org/appengine v1.6.5/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCID
 google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
 google.golang.org/genproto v0.0.0-20190819201941-24fa4b261c55/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
 google.golang.org/genproto v0.0.0-20200526211855-cb27e3aa2013/go.mod h1:NbSheEEYHJ7i3ixzK3sjbqSGDJWnxyFXZblF3eUsNvo=
-google.golang.org/genproto v0.0.0-20240903143218-8af14fe29dc1 h1:BulPr26Jqjnd4eYDVe+YvyR7Yc2vJGkO5/0UxD0/jZU=
-google.golang.org/genproto v0.0.0-20240903143218-8af14fe29dc1/go.mod h1:hL97c3SYopEHblzpxRL4lSs523++l8DYxGM1FQiYmb4=
-google.golang.org/genproto/googleapis/api v0.0.0-20240812133136-8ffd90a71988 h1:+/tmTy5zAieooKIXfzDm9KiA3Bv6JBwriRN9LY+yayk=
-google.golang.org/genproto/googleapis/api v0.0.0-20240812133136-8ffd90a71988/go.mod h1:4+X6GvPs+25wZKbQq9qyAXrwIRExv7w0Ea6MgZLZiDM=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20240903143218-8af14fe29dc1 h1:pPJltXNxVzT4pK9yD8vR9X75DaWYYmLGMsEvBfFQZzQ=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20240903143218-8af14fe29dc1/go.mod h1:UqMtugtsSgubUsoxbuAoiCXvqvErP7Gf0so0mK9tHxU=
+google.golang.org/genproto v0.0.0-20241007155032-5fefd90f89a9 h1:nFS3IivktIU5Mk6KQa+v6RKkHUpdQpphqGNLxqNnbEk=
+google.golang.org/genproto v0.0.0-20241007155032-5fefd90f89a9/go.mod h1:tEzYTYZxbmVNOu0OAFH9HzdJtLn6h4Aj89zzlBCdHms=
+google.golang.org/genproto/googleapis/api v0.0.0-20240814211410-ddb44dafa142 h1:wKguEg1hsxI2/L3hUYrpo1RVi48K+uTyzKqprwLXsb8=
+google.golang.org/genproto/googleapis/api v0.0.0-20240814211410-ddb44dafa142/go.mod h1:d6be+8HhtEtucleCbxpPW9PA9XwISACu8nvpPqF0BVo=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20241015192408-796eee8c2d53 h1:X58yt85/IXCx0Y3ZwN6sEIKZzQtDEYaBWrDvErdXrRE=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20241015192408-796eee8c2d53/go.mod h1:GX3210XPVPUjJbTUbvwI8f2IpZDMZuPJWDzDuebbviI=
 google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
 google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
 google.golang.org/grpc v1.25.1/go.mod h1:c3i+UQWmh7LiEpx4sFZnkU36qjEYZ0imhYfXVyQciAY=
 google.golang.org/grpc v1.27.0/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
 google.golang.org/grpc v1.33.2/go.mod h1:JMHMWHQWaTccqQQlmk3MJZS+GWXOdAesneDmEnv2fbc=
-google.golang.org/grpc v1.66.0 h1:DibZuoBznOxbDQxRINckZcUvnCEvrW9pcWIE2yF9r1c=
-google.golang.org/grpc v1.66.0/go.mod h1:s3/l6xSSCURdVfAnL+TqCNMyTDAGN6+lZeVxnZR128Y=
+google.golang.org/grpc v1.67.1 h1:zWnc1Vrcno+lHZCOofnIMvycFcc0QRGIzm9dhnDX68E=
+google.golang.org/grpc v1.67.1/go.mod h1:1gLDyUQU7CTLJI90u3nXZ9ekeghjeM7pTDZlqFNg2AA=
 google.golang.org/protobuf v0.0.0-20200109180630-ec00e32a8dfd/go.mod h1:DFci5gLYBciE7Vtevhsrf46CRTquxDuWsQurQQe4oz8=
 google.golang.org/protobuf v0.0.0-20200221191635-4d8936d0db64/go.mod h1:kwYJMbMJ01Woi6D6+Kah6886xMZcty6N08ah7+eCXa0=
 google.golang.org/protobuf v0.0.0-20200228230310-ab0ca4ff8a60/go.mod h1:cfTl7dwQJ+fmap5saPgwCLgHXTUD7jkjRqWcaiX5VyM=
@@ -382,14 +395,13 @@ google.golang.org/protobuf v1.22.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2
 google.golang.org/protobuf v1.23.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
 google.golang.org/protobuf v1.23.1-0.20200526195155-81db48ad09cc/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
 google.golang.org/protobuf v1.25.0/go.mod h1:9JNX74DMeImyA3h4bdi1ymwjUzf21/xIlbajtzgsN7c=
-google.golang.org/protobuf v1.34.2 h1:6xV6lTsCfpGD21XK49h7MhtcApnLqkfYgPcdHftf6hg=
-google.golang.org/protobuf v1.34.2/go.mod h1:qYOHts0dSfpeUzUFpOMr/WGzszTmLH+DiWniOlNbLDw=
+google.golang.org/protobuf v1.35.1 h1:m3LfL6/Ca+fqnjnlqQXNpFPABW1UD7mjh8KO2mKFytA=
+google.golang.org/protobuf v1.35.1/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/fsnotify.v1 v1.4.7/go.mod h1:Tz8NjZHkW78fSQdbUxIjBTcgA1z1m8ZHf0WmKUhAMys=
 gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7/go.mod h1:dt/ZhP58zS4L8KSrWDmTeBkI65Dw0HsyUHuEVlX15mw=
 gopkg.in/yaml.v2 v2.2.1/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
@@ -404,10 +416,10 @@ modernc.org/fileutil v1.3.0 h1:gQ5SIzK3H9kdfai/5x41oQiKValumqNTDXMvKo62HvE=
 modernc.org/fileutil v1.3.0/go.mod h1:XatxS8fZi3pS8/hKG2GH/ArUogfxjpEKs3Ku3aK4JyQ=
 modernc.org/gc/v2 v2.5.0 h1:bJ9ChznK1L1mUtAQtxi0wi5AtAs5jQuw4PrPHO5pb6M=
 modernc.org/gc/v2 v2.5.0/go.mod h1:wzN5dK1AzVGoH6XOzc3YZ+ey/jPgYHLuVckd62P0GYU=
-modernc.org/gc/v3 v3.0.0-20240801135723-a856999a2e4a h1:CfbpOLEo2IwNzJdMvE8aiRbPMxoTpgAJeyePh0SmO8M=
-modernc.org/gc/v3 v3.0.0-20240801135723-a856999a2e4a/go.mod h1:Qz0X07sNOR1jWYCrJMEnbW/X55x206Q7Vt4mz6/wHp4=
-modernc.org/libc v1.60.1 h1:at373l8IFRTkJIkAU85BIuUoBM4T1b51ds0E1ovPG2s=
-modernc.org/libc v1.60.1/go.mod h1:xJuobKuNxKH3RUatS7GjR+suWj+5c2K7bi4m/S5arOY=
+modernc.org/gc/v3 v3.0.0-20241004144649-1aea3fae8852 h1:IYXPPTTjjoSHvUClZIYexDiO7g+4x+XveKT4gCIAwiY=
+modernc.org/gc/v3 v3.0.0-20241004144649-1aea3fae8852/go.mod h1:Qz0X07sNOR1jWYCrJMEnbW/X55x206Q7Vt4mz6/wHp4=
+modernc.org/libc v1.61.0 h1:eGFcvWpqlnoGwzZeZe3PWJkkKbM/3SUGyk1DVZQ0TpE=
+modernc.org/libc v1.61.0/go.mod h1:DvxVX89wtGTu+r72MLGhygpfi3aUGgZRdAYGCAVVud0=
 modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
 modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
 modernc.org/memory v1.8.0 h1:IqGTL6eFMaDZZhEWwcREgeMXYwmW83LYW8cROZYkg+E=
@@ -416,8 +428,8 @@ modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
 modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
 modernc.org/sortutil v1.2.0 h1:jQiD3PfS2REGJNzNCMMaLSp/wdMNieTbKX920Cqdgqc=
 modernc.org/sortutil v1.2.0/go.mod h1:TKU2s7kJMf1AE84OoiGppNHJwvB753OYfNl2WRb++Ss=
-modernc.org/sqlite v1.32.0 h1:6BM4uGza7bWypsw4fdLRsLxut6bHe4c58VeqjRgST8s=
-modernc.org/sqlite v1.32.0/go.mod h1:UqoylwmTb9F+IqXERT8bW9zzOWN8qwAIcLdzeBZs4hA=
+modernc.org/sqlite v1.33.1 h1:trb6Z3YYoeM9eDL1O8do81kP+0ejv+YzgyFo+Gwy0nM=
+modernc.org/sqlite v1.33.1/go.mod h1:pXV2xHxhzXZsgT/RtTFAPY6JJDEvOTcTdwADQCCWD4k=
 modernc.org/strutil v1.2.0 h1:agBi9dp1I+eOnxXeiZawM8F4LawKv4NzGWSaLfyeNZA=
 modernc.org/strutil v1.2.0/go.mod h1:/mdcBmfOibveCTBxUl5B5l6W+TTH1FXPLHZE6bTosX0=
 modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=

beszel/internal/agent/agent.go

@@ -1,391 +1,98 @@
+// Package agent handles the agent's SSH server and system stats collection.
 package agent
 
 import (
 	"beszel"
-	"beszel/internal/entities/container"
 	"beszel/internal/entities/system"
-	"bytes"
 	"context"
-	"encoding/json"
-	"fmt"
-	"io"
-	"log"
-	"math"
-	"net"
-	"net/http"
-	"net/url"
+	"log/slog"
 	"os"
-	"strconv"
 	"strings"
-	"sync"
-	"time"
 
-	"github.com/shirou/gopsutil/v4/cpu"
-	"github.com/shirou/gopsutil/v4/disk"
-	"github.com/shirou/gopsutil/v4/host"
-	"github.com/shirou/gopsutil/v4/mem"
-	"github.com/shirou/gopsutil/v4/sensors"
-
-	sshServer "github.com/gliderlabs/ssh"
-	psutilNet "github.com/shirou/gopsutil/v4/net"
+	"github.com/shirou/gopsutil/v4/common"
 )
 
 type Agent struct {
-	addr                string
-	pubKey              []byte
-	sem                 chan struct{}
-	containerStatsMap   map[string]*container.PrevContainerStats
-	containerStatsMutex *sync.Mutex
-	fsNames             []string
-	fsStats             map[string]*system.FsStats
-	netInterfaces       map[string]struct{}
-	netIoStats          *system.NetIoStats
-	dockerClient        *http.Client
-	bufferPool          *sync.Pool
+	debug            bool                       // true if LOG_LEVEL is set to debug
+	zfs              bool                       // true if system has arcstats
+	memCalc          string                     // Memory calculation formula
+	fsNames          []string                   // List of filesystem device names being monitored
+	fsStats          map[string]*system.FsStats // Keeps track of disk stats for each filesystem
+	netInterfaces    map[string]struct{}        // Stores all valid network interfaces
+	netIoStats       system.NetIoStats          // Keeps track of bandwidth usage
+	dockerManager    *dockerManager             // Manages Docker API requests
+	sensorsContext   context.Context            // Sensors context to override sys location
+	sensorsWhitelist map[string]struct{}        // List of sensors to monitor
+	systemInfo       system.Info                // Host system info
 }
 
-func NewAgent(pubKey []byte, addr string) *Agent {
+func NewAgent() *Agent {
 	return &Agent{
-		addr:                addr,
-		pubKey:              pubKey,
-		sem:                 make(chan struct{}, 15),
-		containerStatsMap:   make(map[string]*container.PrevContainerStats),
-		containerStatsMutex: &sync.Mutex{},
-		netIoStats:          &system.NetIoStats{},
-		dockerClient:        newDockerClient(),
-		bufferPool: &sync.Pool{
-			New: func() interface{} {
-				return new(bytes.Buffer)
-			},
-		},
+		sensorsContext: context.Background(),
+		memCalc:        os.Getenv("MEM_CALC"),
+		fsStats:        make(map[string]*system.FsStats),
 	}
 }
 
-func (a *Agent) acquireSemaphore() {
-	a.sem <- struct{}{}
-}
-
-func (a *Agent) releaseSemaphore() {
-	<-a.sem
-}
-
-func (a *Agent) getSystemStats() (system.Info, system.Stats) {
-	systemStats := system.Stats{}
-
-	// cpu percent
-	cpuPct, err := cpu.Percent(0, false)
-	if err != nil {
-		log.Println("Error getting cpu percent:", err)
-	} else if len(cpuPct) > 0 {
-		systemStats.Cpu = twoDecimals(cpuPct[0])
-	}
-
-	// memory
-	if v, err := mem.VirtualMemory(); err == nil {
-		systemStats.Mem = bytesToGigabytes(v.Total)
-		systemStats.MemUsed = bytesToGigabytes(v.Used)
-		systemStats.MemBuffCache = bytesToGigabytes(v.Total - v.Free - v.Used)
-		systemStats.MemPct = twoDecimals(v.UsedPercent)
-		systemStats.Swap = bytesToGigabytes(v.SwapTotal)
-		systemStats.SwapUsed = bytesToGigabytes(v.SwapTotal - v.SwapFree)
-	}
-
-	// disk usage
-	for _, stats := range a.fsStats {
-		// log.Println("Reading filesystem:", fs.Mountpoint)
-		if d, err := disk.Usage(stats.Mountpoint); err == nil {
-			stats.DiskTotal = bytesToGigabytes(d.Total)
-			stats.DiskUsed = bytesToGigabytes(d.Used)
-			if stats.Root {
-				systemStats.DiskTotal = bytesToGigabytes(d.Total)
-				systemStats.DiskUsed = bytesToGigabytes(d.Used)
-				systemStats.DiskPct = twoDecimals(d.UsedPercent)
-			}
-		} else {
-			// reset stats if error (likely unmounted)
-			log.Printf("Error reading %s: %+v\n", stats.Mountpoint, err)
-			stats.DiskTotal = 0
-			stats.DiskUsed = 0
-			stats.TotalRead = 0
-			stats.TotalWrite = 0
+func (a *Agent) Run(pubKey []byte, addr string) {
+	// Set up slog with a log level determined by the LOG_LEVEL env var
+	if logLevelStr, exists := os.LookupEnv("LOG_LEVEL"); exists {
+		switch strings.ToLower(logLevelStr) {
+		case "debug":
+			a.debug = true
+			slog.SetLogLoggerLevel(slog.LevelDebug)
+		case "warn":
+			slog.SetLogLoggerLevel(slog.LevelWarn)
+		case "error":
+			slog.SetLogLoggerLevel(slog.LevelError)
 		}
 	}
 
-	// disk i/o
-	if ioCounters, err := disk.IOCounters(a.fsNames...); err == nil {
-		for _, d := range ioCounters {
-			stats := a.fsStats[d.Name]
-			if stats == nil {
-				continue
-			}
-			secondsElapsed := time.Since(stats.Time).Seconds()
-			readPerSecond := float64(d.ReadBytes-stats.TotalRead) / secondsElapsed
-			writePerSecond := float64(d.WriteBytes-stats.TotalWrite) / secondsElapsed
-			stats.Time = time.Now()
-			stats.DiskReadPs = bytesToMegabytes(readPerSecond)
-			stats.DiskWritePs = bytesToMegabytes(writePerSecond)
-			stats.TotalRead = d.ReadBytes
-			stats.TotalWrite = d.WriteBytes
-			// if root filesystem, update system stats
-			if stats.Root {
-				systemStats.DiskReadPs = stats.DiskReadPs
-				systemStats.DiskWritePs = stats.DiskWritePs
-			}
+	slog.Debug(beszel.Version)
+
+	// Set sensors context (allows overriding sys location for sensors)
+	if sysSensors, exists := os.LookupEnv("SYS_SENSORS"); exists {
+		slog.Info("SYS_SENSORS", "path", sysSensors)
+		a.sensorsContext = context.WithValue(a.sensorsContext,
+			common.EnvKey, common.EnvMap{common.HostSysEnvKey: sysSensors},
+		)
+	}
+
+	// Set sensors whitelist
+	if sensors, exists := os.LookupEnv("SENSORS"); exists {
+		a.sensorsWhitelist = make(map[string]struct{})
+		for _, sensor := range strings.Split(sensors, ",") {
+			a.sensorsWhitelist[sensor] = struct{}{}
 		}
 	}
 
-	// network stats
-	if netIO, err := psutilNet.IOCounters(true); err == nil {
-		secondsElapsed := time.Since(a.netIoStats.Time).Seconds()
-		a.netIoStats.Time = time.Now()
-		bytesSent := uint64(0)
-		bytesRecv := uint64(0)
-		// sum all bytes sent and received
-		for _, v := range netIO {
-			// skip if not in valid network interfaces list
-			if _, exists := a.netInterfaces[v.Name]; !exists {
-				continue
-			}
-			// log.Printf("%+v: %+v recv, %+v sent\n", v.Name, v.BytesRecv, v.BytesSent)
-			bytesSent += v.BytesSent
-			bytesRecv += v.BytesRecv
-		}
-		// add to systemStats
-		sentPerSecond := float64(bytesSent-a.netIoStats.BytesSent) / secondsElapsed
-		recvPerSecond := float64(bytesRecv-a.netIoStats.BytesRecv) / secondsElapsed
-		networkSentPs := bytesToMegabytes(sentPerSecond)
-		networkRecvPs := bytesToMegabytes(recvPerSecond)
-		// add check for issue (#150) where sent is a massive number
-		if networkSentPs > 10_000 || networkRecvPs > 10_000 {
-			log.Printf("Warning: network sent/recv is %.2f/%.2f MB/s. Resetting stats.\n", networkSentPs, networkRecvPs)
-			for _, v := range netIO {
-				if _, exists := a.netInterfaces[v.Name]; !exists {
-					continue
-				}
-				log.Printf("%+s: %v recv, %v sent\n", v.Name, v.BytesRecv, v.BytesSent)
-			}
-			// reset network I/O stats
-			a.initializeNetIoStats()
-		} else {
-			systemStats.NetworkSent = networkSentPs
-			systemStats.NetworkRecv = networkRecvPs
-			// update netIoStats
-			a.netIoStats.BytesSent = bytesSent
-			a.netIoStats.BytesRecv = bytesRecv
-		}
+	// initialize system info / docker manager
+	a.initializeSystemInfo()
+	a.initializeDiskInfo()
+	a.initializeNetIoStats()
+	a.dockerManager = newDockerManager()
+
+	// if debugging, print stats
+	if a.debug {
+		slog.Debug("Stats", "data", a.gatherStats())
 	}
 
-	// temperatures
-	if temps, err := sensors.SensorsTemperatures(); err == nil {
-		systemStats.Temperatures = make(map[string]float64)
-		// log.Printf("Temperatures: %+v\n", temps)
-		for i, temp := range temps {
-			if _, ok := systemStats.Temperatures[temp.SensorKey]; ok {
-				// if key already exists, append int to key
-				systemStats.Temperatures[temp.SensorKey+"_"+strconv.Itoa(i)] = twoDecimals(temp.Temperature)
-			} else {
-				systemStats.Temperatures[temp.SensorKey] = twoDecimals(temp.Temperature)
-			}
-		}
-		// log.Printf("Temperature map: %+v\n", systemStats.Temperatures)
-	}
-
-	systemInfo := system.Info{
-		Cpu:          systemStats.Cpu,
-		MemPct:       systemStats.MemPct,
-		DiskPct:      systemStats.DiskPct,
-		AgentVersion: beszel.Version,
-	}
-
-	// add host info
-	if info, err := host.Info(); err == nil {
-		systemInfo.Uptime = info.Uptime
-		// systemInfo.Os = info.OS
-	}
-	// add cpu stats
-	if info, err := cpu.Info(); err == nil && len(info) > 0 {
-		systemInfo.CpuModel = info[0].ModelName
-	}
-	if cores, err := cpu.Counts(false); err == nil {
-		systemInfo.Cores = cores
-	}
-	if threads, err := cpu.Counts(true); err == nil {
-		systemInfo.Threads = threads
-	}
-
-	return systemInfo, systemStats
-}
-
-func (a *Agent) getDockerStats() ([]container.Stats, error) {
-	resp, err := a.dockerClient.Get("http://localhost/containers/json")
-	if err != nil {
-		a.closeIdleConnections(err)
-		return nil, err
-	}
-	defer resp.Body.Close()
-
-	var containers []container.ApiInfo
-	if err := json.NewDecoder(resp.Body).Decode(&containers); err != nil {
-		log.Printf("Error decoding containers: %+v\n", err)
-		return nil, err
-	}
-
-	containerStats := make([]container.Stats, 0, len(containers))
-	containerStatsMutex := sync.Mutex{}
-
-	// store valid ids to clean up old container ids from map
-	validIds := make(map[string]struct{}, len(containers))
-
-	var wg sync.WaitGroup
-
-	for _, ctr := range containers {
-		ctr.IdShort = ctr.Id[:12]
-		validIds[ctr.IdShort] = struct{}{}
-		// check if container is less than 1 minute old (possible restart)
-		// note: can't use Created field because it's not updated on restart
-		if strings.Contains(ctr.Status, "second") {
-			// if so, remove old container data
-			a.deleteContainerStatsSync(ctr.IdShort)
-		}
-		wg.Add(1)
-		a.acquireSemaphore()
-		go func() {
-			defer a.releaseSemaphore()
-			defer wg.Done()
-			cstats, err := a.getContainerStats(ctr)
-			if err != nil {
-				// close idle connections if error is a network timeout
-				isTimeout := a.closeIdleConnections(err)
-				// delete container from map if not a timeout
-				if !isTimeout {
-					a.deleteContainerStatsSync(ctr.IdShort)
-				}
-				// retry once
-				cstats, err = a.getContainerStats(ctr)
-				if err != nil {
-					log.Printf("Error getting container stats: %+v\n", err)
-					return
-				}
-			}
-			containerStatsMutex.Lock()
-			defer containerStatsMutex.Unlock()
-			containerStats = append(containerStats, cstats)
-		}()
-	}
-
-	wg.Wait()
-
-	for id := range a.containerStatsMap {
-		if _, exists := validIds[id]; !exists {
-			// log.Printf("Removing container cpu map entry: %+v\n", id)
-			delete(a.containerStatsMap, id)
-		}
-	}
-
-	return containerStats, nil
-}
-
-func (a *Agent) getContainerStats(ctr container.ApiInfo) (container.Stats, error) {
-	cStats := container.Stats{}
-
-	resp, err := a.dockerClient.Get("http://localhost/containers/" + ctr.IdShort + "/stats?stream=0&one-shot=1")
-	if err != nil {
-		return cStats, err
-	}
-	defer resp.Body.Close()
-
-	// use a pooled buffer to store the response body
-	buf := a.bufferPool.Get().(*bytes.Buffer)
-	defer a.bufferPool.Put(buf)
-	buf.Reset()
-	_, err = io.Copy(buf, resp.Body)
-	if err != nil {
-		return cStats, err
-	}
-
-	// unmarshal the json data from the buffer
-	var statsJson container.ApiStats
-	if err := json.Unmarshal(buf.Bytes(), &statsJson); err != nil {
-		return cStats, err
-	}
-
-	name := ctr.Names[0][1:]
-
-	// check if container has valid data, otherwise may be in restart loop (#103)
-	if statsJson.MemoryStats.Usage == 0 {
-		return cStats, fmt.Errorf("%s - invalid data", name)
-	}
-
-	// memory (https://docs.docker.com/reference/cli/docker/container/stats/)
-	memCache := statsJson.MemoryStats.Stats["inactive_file"]
-	if memCache == 0 {
-		memCache = statsJson.MemoryStats.Stats["cache"]
-	}
-	usedMemory := statsJson.MemoryStats.Usage - memCache
-
-	a.containerStatsMutex.Lock()
-	defer a.containerStatsMutex.Unlock()
-
-	// add empty values if they doesn't exist in map
-	stats, initialized := a.containerStatsMap[ctr.IdShort]
-	if !initialized {
-		stats = &container.PrevContainerStats{}
-		a.containerStatsMap[ctr.IdShort] = stats
-	}
-
-	// cpu
-	cpuDelta := statsJson.CPUStats.CPUUsage.TotalUsage - stats.Cpu[0]
-	systemDelta := statsJson.CPUStats.SystemUsage - stats.Cpu[1]
-	cpuPct := float64(cpuDelta) / float64(systemDelta) * 100
-	if cpuPct > 100 {
-		return cStats, fmt.Errorf("%s cpu pct greater than 100: %+v", name, cpuPct)
-	}
-	stats.Cpu = [2]uint64{statsJson.CPUStats.CPUUsage.TotalUsage, statsJson.CPUStats.SystemUsage}
-
-	// network
-	var total_sent, total_recv uint64
-	for _, v := range statsJson.Networks {
-		total_sent += v.TxBytes
-		total_recv += v.RxBytes
-	}
-	var sent_delta, recv_delta float64
-	// prevent first run from sending all prev sent/recv bytes
-	if initialized {
-		secondsElapsed := time.Since(stats.Net.Time).Seconds()
-		sent_delta = float64(total_sent-stats.Net.Sent) / secondsElapsed
-		recv_delta = float64(total_recv-stats.Net.Recv) / secondsElapsed
-		// log.Printf("sent delta: %+v, recv delta: %+v\n", sent_delta, recv_delta)
-	}
-	stats.Net.Sent = total_sent
-	stats.Net.Recv = total_recv
-	stats.Net.Time = time.Now()
-
-	// cStats := a.containerStatsPool.Get().(*container.Stats)
-	cStats.Name = name
-	cStats.Cpu = twoDecimals(cpuPct)
-	cStats.Mem = bytesToMegabytes(float64(usedMemory))
-	cStats.NetworkSent = bytesToMegabytes(sent_delta)
-	cStats.NetworkRecv = bytesToMegabytes(recv_delta)
-
-	return cStats, nil
-}
-
-// delete container stats from map using mutex
-func (a *Agent) deleteContainerStatsSync(id string) {
-	a.containerStatsMutex.Lock()
-	defer a.containerStatsMutex.Unlock()
-	delete(a.containerStatsMap, id)
+	a.startServer(pubKey, addr)
 }
 
 func (a *Agent) gatherStats() system.CombinedData {
-	systemInfo, systemStats := a.getSystemStats()
+	slog.Debug("Getting stats")
 	systemData := system.CombinedData{
-		Stats: systemStats,
-		Info:  systemInfo,
+		Stats: a.getSystemStats(),
+		Info:  a.systemInfo,
 	}
+	slog.Debug("System stats", "data", systemData)
 	// add docker stats
-	if containerStats, err := a.getDockerStats(); err == nil {
+	if containerStats, err := a.dockerManager.getDockerStats(); err == nil {
 		systemData.Containers = containerStats
+		slog.Debug("Docker stats", "data", systemData.Containers)
+	} else {
+		slog.Debug("Error getting docker stats", "err", err)
 	}
 	// add extra filesystems
 	systemData.Stats.ExtraFs = make(map[string]*system.FsStats)
@@ -394,268 +101,6 @@ func (a *Agent) gatherStats() system.CombinedData {
 			systemData.Stats.ExtraFs[name] = stats
 		}
 	}
-	// log.Printf("%+v\n", systemData)
+	slog.Debug("Extra filesystems", "data", systemData.Stats.ExtraFs)
 	return systemData
 }
-
-func (a *Agent) startServer() {
-	sshServer.Handle(a.handleSession)
-
-	log.Printf("Starting SSH server on %s", a.addr)
-	if err := sshServer.ListenAndServe(a.addr, nil, sshServer.NoPty(),
-		sshServer.PublicKeyAuth(func(ctx sshServer.Context, key sshServer.PublicKey) bool {
-			allowed, _, _, _, _ := sshServer.ParseAuthorizedKey(a.pubKey)
-			return sshServer.KeysEqual(key, allowed)
-		}),
-	); err != nil {
-		log.Fatal(err)
-	}
-}
-
-func (a *Agent) handleSession(s sshServer.Session) {
-	stats := a.gatherStats()
-	encoder := json.NewEncoder(s)
-	if err := encoder.Encode(stats); err != nil {
-		log.Println("Error encoding stats:", err.Error())
-		s.Exit(1)
-		return
-	}
-	s.Exit(0)
-}
-
-func (a *Agent) Run() {
-	a.fsStats = make(map[string]*system.FsStats)
-
-	filesystem, fsEnvVarExists := os.LookupEnv("FILESYSTEM")
-	if fsEnvVarExists {
-		a.fsStats[filesystem] = &system.FsStats{Root: true, Mountpoint: "/"}
-	}
-
-	if extraFilesystems, exists := os.LookupEnv("EXTRA_FILESYSTEMS"); exists {
-		// parse comma separated list of filesystems
-		for _, filesystem := range strings.Split(extraFilesystems, ",") {
-			a.fsStats[filesystem] = &system.FsStats{}
-		}
-	}
-
-	a.initializeDiskInfo(fsEnvVarExists)
-	a.initializeDiskIoStats()
-	a.initializeNetIoStats()
-
-	// log.Printf("Filesystems: %+v\n", a.fsStats)
-	a.startServer()
-}
-
-// Sets up the filesystems to monitor for disk usage and I/O.
-func (a *Agent) initializeDiskInfo(fsEnvVarExists bool) error {
-	partitions, err := disk.Partitions(false)
-	if err != nil {
-		return err
-	}
-
-	// log.Printf("Partitions: %+v\n", partitions)
-	for _, v := range partitions {
-		// binary - use root mountpoint if not already set by env var
-		if !fsEnvVarExists && v.Mountpoint == "/" {
-			a.fsStats[v.Device] = &system.FsStats{Root: true, Mountpoint: "/"}
-		}
-		// docker - use /etc/hosts device as root if not mapped
-		if !fsEnvVarExists && v.Mountpoint == "/etc/hosts" && strings.HasPrefix(v.Device, "/dev") && !strings.Contains(v.Device, "mapper") {
-			a.fsStats[v.Device] = &system.FsStats{Root: true, Mountpoint: "/"}
-		}
-		// check if device is in /extra-filesystem
-		if strings.HasPrefix(v.Mountpoint, "/extra-filesystem") {
-			// todo: may be able to tweak this to be able to mount custom root at /extra-filesystems/root
-			a.fsStats[v.Device] = &system.FsStats{Mountpoint: v.Mountpoint}
-			continue
-		}
-		// set mountpoints for extra filesystems if passed in via env var
-		for name, stats := range a.fsStats {
-			if strings.HasSuffix(v.Device, name) {
-				stats.Mountpoint = v.Mountpoint
-				break
-			}
-		}
-	}
-
-	// remove extra filesystems that don't have a mountpoint
-	hasRoot := false
-	for name, stats := range a.fsStats {
-		if stats.Root {
-			hasRoot = true
-			log.Println("Detected root fs:", name)
-		}
-		if stats.Mountpoint == "" {
-			log.Printf("Ignoring %s. No mountpoint found.\n", name)
-			delete(a.fsStats, name)
-		}
-	}
-
-	// if no root filesystem set, use most read device in /proc/diskstats
-	if !hasRoot {
-		rootDevice := findMaxReadsDevice()
-		log.Printf("Detected root fs: %+s\n", rootDevice)
-		a.fsStats[rootDevice] = &system.FsStats{Root: true, Mountpoint: "/"}
-	}
-
-	return nil
-}
-
-// Sets start values for disk I/O stats.
-func (a *Agent) initializeDiskIoStats() {
-	// create slice of fs names to pass to disk.IOCounters later
-	a.fsNames = make([]string, 0, len(a.fsStats))
-
-	for name, stats := range a.fsStats {
-		if io, err := disk.IOCounters(name); err == nil {
-			for _, d := range io {
-				// add name to slice
-				a.fsNames = append(a.fsNames, d.Name)
-				// normalize name with io counters
-				if name != d.Name {
-					// log.Println("Normalizing disk I/O stats:", name, d.Name)
-					a.fsStats[d.Name] = stats
-					delete(a.fsStats, name)
-				}
-				stats.Time = time.Now()
-				stats.TotalRead = d.ReadBytes
-				stats.TotalWrite = d.WriteBytes
-			}
-		}
-	}
-}
-
-func (a *Agent) initializeNetIoStats() {
-	// reset valid network interfaces
-	a.netInterfaces = make(map[string]struct{}, 0)
-	// reset network I/O stats
-	a.netIoStats.BytesSent = 0
-	a.netIoStats.BytesRecv = 0
-	// get intial network I/O stats
-	if netIO, err := psutilNet.IOCounters(true); err == nil {
-		a.netIoStats.Time = time.Now()
-		for _, v := range netIO {
-			if skipNetworkInterface(v) {
-				continue
-			}
-			log.Printf("Detected network interface: %+v (%+v recv, %+v sent)\n", v.Name, v.BytesRecv, v.BytesSent)
-			a.netIoStats.BytesSent += v.BytesSent
-			a.netIoStats.BytesRecv += v.BytesRecv
-			// store as a valid network interface
-			a.netInterfaces[v.Name] = struct{}{}
-		}
-	}
-}
-
-func bytesToMegabytes(b float64) float64 {
-	return twoDecimals(b / 1048576)
-}
-
-func bytesToGigabytes(b uint64) float64 {
-	return twoDecimals(float64(b) / 1073741824)
-}
-
-func twoDecimals(value float64) float64 {
-	return math.Round(value*100) / 100
-}
-
-func skipNetworkInterface(v psutilNet.IOCountersStat) bool {
-	switch {
-	case strings.HasPrefix(v.Name, "lo"),
-		strings.HasPrefix(v.Name, "docker"),
-		strings.HasPrefix(v.Name, "br-"),
-		strings.HasPrefix(v.Name, "veth"),
-		v.BytesRecv == 0,
-		v.BytesSent == 0:
-		return true
-	default:
-		return false
-	}
-}
-
-func newDockerClient() *http.Client {
-	dockerHost := "unix:///var/run/docker.sock"
-	if dockerHostEnv, exists := os.LookupEnv("DOCKER_HOST"); exists {
-		dockerHost = dockerHostEnv
-	}
-
-	parsedURL, err := url.Parse(dockerHost)
-	if err != nil {
-		log.Fatal("Error parsing DOCKER_HOST: " + err.Error())
-	}
-
-	transport := &http.Transport{
-		ForceAttemptHTTP2:   false,
-		IdleConnTimeout:     90 * time.Second,
-		DisableCompression:  true,
-		MaxConnsPerHost:     20,
-		MaxIdleConnsPerHost: 20,
-		DisableKeepAlives:   false,
-	}
-
-	switch parsedURL.Scheme {
-	case "unix":
-		transport.DialContext = func(ctx context.Context, proto, addr string) (net.Conn, error) {
-			return (&net.Dialer{}).DialContext(ctx, "unix", parsedURL.Path)
-		}
-	case "tcp", "http", "https":
-		log.Println("Using DOCKER_HOST: " + dockerHost)
-		transport.DialContext = func(ctx context.Context, proto, addr string) (net.Conn, error) {
-			return (&net.Dialer{}).DialContext(ctx, "tcp", parsedURL.Host)
-		}
-	default:
-		log.Fatal("Unsupported DOCKER_HOST: " + parsedURL.Scheme)
-	}
-
-	return &http.Client{
-		Timeout:   time.Second,
-		Transport: transport,
-	}
-}
-
-// closes idle connections on timeouts to prevent reuse of stale connections
-func (a *Agent) closeIdleConnections(err error) (isTimeout bool) {
-	if netErr, ok := err.(net.Error); ok && netErr.Timeout() {
-		log.Printf("Closing idle connections. Error: %+v\n", err)
-		a.dockerClient.Transport.(*http.Transport).CloseIdleConnections()
-		return true
-	}
-	return false
-}
-
-// Returns the device with the most reads in /proc/diskstats
-// (fallback in case the root device is not supplied or detected)
-func findMaxReadsDevice() string {
-	content, err := os.ReadFile("/proc/diskstats")
-	if err != nil {
-		return "/"
-	}
-
-	lines := strings.Split(string(content), "\n")
-	var maxReadsSectors int64
-	var maxReadsDevice string
-
-	for _, line := range lines {
-		fields := strings.Fields(line)
-		if len(fields) < 7 {
-			continue
-		}
-
-		deviceName := fields[2]
-		readsSectors, err := strconv.ParseInt(fields[5], 10, 64)
-		if err != nil {
-			continue
-		}
-
-		if readsSectors > maxReadsSectors {
-			maxReadsSectors = readsSectors
-			maxReadsDevice = deviceName
-		}
-	}
-
-	if maxReadsDevice == "" {
-		return "/"
-	}
-
-	return maxReadsDevice
-}

beszel/internal/agent/disk.go

@@ -0,0 +1,169 @@
+package agent
+
+import (
+	"beszel/internal/entities/system"
+	"log/slog"
+	"time"
+
+	"os"
+	"path/filepath"
+	"strings"
+
+	"github.com/shirou/gopsutil/v4/disk"
+)
+
+// Sets up the filesystems to monitor for disk usage and I/O.
+func (a *Agent) initializeDiskInfo() {
+	filesystem := os.Getenv("FILESYSTEM")
+	efPath := "/extra-filesystems"
+	hasRoot := false
+
+	partitions, err := disk.Partitions(false)
+	if err != nil {
+		slog.Error("Error getting disk partitions", "err", err)
+	}
+	slog.Debug("Disk", "partitions", partitions)
+
+	// ioContext := context.WithValue(a.sensorsContext,
+	// 	common.EnvKey, common.EnvMap{common.HostProcEnvKey: "/tmp/testproc"},
+	// )
+	// diskIoCounters, err := disk.IOCountersWithContext(ioContext)
+
+	diskIoCounters, err := disk.IOCounters()
+	if err != nil {
+		slog.Error("Error getting diskstats", "err", err)
+	}
+	slog.Debug("Disk I/O", "diskstats", diskIoCounters)
+
+	// Helper function to add a filesystem to fsStats if it doesn't exist
+	addFsStat := func(device, mountpoint string, root bool) {
+		key := filepath.Base(device)
+		if _, exists := a.fsStats[key]; !exists {
+			if root {
+				slog.Info("Detected root device", "name", key)
+				// check if root device is in /proc/diskstats, use fallback if not
+				if _, exists := diskIoCounters[key]; !exists {
+					slog.Warn("Device not found in diskstats", "name", key)
+					key = findFallbackIoDevice(filesystem, diskIoCounters, a.fsStats)
+					slog.Info("Using I/O fallback", "name", key)
+				}
+			}
+			a.fsStats[key] = &system.FsStats{Root: root, Mountpoint: mountpoint}
+		}
+	}
+
+	// Use FILESYSTEM env var to find root filesystem
+	if filesystem != "" {
+		for _, p := range partitions {
+			if strings.HasSuffix(p.Device, filesystem) || p.Mountpoint == filesystem {
+				addFsStat(p.Device, p.Mountpoint, true)
+				hasRoot = true
+				break
+			}
+		}
+		if !hasRoot {
+			slog.Warn("Partition details not found", "filesystem", filesystem)
+		}
+	}
+
+	// Add EXTRA_FILESYSTEMS env var values to fsStats
+	if extraFilesystems, exists := os.LookupEnv("EXTRA_FILESYSTEMS"); exists {
+		for _, fs := range strings.Split(extraFilesystems, ",") {
+			found := false
+			for _, p := range partitions {
+				if strings.HasSuffix(p.Device, fs) || p.Mountpoint == fs {
+					addFsStat(p.Device, p.Mountpoint, false)
+					found = true
+					break
+				}
+			}
+			// if not in partitions, test if we can get disk usage
+			if !found {
+				if _, err := disk.Usage(fs); err == nil {
+					addFsStat(filepath.Base(fs), fs, false)
+				} else {
+					slog.Error("Invalid filesystem", "name", fs, "err", err)
+				}
+			}
+		}
+	}
+
+	// Process partitions for various mount points
+	for _, p := range partitions {
+		// fmt.Println(p.Device, p.Mountpoint)
+		// Binary root fallback or docker root fallback
+		if !hasRoot && (p.Mountpoint == "/" || (p.Mountpoint == "/etc/hosts" && strings.HasPrefix(p.Device, "/dev") && !strings.Contains(p.Device, "mapper"))) {
+			addFsStat(p.Device, "/", true)
+			hasRoot = true
+		}
+
+		// Check if device is in /extra-filesystems
+		if strings.HasPrefix(p.Mountpoint, efPath) {
+			addFsStat(p.Device, p.Mountpoint, false)
+		}
+	}
+
+	// Check all folders in /extra-filesystems and add them if not already present
+	if folders, err := os.ReadDir(efPath); err == nil {
+		existingMountpoints := make(map[string]bool)
+		for _, stats := range a.fsStats {
+			existingMountpoints[stats.Mountpoint] = true
+		}
+		for _, folder := range folders {
+			if folder.IsDir() {
+				mountpoint := filepath.Join(efPath, folder.Name())
+				slog.Debug("/extra-filesystems", "mountpoint", mountpoint)
+				if !existingMountpoints[mountpoint] {
+					a.fsStats[folder.Name()] = &system.FsStats{Mountpoint: mountpoint}
+				}
+			}
+		}
+	}
+
+	// If no root filesystem set, use fallback
+	if !hasRoot {
+		rootDevice := findFallbackIoDevice(filepath.Base(filesystem), diskIoCounters, a.fsStats)
+		slog.Info("Root disk", "mountpoint", "/", "io", rootDevice)
+		a.fsStats[rootDevice] = &system.FsStats{Root: true, Mountpoint: "/"}
+	}
+
+	a.initializeDiskIoStats(diskIoCounters)
+}
+
+// Returns the device with the most reads in /proc/diskstats,
+// or the device specified by the filesystem argument if it exists
+func findFallbackIoDevice(filesystem string, diskIoCounters map[string]disk.IOCountersStat, fsStats map[string]*system.FsStats) string {
+	var maxReadBytes uint64
+	maxReadDevice := "/"
+	for _, d := range diskIoCounters {
+		if d.Name == filesystem {
+			return d.Name
+		}
+		if d.ReadBytes > maxReadBytes {
+			// don't use if device already exists in fsStats
+			if _, exists := fsStats[d.Name]; !exists {
+				maxReadBytes = d.ReadBytes
+				maxReadDevice = d.Name
+			}
+		}
+	}
+	return maxReadDevice
+}
+
+// Sets start values for disk I/O stats.
+func (a *Agent) initializeDiskIoStats(diskIoCounters map[string]disk.IOCountersStat) {
+	for device, stats := range a.fsStats {
+		// skip if not in diskIoCounters
+		d, exists := diskIoCounters[device]
+		if !exists {
+			slog.Warn("Device not found in diskstats", "name", device)
+			continue
+		}
+		// populate initial values
+		stats.Time = time.Now()
+		stats.TotalRead = d.ReadBytes
+		stats.TotalWrite = d.WriteBytes
+		// add to list of valid io device names
+		a.fsNames = append(a.fsNames, device)
+	}
+}

beszel/internal/agent/docker.go

@@ -0,0 +1,264 @@
+package agent
+
+import (
+	"beszel/internal/entities/container"
+	"context"
+	"encoding/json"
+	"fmt"
+	"log/slog"
+	"net"
+	"net/http"
+	"net/url"
+	"os"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/blang/semver"
+)
+
+type dockerManager struct {
+	client              *http.Client                // Client to query Docker API
+	wg                  sync.WaitGroup              // WaitGroup to wait for all goroutines to finish
+	sem                 chan struct{}               // Semaphore to limit concurrent container requests
+	containerStatsMutex sync.RWMutex                // Mutex to prevent concurrent access to containerStatsMap
+	apiContainerList    *[]container.ApiInfo        // List of containers from Docker API
+	containerStatsMap   map[string]*container.Stats // Keeps track of container stats
+	validIds            map[string]struct{}         // Map of valid container ids, used to prune invalid containers from containerStatsMap
+}
+
+// Add goroutine to the queue
+func (d *dockerManager) queue() {
+	d.sem <- struct{}{}
+	d.wg.Add(1)
+}
+
+// Remove goroutine from the queue
+func (d *dockerManager) dequeue() {
+	<-d.sem
+	d.wg.Done()
+}
+
+// Returns stats for all running containers
+func (dm *dockerManager) getDockerStats() ([]*container.Stats, error) {
+	resp, err := dm.client.Get("http://localhost/containers/json")
+	if err != nil {
+		return nil, err
+	}
+	defer resp.Body.Close()
+
+	if err := json.NewDecoder(resp.Body).Decode(&dm.apiContainerList); err != nil {
+		return nil, err
+	}
+
+	containersLength := len(*dm.apiContainerList)
+
+	// store valid ids to clean up old container ids from map
+	if dm.validIds == nil {
+		dm.validIds = make(map[string]struct{}, containersLength)
+	} else {
+		clear(dm.validIds)
+	}
+
+	for _, ctr := range *dm.apiContainerList {
+		ctr.IdShort = ctr.Id[:12]
+		dm.validIds[ctr.IdShort] = struct{}{}
+		// check if container is less than 1 minute old (possible restart)
+		// note: can't use Created field because it's not updated on restart
+		if strings.Contains(ctr.Status, "second") {
+			// if so, remove old container data
+			dm.deleteContainerStatsSync(ctr.IdShort)
+		}
+		dm.queue()
+		go func() {
+			defer dm.dequeue()
+			err := dm.updateContainerStats(ctr)
+			if err != nil {
+				dm.deleteContainerStatsSync(ctr.IdShort)
+				// retry once
+				err = dm.updateContainerStats(ctr)
+				if err != nil {
+					slog.Error("Error getting container stats", "err", err)
+				}
+			}
+		}()
+	}
+
+	dm.wg.Wait()
+
+	// populate final stats and remove old / invalid container stats
+	stats := make([]*container.Stats, 0, containersLength)
+	for id, v := range dm.containerStatsMap {
+		if _, exists := dm.validIds[id]; !exists {
+			delete(dm.containerStatsMap, id)
+		} else {
+			stats = append(stats, v)
+		}
+	}
+
+	return stats, nil
+}
+
+// Updates stats for individual container
+func (dm *dockerManager) updateContainerStats(ctr container.ApiInfo) error {
+	name := ctr.Names[0][1:]
+
+	resp, err := dm.client.Get("http://localhost/containers/" + ctr.IdShort + "/stats?stream=0&one-shot=1")
+	if err != nil {
+		return err
+	}
+	defer resp.Body.Close()
+
+	dm.containerStatsMutex.Lock()
+	defer dm.containerStatsMutex.Unlock()
+
+	// add empty values if they doesn't exist in map
+	stats, initialized := dm.containerStatsMap[ctr.IdShort]
+	if !initialized {
+		stats = &container.Stats{Name: name}
+		dm.containerStatsMap[ctr.IdShort] = stats
+	}
+
+	// reset current stats
+	stats.Cpu = 0
+	stats.Mem = 0
+	stats.NetworkSent = 0
+	stats.NetworkRecv = 0
+
+	// docker host container stats response
+	var res container.ApiStats
+	if err := json.NewDecoder(resp.Body).Decode(&res); err != nil {
+		return err
+	}
+
+	// check if container has valid data, otherwise may be in restart loop (#103)
+	if res.MemoryStats.Usage == 0 {
+		return fmt.Errorf("%s - no memory stats - see https://github.com/henrygd/beszel/issues/144", name)
+	}
+
+	// memory (https://docs.docker.com/reference/cli/docker/container/stats/)
+	memCache := res.MemoryStats.Stats.InactiveFile
+	if memCache == 0 {
+		memCache = res.MemoryStats.Stats.Cache
+	}
+	usedMemory := res.MemoryStats.Usage - memCache
+
+	// cpu
+	cpuDelta := res.CPUStats.CPUUsage.TotalUsage - stats.PrevCpu[0]
+	systemDelta := res.CPUStats.SystemUsage - stats.PrevCpu[1]
+	cpuPct := float64(cpuDelta) / float64(systemDelta) * 100
+	if cpuPct > 100 {
+		return fmt.Errorf("%s cpu pct greater than 100: %+v", name, cpuPct)
+	}
+	stats.PrevCpu = [2]uint64{res.CPUStats.CPUUsage.TotalUsage, res.CPUStats.SystemUsage}
+
+	// network
+	var total_sent, total_recv uint64
+	for _, v := range res.Networks {
+		total_sent += v.TxBytes
+		total_recv += v.RxBytes
+	}
+	var sent_delta, recv_delta float64
+	// prevent first run from sending all prev sent/recv bytes
+	if initialized {
+		secondsElapsed := time.Since(stats.PrevNet.Time).Seconds()
+		sent_delta = float64(total_sent-stats.PrevNet.Sent) / secondsElapsed
+		recv_delta = float64(total_recv-stats.PrevNet.Recv) / secondsElapsed
+	}
+	stats.PrevNet.Sent = total_sent
+	stats.PrevNet.Recv = total_recv
+	stats.PrevNet.Time = time.Now()
+
+	stats.Cpu = twoDecimals(cpuPct)
+	stats.Mem = bytesToMegabytes(float64(usedMemory))
+	stats.NetworkSent = bytesToMegabytes(sent_delta)
+	stats.NetworkRecv = bytesToMegabytes(recv_delta)
+
+	return nil
+}
+
+// Delete container stats from map using mutex
+func (dm *dockerManager) deleteContainerStatsSync(id string) {
+	dm.containerStatsMutex.Lock()
+	defer dm.containerStatsMutex.Unlock()
+	delete(dm.containerStatsMap, id)
+}
+
+// Creates a new http client for Docker API
+func newDockerManager() *dockerManager {
+	dockerHost := "unix:///var/run/docker.sock"
+	if dockerHostEnv, exists := os.LookupEnv("DOCKER_HOST"); exists {
+		slog.Info("DOCKER_HOST", "host", dockerHostEnv)
+		dockerHost = dockerHostEnv
+	}
+
+	parsedURL, err := url.Parse(dockerHost)
+	if err != nil {
+		slog.Error("Error parsing DOCKER_HOST", "err", err)
+		os.Exit(1)
+	}
+
+	transport := &http.Transport{
+		DisableCompression: true,
+		MaxConnsPerHost:    0,
+	}
+
+	switch parsedURL.Scheme {
+	case "unix":
+		transport.DialContext = func(ctx context.Context, proto, addr string) (net.Conn, error) {
+			return (&net.Dialer{}).DialContext(ctx, "unix", parsedURL.Path)
+		}
+	case "tcp", "http", "https":
+		transport.DialContext = func(ctx context.Context, proto, addr string) (net.Conn, error) {
+			return (&net.Dialer{}).DialContext(ctx, "tcp", parsedURL.Host)
+		}
+	default:
+		slog.Error("Invalid DOCKER_HOST", "scheme", parsedURL.Scheme)
+		os.Exit(1)
+	}
+
+	// configurable timeout
+	timeout := time.Millisecond * 2100
+	if t, set := os.LookupEnv("DOCKER_TIMEOUT"); set {
+		timeout, err = time.ParseDuration(t)
+		if err != nil {
+			slog.Error(err.Error())
+			os.Exit(1)
+		}
+		slog.Info("DOCKER_TIMEOUT", "timeout", timeout)
+	}
+
+	dockerClient := &dockerManager{
+		client: &http.Client{
+			Timeout:   timeout,
+			Transport: transport,
+		},
+		containerStatsMap: make(map[string]*container.Stats),
+	}
+
+	// Make sure sem is initialized
+	concurrency := 200
+	defer func() { dockerClient.sem = make(chan struct{}, concurrency) }()
+
+	// Check docker version
+	// (versions before 25.0.0 have a bug with one-shot which requires all requests to be made in one batch)
+	var versionInfo struct {
+		Version string `json:"Version"`
+	}
+	resp, err := dockerClient.client.Get("http://localhost/version")
+	if err != nil {
+		return dockerClient
+	}
+
+	if err := json.NewDecoder(resp.Body).Decode(&versionInfo); err != nil {
+		return dockerClient
+	}
+
+	// if version > 24, one-shot works correctly and we can limit concurrent operations
+	if dockerVersion, err := semver.Parse(versionInfo.Version); err == nil && dockerVersion.Major > 24 {
+		concurrency = 5
+	}
+	slog.Debug("Docker", "version", versionInfo.Version, "concurrency", concurrency)
+
+	return dockerClient
+}

beszel/internal/agent/network.go

@@ -0,0 +1,67 @@
+package agent
+
+import (
+	"log/slog"
+	"os"
+	"strings"
+	"time"
+
+	psutilNet "github.com/shirou/gopsutil/v4/net"
+)
+
+func (a *Agent) initializeNetIoStats() {
+	// reset valid network interfaces
+	a.netInterfaces = make(map[string]struct{}, 0)
+
+	// map of network interface names passed in via NICS env var
+	var nicsMap map[string]struct{}
+	nics, nicsEnvExists := os.LookupEnv("NICS")
+	if nicsEnvExists {
+		nicsMap = make(map[string]struct{}, 0)
+		for _, nic := range strings.Split(nics, ",") {
+			nicsMap[nic] = struct{}{}
+		}
+	}
+
+	// reset network I/O stats
+	a.netIoStats.BytesSent = 0
+	a.netIoStats.BytesRecv = 0
+
+	// get intial network I/O stats
+	if netIO, err := psutilNet.IOCounters(true); err == nil {
+		a.netIoStats.Time = time.Now()
+		for _, v := range netIO {
+			switch {
+			// skip if nics exists and the interface is not in the list
+			case nicsEnvExists:
+				if _, nameInNics := nicsMap[v.Name]; !nameInNics {
+					continue
+				}
+			// otherwise run the interface name through the skipNetworkInterface function
+			default:
+				if a.skipNetworkInterface(v) {
+					continue
+				}
+			}
+			slog.Info("Detected network interface", "name", v.Name, "sent", v.BytesSent, "recv", v.BytesRecv)
+			a.netIoStats.BytesSent += v.BytesSent
+			a.netIoStats.BytesRecv += v.BytesRecv
+			// store as a valid network interface
+			a.netInterfaces[v.Name] = struct{}{}
+		}
+	}
+}
+
+func (a *Agent) skipNetworkInterface(v psutilNet.IOCountersStat) bool {
+	switch {
+	case strings.HasPrefix(v.Name, "lo"),
+		strings.HasPrefix(v.Name, "docker"),
+		strings.HasPrefix(v.Name, "br-"),
+		strings.HasPrefix(v.Name, "veth"),
+		v.BytesRecv == 0,
+		v.BytesSent == 0:
+		return true
+	default:
+		return false
+	}
+}

beszel/internal/agent/server.go

@@ -0,0 +1,34 @@
+package agent
+
+import (
+	"encoding/json"
+	"log/slog"
+	"os"
+
+	sshServer "github.com/gliderlabs/ssh"
+)
+
+func (a *Agent) startServer(pubKey []byte, addr string) {
+	sshServer.Handle(a.handleSession)
+
+	slog.Info("Starting SSH server", "address", addr)
+	if err := sshServer.ListenAndServe(addr, nil, sshServer.NoPty(),
+		sshServer.PublicKeyAuth(func(ctx sshServer.Context, key sshServer.PublicKey) bool {
+			allowed, _, _, _, _ := sshServer.ParseAuthorizedKey(pubKey)
+			return sshServer.KeysEqual(key, allowed)
+		}),
+	); err != nil {
+		slog.Error("Error starting SSH server", "err", err)
+		os.Exit(1)
+	}
+}
+
+func (a *Agent) handleSession(s sshServer.Session) {
+	stats := a.gatherStats()
+	if err := json.NewEncoder(s).Encode(stats); err != nil {
+		slog.Error("Error encoding stats", "err", err)
+		s.Exit(1)
+		return
+	}
+	s.Exit(0)
+}

beszel/internal/agent/system.go

@@ -0,0 +1,241 @@
+package agent
+
+import (
+	"beszel"
+	"beszel/internal/entities/system"
+	"bufio"
+	"fmt"
+	"log/slog"
+	"os"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/shirou/gopsutil/v4/cpu"
+	"github.com/shirou/gopsutil/v4/disk"
+	"github.com/shirou/gopsutil/v4/host"
+	"github.com/shirou/gopsutil/v4/mem"
+	psutilNet "github.com/shirou/gopsutil/v4/net"
+	"github.com/shirou/gopsutil/v4/sensors"
+)
+
+// Sets initial / non-changing values about the host system
+func (a *Agent) initializeSystemInfo() {
+	a.systemInfo.AgentVersion = beszel.Version
+	a.systemInfo.Hostname, _ = os.Hostname()
+	a.systemInfo.KernelVersion, _ = host.KernelVersion()
+
+	// cpu model
+	if info, err := cpu.Info(); err == nil && len(info) > 0 {
+		a.systemInfo.CpuModel = info[0].ModelName
+	}
+	// cores / threads
+	a.systemInfo.Cores, _ = cpu.Counts(false)
+	if threads, err := cpu.Counts(true); err == nil {
+		if threads > 0 && threads < a.systemInfo.Cores {
+			// in lxc logical cores reflects container limits, so use that as cores if lower
+			a.systemInfo.Cores = threads
+		} else {
+			a.systemInfo.Threads = threads
+		}
+	}
+
+	// zfs
+	if _, err := getARCSize(); err == nil {
+		a.zfs = true
+	} else {
+		slog.Debug("Not monitoring ZFS ARC", "err", err)
+	}
+}
+
+// Returns current info, stats about the host system
+func (a *Agent) getSystemStats() system.Stats {
+	systemStats := system.Stats{}
+
+	// cpu percent
+	cpuPct, err := cpu.Percent(0, false)
+	if err != nil {
+		slog.Error("Error getting cpu percent", "err", err)
+	} else if len(cpuPct) > 0 {
+		systemStats.Cpu = twoDecimals(cpuPct[0])
+	}
+
+	// memory
+	if v, err := mem.VirtualMemory(); err == nil {
+		// swap
+		systemStats.Swap = bytesToGigabytes(v.SwapTotal)
+		systemStats.SwapUsed = bytesToGigabytes(v.SwapTotal - v.SwapFree - v.SwapCached)
+		// cache + buffers value for default mem calculation
+		cacheBuff := v.Total - v.Free - v.Used
+		// htop memory calculation overrides
+		if a.memCalc == "htop" {
+			// note: gopsutil automatically adds SReclaimable to v.Cached
+			cacheBuff = v.Cached + v.Buffers - v.Shared
+			v.Used = v.Total - (v.Free + cacheBuff)
+			v.UsedPercent = float64(v.Used) / float64(v.Total) * 100.0
+		}
+		// subtract ZFS ARC size from used memory and add as its own category
+		if a.zfs {
+			if arcSize, _ := getARCSize(); arcSize > 0 && arcSize < v.Used {
+				v.Used = v.Used - arcSize
+				v.UsedPercent = float64(v.Used) / float64(v.Total) * 100.0
+				systemStats.MemZfsArc = bytesToGigabytes(arcSize)
+			}
+		}
+		systemStats.Mem = bytesToGigabytes(v.Total)
+		systemStats.MemBuffCache = bytesToGigabytes(cacheBuff)
+		systemStats.MemUsed = bytesToGigabytes(v.Used)
+		systemStats.MemPct = twoDecimals(v.UsedPercent)
+	}
+
+	// disk usage
+	for _, stats := range a.fsStats {
+		if d, err := disk.Usage(stats.Mountpoint); err == nil {
+			stats.DiskTotal = bytesToGigabytes(d.Total)
+			stats.DiskUsed = bytesToGigabytes(d.Used)
+			if stats.Root {
+				systemStats.DiskTotal = bytesToGigabytes(d.Total)
+				systemStats.DiskUsed = bytesToGigabytes(d.Used)
+				systemStats.DiskPct = twoDecimals(d.UsedPercent)
+			}
+		} else {
+			// reset stats if error (likely unmounted)
+			slog.Error("Error getting disk stats", "name", stats.Mountpoint, "err", err)
+			stats.DiskTotal = 0
+			stats.DiskUsed = 0
+			stats.TotalRead = 0
+			stats.TotalWrite = 0
+		}
+	}
+
+	// disk i/o
+	if ioCounters, err := disk.IOCounters(a.fsNames...); err == nil {
+		for _, d := range ioCounters {
+			stats := a.fsStats[d.Name]
+			if stats == nil {
+				continue
+			}
+			secondsElapsed := time.Since(stats.Time).Seconds()
+			readPerSecond := float64(d.ReadBytes-stats.TotalRead) / secondsElapsed
+			writePerSecond := float64(d.WriteBytes-stats.TotalWrite) / secondsElapsed
+			stats.Time = time.Now()
+			stats.DiskReadPs = bytesToMegabytes(readPerSecond)
+			stats.DiskWritePs = bytesToMegabytes(writePerSecond)
+			stats.TotalRead = d.ReadBytes
+			stats.TotalWrite = d.WriteBytes
+			// if root filesystem, update system stats
+			if stats.Root {
+				systemStats.DiskReadPs = stats.DiskReadPs
+				systemStats.DiskWritePs = stats.DiskWritePs
+			}
+		}
+	}
+
+	// network stats
+	if netIO, err := psutilNet.IOCounters(true); err == nil {
+		secondsElapsed := time.Since(a.netIoStats.Time).Seconds()
+		a.netIoStats.Time = time.Now()
+		bytesSent := uint64(0)
+		bytesRecv := uint64(0)
+		// sum all bytes sent and received
+		for _, v := range netIO {
+			// skip if not in valid network interfaces list
+			if _, exists := a.netInterfaces[v.Name]; !exists {
+				continue
+			}
+			bytesSent += v.BytesSent
+			bytesRecv += v.BytesRecv
+		}
+		// add to systemStats
+		sentPerSecond := float64(bytesSent-a.netIoStats.BytesSent) / secondsElapsed
+		recvPerSecond := float64(bytesRecv-a.netIoStats.BytesRecv) / secondsElapsed
+		networkSentPs := bytesToMegabytes(sentPerSecond)
+		networkRecvPs := bytesToMegabytes(recvPerSecond)
+		// add check for issue (#150) where sent is a massive number
+		if networkSentPs > 10_000 || networkRecvPs > 10_000 {
+			slog.Warn("Invalid network stats. Resetting.", "sent", networkSentPs, "recv", networkRecvPs)
+			for _, v := range netIO {
+				if _, exists := a.netInterfaces[v.Name]; !exists {
+					continue
+				}
+				slog.Info(v.Name, "recv", v.BytesRecv, "sent", v.BytesSent)
+			}
+			// reset network I/O stats
+			a.initializeNetIoStats()
+		} else {
+			systemStats.NetworkSent = networkSentPs
+			systemStats.NetworkRecv = networkRecvPs
+			// update netIoStats
+			a.netIoStats.BytesSent = bytesSent
+			a.netIoStats.BytesRecv = bytesRecv
+		}
+	}
+
+	// temperatures
+	temps, err := sensors.TemperaturesWithContext(a.sensorsContext)
+	if err != nil {
+		// err.(*sensors.Warnings).Verbose = true
+		slog.Debug("Sensor error", "err", err)
+	}
+	slog.Debug("Temperature", "sensors", temps)
+	if len(temps) > 0 {
+		systemStats.Temperatures = make(map[string]float64, len(temps))
+		for i, sensor := range temps {
+			// skip if temperature is 0
+			if sensor.Temperature <= 0 || sensor.Temperature >= 200 {
+				continue
+			}
+			if _, ok := systemStats.Temperatures[sensor.SensorKey]; ok {
+				// if key already exists, append int to key
+				systemStats.Temperatures[sensor.SensorKey+"_"+strconv.Itoa(i)] = twoDecimals(sensor.Temperature)
+			} else {
+				systemStats.Temperatures[sensor.SensorKey] = twoDecimals(sensor.Temperature)
+			}
+		}
+		// remove sensors from systemStats if whitelist exists and sensor is not in whitelist
+		// (do this here instead of in initial loop so we have correct keys if int was appended)
+		if a.sensorsWhitelist != nil {
+			for key := range systemStats.Temperatures {
+				if _, nameInWhitelist := a.sensorsWhitelist[key]; !nameInWhitelist {
+					delete(systemStats.Temperatures, key)
+				}
+			}
+		}
+	}
+
+	// update base system info
+	a.systemInfo.Cpu = systemStats.Cpu
+	a.systemInfo.MemPct = systemStats.MemPct
+	a.systemInfo.DiskPct = systemStats.DiskPct
+	a.systemInfo.Uptime, _ = host.Uptime()
+	a.systemInfo.Bandwidth = twoDecimals(systemStats.NetworkSent + systemStats.NetworkRecv)
+	slog.Debug("sysinfo", "data", a.systemInfo)
+
+	return systemStats
+}
+
+// Returns the size of the ZFS ARC memory cache in bytes
+func getARCSize() (uint64, error) {
+	file, err := os.Open("/proc/spl/kstat/zfs/arcstats")
+	if err != nil {
+		return 0, err
+	}
+	defer file.Close()
+
+	// Scan the lines
+	scanner := bufio.NewScanner(file)
+	for scanner.Scan() {
+		line := scanner.Text()
+		if strings.HasPrefix(line, "size") {
+			// Example line: size 4 15032385536
+			fields := strings.Fields(line)
+			if len(fields) < 3 {
+				return 0, err
+			}
+			// Return the size as uint64
+			return strconv.ParseUint(fields[2], 10, 64)
+		}
+	}
+
+	return 0, fmt.Errorf("failed to parse size field")
+}

beszel/internal/agent/update.go

@@ -1,4 +1,4 @@
-package update
+package agent
 
 import (
 	"beszel"
@@ -10,51 +10,8 @@ import (
 	"github.com/rhysd/go-github-selfupdate/selfupdate"
 )
 
-func UpdateBeszel() {
-	var latest *selfupdate.Release
-	var found bool
-	var err error
-	currentVersion := semver.MustParse(beszel.Version)
-	fmt.Println("beszel", currentVersion)
-	fmt.Println("Checking for updates...")
-	updater, _ := selfupdate.NewUpdater(selfupdate.Config{
-		Filters: []string{"beszel_"},
-	})
-	latest, found, err = updater.DetectLatest("henrygd/beszel")
-
-	if err != nil {
-		fmt.Println("Error checking for updates:", err)
-		os.Exit(1)
-	}
-
-	if !found {
-		fmt.Println("No updates found")
-		os.Exit(0)
-	}
-
-	fmt.Println("Latest version:", latest.Version)
-
-	if latest.Version.LTE(currentVersion) {
-		fmt.Println("You are up to date")
-		return
-	}
-
-	var binaryPath string
-	fmt.Printf("Updating from %s to %s...\n", currentVersion, latest.Version)
-	binaryPath, err = os.Executable()
-	if err != nil {
-		fmt.Println("Error getting binary path:", err)
-		os.Exit(1)
-	}
-	err = selfupdate.UpdateTo(latest.AssetURL, binaryPath)
-	if err != nil {
-		fmt.Println("Please try rerunning with sudo. Error:", err)
-		os.Exit(1)
-	}
-	fmt.Printf("Successfully updated to %s\n\n%s\n", latest.Version, strings.TrimSpace(latest.ReleaseNotes))
-}
-
-func UpdateBeszelAgent() {
+// Update updates beszel-agent to the latest version
+func Update() {
 	var latest *selfupdate.Release
 	var found bool
 	var err error

beszel/internal/agent/utils.go

@@ -0,0 +1,15 @@
+package agent
+
+import "math"
+
+func bytesToMegabytes(b float64) float64 {
+	return twoDecimals(b / 1048576)
+}
+
+func bytesToGigabytes(b uint64) float64 {
+	return twoDecimals(float64(b) / 1073741824)
+}
+
+func twoDecimals(value float64) float64 {
+	return math.Round(value*100) / 100
+}

beszel/internal/alerts/alerts.go

@@ -5,147 +5,525 @@ import (
 	"beszel/internal/entities/system"
 	"fmt"
 	"net/mail"
+	"net/url"
+	"strings"
+	"time"
 
+	"github.com/containrrr/shoutrrr"
+	"github.com/goccy/go-json"
+	"github.com/labstack/echo/v5"
 	"github.com/pocketbase/dbx"
 	"github.com/pocketbase/pocketbase"
+	"github.com/pocketbase/pocketbase/apis"
 	"github.com/pocketbase/pocketbase/models"
 	"github.com/pocketbase/pocketbase/tools/mailer"
+	"github.com/pocketbase/pocketbase/tools/types"
+	"github.com/spf13/cast"
 )
 
 type AlertManager struct {
 	app *pocketbase.PocketBase
 }
 
+type AlertMessageData struct {
+	UserID   string
+	Title    string
+	Message  string
+	Link     string
+	LinkText string
+}
+
+type UserNotificationSettings struct {
+	Emails   []string `json:"emails"`
+	Webhooks []string `json:"webhooks"`
+}
+
+type SystemAlertStats struct {
+	Cpu          float64            `json:"cpu"`
+	Mem          float64            `json:"mp"`
+	Disk         float64            `json:"dp"`
+	NetSent      float64            `json:"ns"`
+	NetRecv      float64            `json:"nr"`
+	Temperatures map[string]float32 `json:"t"`
+}
+
+type SystemAlertData struct {
+	systemRecord *models.Record
+	alertRecord  *models.Record
+	name         string
+	unit         string
+	val          float64
+	threshold    float64
+	triggered    bool
+	time         time.Time
+	count        uint8
+	min          uint8
+	mapSums      map[string]float32
+	descriptor   string // override descriptor in notification body (for temp sensor, disk partition, etc)
+}
+
 func NewAlertManager(app *pocketbase.PocketBase) *AlertManager {
 	return &AlertManager{
 		app: app,
 	}
 }
 
-func (am *AlertManager) HandleSystemAlerts(newStatus string, newRecord *models.Record, oldRecord *models.Record) {
+func (am *AlertManager) HandleSystemAlerts(systemRecord *models.Record, systemInfo system.Info, temperatures map[string]float64, extraFs map[string]*system.FsStats) error {
+	// start := time.Now()
+	// defer func() {
+	// 	log.Println("alert stats took", time.Since(start))
+	// }()
 	alertRecords, err := am.app.Dao().FindRecordsByExpr("alerts",
-		dbx.NewExp("system = {:system}", dbx.Params{"system": oldRecord.GetId()}),
+		dbx.NewExp("system={:system}", dbx.Params{"system": systemRecord.Id}),
 	)
 	if err != nil || len(alertRecords) == 0 {
 		// log.Println("no alerts found for system")
-		return
+		return nil
 	}
-	// log.Println("found alerts", len(alertRecords))
-	var systemInfo *system.Info
+
+	var validAlerts []SystemAlertData
+	now := systemRecord.Updated.Time().UTC()
+	oldestTime := now
+
 	for _, alertRecord := range alertRecords {
 		name := alertRecord.GetString("name")
+		var val float64
+		unit := "%"
+
 		switch name {
-		case "Status":
-			am.handleStatusAlerts(newStatus, oldRecord, alertRecord)
-		case "CPU", "Memory", "Disk":
-			if newStatus != "up" {
+		case "CPU":
+			val = systemInfo.Cpu
+		case "Memory":
+			val = systemInfo.MemPct
+		case "Bandwidth":
+			val = systemInfo.Bandwidth
+			unit = " MB/s"
+		case "Disk":
+			maxUsedPct := systemInfo.DiskPct
+			for _, fs := range extraFs {
+				usedPct := fs.DiskUsed / fs.DiskTotal * 100
+				if usedPct > maxUsedPct {
+					maxUsedPct = usedPct
+				}
+			}
+			val = maxUsedPct
+		case "Temperature":
+			if temperatures == nil {
 				continue
 			}
-			if systemInfo == nil {
-				systemInfo = getSystemInfo(newRecord)
+			for _, temp := range temperatures {
+				if temp > val {
+					val = temp
+				}
 			}
-			if name == "CPU" {
-				am.handleSlidingValueAlert(newRecord, alertRecord, name, systemInfo.Cpu)
-			} else if name == "Memory" {
-				am.handleSlidingValueAlert(newRecord, alertRecord, name, systemInfo.MemPct)
-			} else if name == "Disk" {
-				am.handleSlidingValueAlert(newRecord, alertRecord, name, systemInfo.DiskPct)
+			unit = "°C"
+		}
+
+		triggered := alertRecord.GetBool("triggered")
+		threshold := alertRecord.GetFloat("value")
+
+		// CONTINUE
+		// IF alert is not triggered and curValue is less than threshold
+		// OR alert is triggered and curValue is greater than threshold
+		if (!triggered && val <= threshold) || (triggered && val > threshold) {
+			// log.Printf("Skipping alert %s: val %f | threshold %f | triggered %v\n", name, val, threshold, triggered)
+			continue
+		}
+
+		min := max(1, cast.ToUint8(alertRecord.Get("min")))
+		// add time to alert time to make sure it's slighty after record creation
+		time := now.Add(-time.Duration(min) * time.Minute)
+		if time.Before(oldestTime) {
+			oldestTime = time
+		}
+
+		validAlerts = append(validAlerts, SystemAlertData{
+			systemRecord: systemRecord,
+			alertRecord:  alertRecord,
+			name:         name,
+			unit:         unit,
+			val:          val,
+			threshold:    threshold,
+			triggered:    triggered,
+			time:         time,
+			min:          min,
+		})
+	}
+
+	systemStats := []struct {
+		Stats   []byte         `db:"stats"`
+		Created types.DateTime `db:"created"`
+	}{}
+
+	err = am.app.Dao().DB().
+		Select("stats", "created").
+		From("system_stats").
+		Where(dbx.NewExp(
+			"system={:system} AND type='1m' AND created > {:created}",
+			dbx.Params{
+				"system": systemRecord.Id,
+				// subtract some time to give us a bit of buffer
+				"created": oldestTime.Add(-time.Second * 90),
+			},
+		)).
+		OrderBy("created").
+		All(&systemStats)
+
+	if err != nil {
+		return err
+	}
+
+	// get oldest record creation time from first record in the slice
+	oldestRecordTime := systemStats[0].Created.Time()
+	// log.Println("oldestRecordTime", oldestRecordTime.String())
+
+	// delete from validAlerts if time is older than oldestRecord
+	for i := 0; i < len(validAlerts); i++ {
+		if validAlerts[i].time.Before(oldestRecordTime) {
+			// log.Println("deleting alert - time is older than oldestRecord", validAlerts[i].name, oldestRecordTime, validAlerts[i].time)
+			validAlerts = append(validAlerts[:i], validAlerts[i+1:]...)
+		}
+	}
+
+	if len(validAlerts) == 0 {
+		// log.Println("no valid alerts found")
+		return nil
+	}
+
+	var stats SystemAlertStats
+
+	// we can skip the latest systemStats record since it's the current value
+	for i := 0; i < len(systemStats); i++ {
+		stat := systemStats[i]
+		// subtract 10 seconds to give a small time buffer
+		systemStatsCreation := stat.Created.Time().Add(-time.Second * 10)
+		if err := json.Unmarshal(stat.Stats, &stats); err != nil {
+			return err
+		}
+		// log.Println("stats", stats)
+		for j := range validAlerts {
+			alert := &validAlerts[j]
+			// reset alert val on first iteration
+			if i == 0 {
+				alert.val = 0
+			}
+			// continue if system_stats is older than alert time range
+			if systemStatsCreation.Before(alert.time) {
+				continue
+			}
+			// add to alert value
+			switch alert.name {
+			case "CPU":
+				alert.val += stats.Cpu
+			case "Memory":
+				alert.val += stats.Mem
+			case "Bandwidth":
+				alert.val += stats.NetSent + stats.NetRecv
+			case "Disk":
+				if alert.mapSums == nil {
+					alert.mapSums = make(map[string]float32, len(extraFs)+1)
+				}
+				// add root disk
+				if _, ok := alert.mapSums["root"]; !ok {
+					alert.mapSums["root"] = 0.0
+				}
+				alert.mapSums["root"] += float32(stats.Disk)
+				// add extra disks
+				for key, fs := range extraFs {
+					if _, ok := alert.mapSums[key]; !ok {
+						alert.mapSums[key] = 0.0
+					}
+					alert.mapSums[key] += float32(fs.DiskUsed / fs.DiskTotal * 100)
+				}
+			case "Temperature":
+				if alert.mapSums == nil {
+					alert.mapSums = make(map[string]float32, len(stats.Temperatures))
+				}
+				for key, temp := range stats.Temperatures {
+					if _, ok := alert.mapSums[key]; !ok {
+						alert.mapSums[key] = float32(0)
+					}
+					alert.mapSums[key] += temp
+				}
+			default:
+				continue
+			}
+			alert.count++
+		}
+	}
+	// sum up vals for each alert
+	for _, alert := range validAlerts {
+		switch alert.name {
+		case "Disk":
+			maxPct := float32(0)
+			for key, value := range alert.mapSums {
+				sumPct := float32(value)
+				if sumPct > maxPct {
+					maxPct = sumPct
+					alert.descriptor = fmt.Sprintf("Usage of %s", key)
+				}
+			}
+			alert.val = float64(maxPct / float32(alert.count))
+		case "Temperature":
+			maxTemp := float32(0)
+			for key, value := range alert.mapSums {
+				sumTemp := float32(value) / float32(alert.count)
+				if sumTemp > maxTemp {
+					maxTemp = sumTemp
+					alert.descriptor = fmt.Sprintf("Highest sensor %s", key)
+				}
+			}
+			alert.val = float64(maxTemp)
+		default:
+			alert.val = alert.val / float64(alert.count)
+		}
+		minCount := float32(alert.min) / 1.2
+		// log.Println("alert", alert.name, "val", alert.val, "threshold", alert.threshold, "triggered", alert.triggered)
+		// log.Printf("%s: val %f | count %d | min-count %f | threshold %f\n", alert.name, alert.val, alert.count, minCount, alert.threshold)
+		// pass through alert if count is greater than or equal to minCount
+		if float32(alert.count) >= minCount {
+			if !alert.triggered && alert.val > alert.threshold {
+				alert.triggered = true
+				go am.sendSystemAlert(alert)
+			} else if alert.triggered && alert.val <= alert.threshold {
+				alert.triggered = false
+				go am.sendSystemAlert(alert)
 			}
 		}
 	}
+	return nil
 }
 
-func getSystemInfo(record *models.Record) *system.Info {
-	var SystemInfo system.Info
-	record.UnmarshalJSONField("info", &SystemInfo)
-	return &SystemInfo
-}
+func (am *AlertManager) sendSystemAlert(alert SystemAlertData) {
+	// log.Printf("Sending alert %s: val %f | count %d | threshold %f\n", alert.name, alert.val, alert.count, alert.threshold)
+	systemName := alert.systemRecord.GetString("name")
 
-func (am *AlertManager) handleSlidingValueAlert(newRecord *models.Record, alertRecord *models.Record, name string, curValue float64) {
-	triggered := alertRecord.GetBool("triggered")
-	threshold := alertRecord.GetFloat("value")
-	// fmt.Println(name, curValue, "threshold", threshold, "triggered", triggered)
-	var subject string
-	var body string
-	if !triggered && curValue > threshold {
-		alertRecord.Set("triggered", true)
-		systemName := newRecord.GetString("name")
-		subject = fmt.Sprintf("%s usage above threshold on %s", name, systemName)
-		body = fmt.Sprintf("%s usage on %s is %.1f%%.\n\n%s\n\n- Beszel", name, systemName, curValue, am.app.Settings().Meta.AppUrl+"/system/"+systemName)
-	} else if triggered && curValue <= threshold {
-		alertRecord.Set("triggered", false)
-		systemName := newRecord.GetString("name")
-		subject = fmt.Sprintf("%s usage 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, am.app.Settings().Meta.AppUrl+"/system/"+systemName)
-	} else {
-		// fmt.Println(name, "not triggered")
-		return
+	// change Disk to Disk usage
+	if alert.name == "Disk" {
+		alert.name += " usage"
 	}
-	if err := am.app.Dao().SaveRecord(alertRecord); err != nil {
+
+	// make title alert name lowercase if not CPU
+	titleAlertName := alert.name
+	if titleAlertName != "CPU" {
+		titleAlertName = strings.ToLower(titleAlertName)
+	}
+
+	var subject string
+	if alert.triggered {
+		subject = fmt.Sprintf("%s %s above threshold", systemName, titleAlertName)
+	} else {
+		subject = fmt.Sprintf("%s %s below threshold", systemName, titleAlertName)
+	}
+	minutesLabel := "minute"
+	if alert.min > 1 {
+		minutesLabel += "s"
+	}
+	if alert.descriptor == "" {
+		alert.descriptor = alert.name
+	}
+	body := fmt.Sprintf("%s averaged %.2f%s for the previous %v %s.", alert.descriptor, alert.val, alert.unit, alert.min, minutesLabel)
+
+	alert.alertRecord.Set("triggered", alert.triggered)
+	if err := am.app.Dao().SaveRecord(alert.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 := am.app.Dao().ExpandRecord(alertRecord, []string{"user"}, nil); len(errs) > 0 {
+	if errs := am.app.Dao().ExpandRecord(alert.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 {
-		am.sendAlert(&mailer.Message{
-			To:      []mail.Address{{Address: user.GetString("email")}},
-			Subject: subject,
-			Text:    body,
+	if user := alert.alertRecord.ExpandedOne("user"); user != nil {
+		am.sendAlert(AlertMessageData{
+			UserID:   user.GetId(),
+			Title:    subject,
+			Message:  body,
+			Link:     am.app.Settings().Meta.AppUrl + "/system/" + url.PathEscape(systemName),
+			LinkText: "View " + systemName,
 		})
 	}
 }
 
-func (am *AlertManager) handleStatusAlerts(newStatus string, oldRecord *models.Record, alertRecord *models.Record) error {
+func (am *AlertManager) HandleStatusAlerts(newStatus string, oldSystemRecord *models.Record) error {
 	var alertStatus string
 	switch newStatus {
 	case "up":
-		if oldRecord.GetString("status") == "down" {
+		if oldSystemRecord.GetString("status") == "down" {
 			alertStatus = "up"
 		}
 	case "down":
-		if oldRecord.GetString("status") == "up" {
+		if oldSystemRecord.GetString("status") == "up" {
 			alertStatus = "down"
 		}
 	}
 	if alertStatus == "" {
 		return nil
 	}
-	// expand the user relation
-	if errs := am.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 {
+	// check if use
+	alertRecords, err := am.app.Dao().FindRecordsByExpr("alerts",
+		dbx.HashExp{
+			"system": oldSystemRecord.GetId(),
+			"name":   "Status",
+		},
+	)
+	if err != nil || len(alertRecords) == 0 {
+		// log.Println("no alerts found for system")
 		return nil
 	}
-	emoji := "\U0001F534"
-	if alertStatus == "up" {
-		emoji = "\u2705"
+	for _, alertRecord := range alertRecords {
+		// expand the user relation
+		if errs := am.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 := oldSystemRecord.GetString("name")
+		am.sendAlert(AlertMessageData{
+			UserID:   user.GetId(),
+			Title:    fmt.Sprintf("Connection to %s is %s %v", systemName, alertStatus, emoji),
+			Message:  fmt.Sprintf("Connection to %s is %s", systemName, alertStatus),
+			Link:     am.app.Settings().Meta.AppUrl + "/system/" + url.PathEscape(systemName),
+			LinkText: "View " + systemName,
+		})
 	}
-	// send alert
-	systemName := oldRecord.GetString("name")
-	am.sendAlert(&mailer.Message{
-		To:      []mail.Address{{Address: user.GetString("email")}},
-		Subject: fmt.Sprintf("Connection to %s is %s %v", systemName, alertStatus, emoji),
-		Text:    fmt.Sprintf("Connection to %s is %s\n\n- Beszel", systemName, alertStatus),
-	})
-
 	return nil
 }
 
-func (am *AlertManager) sendAlert(message *mailer.Message) {
-	// fmt.Println("sending alert", "to", message.To, "subj", message.Subject, "body", message.Text)
-	message.From = mail.Address{
-		Address: am.app.Settings().Meta.SenderAddress,
-		Name:    am.app.Settings().Meta.SenderName,
+func (am *AlertManager) sendAlert(data AlertMessageData) {
+	// get user settings
+	record, err := am.app.Dao().FindFirstRecordByFilter(
+		"user_settings", "user={:user}",
+		dbx.Params{"user": data.UserID},
+	)
+	if err != nil {
+		am.app.Logger().Error("Failed to get user settings", "err", err.Error())
+		return
 	}
-	if err := am.app.NewMailClient().Send(message); err != nil {
+	// unmarshal user settings
+	userAlertSettings := UserNotificationSettings{
+		Emails:   []string{},
+		Webhooks: []string{},
+	}
+	if err := record.UnmarshalJSONField("settings", &userAlertSettings); err != nil {
+		am.app.Logger().Error("Failed to unmarshal user settings", "err", err.Error())
+	}
+	// send alerts via webhooks
+	for _, webhook := range userAlertSettings.Webhooks {
+		if err := am.SendShoutrrrAlert(webhook, data.Title, data.Message, data.Link, data.LinkText); err != nil {
+			am.app.Logger().Error("Failed to send shoutrrr alert", "err", err.Error())
+		}
+	}
+	// send alerts via email
+	if len(userAlertSettings.Emails) == 0 {
+		// log.Println("No email addresses found")
+		return
+	}
+	addresses := []mail.Address{}
+	for _, email := range userAlertSettings.Emails {
+		addresses = append(addresses, mail.Address{Address: email})
+	}
+	message := mailer.Message{
+		To:      addresses,
+		Subject: data.Title,
+		Text:    data.Message + fmt.Sprintf("\n\n%s", data.Link),
+		From: mail.Address{
+			Address: am.app.Settings().Meta.SenderAddress,
+			Name:    am.app.Settings().Meta.SenderName,
+		},
+	}
+	if err := am.app.NewMailClient().Send(&message); err != nil {
 		am.app.Logger().Error("Failed to send alert: ", "err", err.Error())
 	} else {
-		am.app.Logger().Info("Sent alert", "to", message.To, "subj", message.Subject)
+		am.app.Logger().Info("Sent email alert", "to", message.To, "subj", message.Subject)
 	}
 }
+
+// SendShoutrrrAlert sends an alert via a Shoutrrr URL
+func (am *AlertManager) SendShoutrrrAlert(notificationUrl, title, message, link, linkText string) error {
+	// services that support title param
+	supportsTitle := []string{"bark", "discord", "gotify", "ifttt", "join", "matrix", "ntfy", "opsgenie", "pushbullet", "pushover", "slack", "teams", "telegram", "zulip"}
+
+	// Parse the URL
+	parsedURL, err := url.Parse(notificationUrl)
+	if err != nil {
+		return fmt.Errorf("error parsing URL: %v", err)
+	}
+	scheme := parsedURL.Scheme
+	queryParams := parsedURL.Query()
+
+	// Add title
+	if sliceContains(supportsTitle, scheme) {
+		queryParams.Add("title", title)
+	} else if scheme == "mattermost" {
+		// use markdown title for mattermost
+		message = "##### " + title + "\n\n" + message
+	} else if scheme == "generic" && queryParams.Has("template") {
+		// add title as property if using generic with template json
+		titleKey := queryParams.Get("titlekey")
+		if titleKey == "" {
+			titleKey = "title"
+		}
+		queryParams.Add("$"+titleKey, title)
+	} else {
+		// otherwise just add title to message
+		message = title + "\n\n" + message
+	}
+
+	// Add link
+	if scheme == "ntfy" {
+		// if ntfy, add link to actions
+		queryParams.Add("Actions", fmt.Sprintf("view, %s, %s", linkText, link))
+	} else {
+		// else add link directly to the message
+		message += "\n\n" + link
+	}
+
+	// Encode the modified query parameters back into the URL
+	parsedURL.RawQuery = queryParams.Encode()
+	// log.Println("URL after modification:", parsedURL.String())
+
+	err = shoutrrr.Send(parsedURL.String(), message)
+
+	if err == nil {
+		am.app.Logger().Info("Sent shoutrrr alert", "title", title)
+	} else {
+		am.app.Logger().Error("Error sending shoutrrr alert", "err", err.Error())
+		return err
+	}
+	return nil
+}
+
+// Contains checks if a string is present in a slice of strings
+func sliceContains(slice []string, item string) bool {
+	for _, v := range slice {
+		if v == item {
+			return true
+		}
+	}
+	return false
+}
+
+func (am *AlertManager) SendTestNotification(c echo.Context) error {
+	requestData := apis.RequestInfo(c)
+	if requestData.AuthRecord == nil {
+		return apis.NewForbiddenError("Forbidden", nil)
+	}
+	url := c.QueryParam("url")
+	// log.Println("url", url)
+	if url == "" {
+		return c.JSON(200, map[string]string{"err": "URL is required"})
+	}
+	err := am.SendShoutrrrAlert(url, "Test Alert", "This is a notification from Beszel.", am.app.Settings().Meta.AppUrl, "View Beszel")
+	if err != nil {
+		return c.JSON(200, map[string]string{"err": err.Error()})
+	}
+	return c.JSON(200, map[string]bool{"err": false})
+}

beszel/internal/entities/container/container.go

@@ -85,15 +85,13 @@ type CPUUsage struct {
 }
 
 type MemoryStats struct {
-
 	// current res_counter usage for memory
 	Usage uint64 `json:"usage,omitempty"`
-	Cache uint64 `json:"cache,omitempty"`
+	// all the stats exported via memory.stat.
+	Stats MemoryStatsStats `json:"stats,omitempty"`
 	// maximum usage ever recorded.
 	// MaxUsage uint64 `json:"max_usage,omitempty"`
 	// TODO(vishh): Export these as stronger types.
-	// all the stats exported via memory.stat.
-	Stats map[string]uint64 `json:"stats,omitempty"`
 	// number of times memory usage hits limits.
 	// Failcnt uint64 `json:"failcnt,omitempty"`
 	// Limit   uint64 `json:"limit,omitempty"`
@@ -106,6 +104,11 @@ type MemoryStats struct {
 	// PrivateWorkingSet uint64 `json:"privateworkingset,omitempty"`
 }
 
+type MemoryStatsStats struct {
+	Cache        uint64 `json:"cache,omitempty"`
+	InactiveFile uint64 `json:"inactive_file,omitempty"`
+}
+
 type NetworkStats struct {
 	// Bytes received. Windows and Linux.
 	RxBytes uint64 `json:"rx_bytes"`
@@ -113,21 +116,19 @@ type NetworkStats struct {
 	TxBytes uint64 `json:"tx_bytes"`
 }
 
-// Container stats to return to the hub
-type Stats struct {
-	Name        string  `json:"n"`
-	Cpu         float64 `json:"c"`
-	Mem         float64 `json:"m"`
-	NetworkSent float64 `json:"ns"`
-	NetworkRecv float64 `json:"nr"`
+type prevNetStats struct {
+	Sent uint64
+	Recv uint64
+	Time time.Time
 }
 
-// Keeps track of container stats from previous run
-type PrevContainerStats struct {
-	Cpu [2]uint64
-	Net struct {
-		Sent uint64
-		Recv uint64
-		Time time.Time
-	}
+// Docker container stats
+type Stats struct {
+	Name        string       `json:"n"`
+	Cpu         float64      `json:"c"`
+	Mem         float64      `json:"m"`
+	NetworkSent float64      `json:"ns"`
+	NetworkRecv float64      `json:"nr"`
+	PrevCpu     [2]uint64    `json:"-"`
+	PrevNet     prevNetStats `json:"-"`
 }

beszel/internal/entities/system/system.go

@@ -6,35 +6,42 @@ import (
 )
 
 type Stats struct {
-	Cpu          float64             `json:"cpu"`
-	Mem          float64             `json:"m"`
-	MemUsed      float64             `json:"mu"`
-	MemPct       float64             `json:"mp"`
-	MemBuffCache float64             `json:"mb"`
-	Swap         float64             `json:"s,omitempty"`
-	SwapUsed     float64             `json:"su,omitempty"`
-	DiskTotal    float64             `json:"d"`
-	DiskUsed     float64             `json:"du"`
-	DiskPct      float64             `json:"dp"`
-	DiskReadPs   float64             `json:"dr"`
-	DiskWritePs  float64             `json:"dw"`
-	NetworkSent  float64             `json:"ns"`
-	NetworkRecv  float64             `json:"nr"`
-	Temperatures map[string]float64  `json:"t,omitempty"`
-	ExtraFs      map[string]*FsStats `json:"efs,omitempty"`
+	Cpu            float64             `json:"cpu"`
+	MaxCpu         float64             `json:"cpum,omitempty"`
+	Mem            float64             `json:"m"`
+	MemUsed        float64             `json:"mu"`
+	MemPct         float64             `json:"mp"`
+	MemBuffCache   float64             `json:"mb"`
+	MemZfsArc      float64             `json:"mz,omitempty"` // ZFS ARC memory
+	Swap           float64             `json:"s,omitempty"`
+	SwapUsed       float64             `json:"su,omitempty"`
+	DiskTotal      float64             `json:"d"`
+	DiskUsed       float64             `json:"du"`
+	DiskPct        float64             `json:"dp"`
+	DiskReadPs     float64             `json:"dr"`
+	DiskWritePs    float64             `json:"dw"`
+	MaxDiskReadPs  float64             `json:"drm,omitempty"`
+	MaxDiskWritePs float64             `json:"dwm,omitempty"`
+	NetworkSent    float64             `json:"ns"`
+	NetworkRecv    float64             `json:"nr"`
+	MaxNetworkSent float64             `json:"nsm,omitempty"`
+	MaxNetworkRecv float64             `json:"nrm,omitempty"`
+	Temperatures   map[string]float64  `json:"t,omitempty"`
+	ExtraFs        map[string]*FsStats `json:"efs,omitempty"`
 }
 
 type FsStats struct {
-	Time        time.Time `json:"-"`
-	Device      string    `json:"-"`
-	Root        bool      `json:"-"`
-	Mountpoint  string    `json:"-"`
-	DiskTotal   float64   `json:"d"`
-	DiskUsed    float64   `json:"du"`
-	TotalRead   uint64    `json:"-"`
-	TotalWrite  uint64    `json:"-"`
-	DiskWritePs float64   `json:"w"`
-	DiskReadPs  float64   `json:"r"`
+	Time           time.Time `json:"-"`
+	Root           bool      `json:"-"`
+	Mountpoint     string    `json:"-"`
+	DiskTotal      float64   `json:"d"`
+	DiskUsed       float64   `json:"du"`
+	TotalRead      uint64    `json:"-"`
+	TotalWrite     uint64    `json:"-"`
+	DiskReadPs     float64   `json:"r"`
+	DiskWritePs    float64   `json:"w"`
+	MaxDiskReadPS  float64   `json:"rm,omitempty"`
+	MaxDiskWritePS float64   `json:"wm,omitempty"`
 }
 
 type NetIoStats struct {
@@ -45,20 +52,22 @@ type NetIoStats struct {
 }
 
 type Info struct {
-	Cores    int    `json:"c"`
-	Threads  int    `json:"t"`
-	CpuModel string `json:"m"`
-	// Os       string  `json:"o"`
-	Uptime       uint64  `json:"u"`
-	Cpu          float64 `json:"cpu"`
-	MemPct       float64 `json:"mp"`
-	DiskPct      float64 `json:"dp"`
-	AgentVersion string  `json:"v"`
+	Hostname      string  `json:"h"`
+	KernelVersion string  `json:"k,omitempty"`
+	Cores         int     `json:"c"`
+	Threads       int     `json:"t,omitempty"`
+	CpuModel      string  `json:"m"`
+	Uptime        uint64  `json:"u"`
+	Cpu           float64 `json:"cpu"`
+	MemPct        float64 `json:"mp"`
+	DiskPct       float64 `json:"dp"`
+	Bandwidth     float64 `json:"b"`
+	AgentVersion  string  `json:"v"`
 }
 
 // Final data structure to return to the hub
 type CombinedData struct {
-	Stats      Stats             `json:"stats"`
-	Info       Info              `json:"info"`
-	Containers []container.Stats `json:"container"`
+	Stats      Stats              `json:"stats"`
+	Info       Info               `json:"info"`
+	Containers []*container.Stats `json:"container"`
 }

beszel/internal/hub/hub.go

@@ -1,3 +1,4 @@
+// Package hub handles updating systems and serving the web UI.
 package hub
 
 import (
@@ -5,7 +6,9 @@ import (
 	"beszel/internal/alerts"
 	"beszel/internal/entities/system"
 	"beszel/internal/records"
+	"beszel/internal/users"
 	"beszel/site"
+
 	"context"
 	"crypto/ed25519"
 	"encoding/pem"
@@ -20,7 +23,6 @@ import (
 	"time"
 
 	"github.com/goccy/go-json"
-
 	"github.com/labstack/echo/v5"
 	"github.com/pocketbase/pocketbase"
 	"github.com/pocketbase/pocketbase/apis"
@@ -37,6 +39,9 @@ type Hub struct {
 	systemConnections map[string]*ssh.Client
 	sshClientConfig   *ssh.ClientConfig
 	pubKey            string
+	am                *alerts.AlertManager
+	um                *users.UserManager
+	rm                *records.RecordManager
 }
 
 func NewHub(app *pocketbase.PocketBase) *Hub {
@@ -44,12 +49,16 @@ func NewHub(app *pocketbase.PocketBase) *Hub {
 		app:               app,
 		connectionLock:    &sync.Mutex{},
 		systemConnections: make(map[string]*ssh.Client),
+		am:                alerts.NewAlertManager(app),
+		um:                users.NewUserManager(app),
+		rm:                records.NewRecordManager(app),
 	}
 }
 
 func (h *Hub) Run() {
-	var rm *records.RecordManager
-	var am *alerts.AlertManager
+	// rm := records.NewRecordManager(h.app)
+	// am := alerts.NewAlertManager(h.app)
+	// um := users.NewUserManager(h.app)
 
 	// loosely check if it was executed using "go run"
 	isGoRun := strings.HasPrefix(os.Args[0], os.TempDir())
@@ -63,9 +72,6 @@ func (h *Hub) Run() {
 
 	// initial setup
 	h.app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
-		// set up record manager and alert manager
-		rm = records.NewRecordManager(h.app)
-		am = alerts.NewAlertManager(h.app)
 		// create ssh client config
 		err := h.createSSHClientConfig()
 		if err != nil {
@@ -90,7 +96,7 @@ func (h *Hub) Run() {
 		return nil
 	})
 
-	// serve site
+	// serve web ui
 	h.app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
 		switch isGoRun {
 		case true:
@@ -98,12 +104,17 @@ func (h *Hub) Run() {
 				Scheme: "http",
 				Host:   "localhost:5173",
 			})
-			e.Router.GET("/static/*", apis.StaticDirectoryHandler(os.DirFS("../../site/public/static"), false))
 			e.Router.Any("/*", echo.WrapHandler(proxy))
-			// e.Router.Any("/", echo.WrapHandler(proxy))
 		default:
-			e.Router.GET("/static/*", apis.StaticDirectoryHandler(site.Static, false))
-			e.Router.Any("/*", apis.StaticDirectoryHandler(site.Dist, true))
+			csp, cspExists := os.LookupEnv("CSP")
+			e.Router.Any("/*", func(c echo.Context) error {
+				if cspExists {
+					c.Response().Header().Del("X-Frame-Options")
+					c.Response().Header().Set("Content-Security-Policy", csp)
+				}
+				indexFallback := !strings.HasPrefix(c.Request().URL.Path, "/static/")
+				return apis.StaticDirectoryHandler(site.Dist, indexFallback)(c)
+			})
 		}
 		return nil
 	})
@@ -115,9 +126,9 @@ func (h *Hub) Run() {
 		// set up cron jobs
 		scheduler := cron.New()
 		// delete old records once every hour
-		scheduler.MustAdd("delete old records", "8 * * * *", rm.DeleteOldRecords)
+		scheduler.MustAdd("delete old records", "8 * * * *", h.rm.DeleteOldRecords)
 		// create longer records every 10 minutes
-		scheduler.MustAdd("create longer records", "*/10 * * * *", rm.CreateLongerRecords)
+		scheduler.MustAdd("create longer records", "*/10 * * * *", h.rm.CreateLongerRecords)
 		scheduler.Start()
 		return nil
 	})
@@ -140,15 +151,8 @@ func (h *Hub) Run() {
 			}
 			return c.JSON(http.StatusOK, map[string]bool{"firstRun": adminNum == 0})
 		})
-		return nil
-	})
-
-	// user creation - set default role to user if unset
-	h.app.OnModelBeforeCreate("users").Add(func(e *core.ModelEvent) error {
-		user := e.Model.(*models.Record)
-		if user.GetString("role") == "" {
-			user.Set("role", "user")
-		}
+		// send test notification
+		e.Router.GET("/api/beszel/send-test-notification", h.am.SendTestNotification)
 		return nil
 	})
 
@@ -166,6 +170,18 @@ func (h *Hub) Run() {
 		return nil
 	})
 
+	// handle default values for user / user_settings creation
+	h.app.OnModelBeforeCreate("users").Add(h.um.InitializeUserRole)
+	h.app.OnModelBeforeCreate("user_settings").Add(h.um.InitializeUserSettings)
+
+	// empty info for systems that are paused
+	h.app.OnModelBeforeUpdate("systems").Add(func(e *core.ModelEvent) error {
+		if e.Model.(*models.Record).GetString("status") == "paused" {
+			e.Model.(*models.Record).Set("info", system.Info{})
+		}
+		return nil
+	})
+
 	// do things after a systems record is updated
 	h.app.OnModelAfterUpdate("systems").Add(func(e *core.ModelEvent) error {
 		newRecord := e.Model.(*models.Record)
@@ -180,10 +196,11 @@ func (h *Hub) Run() {
 		// if system is set to pending (unpause), try to connect immediately
 		if newStatus == "pending" {
 			go h.updateSystem(newRecord)
+		} else {
+			h.am.HandleStatusAlerts(newStatus, oldRecord)
+
 		}
 
-		// alerts
-		am.HandleSystemAlerts(newStatus, newRecord, oldRecord)
 		return nil
 	})
 
@@ -259,7 +276,7 @@ func (h *Hub) updateSystem(record *models.Record) {
 	}
 	// get system stats from agent
 	var systemData system.CombinedData
-	if err := requestJsonFromAgent(client, &systemData); err != nil {
+	if err := h.requestJsonFromAgent(client, &systemData); err != nil {
 		if err.Error() == "bad client" {
 			// if previous connection was closed, try again
 			h.app.Logger().Error("Existing SSH connection closed. Retrying...", "host", record.GetString("host"), "port", record.GetString("port"))
@@ -297,6 +314,10 @@ func (h *Hub) updateSystem(record *models.Record) {
 			h.app.Logger().Error("Failed to save record: ", "err", err.Error())
 		}
 	}
+	// system info alerts (todo: extra fs alerts)
+	if err := h.am.HandleSystemAlerts(record, systemData.Info, systemData.Stats.Temperatures, systemData.Stats.ExtraFs); err != nil {
+		h.app.Logger().Error("System alerts error", "err", err.Error())
+	}
 }
 
 // set system to specified status and save record
@@ -352,7 +373,8 @@ func (h *Hub) createSSHClientConfig() error {
 	return nil
 }
 
-func requestJsonFromAgent(client *ssh.Client, systemData *system.CombinedData) error {
+// Fetches system stats from the agent and decodes the json data into the provided struct
+func (h *Hub) requestJsonFromAgent(client *ssh.Client, systemData *system.CombinedData) error {
 	session, err := newSessionWithTimeout(client, 5*time.Second)
 	if err != nil {
 		return fmt.Errorf("bad client")

beszel/internal/hub/update.go

@@ -0,0 +1,57 @@
+package hub
+
+import (
+	"beszel"
+	"fmt"
+	"os"
+	"strings"
+
+	"github.com/blang/semver"
+	"github.com/rhysd/go-github-selfupdate/selfupdate"
+	"github.com/spf13/cobra"
+)
+
+// Update updates beszel to the latest version
+func Update(_ *cobra.Command, _ []string) {
+	var latest *selfupdate.Release
+	var found bool
+	var err error
+	currentVersion := semver.MustParse(beszel.Version)
+	fmt.Println("beszel", currentVersion)
+	fmt.Println("Checking for updates...")
+	updater, _ := selfupdate.NewUpdater(selfupdate.Config{
+		Filters: []string{"beszel_"},
+	})
+	latest, found, err = updater.DetectLatest("henrygd/beszel")
+
+	if err != nil {
+		fmt.Println("Error checking for updates:", err)
+		os.Exit(1)
+	}
+
+	if !found {
+		fmt.Println("No updates found")
+		os.Exit(0)
+	}
+
+	fmt.Println("Latest version:", latest.Version)
+
+	if latest.Version.LTE(currentVersion) {
+		fmt.Println("You are up to date")
+		return
+	}
+
+	var binaryPath string
+	fmt.Printf("Updating from %s to %s...\n", currentVersion, latest.Version)
+	binaryPath, err = os.Executable()
+	if err != nil {
+		fmt.Println("Error getting binary path:", err)
+		os.Exit(1)
+	}
+	err = selfupdate.UpdateTo(latest.AssetURL, binaryPath)
+	if err != nil {
+		fmt.Println("Please try rerunning with sudo. Error:", err)
+		os.Exit(1)
+	}
+	fmt.Printf("Successfully updated to %s\n\n%s\n", latest.Version, strings.TrimSpace(latest.ReleaseNotes))
+}

beszel/internal/records/records.go

@@ -8,10 +8,12 @@ import (
 	"math"
 	"time"
 
+	"github.com/goccy/go-json"
 	"github.com/pocketbase/dbx"
 	"github.com/pocketbase/pocketbase"
 	"github.com/pocketbase/pocketbase/daos"
 	"github.com/pocketbase/pocketbase/models"
+	"github.com/pocketbase/pocketbase/tools/types"
 )
 
 type RecordManager struct {
@@ -19,10 +21,10 @@ type RecordManager struct {
 }
 
 type LongerRecordData struct {
-	shorterType            string
-	longerType             string
-	longerTimeDuration     time.Duration
-	expectedShorterRecords int
+	shorterType        string
+	longerType         string
+	longerTimeDuration time.Duration
+	minShorterRecords  int
 }
 
 type RecordDeletionData struct {
@@ -30,6 +32,10 @@ type RecordDeletionData struct {
 	retention  time.Duration
 }
 
+type RecordStats []*struct {
+	Stats []byte `db:"stats"`
+}
+
 func NewRecordManager(app *pocketbase.PocketBase) *RecordManager {
 	return &RecordManager{app}
 }
@@ -39,28 +45,29 @@ func (rm *RecordManager) CreateLongerRecords() {
 	// start := time.Now()
 	recordData := []LongerRecordData{
 		{
-			shorterType:            "1m",
-			expectedShorterRecords: 10,
-			longerType:             "10m",
-			longerTimeDuration:     -10 * time.Minute,
+			shorterType: "1m",
+			// change to 9 from 10 to allow edge case timing or short pauses
+			minShorterRecords:  9,
+			longerType:         "10m",
+			longerTimeDuration: -10 * time.Minute,
 		},
 		{
-			shorterType:            "10m",
-			expectedShorterRecords: 2,
-			longerType:             "20m",
-			longerTimeDuration:     -20 * time.Minute,
+			shorterType:        "10m",
+			minShorterRecords:  2,
+			longerType:         "20m",
+			longerTimeDuration: -20 * time.Minute,
 		},
 		{
-			shorterType:            "20m",
-			expectedShorterRecords: 6,
-			longerType:             "120m",
-			longerTimeDuration:     -120 * time.Minute,
+			shorterType:        "20m",
+			minShorterRecords:  6,
+			longerType:         "120m",
+			longerTimeDuration: -120 * time.Minute,
 		},
 		{
-			shorterType:            "120m",
-			expectedShorterRecords: 4,
-			longerType:             "480m",
-			longerTimeDuration:     -480 * time.Minute,
+			shorterType:        "120m",
+			minShorterRecords:  4,
+			longerType:         "480m",
+			longerTimeDuration: -480 * time.Minute,
 		},
 	}
 	// wrap the operations in a transaction
@@ -71,6 +78,7 @@ func (rm *RecordManager) CreateLongerRecords() {
 			return err
 		}
 
+		// need *models.Collection to create a new record with models.NewRecord
 		collections := map[string]*models.Collection{}
 		for _, collectionName := range []string{"system_stats", "container_stats"} {
 			collection, _ := txDao.FindCollectionByNameOrId(collectionName)
@@ -102,31 +110,44 @@ func (rm *RecordManager) CreateLongerRecords() {
 						}
 					}
 					// get shorter records from the past x minutes
-					allShorterRecords, err := txDao.FindRecordsByExpr(
-						collection.Id,
-						dbx.NewExp(
-							"type = {:type} AND system = {:system} AND created > {:created}",
-							dbx.Params{"type": recordData.shorterType, "system": system.Id, "created": shorterRecordPeriod},
-						),
-					)
+					var stats RecordStats
+
+					// allShorterRecords, err := txDao.FindRecordsByExpr(
+					// 	collection,
+					// 	dbx.NewExp(
+					// 		"type = {:type} AND system = {:system} AND created > {:created}",
+					// 		dbx.Params{"type": recordData.shorterType, "system": system.Id, "created": shorterRecordPeriod},
+					// 	),
+					// )
+
+					err := txDao.DB().
+						Select("stats").
+						From(collection.Name).
+						AndWhere(dbx.NewExp(
+							"type={:type} AND system={:system} AND created > {:created}",
+							dbx.Params{
+								"type":    recordData.shorterType,
+								"system":  system.Id,
+								"created": shorterRecordPeriod,
+							},
+						)).
+						All(&stats)
 
 					// continue if not enough shorter records
-					if err != nil || len(allShorterRecords) < recordData.expectedShorterRecords {
+					if err != nil || len(stats) < recordData.minShorterRecords {
 						// log.Println("not enough shorter records. continue.", len(allShorterRecords), recordData.expectedShorterRecords)
 						continue
 					}
 					// average the shorter records and create longer record
-					var stats interface{}
-					switch collection.Name {
-					case "system_stats":
-						stats = rm.AverageSystemStats(allShorterRecords)
-					case "container_stats":
-						stats = rm.AverageContainerStats(allShorterRecords)
-					}
 					longerRecord := models.NewRecord(collection)
 					longerRecord.Set("system", system.Id)
-					longerRecord.Set("stats", stats)
 					longerRecord.Set("type", recordData.longerType)
+					switch collection.Name {
+					case "system_stats":
+						longerRecord.Set("stats", rm.AverageSystemStats(stats))
+					case "container_stats":
+						longerRecord.Set("stats", rm.AverageContainerStats(stats))
+					}
 					if err := txDao.SaveRecord(longerRecord); err != nil {
 						log.Println("failed to save longer record", "err", err.Error())
 					}
@@ -141,10 +162,11 @@ func (rm *RecordManager) CreateLongerRecords() {
 }
 
 // Calculate the average stats of a list of system_stats records without reflect
-func (rm *RecordManager) AverageSystemStats(records []*models.Record) system.Stats {
-	var sum system.Stats
-	sum.Temperatures = make(map[string]float64)
-	sum.ExtraFs = make(map[string]*system.FsStats)
+func (rm *RecordManager) AverageSystemStats(records RecordStats) system.Stats {
+	sum := system.Stats{
+		Temperatures: make(map[string]float64),
+		ExtraFs:      make(map[string]*system.FsStats),
+	}
 
 	count := float64(len(records))
 	// use different counter for temps in case some records don't have them
@@ -152,12 +174,13 @@ func (rm *RecordManager) AverageSystemStats(records []*models.Record) system.Sta
 
 	var stats system.Stats
 	for _, record := range records {
-		record.UnmarshalJSONField("stats", &stats)
+		json.Unmarshal(record.Stats, &stats)
 		sum.Cpu += stats.Cpu
 		sum.Mem += stats.Mem
 		sum.MemUsed += stats.MemUsed
 		sum.MemPct += stats.MemPct
 		sum.MemBuffCache += stats.MemBuffCache
+		sum.MemZfsArc += stats.MemZfsArc
 		sum.Swap += stats.Swap
 		sum.SwapUsed += stats.SwapUsed
 		sum.DiskTotal += stats.DiskTotal
@@ -167,6 +190,12 @@ func (rm *RecordManager) AverageSystemStats(records []*models.Record) system.Sta
 		sum.DiskWritePs += stats.DiskWritePs
 		sum.NetworkSent += stats.NetworkSent
 		sum.NetworkRecv += stats.NetworkRecv
+		// set peak values
+		sum.MaxCpu = max(sum.MaxCpu, stats.MaxCpu, stats.Cpu)
+		sum.MaxNetworkSent = max(sum.MaxNetworkSent, stats.MaxNetworkSent, stats.NetworkSent)
+		sum.MaxNetworkRecv = max(sum.MaxNetworkRecv, stats.MaxNetworkRecv, stats.NetworkRecv)
+		sum.MaxDiskReadPs = max(sum.MaxDiskReadPs, stats.MaxDiskReadPs, stats.DiskReadPs)
+		sum.MaxDiskWritePs = max(sum.MaxDiskWritePs, stats.MaxDiskWritePs, stats.DiskWritePs)
 		// add temps to sum
 		if stats.Temperatures != nil {
 			tempCount++
@@ -187,42 +216,53 @@ func (rm *RecordManager) AverageSystemStats(records []*models.Record) system.Sta
 				sum.ExtraFs[key].DiskUsed += value.DiskUsed
 				sum.ExtraFs[key].DiskWritePs += value.DiskWritePs
 				sum.ExtraFs[key].DiskReadPs += value.DiskReadPs
+				// peak values
+				sum.ExtraFs[key].MaxDiskReadPS = max(sum.ExtraFs[key].MaxDiskReadPS, value.MaxDiskReadPS, value.DiskReadPs)
+				sum.ExtraFs[key].MaxDiskWritePS = max(sum.ExtraFs[key].MaxDiskWritePS, value.MaxDiskWritePS, value.DiskWritePs)
 			}
 		}
 	}
 
 	stats = system.Stats{
-		Cpu:          twoDecimals(sum.Cpu / count),
-		Mem:          twoDecimals(sum.Mem / count),
-		MemUsed:      twoDecimals(sum.MemUsed / count),
-		MemPct:       twoDecimals(sum.MemPct / count),
-		MemBuffCache: twoDecimals(sum.MemBuffCache / count),
-		Swap:         twoDecimals(sum.Swap / count),
-		SwapUsed:     twoDecimals(sum.SwapUsed / count),
-		DiskTotal:    twoDecimals(sum.DiskTotal / count),
-		DiskUsed:     twoDecimals(sum.DiskUsed / count),
-		DiskPct:      twoDecimals(sum.DiskPct / count),
-		DiskReadPs:   twoDecimals(sum.DiskReadPs / count),
-		DiskWritePs:  twoDecimals(sum.DiskWritePs / count),
-		NetworkSent:  twoDecimals(sum.NetworkSent / count),
-		NetworkRecv:  twoDecimals(sum.NetworkRecv / count),
+		Cpu:            twoDecimals(sum.Cpu / count),
+		Mem:            twoDecimals(sum.Mem / count),
+		MemUsed:        twoDecimals(sum.MemUsed / count),
+		MemPct:         twoDecimals(sum.MemPct / count),
+		MemBuffCache:   twoDecimals(sum.MemBuffCache / count),
+		MemZfsArc:      twoDecimals(sum.MemZfsArc / count),
+		Swap:           twoDecimals(sum.Swap / count),
+		SwapUsed:       twoDecimals(sum.SwapUsed / count),
+		DiskTotal:      twoDecimals(sum.DiskTotal / count),
+		DiskUsed:       twoDecimals(sum.DiskUsed / count),
+		DiskPct:        twoDecimals(sum.DiskPct / count),
+		DiskReadPs:     twoDecimals(sum.DiskReadPs / count),
+		DiskWritePs:    twoDecimals(sum.DiskWritePs / count),
+		NetworkSent:    twoDecimals(sum.NetworkSent / count),
+		NetworkRecv:    twoDecimals(sum.NetworkRecv / count),
+		MaxCpu:         sum.MaxCpu,
+		MaxDiskReadPs:  sum.MaxDiskReadPs,
+		MaxDiskWritePs: sum.MaxDiskWritePs,
+		MaxNetworkSent: sum.MaxNetworkSent,
+		MaxNetworkRecv: sum.MaxNetworkRecv,
 	}
 
 	if len(sum.Temperatures) != 0 {
-		stats.Temperatures = make(map[string]float64)
+		stats.Temperatures = make(map[string]float64, len(sum.Temperatures))
 		for key, value := range sum.Temperatures {
 			stats.Temperatures[key] = twoDecimals(value / tempCount)
 		}
 	}
 
 	if len(sum.ExtraFs) != 0 {
-		stats.ExtraFs = make(map[string]*system.FsStats)
+		stats.ExtraFs = make(map[string]*system.FsStats, len(sum.ExtraFs))
 		for key, value := range sum.ExtraFs {
 			stats.ExtraFs[key] = &system.FsStats{
-				DiskTotal:   twoDecimals(value.DiskTotal / count),
-				DiskUsed:    twoDecimals(value.DiskUsed / count),
-				DiskWritePs: twoDecimals(value.DiskWritePs / count),
-				DiskReadPs:  twoDecimals(value.DiskReadPs / count),
+				DiskTotal:      twoDecimals(value.DiskTotal / count),
+				DiskUsed:       twoDecimals(value.DiskUsed / count),
+				DiskWritePs:    twoDecimals(value.DiskWritePs / count),
+				DiskReadPs:     twoDecimals(value.DiskReadPs / count),
+				MaxDiskReadPS:  value.MaxDiskReadPS,
+				MaxDiskWritePS: value.MaxDiskWritePS,
 			}
 		}
 	}
@@ -231,16 +271,20 @@ func (rm *RecordManager) AverageSystemStats(records []*models.Record) system.Sta
 }
 
 // Calculate the average stats of a list of container_stats records
-func (rm *RecordManager) AverageContainerStats(records []*models.Record) (stats []container.Stats) {
+func (rm *RecordManager) AverageContainerStats(records RecordStats) []container.Stats {
 	sums := make(map[string]*container.Stats)
 	count := float64(len(records))
 
 	var containerStats []container.Stats
 	for _, record := range records {
-		record.UnmarshalJSONField("stats", &containerStats)
+		// Reset the slice length to 0, but keep the capacity
+		containerStats = containerStats[:0]
+		if err := json.Unmarshal(record.Stats, &containerStats); err != nil {
+			return []container.Stats{}
+		}
 		for _, stat := range containerStats {
 			if _, ok := sums[stat.Name]; !ok {
-				sums[stat.Name] = &container.Stats{Name: stat.Name, Cpu: 0, Mem: 0}
+				sums[stat.Name] = &container.Stats{Name: stat.Name}
 			}
 			sums[stat.Name].Cpu += stat.Cpu
 			sums[stat.Name].Mem += stat.Mem
@@ -249,8 +293,9 @@ func (rm *RecordManager) AverageContainerStats(records []*models.Record) (stats
 		}
 	}
 
+	result := make([]container.Stats, 0, len(sums))
 	for _, value := range sums {
-		stats = append(stats, container.Stats{
+		result = append(result, container.Stats{
 			Name:        value.Name,
 			Cpu:         twoDecimals(value.Cpu / count),
 			Mem:         twoDecimals(value.Mem / count),
@@ -258,11 +303,11 @@ func (rm *RecordManager) AverageContainerStats(records []*models.Record) (stats
 			NetworkRecv: twoDecimals(value.NetworkRecv / count),
 		})
 	}
-	return stats
+	return result
 }
 
+// Deletes records older than what is displayed in the UI
 func (rm *RecordManager) DeleteOldRecords() {
-	// start := time.Now()
 	collections := []string{"system_stats", "container_stats"}
 	recordData := []RecordDeletionData{
 		{
@@ -286,29 +331,17 @@ func (rm *RecordManager) DeleteOldRecords() {
 			retention:  30 * 24 * time.Hour,
 		},
 	}
-	rm.app.Dao().RunInTransaction(func(txDao *daos.Dao) error {
-		for _, recordData := range recordData {
-			exp := dbx.NewExp(
-				"type = {:type} AND created < {:created}",
-				dbx.Params{"type": recordData.recordType, "created": time.Now().UTC().Add(-recordData.retention)},
-			)
-			for _, collectionSlug := range collections {
-				collectionRecords, err := txDao.FindRecordsByExpr(collectionSlug, exp)
-				if err != nil {
-					return err
-				}
-				for _, record := range collectionRecords {
-					err := txDao.DeleteRecord(record)
-					if err != nil {
-						rm.app.Logger().Error("Failed to delete records", "err", err.Error())
-						return err
-					}
-				}
+	db := rm.app.Dao().NonconcurrentDB()
+	for _, recordData := range recordData {
+		for _, collectionSlug := range collections {
+			formattedDate := time.Now().UTC().Add(-recordData.retention).Format(types.DefaultDateLayout)
+			expr := dbx.NewExp("[[created]] < {:date} AND [[type]] = {:type}", dbx.Params{"date": formattedDate, "type": recordData.recordType})
+			_, err := db.Delete(collectionSlug, expr).Execute()
+			if err != nil {
+				rm.app.Logger().Error("Failed to delete records", "err", err.Error())
 			}
 		}
-		return nil
-	})
-	// log.Println("finished deleting old records", "time (ms)", time.Since(start).Milliseconds())
+	}
 }
 
 /* Round float to two decimals */

beszel/internal/users/users.go

@@ -0,0 +1,65 @@
+// Package users handles user-related custom functionality.
+package users
+
+import (
+	"log"
+
+	"github.com/pocketbase/pocketbase"
+	"github.com/pocketbase/pocketbase/core"
+	"github.com/pocketbase/pocketbase/models"
+)
+
+type UserManager struct {
+	app *pocketbase.PocketBase
+}
+
+type UserSettings struct {
+	ChartTime            string   `json:"chartTime"`
+	NotificationEmails   []string `json:"emails"`
+	NotificationWebhooks []string `json:"webhooks"`
+	// Language             string   `json:"lang"`
+}
+
+func NewUserManager(app *pocketbase.PocketBase) *UserManager {
+	return &UserManager{
+		app: app,
+	}
+}
+
+func (um *UserManager) InitializeUserRole(e *core.ModelEvent) error {
+	user := e.Model.(*models.Record)
+	if user.GetString("role") == "" {
+		user.Set("role", "user")
+	}
+	return nil
+}
+
+func (um *UserManager) InitializeUserSettings(e *core.ModelEvent) error {
+	record := e.Model.(*models.Record)
+	// intialize settings with defaults
+	settings := UserSettings{
+		// Language:             "en",
+		ChartTime:            "1h",
+		NotificationEmails:   []string{},
+		NotificationWebhooks: []string{},
+	}
+	record.UnmarshalJSONField("settings", &settings)
+	if len(settings.NotificationEmails) == 0 {
+		// get user email from auth record
+		if errs := um.app.Dao().ExpandRecord(record, []string{"user"}, nil); len(errs) == 0 {
+			// app.Logger().Error("failed to expand user relation", "errs", errs)
+			if user := record.ExpandedOne("user"); user != nil {
+				settings.NotificationEmails = []string{user.GetString("email")}
+			} else {
+				log.Println("Failed to get user email from auth record")
+			}
+		} else {
+			log.Println("failed to expand user relation", "errs", errs)
+		}
+	}
+	// if len(settings.NotificationWebhooks) == 0 {
+	// 	settings.NotificationWebhooks = []string{""}
+	// }
+	record.Set("settings", settings)
+	return nil
+}

beszel/migrations/1728772062_collections_snapshot.go

@@ -15,7 +15,7 @@ func init() {
 			{
 				"id": "2hz5ncl8tizk5nx",
 				"created": "2024-07-07 16:08:20.979Z",
-				"updated": "2024-07-28 17:00:47.996Z",
+				"updated": "2024-10-12 18:55:51.623Z",
 				"name": "systems",
 				"type": "base",
 				"system": false,
@@ -120,7 +120,7 @@ func init() {
 			{
 				"id": "ej9oowivz8b2mht",
 				"created": "2024-07-07 16:09:09.179Z",
-				"updated": "2024-07-22 20:13:31.324Z",
+				"updated": "2024-10-12 18:55:51.623Z",
 				"name": "system_stats",
 				"type": "base",
 				"system": false,
@@ -186,7 +186,7 @@ func init() {
 			{
 				"id": "juohu4jipgc13v7",
 				"created": "2024-07-07 16:09:57.976Z",
-				"updated": "2024-07-22 20:13:31.324Z",
+				"updated": "2024-10-12 18:55:51.623Z",
 				"name": "container_stats",
 				"type": "base",
 				"system": false,
@@ -250,7 +250,7 @@ func init() {
 			{
 				"id": "_pb_users_auth_",
 				"created": "2024-07-14 16:25:18.226Z",
-				"updated": "2024-07-28 17:02:08.311Z",
+				"updated": "2024-10-12 22:27:19.081Z",
 				"name": "users",
 				"type": "auth",
 				"system": false,
@@ -316,7 +316,7 @@ func init() {
 			{
 				"id": "elngm8x1l60zi2v",
 				"created": "2024-07-15 01:16:04.044Z",
-				"updated": "2024-07-22 20:13:31.324Z",
+				"updated": "2024-10-12 22:27:29.128Z",
 				"name": "alerts",
 				"type": "base",
 				"system": false,
@@ -367,7 +367,9 @@ func init() {
 								"Status",
 								"CPU",
 								"Memory",
-								"Disk"
+								"Disk",
+								"Temperature",
+								"Bandwidth"
 							]
 						}
 					},
@@ -385,6 +387,20 @@ func init() {
 							"noDecimal": false
 						}
 					},
+					{
+						"system": false,
+						"id": "fstdehcq",
+						"name": "min",
+						"type": "number",
+						"required": false,
+						"presentable": false,
+						"unique": false,
+						"options": {
+							"min": null,
+							"max": 60,
+							"noDecimal": true
+						}
+					},
 					{
 						"system": false,
 						"id": "6hgdf6hs",
@@ -403,6 +419,53 @@ func init() {
 				"updateRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
 				"deleteRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
 				"options": {}
+			},
+			{
+				"id": "4afacsdnlu8q8r2",
+				"created": "2024-09-12 17:42:55.324Z",
+				"updated": "2024-10-12 18:55:51.624Z",
+				"name": "user_settings",
+				"type": "base",
+				"system": false,
+				"schema": [
+					{
+						"system": false,
+						"id": "d5vztyxa",
+						"name": "user",
+						"type": "relation",
+						"required": true,
+						"presentable": false,
+						"unique": false,
+						"options": {
+							"collectionId": "_pb_users_auth_",
+							"cascadeDelete": false,
+							"minSelect": null,
+							"maxSelect": 1,
+							"displayFields": null
+						}
+					},
+					{
+						"system": false,
+						"id": "xcx4qgqq",
+						"name": "settings",
+						"type": "json",
+						"required": false,
+						"presentable": false,
+						"unique": false,
+						"options": {
+							"maxSize": 2000000
+						}
+					}
+				],
+				"indexes": [
+					"CREATE UNIQUE INDEX ` + "`" + `idx_30Lwgf2` + "`" + ` ON ` + "`" + `user_settings` + "`" + ` (` + "`" + `user` + "`" + `)"
+				],
+				"listRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+				"viewRule": null,
+				"createRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+				"updateRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+				"deleteRule": null,
+				"options": {}
 			}
 		]`
 

beszel/site/embed.go

@@ -11,5 +11,3 @@ import (
 var assets embed.FS
 
 var Dist = echo.MustSubFS(assets, "dist")
-
-var Static = echo.MustSubFS(assets, "dist/static")

beszel/site/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "site",
+	"name": "beszel",
 	"private": true,
 	"version": "0.0.0",
 	"type": "module",
@@ -9,45 +9,51 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@henrygd/queue": "^1.0.7",
 		"@nanostores/react": "^0.7.3",
-		"@nanostores/router": "^0.15.1",
-		"@radix-ui/react-alert-dialog": "^1.1.1",
-		"@radix-ui/react-dialog": "^1.1.1",
-		"@radix-ui/react-dropdown-menu": "^2.1.1",
+		"@nanostores/router": "^0.11.0",
+		"@radix-ui/react-alert-dialog": "^1.1.2",
+		"@radix-ui/react-checkbox": "^1.1.2",
+		"@radix-ui/react-dialog": "^1.1.2",
+		"@radix-ui/react-dropdown-menu": "^2.1.2",
 		"@radix-ui/react-label": "^2.1.0",
-		"@radix-ui/react-select": "^2.1.1",
+		"@radix-ui/react-select": "^2.1.2",
 		"@radix-ui/react-separator": "^1.1.0",
-		"@radix-ui/react-slider": "^1.2.0",
+		"@radix-ui/react-slider": "^1.2.1",
 		"@radix-ui/react-slot": "^1.1.0",
-		"@radix-ui/react-switch": "^1.1.0",
-		"@radix-ui/react-toast": "^1.2.1",
-		"@radix-ui/react-tooltip": "^1.1.2",
+		"@radix-ui/react-switch": "^1.1.1",
+		"@radix-ui/react-tabs": "^1.1.1",
+		"@radix-ui/react-toast": "^1.2.2",
+		"@radix-ui/react-tooltip": "^1.1.3",
 		"@tanstack/react-table": "^8.20.5",
-		"@vitejs/plugin-react": "^4.3.1",
+		"@vitejs/plugin-react": "^4.3.2",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.0.0",
-		"d3-scale": "^4.0.2",
 		"d3-time": "^3.1.0",
-		"lucide-react": "^0.407.0",
-		"nanostores": "^0.10.3",
+		"lucide-react": "^0.452.0",
+		"nanostores": "^0.11.3",
 		"pocketbase": "^0.21.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"recharts": "^2.13.0-alpha.4",
-		"tailwind-merge": "^2.5.2",
+		"recharts": "^2.13.0",
+		"tailwind-merge": "^2.5.4",
 		"tailwindcss-animate": "^1.0.7",
-		"use-is-in-viewport": "^1.0.9",
 		"valibot": "^0.36.0"
 	},
 	"devDependencies": {
-		"@types/bun": "^1.1.8",
-		"@types/react": "^18.3.5",
-		"@types/react-dom": "^18.3.0",
+		"@types/bun": "^1.1.11",
+		"@types/react": "^18.3.11",
+		"@types/react-dom": "^18.3.1",
 		"autoprefixer": "^10.4.20",
-		"postcss": "^8.4.44",
-		"tailwindcss": "^3.4.10",
-		"typescript": "^5.5.4",
-		"vite": "^5.4.2"
+		"postcss": "^8.4.47",
+		"tailwindcss": "^3.4.14",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.9"
+	},
+	"overrides": {
+		"@nanostores/router": {
+			"nanostores": "^0.11.3"
+		}
 	}
 }

beszel/site/src/components/alerts/alert-button.tsx

@@ -0,0 +1,127 @@
+import { memo, useState } from 'react'
+import { useStore } from '@nanostores/react'
+import { $alerts, $systems } from '@/lib/stores'
+import {
+	Dialog,
+	DialogTrigger,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from '@/components/ui/dialog'
+import { BellIcon, GlobeIcon, ServerIcon } from 'lucide-react'
+import { alertInfo, cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { AlertRecord, SystemRecord } from '@/types'
+import { Link } from '../router'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Checkbox } from '../ui/checkbox'
+import { SystemAlert, SystemAlertGlobal } from './alerts-system'
+
+export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
+	const alerts = useStore($alerts)
+	const [opened, setOpened] = useState(false)
+
+	const systemAlerts = alerts.filter((alert) => alert.system === system.id) as AlertRecord[]
+	const active = systemAlerts.length > 0
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					aria-label="Alerts"
+					data-nolink
+					onClick={() => setOpened(true)}
+				>
+					<BellIcon
+						className={cn('h-[1.2em] w-[1.2em] pointer-events-none', {
+							'fill-primary': active,
+						})}
+					/>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-full overflow-auto max-w-[35rem]">
+				{opened && <TheContent data={{ system, alerts, systemAlerts }} />}
+			</DialogContent>
+		</Dialog>
+	)
+})
+
+function TheContent({
+	data: { system, alerts, systemAlerts },
+}: {
+	data: { system: SystemRecord; alerts: AlertRecord[]; systemAlerts: AlertRecord[] }
+}) {
+	const [overwriteExisting, setOverwriteExisting] = useState<boolean | 'indeterminate'>(false)
+	const systems = $systems.get()
+
+	const data = Object.keys(alertInfo).map((key) => {
+		const alert = alertInfo[key as keyof typeof alertInfo]
+		return {
+			key: key as keyof typeof alertInfo,
+			alert,
+			system,
+		}
+	})
+
+	return (
+		<>
+			<DialogHeader>
+				<DialogTitle className="text-xl">Alerts</DialogTitle>
+				<DialogDescription>
+					See{' '}
+					<Link href="/settings/notifications" className="link">
+						notification settings
+					</Link>{' '}
+					to configure how you receive alerts.
+				</DialogDescription>
+			</DialogHeader>
+			<Tabs defaultValue="system">
+				<TabsList className="mb-1 -mt-0.5">
+					<TabsTrigger value="system">
+						<ServerIcon className="mr-2 h-3.5 w-3.5" />
+						{system.name}
+					</TabsTrigger>
+					<TabsTrigger value="global">
+						<GlobeIcon className="mr-1.5 h-3.5 w-3.5" />
+						All systems
+					</TabsTrigger>
+				</TabsList>
+				<TabsContent value="system">
+					<div className="grid gap-3">
+						{data.map((d) => (
+							<SystemAlert key={d.key} system={system} data={d} systemAlerts={systemAlerts} />
+						))}
+					</div>
+				</TabsContent>
+				<TabsContent value="global">
+					<label
+						htmlFor="ovw"
+						className="mb-3 flex gap-2 items-center justify-center cursor-pointer border rounded-sm py-3 px-4 border-destructive text-destructive font-semibold text-sm"
+					>
+						<Checkbox
+							id="ovw"
+							className="text-destructive border-destructive data-[state=checked]:bg-destructive"
+							checked={overwriteExisting}
+							onCheckedChange={setOverwriteExisting}
+						/>
+						Overwrite existing alerts
+					</label>
+					<div className="grid gap-3">
+						{data.map((d) => (
+							<SystemAlertGlobal
+								key={d.key}
+								data={d}
+								overwrite={overwriteExisting}
+								alerts={alerts}
+								systems={systems}
+							/>
+						))}
+					</div>
+				</TabsContent>
+			</Tabs>
+		</>
+	)
+}

beszel/site/src/components/alerts/alerts-system.tsx

@@ -0,0 +1,246 @@
+import { pb } from '@/lib/stores'
+import { alertInfo, cn } from '@/lib/utils'
+import { Switch } from '@/components/ui/switch'
+import { AlertRecord, SystemRecord } from '@/types'
+import { lazy, Suspense, useRef, useState } from 'react'
+import { toast } from '../ui/use-toast'
+import { RecordOptions } from 'pocketbase'
+import { newQueue, Queue } from '@henrygd/queue'
+
+interface AlertData {
+	checked?: boolean
+	val?: number
+	min?: number
+	updateAlert?: (checked: boolean, value: number, min: number) => void
+	key: keyof typeof alertInfo
+	alert: (typeof alertInfo)[keyof typeof alertInfo]
+	system: SystemRecord
+}
+
+const Slider = lazy(() => import('@/components/ui/slider'))
+
+let queue: Queue
+
+const failedUpdateToast = () =>
+	toast({
+		title: 'Failed to update alert',
+		description: 'Please check logs for more details.',
+		variant: 'destructive',
+	})
+
+export function SystemAlert({
+	system,
+	systemAlerts,
+	data,
+}: {
+	system: SystemRecord
+	systemAlerts: AlertRecord[]
+	data: AlertData
+}) {
+	const alert = systemAlerts.find((alert) => alert.name === data.key)
+
+	data.updateAlert = async (checked: boolean, value: number, min: number) => {
+		try {
+			if (alert && !checked) {
+				await pb.collection('alerts').delete(alert.id)
+			} else if (alert && checked) {
+				await pb.collection('alerts').update(alert.id, { value, min, triggered: false })
+			} else if (checked) {
+				pb.collection('alerts').create({
+					system: system.id,
+					user: pb.authStore.model!.id,
+					name: data.key,
+					value: value,
+					min: min,
+				})
+			}
+		} catch (e) {
+			failedUpdateToast()
+		}
+	}
+
+	if (alert) {
+		data.checked = true
+		data.val = alert.value
+		data.min = alert.min || 1
+	}
+
+	return <AlertContent data={data} />
+}
+
+export function SystemAlertGlobal({
+	data,
+	overwrite,
+	alerts,
+	systems,
+}: {
+	data: AlertData
+	overwrite: boolean | 'indeterminate'
+	alerts: AlertRecord[]
+	systems: SystemRecord[]
+}) {
+	const systemsWithExistingAlerts = useRef<{ set: Set<string>; populatedSet: boolean }>({
+		set: new Set(),
+		populatedSet: false,
+	})
+
+	data.checked = false
+	data.val = data.min = 0
+
+	data.updateAlert = (checked: boolean, value: number, min: number) => {
+		if (!queue) {
+			queue = newQueue(5)
+		}
+
+		const { set, populatedSet } = systemsWithExistingAlerts.current
+
+		// if overwrite checked, make sure all alerts will be overwritten
+		if (overwrite) {
+			set.clear()
+		}
+
+		const recordData: Partial<AlertRecord> = {
+			value,
+			min,
+			triggered: false,
+		}
+		for (let system of systems) {
+			// if overwrite is false and system is in set (alert existed), skip
+			if (!overwrite && set.has(system.id)) {
+				continue
+			}
+			// find matching existing alert
+			const existingAlert = alerts.find(
+				(alert) => alert.system === system.id && data.key === alert.name
+			)
+			// if first run, add system to set (alert already existed when global panel was opened)
+			if (existingAlert && !populatedSet && !overwrite) {
+				set.add(system.id)
+				continue
+			}
+			const requestOptions: RecordOptions = {
+				requestKey: system.id,
+			}
+
+			// checked - make sure alert is created or updated
+			if (checked) {
+				if (existingAlert) {
+					// console.log('updating', system.name)
+					queue
+						.add(() => pb.collection('alerts').update(existingAlert.id, recordData, requestOptions))
+						.catch(failedUpdateToast)
+				} else {
+					// console.log('creating', system.name)
+					queue
+						.add(() =>
+							pb.collection('alerts').create(
+								{
+									system: system.id,
+									user: pb.authStore.model!.id,
+									name: data.key,
+									...recordData,
+								},
+								requestOptions
+							)
+						)
+						.catch(failedUpdateToast)
+				}
+			} else if (existingAlert) {
+				// console.log('deleting', system.name)
+				queue.add(() => pb.collection('alerts').delete(existingAlert.id)).catch(failedUpdateToast)
+			}
+		}
+		systemsWithExistingAlerts.current.populatedSet = true
+	}
+
+	return <AlertContent data={data} />
+}
+
+function AlertContent({ data }: { data: AlertData }) {
+	const { key } = data
+
+	const hasSliders = !('single' in data.alert)
+
+	const [checked, setChecked] = useState(data.checked || false)
+	const [min, setMin] = useState(data.min || (hasSliders ? 10 : 0))
+	const [value, setValue] = useState(data.val || (hasSliders ? 80 : 0))
+
+	const showSliders = checked && hasSliders
+
+	const newMin = useRef(min)
+	const newValue = useRef(value)
+
+	const Icon = alertInfo[key].icon
+
+	const updateAlert = (c?: boolean) =>
+		data.updateAlert?.(c ?? checked, newValue.current, newMin.current)
+
+	return (
+		<div className="rounded-lg border border-muted-foreground/15 hover:border-muted-foreground/20 transition-colors duration-100 group">
+			<label
+				htmlFor={`s${key}`}
+				className={cn('flex flex-row items-center justify-between gap-4 cursor-pointer p-4', {
+					'pb-0': showSliders,
+				})}
+			>
+				<div className="grid gap-1 select-none">
+					<p className="font-semibold flex gap-3 items-center capitalize">
+						<Icon className="h-4 w-4 opacity-85" /> {data.alert.name}
+					</p>
+					{!showSliders && (
+						<span className="block text-sm text-muted-foreground">{data.alert.desc}</span>
+					)}
+				</div>
+				<Switch
+					id={`s${key}`}
+					checked={checked}
+					onCheckedChange={(checked) => {
+						setChecked(checked)
+						updateAlert(checked)
+					}}
+				/>
+			</label>
+			{showSliders && (
+				<div className="grid sm:grid-cols-2 mt-1.5 gap-5 px-4 pb-5 tabular-nums text-muted-foreground">
+					<Suspense fallback={<div className="h-10" />}>
+						<div>
+							<p id={`v${key}`} className="text-sm block h-8">
+								Average exceeds{' '}
+								<strong className="text-foreground">
+									{value}
+									{data.alert.unit}
+								</strong>
+							</p>
+							<div className="flex gap-3">
+								<Slider
+									aria-labelledby={`v${key}`}
+									defaultValue={[value]}
+									onValueCommit={(val) => (newValue.current = val[0]) && updateAlert()}
+									onValueChange={(val) => setValue(val[0])}
+									min={1}
+									max={99}
+								/>
+							</div>
+						</div>
+						<div>
+							<p id={`t${key}`} className="text-sm block h-8">
+								For <strong className="text-foreground">{min}</strong> minute
+								{min > 1 && 's'}
+							</p>
+							<div className="flex gap-3">
+								<Slider
+									aria-labelledby={`v${key}`}
+									defaultValue={[min]}
+									onValueCommit={(val) => (newMin.current = val[0]) && updateAlert()}
+									onValueChange={(val) => setMin(val[0])}
+									min={1}
+									max={60}
+								/>
+							</div>
+						</div>
+					</Suspense>
+				</div>
+			)}
+		</div>
+	)
+}

beszel/site/src/components/charts/area-chart.tsx

@@ -0,0 +1,122 @@
+import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from '@/components/ui/chart'
+import {
+	useYAxisWidth,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	decimalString,
+	chartMargin,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
+import { ChartData } from '@/types'
+import { memo, useMemo } from 'react'
+
+/** [label, key, color, opacity] */
+type DataKeys = [string, string, number, number]
+
+const getNestedValue = (path: string, max = false, data: any): number | null => {
+	// fallback value (obj?.stats?.cpum ? 0 : null) should only come into play when viewing
+	// a max value which doesn't exist, or the value was zero and omitted from the stats object.
+	// so we check if cpum is present. if so, return 0 to make sure the zero value is displayed.
+	// if not, return null - there is no max data so do not display anything.
+	return `stats.${path}${max ? 'm' : ''}`
+		.split('.')
+		.reduce((acc: any, key: string) => acc?.[key] ?? (data.stats?.cpum ? 0 : null), data)
+}
+
+export default memo(function AreaChartDefault({
+	maxToggled = false,
+	unit = ' MB/s',
+	chartName,
+	chartData,
+}: {
+	maxToggled?: boolean
+	unit?: string
+	chartName: string
+	chartData: ChartData
+}) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+
+	const { chartTime } = chartData
+
+	const showMax = chartTime !== '1h' && maxToggled
+
+	const dataKeys: DataKeys[] = useMemo(() => {
+		// [label, key, color, opacity]
+		if (chartName === 'CPU Usage') {
+			return [[chartName, 'cpu', 1, 0.4]]
+		} else if (chartName === 'dio') {
+			return [
+				['Write', 'dw', 3, 0.3],
+				['Read', 'dr', 1, 0.3],
+			]
+		} else if (chartName === 'bw') {
+			return [
+				['Sent', 'ns', 5, 0.2],
+				['Received', 'nr', 2, 0.2],
+			]
+		} else if (chartName.startsWith('efs')) {
+			return [
+				['Write', `${chartName}.w`, 3, 0.3],
+				['Read', `${chartName}.r`, 1, 0.3],
+			]
+		}
+		return []
+	}, [])
+
+	// console.log('Rendered at', new Date())
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisWidth,
+				})}
+			>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2) + unit
+							return updateYAxisWidth(val)
+						}}
+						tickLine={false}
+						axisLine={false}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								contentFormatter={(item) => decimalString(item.value) + unit}
+								// indicator="line"
+							/>
+						}
+					/>
+					{dataKeys.map((key, i) => {
+						const color = `hsl(var(--chart-${key[2]}))`
+						return (
+							<Area
+								key={i}
+								dataKey={getNestedValue.bind(null, key[1], showMax)}
+								name={key[0]}
+								type="monotoneX"
+								fill={color}
+								fillOpacity={key[3]}
+								stroke={color}
+								isAnimationActive={false}
+							/>
+						)
+					})}
+					{/* <ChartLegend content={<ChartLegendContent />} /> */}
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+})

beszel/site/src/components/charts/bandwidth-chart.tsx

@@ -1,106 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import {
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-	useYaxisWidth,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
-
-export default function BandwidthChart({
-	ticks,
-	systemData,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-}) {
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	return (
-		<div ref={chartRef}>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						width={yAxisWidth}
-						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
-						tickLine={false}
-						axisLine={false}
-						unit={' MB/s'}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						animationEasing="ease-out"
-						animationDuration={150}
-						content={
-							<ChartTooltipContent
-								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' MB/s'}
-								indicator="line"
-							/>
-						}
-					/>
-					<Area
-						dataKey="stats.ns"
-						name="Sent"
-						type="monotoneX"
-						fill="hsl(var(--chart-5))"
-						fillOpacity={0.2}
-						stroke="hsl(var(--chart-5))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-					<Area
-						dataKey="stats.nr"
-						name="Received"
-						type="monotoneX"
-						fill="hsl(var(--chart-2))"
-						fillOpacity={0.2}
-						stroke="hsl(var(--chart-2))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

beszel/site/src/components/charts/container-chart.tsx

@@ -0,0 +1,189 @@
+import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	xAxis,
+} from '@/components/ui/chart'
+import { memo, useMemo } from 'react'
+import {
+	useYAxisWidth,
+	cn,
+	formatShortDate,
+	decimalString,
+	chartMargin,
+	toFixedFloat,
+	getSizeAndUnit,
+	toFixedWithoutTrailingZeros,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $containerFilter } from '@/lib/stores'
+import { ChartData } from '@/types'
+import { Separator } from '../ui/separator'
+
+export default memo(function ContainerChart({
+	dataKey,
+	chartData,
+	chartName,
+	unit = '%',
+}: {
+	dataKey: string
+	chartData: ChartData
+	chartName: string
+	unit?: string
+}) {
+	const filter = useStore($containerFilter)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+
+	const { containerData } = chartData
+
+	const isNetChart = chartName === 'net'
+
+	const chartConfig = useMemo(() => {
+		let config = {} as Record<
+			string,
+			{
+				label: string
+				color: string
+			}
+		>
+		const totalUsage = {} as Record<string, number>
+		for (let stats of containerData) {
+			for (let key in stats) {
+				if (!key || key === 'created') {
+					continue
+				}
+				if (!(key in totalUsage)) {
+					totalUsage[key] = 0
+				}
+				if (isNetChart) {
+					totalUsage[key] += (stats[key]?.nr ?? 0) + (stats[key]?.ns ?? 0)
+				} else {
+					// @ts-ignore
+					totalUsage[key] += stats[key]?.[dataKey] ?? 0
+				}
+			}
+		}
+		let keys = Object.keys(totalUsage)
+		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
+		const length = keys.length
+		for (let i = 0; i < length; i++) {
+			const key = keys[i]
+			const hue = ((i * 360) / length) % 360
+			config[key] = {
+				label: key,
+				color: `hsl(${hue}, 60%, 55%)`,
+			}
+		}
+		return config satisfies ChartConfig
+	}, [chartData])
+
+	const { toolTipFormatter, dataFunction, tickFormatter } = useMemo(() => {
+		const obj = {} as {
+			toolTipFormatter: (item: any, key: string) => React.ReactNode | string
+			dataFunction: (key: string, data: any) => number | null
+			tickFormatter: (value: any) => string
+		}
+		// tick formatter
+		if (chartName === 'cpu') {
+			obj.tickFormatter = (value) => {
+				const val = toFixedWithoutTrailingZeros(value, 2) + unit
+				return updateYAxisWidth(val)
+			}
+		} else {
+			obj.tickFormatter = (value) => {
+				const { v, u } = getSizeAndUnit(value, false)
+				return updateYAxisWidth(`${toFixedFloat(v, 2)}${u}${isNetChart ? '/s' : ''}`)
+			}
+		}
+		// tooltip formatter
+		if (isNetChart) {
+			obj.toolTipFormatter = (item: any, key: string) => {
+				try {
+					const sent = item?.payload?.[key]?.ns ?? 0
+					const received = item?.payload?.[key]?.nr ?? 0
+					return (
+						<span className="flex">
+							{decimalString(received)} MB/s
+							<span className="opacity-70 ml-0.5"> rx </span>
+							<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
+							{decimalString(sent)} MB/s
+							<span className="opacity-70 ml-0.5"> tx</span>
+						</span>
+					)
+				} catch (e) {
+					return null
+				}
+			}
+		} else {
+			obj.toolTipFormatter = (item: any) => decimalString(item.value) + unit
+		}
+		// data function
+		if (isNetChart) {
+			obj.dataFunction = (key: string, data: any) => (data[key]?.nr ?? 0) + (data[key]?.ns ?? 0)
+		} else {
+			obj.dataFunction = (key: string, data: any) => data[key]?.[dataKey] ?? 0
+		}
+		return obj
+	}, [])
+
+	// console.log('rendered at', new Date())
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisWidth,
+				})}
+			>
+				<AreaChart
+					accessibilityLayer
+					// syncId={'cpu'}
+					data={containerData}
+					margin={chartMargin}
+					reverseStackOrder={true}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						tickFormatter={tickFormatter}
+						tickLine={false}
+						axisLine={false}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={<ChartTooltipContent filter={filter} contentFormatter={toolTipFormatter} />}
+					/>
+					{Object.keys(chartConfig).map((key) => {
+						const filtered = filter && !key.includes(filter)
+						let fillOpacity = filtered ? 0.05 : 0.4
+						let strokeOpacity = filtered ? 0.1 : 1
+						return (
+							<Area
+								key={key}
+								isAnimationActive={false}
+								dataKey={dataFunction.bind(null, key)}
+								name={key}
+								type="monotoneX"
+								fill={chartConfig[key].color}
+								fillOpacity={fillOpacity}
+								stroke={chartConfig[key].color}
+								strokeOpacity={strokeOpacity}
+								activeDot={{ opacity: filtered ? 0 : 1 }}
+								stackId="a"
+							/>
+						)
+					})}
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+})

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

@@ -1,144 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { useMemo, useRef } from 'react'
-import { chartTimeData, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime, $containerFilter } from '@/lib/stores'
-
-export default function ContainerCpuChart({
-	chartData,
-	ticks,
-}: {
-	chartData: Record<string, number | string>[]
-	ticks: number[]
-}) {
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)
-	const filter = useStore($containerFilter)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	const chartConfig = useMemo(() => {
-		let config = {} as Record<
-			string,
-			{
-				label: string
-				color: string
-			}
-		>
-		const totalUsage = {} as Record<string, number>
-		for (let stats of chartData) {
-			for (let key in stats) {
-				if (key === 'time') {
-					continue
-				}
-				if (!(key in totalUsage)) {
-					totalUsage[key] = 0
-				}
-				// @ts-ignore
-				totalUsage[key] += stats[key]
-			}
-		}
-		let keys = Object.keys(totalUsage)
-		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
-		const length = keys.length
-		for (let i = 0; i < length; i++) {
-			const key = keys[i]
-			const hue = ((i * 360) / length) % 360
-			config[key] = {
-				label: key,
-				color: `hsl(${hue}, 60%, 55%)`,
-			}
-		}
-		return config satisfies ChartConfig
-	}, [chartData])
-
-	// if (!chartData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
-	return (
-		<div ref={chartRef}>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					// syncId={'cpu'}
-					data={chartData}
-					margin={{
-						top: 10,
-					}}
-					reverseStackOrder={true}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-						width={yAxisWidth}
-						tickLine={false}
-						axisLine={false}
-						unit={'%'}
-						tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
-					/>
-					<XAxis
-						dataKey="time"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						// cursor={false}
-						animationEasing="ease-out"
-						animationDuration={150}
-						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-						// @ts-ignore
-						itemSorter={(a, b) => b.value - a.value}
-						content={
-							<ChartTooltipContent
-								filter={filter}
-								contentFormatter={(item) => twoDecimalString(item.value) + '%'}
-								indicator="line"
-							/>
-						}
-					/>
-					{Object.keys(chartConfig).map((key) => {
-						const filtered = filter && !key.includes(filter)
-						let fillOpacity = filtered ? 0.05 : 0.4
-						let strokeOpacity = filtered ? 0.1 : 1
-						return (
-							<Area
-								key={key}
-								isAnimationActive={false}
-								dataKey={key}
-								type="monotoneX"
-								fill={chartConfig[key].color}
-								fillOpacity={fillOpacity}
-								stroke={chartConfig[key].color}
-								strokeOpacity={strokeOpacity}
-								activeDot={{ opacity: filtered ? 0 : 1 }}
-								stackId="a"
-							/>
-						)
-					})}
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

beszel/site/src/components/charts/container-mem-chart.tsx

@@ -1,150 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { useMemo, useRef } from 'react'
-import {
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-	useYaxisWidth,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime, $containerFilter } from '@/lib/stores'
-
-export default function ContainerMemChart({
-	chartData,
-	ticks,
-}: {
-	chartData: Record<string, number | string>[]
-	ticks: number[]
-}) {
-	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-	const filter = useStore($containerFilter)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	const chartConfig = useMemo(() => {
-		let config = {} as Record<
-			string,
-			{
-				label: string
-				color: string
-			}
-		>
-		const totalUsage = {} as Record<string, number>
-		for (let stats of chartData) {
-			for (let key in stats) {
-				if (key === 'time') {
-					continue
-				}
-				if (!(key in totalUsage)) {
-					totalUsage[key] = 0
-				}
-				// @ts-ignore
-				totalUsage[key] += stats[key]
-			}
-		}
-		let keys = Object.keys(totalUsage)
-		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
-		const length = keys.length
-		for (let i = 0; i < length; i++) {
-			const key = keys[i]
-			const hue = ((i * 360) / length) % 360
-			config[key] = {
-				label: key,
-				color: `hsl(${hue}, 60%, 55%)`,
-			}
-		}
-		return config satisfies ChartConfig
-	}, [chartData])
-
-	// if (!chartData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
-	return (
-		<div ref={chartRef}>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={chartData}
-					reverseStackOrder={true}
-					margin={{
-						top: 10,
-					}}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						// domain={[0, (max: number) => Math.ceil(max)]}
-						tickLine={false}
-						axisLine={false}
-						unit={' GB'}
-						width={yAxisWidth}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value / 1024, 2)}
-					/>
-					<XAxis
-						dataKey="time"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						// cursor={false}
-						animationEasing="ease-out"
-						animationDuration={150}
-						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-						// @ts-ignore
-						itemSorter={(a, b) => b.value - a.value}
-						content={
-							<ChartTooltipContent
-								filter={filter}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' MB'}
-								indicator="line"
-							/>
-						}
-					/>
-					{Object.keys(chartConfig).map((key) => {
-						const filtered = filter && !key.includes(filter)
-						let fillOpacity = filtered ? 0.05 : 0.4
-						let strokeOpacity = filtered ? 0.1 : 1
-						return (
-							<Area
-								key={key}
-								isAnimationActive={false}
-								dataKey={key}
-								type="monotoneX"
-								fill={chartConfig[key].color}
-								strokeOpacity={strokeOpacity}
-								fillOpacity={fillOpacity}
-								stroke={chartConfig[key].color}
-								activeDot={filtered ? false : {}}
-								stackId="a"
-							/>
-						)
-					})}
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

beszel/site/src/components/charts/container-net-chart.tsx

@@ -1,167 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { useMemo, useRef } from 'react'
-import {
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-	useYaxisWidth,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime, $containerFilter } from '@/lib/stores'
-import { Separator } from '@/components/ui/separator'
-
-export default function ContainerCpuChart({
-	chartData,
-	ticks,
-}: {
-	chartData: Record<string, number | number[]>[]
-	ticks: number[]
-}) {
-	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-	const filter = useStore($containerFilter)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	const chartConfig = useMemo(() => {
-		let config = {} as Record<
-			string,
-			{
-				label: string
-				color: string
-			}
-		>
-		const totalUsage = {} as Record<string, number>
-		for (let stats of chartData) {
-			for (let key in stats) {
-				if (!Array.isArray(stats[key])) {
-					continue
-				}
-				if (!(key in totalUsage)) {
-					totalUsage[key] = 0
-				}
-				totalUsage[key] += stats[key][2] ?? 0
-			}
-		}
-		let keys = Object.keys(totalUsage)
-		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
-		const length = keys.length
-		for (let i = 0; i < length; i++) {
-			const key = keys[i]
-			const hue = ((i * 360) / length) % 360
-			config[key] = {
-				label: key,
-				color: `hsl(${hue}, 60%, 55%)`,
-			}
-		}
-		return config satisfies ChartConfig
-	}, [chartData])
-
-	// if (!chartData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
-	return (
-		<div ref={chartRef}>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={chartData}
-					margin={{
-						top: 10,
-					}}
-					reverseStackOrder={true}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-						width={yAxisWidth}
-						tickLine={false}
-						axisLine={false}
-						unit={' MB/s'}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
-					/>
-					<XAxis
-						dataKey="time"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						// cursor={false}
-						animationEasing="ease-out"
-						animationDuration={150}
-						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-						// @ts-ignore
-						itemSorter={(a, b) => b.value - a.value}
-						content={
-							<ChartTooltipContent
-								filter={filter}
-								indicator="line"
-								contentFormatter={(item, key) => {
-									try {
-										const sent = item?.payload?.[key][0] ?? 0
-										const received = item?.payload?.[key][1] ?? 0
-										return (
-											<span className="flex">
-												{twoDecimalString(received)} MB/s
-												<span className="opacity-70 ml-0.5"> rx </span>
-												<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
-												{twoDecimalString(sent)} MB/s<span className="opacity-70 ml-0.5"> tx</span>
-											</span>
-										)
-									} catch (e) {
-										return null
-									}
-								}}
-							/>
-						}
-					/>
-					{Object.keys(chartConfig).map((key) => {
-						const filtered = filter && !key.includes(filter)
-						let fillOpacity = filtered ? 0.05 : 0.4
-						let strokeOpacity = filtered ? 0.1 : 1
-						return (
-							<Area
-								key={key}
-								name={key}
-								// animationDuration={1200}
-								isAnimationActive={false}
-								dataKey={(data) => data?.[key]?.[2] ?? 0}
-								type="monotoneX"
-								fill={chartConfig[key].color}
-								fillOpacity={fillOpacity}
-								stroke={chartConfig[key].color}
-								strokeOpacity={strokeOpacity}
-								activeDot={{ opacity: filtered ? 0 : 1 }}
-								stackId="a"
-							/>
-						)
-					})}
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

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

@@ -1,85 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
-
-export default function CpuChart({
-	ticks,
-	systemData,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-}) {
-	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	return (
-		<div ref={chartRef}>
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{ top: 10 }}
-					// syncId={'cpu'}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						// domain={[0, (max: number) => Math.ceil(max)]}
-						width={yAxisWidth}
-						tickLine={false}
-						axisLine={false}
-						unit={'%'}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						animationEasing="ease-out"
-						animationDuration={150}
-						content={
-							<ChartTooltipContent
-								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + '%'}
-								indicator="line"
-							/>
-						}
-					/>
-					<Area
-						dataKey="stats.cpu"
-						name="CPU Usage"
-						type="monotoneX"
-						fill="hsl(var(--chart-1))"
-						fillOpacity={0.4}
-						stroke="hsl(var(--chart-1))"
-						isAnimationActive={false}
-						// animationEasing="ease-out"
-						// animationDuration={1200}
-						// animateNewValues={true}
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

beszel/site/src/components/charts/disk-chart.tsx

@@ -1,49 +1,37 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
 
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
-import { useMemo, useRef } from 'react'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
+import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from '@/components/ui/chart'
+import {
+	useYAxisWidth,
+	cn,
+	formatShortDate,
+	decimalString,
+	toFixedFloat,
+	chartMargin,
+	getSizeAndUnit,
+} from '@/lib/utils'
+import { ChartData } from '@/types'
+import { memo } from 'react'
 
-export default function DiskChart({
-	ticks,
-	systemData,
+export default memo(function DiskChart({
+	dataKey,
+	diskSize,
+	chartData,
 }: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
+	dataKey: string
+	diskSize: number
+	chartData: ChartData
 }) {
-	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	const diskSize = useMemo(() => {
-		return Math.round(systemData.at(-1)?.stats.d ?? NaN)
-	}, [systemData])
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	return (
-		<div ref={chartRef}>
-			{/* {!yAxisSet && <Spinner />} */}
+		<div>
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
@@ -53,32 +41,27 @@ export default function DiskChart({
 						minTickGap={6}
 						tickLine={false}
 						axisLine={false}
-						unit={' GB'}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
+						tickFormatter={(value) => {
+							const { v, u } = getSizeAndUnit(value)
+							return updateYAxisWidth(toFixedFloat(v, 2) + u)
+						}}
 					/>
+					{xAxis(chartData)}
 					<ChartTooltip
 						animationEasing="ease-out"
 						animationDuration={150}
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' GB'}
-								indicator="line"
+								contentFormatter={({ value }) => {
+									const { v, u } = getSizeAndUnit(value)
+									return decimalString(v) + u
+								}}
 							/>
 						}
 					/>
 					<Area
-						dataKey="stats.du"
+						dataKey={dataKey}
 						name="Disk Usage"
 						type="monotoneX"
 						fill="hsl(var(--chart-4))"
@@ -91,4 +74,4 @@ export default function DiskChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})

beszel/site/src/components/charts/disk-io-chart.tsx

@@ -1,110 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import {
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-	useYaxisWidth,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
-
-export default function DiskIoChart({
-	ticks,
-	systemData,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-}) {
-	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	// if (!systemData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
-	return (
-		<div ref={chartRef}>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						width={yAxisWidth}
-						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
-						tickLine={false}
-						axisLine={false}
-						unit={' MB/s'}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						animationEasing="ease-out"
-						animationDuration={150}
-						content={
-							<ChartTooltipContent
-								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' MB/s'}
-								indicator="line"
-							/>
-						}
-					/>
-					<Area
-						dataKey="stats.dw"
-						name="Write"
-						type="monotoneX"
-						fill="hsl(var(--chart-3))"
-						fillOpacity={0.3}
-						stroke="hsl(var(--chart-3))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-					<Area
-						dataKey="stats.dr"
-						name="Read"
-						type="monotoneX"
-						fill="hsl(var(--chart-1))"
-						fillOpacity={0.3}
-						stroke="hsl(var(--chart-1))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

beszel/site/src/components/charts/extra-fs-disk-chart.tsx

@@ -1,92 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
-import { useMemo, useRef } from 'react'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-
-export default function ExFsDiskChart({
-	ticks,
-	systemData,
-	fs,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-	fs: string
-}) {
-	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	const diskSize = useMemo(() => {
-		const size = systemData.at(-1)?.stats.efs?.[fs].d ?? 0
-		return size > 10 ? Math.round(size) : size
-	}, [systemData])
-
-	return (
-		<div ref={chartRef}>
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						top: 10,
-					}}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						width={yAxisWidth}
-						domain={[0, diskSize]}
-						tickCount={9}
-						minTickGap={6}
-						tickLine={false}
-						axisLine={false}
-						unit={' GB'}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						animationEasing="ease-out"
-						animationDuration={150}
-						content={
-							<ChartTooltipContent
-								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' GB'}
-								indicator="line"
-							/>
-						}
-					/>
-					<Area
-						dataKey={`stats.efs.${fs}.du`}
-						name="Disk Usage"
-						type="monotoneX"
-						fill="hsl(var(--chart-4))"
-						fillOpacity={0.4}
-						stroke="hsl(var(--chart-4))"
-						isAnimationActive={false}
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

beszel/site/src/components/charts/extra-fs-disk-io-chart.tsx

@@ -1,112 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import {
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-	useYaxisWidth,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
-
-export default function ExFsDiskIoChart({
-	ticks,
-	systemData,
-	fs,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-	fs: string
-}) {
-	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	// if (!systemData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
-	return (
-		<div ref={chartRef}>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						width={yAxisWidth}
-						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
-						tickLine={false}
-						axisLine={false}
-						unit={' MB/s'}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						animationEasing="ease-out"
-						animationDuration={150}
-						content={
-							<ChartTooltipContent
-								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' MB/s'}
-								indicator="line"
-							/>
-						}
-					/>
-					<Area
-						dataKey={`stats.efs.${fs}.w`}
-						name="Write"
-						type="monotoneX"
-						fill="hsl(var(--chart-3))"
-						fillOpacity={0.3}
-						stroke="hsl(var(--chart-3))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-					<Area
-						dataKey={`stats.efs.${fs}.r`}
-						name="Read"
-						type="monotoneX"
-						fill="hsl(var(--chart-1))"
-						fillOpacity={0.3}
-						stroke="hsl(var(--chart-1))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

beszel/site/src/components/charts/mem-chart.tsx

@@ -1,53 +1,33 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
 
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from '@/components/ui/chart'
 import {
-	chartTimeData,
+	useYAxisWidth,
 	cn,
-	formatShortDate,
 	toFixedFloat,
-	twoDecimalString,
-	useYaxisWidth,
+	decimalString,
+	formatShortDate,
+	chartMargin,
 } from '@/lib/utils'
-import { useMemo, useRef } from 'react'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
+import { memo } from 'react'
+import { ChartData } from '@/types'
 
-export default function MemChart({
-	ticks,
-	systemData,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-}) {
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)
+export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+	const totalMem = toFixedFloat(chartData.systemStats.at(-1)?.stats.m ?? 0, 1)
 
-	const totalMem = useMemo(() => {
-		return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1)
-	}, [systemData])
+	// console.log('rendered at', new Date())
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						top: 10,
-					}}
-				>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					{totalMem && (
 						<YAxis
@@ -58,20 +38,13 @@ export default function MemChart({
 							width={yAxisWidth}
 							tickLine={false}
 							axisLine={false}
-							unit={' GB'}
+							tickFormatter={(value) => {
+								const val = toFixedFloat(value, 1)
+								return updateYAxisWidth(val + ' GB')
+							}}
 						/>
 					)}
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
+					{xAxis(chartData)}
 					<ChartTooltip
 						// cursor={false}
 						animationEasing="ease-out"
@@ -79,16 +52,17 @@ export default function MemChart({
 						content={
 							<ChartTooltipContent
 								// @ts-ignore
-								itemSorter={(a, b) => a.name.localeCompare(b.name)}
+								itemSorter={(a, b) => a.order - b.order}
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' GB'}
-								indicator="line"
+								contentFormatter={(item) => decimalString(item.value) + ' GB'}
+								// indicator="line"
 							/>
 						}
 					/>
 					<Area
-						dataKey="stats.mu"
 						name="Used"
+						order={3}
+						dataKey="stats.mu"
 						type="monotoneX"
 						fill="hsl(var(--chart-2))"
 						fillOpacity={0.4}
@@ -96,14 +70,28 @@ export default function MemChart({
 						stackId="1"
 						isAnimationActive={false}
 					/>
+					{chartData.systemStats.at(-1)?.stats.mz && (
+						<Area
+							name="ZFS ARC"
+							order={2}
+							dataKey="stats.mz"
+							type="monotoneX"
+							fill="hsla(175 60% 45% / 0.8)"
+							fillOpacity={0.5}
+							stroke="hsla(175 60% 45% / 0.8)"
+							stackId="1"
+							isAnimationActive={false}
+						/>
+					)}
 					<Area
-						dataKey="stats.mb"
 						name="Cache / Buffers"
+						order={1}
+						dataKey="stats.mb"
 						type="monotoneX"
-						fill="hsl(var(--chart-2))"
-						fillOpacity={0.2}
-						strokeOpacity={0.3}
-						stroke="hsl(var(--chart-2))"
+						fill="hsla(160 60% 45% / 0.5)"
+						fillOpacity={0.4}
+						// strokeOpacity={1}
+						stroke="hsla(160 60% 45% / 0.5)"
 						stackId="1"
 						isAnimationActive={false}
 					/>
@@ -111,4 +99,4 @@ export default function MemChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})

beszel/site/src/components/charts/swap-chart.tsx

@@ -1,70 +1,49 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { Area, AreaChart, CartesianGrid, YAxis } from 'recharts'
 
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from '@/components/ui/chart'
 import {
-	chartTimeData,
+	useYAxisWidth,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-	useYaxisWidth,
+	decimalString,
+	chartMargin,
 } from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
+import { ChartData } from '@/types'
+import { memo } from 'react'
 
-export default function SwapChart({
-	ticks,
-	systemData,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-}) {
-	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+export default memo(function SwapChart({ chartData }: { chartData: ChartData }) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
-						domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.s ?? 0.04, 2)]}
+						domain={[
+							0,
+							() => toFixedWithoutTrailingZeros(chartData.systemStats.at(-1)?.stats.s ?? 0.04, 2),
+						]}
 						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
-						unit={' GB'}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
+						tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
 					/>
+					{xAxis(chartData)}
 					<ChartTooltip
 						animationEasing="ease-out"
 						animationDuration={150}
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' GB'}
-								indicator="line"
+								contentFormatter={(item) => decimalString(item.value) + ' GB'}
+								// indicator="line"
 							/>
 						}
 					/>
@@ -81,4 +60,4 @@ export default function SwapChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})

beszel/site/src/components/charts/temperature-chart.tsx

@@ -1,4 +1,4 @@
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
+import { CartesianGrid, Line, LineChart, YAxis } from 'recharts'
 
 import {
 	ChartContainer,
@@ -6,39 +6,30 @@ import {
 	ChartLegendContent,
 	ChartTooltip,
 	ChartTooltipContent,
+	xAxis,
 } from '@/components/ui/chart'
 import {
-	chartTimeData,
+	useYAxisWidth,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-	useYaxisWidth,
+	decimalString,
+	chartMargin,
 } from '@/lib/utils'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
+import { ChartData } from '@/types'
+import { memo, useMemo } from 'react'
 
-export default function TemperatureChart({
-	ticks,
-	systemData,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-}) {
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)
+export default memo(function TemperatureChart({ chartData }: { chartData: ChartData }) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	/** Format temperature data for chart and assign colors */
 	const newChartData = useMemo(() => {
-		const chartData = { data: [], colors: {} } as {
+		const newChartData = { data: [], colors: {} } as {
 			data: Record<string, number | string>[]
 			colors: Record<string, string>
 		}
 		const tempSums = {} as Record<string, number>
-		for (let data of systemData) {
+		for (let data of chartData.systemStats) {
 			let newData = { created: data.created } as Record<string, number | string>
 			let keys = Object.keys(data.stats?.t ?? {})
 			for (let i = 0; i < keys.length; i++) {
@@ -46,56 +37,40 @@ export default function TemperatureChart({
 				newData[key] = data.stats.t![key]
 				tempSums[key] = (tempSums[key] ?? 0) + newData[key]
 			}
-			chartData.data.push(newData)
+			newChartData.data.push(newData)
 		}
 		const keys = Object.keys(tempSums).sort((a, b) => tempSums[b] - tempSums[a])
 		for (let key of keys) {
-			chartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
+			newChartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
 		}
-		return chartData
-	}, [systemData])
+		return newChartData
+	}, [chartData])
 
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+	const colors = Object.keys(newChartData.colors)
+
+	// console.log('rendered at', new Date())
 
 	return (
-		<div ref={chartRef}>
-			{/* {!yAxisSet && <Spinner />} */}
+		<div>
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
-				<LineChart
-					accessibilityLayer
-					data={newChartData.data}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
+				<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
+						domain={[0, 'auto']}
 						width={yAxisWidth}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2)
+							return updateYAxisWidth(val + ' °C')
+						}}
 						tickLine={false}
 						axisLine={false}
-						unit={' °C'}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
 					/>
+					{xAxis(chartData)}
 					<ChartTooltip
 						animationEasing="ease-out"
 						animationDuration={150}
@@ -104,12 +79,12 @@ export default function TemperatureChart({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' °C'}
-								indicator="line"
+								contentFormatter={(item) => decimalString(item.value) + ' °C'}
+								// indicator="line"
 							/>
 						}
 					/>
-					{Object.keys(newChartData.colors).map((key) => (
+					{colors.map((key) => (
 						<Line
 							key={key}
 							dataKey={key}
@@ -121,9 +96,9 @@ export default function TemperatureChart({
 							isAnimationActive={false}
 						/>
 					))}
-					<ChartLegend content={<ChartLegendContent />} />
+					{colors.length < 12 && <ChartLegend content={<ChartLegendContent />} />}
 				</LineChart>
 			</ChartContainer>
 		</div>
 	)
-}
+})

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

@@ -6,6 +6,7 @@ import {
 	LogsIcon,
 	MailIcon,
 	Server,
+	SettingsIcon,
 	UsersIcon,
 } from 'lucide-react'
 
@@ -46,33 +47,9 @@ export default function CommandPalette() {
 			<CommandInput placeholder="Search for systems or settings..." />
 			<CommandList>
 				<CommandEmpty>No results found.</CommandEmpty>
-				<CommandGroup heading="Suggestions">
-					<CommandItem
-						keywords={['home']}
-						onSelect={() => {
-							navigate('/')
-							setOpen((open) => !open)
-						}}
-					>
-						<LayoutDashboard className="mr-2 h-4 w-4" />
-						<span>Dashboard</span>
-						<CommandShortcut>Page</CommandShortcut>
-					</CommandItem>
-					<CommandItem
-						keywords={['github']}
-						onSelect={() => {
-							window.location.href = 'https://github.com/henrygd/beszel/blob/main/readme.md'
-						}}
-					>
-						<Github className="mr-2 h-4 w-4" />
-						<span>Documentation</span>
-						<CommandShortcut>GitHub</CommandShortcut>
-					</CommandItem>
-				</CommandGroup>
 				{systems.length > 0 && (
 					<>
-						<CommandSeparator />
-						<CommandGroup heading="Systems">
+						<CommandGroup>
 							{systems.map((system) => (
 								<CommandItem
 									key={system.id}
@@ -87,11 +64,56 @@ export default function CommandPalette() {
 								</CommandItem>
 							))}
 						</CommandGroup>
+						<CommandSeparator className="mb-1.5" />
 					</>
 				)}
+				<CommandGroup heading="Pages / Settings">
+					<CommandItem
+						keywords={['home']}
+						onSelect={() => {
+							navigate('/')
+							setOpen((open) => !open)
+						}}
+					>
+						<LayoutDashboard className="mr-2 h-4 w-4" />
+						<span>Dashboard</span>
+						<CommandShortcut>Page</CommandShortcut>
+					</CommandItem>
+					<CommandItem
+						onSelect={() => {
+							navigate('/settings/general')
+							setOpen((open) => !open)
+						}}
+					>
+						<SettingsIcon className="mr-2 h-4 w-4" />
+						<span>Settings</span>
+						<CommandShortcut>Settings</CommandShortcut>
+					</CommandItem>
+					<CommandItem
+						keywords={['alerts']}
+						onSelect={() => {
+							navigate('/settings/notifications')
+							setOpen((open) => !open)
+						}}
+					>
+						<MailIcon className="mr-2 h-4 w-4" />
+						<span>Notification settings</span>
+						<CommandShortcut>Settings</CommandShortcut>
+					</CommandItem>
+					<CommandItem
+						keywords={['github']}
+						onSelect={() => {
+							window.location.href = 'https://github.com/henrygd/beszel/blob/main/readme.md'
+						}}
+					>
+						<Github className="mr-2 h-4 w-4" />
+						<span>Documentation</span>
+						<CommandShortcut>GitHub</CommandShortcut>
+					</CommandItem>
+				</CommandGroup>
 				{isAdmin() && (
 					<>
-						<CommandSeparator />
+						<CommandSeparator className="mb-1.5" />
 						<CommandGroup heading="Admin">
 							<CommandItem
 								keywords={['pocketbase']}
@@ -121,7 +143,7 @@ export default function CommandPalette() {
 								}}
 							>
 								<DatabaseBackupIcon className="mr-2 h-4 w-4" />
-								<span>Database backups</span>
+								<span>Backups</span>
 								<CommandShortcut>Admin</CommandShortcut>
 							</CommandItem>
 							<CommandItem

beszel/site/src/components/login/login.tsx

@@ -43,7 +43,7 @@ export default function () {
 	}
 
 	return (
-		<div className="min-h-screen grid items-center py-12">
+		<div className="min-h-svh grid items-center py-12">
 			<div className="grid gap-5 w-full px-4 mx-auto" style={{ maxWidth: '22em' }}>
 				<div className="text-center">
 					<h1 className="mb-3">

beszel/site/src/components/router.tsx

@@ -4,7 +4,7 @@ export const $router = createRouter(
 	{
 		home: '/',
 		server: '/system/:name',
-		'forgot-password': '/forgot-password',
+		settings: '/settings/:name?',
 	},
 	{ links: false }
 )
@@ -16,7 +16,7 @@ export const navigate = (urlString: string) => {
 
 function onClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
 	e.preventDefault()
-	$router.open(new URL((e.target as HTMLAnchorElement).href).pathname)
+	$router.open(new URL((e.currentTarget as HTMLAnchorElement).href).pathname)
 }
 
 export const Link = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {

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

@@ -1,18 +1,35 @@
-import { Suspense, lazy, useEffect, useState } from 'react'
+import { Suspense, lazy, useEffect, useMemo, useState } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
 import { $alerts, $hubVersion, $systems, pb } from '@/lib/stores'
 import { useStore } from '@nanostores/react'
 import { GithubIcon } from 'lucide-react'
 import { Separator } from '../ui/separator'
-import { updateRecordList, updateSystemList } from '@/lib/utils'
+import { alertInfo, updateRecordList, updateSystemList } from '@/lib/utils'
 import { AlertRecord, SystemRecord } from '@/types'
 import { Input } from '../ui/input'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Link } from '../router'
 
 const SystemsTable = lazy(() => import('../systems-table/systems-table'))
 
 export default function () {
 	const hubVersion = useStore($hubVersion)
 	const [filter, setFilter] = useState<string>()
+	const alerts = useStore($alerts)
+	const systems = useStore($systems)
+
+	// todo: maybe remove active alert if changed
+	const activeAlerts = useMemo(() => {
+		const activeAlerts = alerts.filter((alert) => {
+			const active = alert.triggered && alert.name in alertInfo
+			if (!active) {
+				return false
+			}
+			alert.sysname = systems.find((system) => system.id === alert.system)?.name
+			return true
+		})
+		return activeAlerts
+	}, [alerts])
 
 	useEffect(() => {
 		document.title = 'Dashboard / Beszel'
@@ -24,17 +41,57 @@ export default function () {
 		pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
 			updateRecordList(e, $systems)
 		})
+		// todo: add toast if new triggered alert comes in
 		pb.collection<AlertRecord>('alerts').subscribe('*', (e) => {
 			updateRecordList(e, $alerts)
 		})
 		return () => {
 			pb.collection('systems').unsubscribe('*')
-			pb.collection('alerts').unsubscribe('*')
+			// pb.collection('alerts').unsubscribe('*')
 		}
 	}, [])
 
 	return (
 		<>
+			{/* show active alerts */}
+			{activeAlerts.length > 0 && (
+				<Card className="mb-4">
+					<CardHeader className="pb-4 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
+						<div className="px-2 sm:px-1">
+							<CardTitle>Active Alerts</CardTitle>
+						</div>
+					</CardHeader>
+					<CardContent className="max-sm:p-2">
+						{activeAlerts.length > 0 && (
+							<div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3">
+								{activeAlerts.map((alert) => {
+									const info = alertInfo[alert.name as keyof typeof alertInfo]
+									return (
+										<Alert
+											key={alert.id}
+											className="hover:-translate-y-[1px] duration-200 bg-transparent border-foreground/10  hover:shadow-md shadow-black"
+										>
+											<info.icon className="h-4 w-4" />
+											<AlertTitle>
+												{alert.sysname} {info.name}
+											</AlertTitle>
+											<AlertDescription>
+												Exceeds {alert.value}
+												{info.unit} average in last {alert.min} min
+											</AlertDescription>
+											<Link
+												href={`/system/${encodeURIComponent(alert.sysname!)}`}
+												className="absolute inset-0 w-full h-full"
+												aria-label="View system"
+											></Link>
+										</Alert>
+									)
+								})}
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			)}
 			<Card>
 				<CardHeader className="pb-5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
 					<div className="grid md:flex gap-3 w-full items-end">
@@ -61,6 +118,7 @@ export default function () {
 					</Suspense>
 				</CardContent>
 			</Card>
+
 			{hubVersion && (
 				<div className="flex gap-1.5 justify-end items-center pr-3 sm:pr-6 mt-3.5 text-xs opacity-80">
 					<a

beszel/site/src/components/routes/settings/general.tsx

@@ -0,0 +1,110 @@
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select'
+import { chartTimeData } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+import { LoaderCircleIcon, SaveIcon } from 'lucide-react'
+import { UserSettings } from '@/types'
+import { saveSettings } from './layout'
+import { useState } from 'react'
+// import { Input } from '@/components/ui/input'
+
+export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
+	const [isLoading, setIsLoading] = useState(false)
+
+	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault()
+		setIsLoading(true)
+		const formData = new FormData(e.target as HTMLFormElement)
+		const data = Object.fromEntries(formData) as Partial<UserSettings>
+		await saveSettings(data)
+		setIsLoading(false)
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">General</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					Change general application options.
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<form onSubmit={handleSubmit} className="space-y-5">
+				{/* <Separator />
+				<div className="space-y-2">
+					<div className="mb-4">
+						<h3 className="mb-1 text-lg font-medium">Language</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							Internationalization will be added in a future release. Please see the{' '}
+							<a href="#" className="link" target="_blank">
+								discussion on GitHub
+							</a>{' '}
+							for more details.
+						</p>
+					</div>
+					<Label className="block" htmlFor="lang">
+						Preferred language
+					</Label>
+					<Select defaultValue="en">
+						<SelectTrigger id="lang">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="en">English</SelectItem>
+						</SelectContent>
+					</Select>
+				</div> */}
+				<div className="space-y-2">
+					<div className="mb-4">
+						<h3 className="mb-1 text-lg font-medium">Chart options</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							Adjust display options for charts.
+						</p>
+					</div>
+					<Label className="block" htmlFor="chartTime">
+						Default time period
+					</Label>
+					<Select
+						name="chartTime"
+						key={userSettings.chartTime}
+						defaultValue={userSettings.chartTime}
+					>
+						<SelectTrigger id="chartTime">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{Object.entries(chartTimeData).map(([value, { label }]) => (
+								<SelectItem key={label} value={value}>
+									{label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+					<p className="text-[0.8rem] text-muted-foreground">
+						Sets the default time range for charts when a system is viewed.
+					</p>
+				</div>
+				<Separator />
+				<Button
+					type="submit"
+					className="flex items-center gap-1.5 disabled:opacity-100"
+					disabled={isLoading}
+				>
+					{isLoading ? (
+						<LoaderCircleIcon className="h-4 w-4 animate-spin" />
+					) : (
+						<SaveIcon className="h-4 w-4" />
+					)}
+					Save settings
+				</Button>
+			</form>
+		</div>
+	)
+}

beszel/site/src/components/routes/settings/layout.tsx

@@ -0,0 +1,98 @@
+import { useEffect } from 'react'
+import { Separator } from '../../ui/separator'
+import { SidebarNav } from './sidebar-nav.tsx'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.tsx'
+import { useStore } from '@nanostores/react'
+import { $router } from '@/components/router.tsx'
+import { redirectPage } from '@nanostores/router'
+import { BellIcon, SettingsIcon } from 'lucide-react'
+import { $userSettings, pb } from '@/lib/stores.ts'
+import { toast } from '@/components/ui/use-toast.ts'
+import { UserSettings } from '@/types.js'
+import General from './general.tsx'
+import Notifications from './notifications.tsx'
+
+const sidebarNavItems = [
+	{
+		title: 'General',
+		href: '/settings/general',
+		icon: SettingsIcon,
+	},
+	{
+		title: 'Notifications',
+		href: '/settings/notifications',
+		icon: BellIcon,
+	},
+]
+
+export async function saveSettings(newSettings: Partial<UserSettings>) {
+	try {
+		// get fresh copy of settings
+		const req = await pb.collection('user_settings').getFirstListItem('', {
+			fields: 'id,settings',
+		})
+		// update user settings
+		const updatedSettings = await pb.collection('user_settings').update(req.id, {
+			settings: {
+				...req.settings,
+				...newSettings,
+			},
+		})
+		$userSettings.set(updatedSettings.settings)
+		toast({
+			title: 'Settings saved',
+			description: 'Your user settings have been updated.',
+		})
+	} catch (e) {
+		// console.error('update settings', e)
+		toast({
+			title: 'Failed to save settings',
+			description: 'Check logs for more details.',
+			variant: 'destructive',
+		})
+	}
+}
+
+export default function SettingsLayout() {
+	const page = useStore($router)
+
+	useEffect(() => {
+		document.title = 'Settings / Beszel'
+		// redirect to account page if no page is specified
+		if (page?.path === '/settings') {
+			redirectPage($router, 'settings', { name: 'general' })
+		}
+	}, [])
+
+	return (
+		<Card className="pt-5 px-4 pb-8 sm:pt-6 sm:px-7">
+			<CardHeader className="p-0">
+				<CardTitle className="mb-1">Settings</CardTitle>
+				<CardDescription>Manage display and notification preferences.</CardDescription>
+			</CardHeader>
+			<CardContent className="p-0">
+				<Separator className="hidden md:block my-5" />
+				<div className="flex flex-col gap-3.5 md:flex-row md:gap-5 lg:gap-10">
+					<aside className="md:w-48 w-full">
+						<SidebarNav items={sidebarNavItems} />
+					</aside>
+					<div className="flex-1">
+						{/* @ts-ignore */}
+						<SettingsContent name={page?.params?.name ?? 'general'} />
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	)
+}
+
+function SettingsContent({ name }: { name: string }) {
+	const userSettings = useStore($userSettings)
+
+	switch (name) {
+		case 'general':
+			return <General userSettings={userSettings} />
+		case 'notifications':
+			return <Notifications userSettings={userSettings} />
+	}
+}

beszel/site/src/components/routes/settings/notifications.tsx

@@ -0,0 +1,233 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { pb } from '@/lib/stores'
+import { Separator } from '@/components/ui/separator'
+import { Card } from '@/components/ui/card'
+import { BellIcon, LoaderCircleIcon, PlusIcon, SaveIcon, Trash2Icon } from 'lucide-react'
+import { ChangeEventHandler, useEffect, useState } from 'react'
+import { toast } from '@/components/ui/use-toast'
+import { InputTags } from '@/components/ui/input-tags'
+import { UserSettings } from '@/types'
+import { saveSettings } from './layout'
+import * as v from 'valibot'
+import { isAdmin } from '@/lib/utils'
+
+interface ShoutrrrUrlCardProps {
+	url: string
+	onUrlChange: ChangeEventHandler<HTMLInputElement>
+	onRemove: () => void
+}
+
+const NotificationSchema = v.object({
+	emails: v.array(v.pipe(v.string(), v.email())),
+	webhooks: v.array(v.pipe(v.string(), v.url())),
+})
+
+const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSettings }) => {
+	const [webhooks, setWebhooks] = useState(userSettings.webhooks ?? [])
+	const [emails, setEmails] = useState<string[]>(userSettings.emails ?? [])
+	const [isLoading, setIsLoading] = useState(false)
+
+	// update values when userSettings changes
+	useEffect(() => {
+		setWebhooks(userSettings.webhooks ?? [])
+		setEmails(userSettings.emails ?? [])
+	}, [userSettings])
+
+	function addWebhook() {
+		setWebhooks([...webhooks, ''])
+		// focus on the new input
+		queueMicrotask(() => {
+			const inputs = document.querySelectorAll('#webhooks input') as NodeListOf<HTMLInputElement>
+			inputs[inputs.length - 1]?.focus()
+		})
+	}
+	const removeWebhook = (index: number) => setWebhooks(webhooks.filter((_, i) => i !== index))
+
+	function updateWebhook(index: number, value: string) {
+		const newWebhooks = [...webhooks]
+		newWebhooks[index] = value
+		setWebhooks(newWebhooks)
+	}
+
+	async function updateSettings() {
+		setIsLoading(true)
+		try {
+			const parsedData = v.parse(NotificationSchema, { emails, webhooks })
+			await saveSettings(parsedData)
+		} catch (e: any) {
+			toast({
+				title: 'Failed to save settings',
+				description: e.message,
+				variant: 'destructive',
+			})
+		}
+		setIsLoading(false)
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">Notifications</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					Configure how you receive alert notifications.
+				</p>
+				<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">
+					Looking instead for where to create alerts? Click the bell{' '}
+					<BellIcon className="inline h-4 w-4" /> icons in the systems table.
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<div className="space-y-5">
+				<div className="space-y-2">
+					<div className="mb-4">
+						<h3 className="mb-1 text-lg font-medium">Email notifications</h3>
+						{isAdmin() && (
+							<p className="text-sm text-muted-foreground leading-relaxed">
+								Please{' '}
+								<a href="/_/#/settings/mail" className="link" target="_blank">
+									configure an SMTP server
+								</a>{' '}
+								to ensure alerts are delivered.{' '}
+							</p>
+						)}
+					</div>
+					<Label className="block" htmlFor="email">
+						To email(s)
+					</Label>
+					<InputTags
+						value={emails}
+						onChange={setEmails}
+						placeholder="Enter email address..."
+						className="w-full"
+						type="email"
+						id="email"
+					/>
+					<p className="text-[0.8rem] text-muted-foreground">
+						Save address using enter key or comma. Leave blank to disable email notifications.
+					</p>
+				</div>
+				<Separator />
+				<div className="space-y-3">
+					<div>
+						<h3 className="mb-1 text-lg font-medium">Webhook / Push notifications</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							Beszel uses{' '}
+							<a
+								href="https://containrrr.dev/shoutrrr/services/overview/"
+								target="_blank"
+								className="link"
+							>
+								Shoutrrr
+							</a>{' '}
+							to integrate with popular notification services.
+						</p>
+					</div>
+					{webhooks.length > 0 && (
+						<div className="grid gap-2.5" id="webhooks">
+							{webhooks.map((webhook, index) => (
+								<ShoutrrrUrlCard
+									key={index}
+									url={webhook}
+									onUrlChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+										updateWebhook(index, e.target.value)
+									}
+									onRemove={() => removeWebhook(index)}
+								/>
+							))}
+						</div>
+					)}
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						className="mt-2 flex items-center gap-1"
+						onClick={addWebhook}
+					>
+						<PlusIcon className="h-4 w-4 -ml-0.5" />
+						Add URL
+					</Button>
+				</div>
+				<Separator />
+				<Button
+					type="button"
+					className="flex items-center gap-1.5 disabled:opacity-100"
+					onClick={updateSettings}
+					disabled={isLoading}
+				>
+					{isLoading ? (
+						<LoaderCircleIcon className="h-4 w-4 animate-spin" />
+					) : (
+						<SaveIcon className="h-4 w-4" />
+					)}
+					Save settings
+				</Button>
+			</div>
+		</div>
+	)
+}
+
+const ShoutrrrUrlCard = ({ url, onUrlChange, onRemove }: ShoutrrrUrlCardProps) => {
+	const [isLoading, setIsLoading] = useState(false)
+
+	const sendTestNotification = async () => {
+		setIsLoading(true)
+		const res = await pb.send('/api/beszel/send-test-notification', { url })
+		if ('err' in res && !res.err) {
+			toast({
+				title: 'Test notification sent',
+				description: 'Check your notification service',
+			})
+		} else {
+			toast({
+				title: 'Error',
+				description: res.err ?? 'Failed to send test notification',
+				variant: 'destructive',
+			})
+		}
+		setIsLoading(false)
+	}
+
+	return (
+		<Card className="bg-muted/30 p-2 md:p-3">
+			<div className="flex items-center gap-1">
+				<Input
+					type="url"
+					className="light:bg-card"
+					required
+					placeholder="generic://webhook.site/xxxxxx"
+					value={url}
+					onChange={onUrlChange}
+				/>
+				<Button
+					type="button"
+					variant="outline"
+					className="w-20 md:w-28"
+					disabled={isLoading || url === ''}
+					onClick={sendTestNotification}
+				>
+					{isLoading ? (
+						<LoaderCircleIcon className="h-4 w-4 animate-spin" />
+					) : (
+						<span>
+							Test <span className="hidden md:inline">URL</span>
+						</span>
+					)}
+				</Button>
+				<Button
+					type="button"
+					variant="outline"
+					size="icon"
+					className="shrink-0"
+					aria-label="Delete"
+					onClick={onRemove}
+				>
+					<Trash2Icon className="h-4 w-4" />
+				</Button>
+			</div>
+		</Card>
+	)
+}
+
+export default SettingsNotificationsPage

beszel/site/src/components/routes/settings/sidebar-nav.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '../../ui/button'
+import { $router, Link, navigate } from '../../router'
+import { useStore } from '@nanostores/react'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
+
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+	items: {
+		href: string
+		title: string
+		icon?: React.FC<React.SVGProps<SVGSVGElement>>
+	}[]
+}
+
+export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
+	const page = useStore($router)
+
+	return (
+		<>
+			{/* Mobile View */}
+			<div className="md:hidden">
+				<Select onValueChange={(value: string) => navigate(value)} value={page?.path}>
+					<SelectTrigger className="w-full my-3.5">
+						<SelectValue placeholder="Select a page" />
+					</SelectTrigger>
+					<SelectContent>
+						{items.map((item) => (
+							<SelectItem key={item.href} value={item.href}>
+								<span className="flex items-center gap-2">
+									{item.icon && <item.icon className="h-4 w-4" />}
+									{item.title}
+								</span>
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<Separator />
+			</div>
+
+			{/* Desktop View */}
+			<nav className={cn('hidden md:grid gap-1', className)} {...props}>
+				{items.map((item) => (
+					<Link
+						key={item.href}
+						href={item.href}
+						className={cn(
+							buttonVariants({ variant: 'ghost' }),
+							'flex items-center gap-3',
+							page?.path === item.href ? 'bg-muted hover:bg-muted' : 'hover:bg-muted/50',
+							'justify-start'
+						)}
+					>
+						{item.icon && <item.icon className="h-4 w-4" />}
+						{item.title}
+					</Link>
+				))}
+			</nav>
+		</>
+	)
+}

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

@@ -1,82 +1,139 @@
-import { $systems, pb, $chartTime, $containerFilter } from '@/lib/stores'
-import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
-import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
+import { $systems, pb, $chartTime, $containerFilter, $userSettings } from '@/lib/stores'
+import {
+	ChartData,
+	ChartTimes,
+	ContainerStatsRecord,
+	SystemRecord,
+	SystemStatsRecord,
+} from '@/types'
+import React, { lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Card, CardHeader, CardTitle, CardDescription } from '../ui/card'
 import { useStore } from '@nanostores/react'
 import Spinner from '../spinner'
-import {
-	ClockArrowUp,
-	CpuIcon,
-	GlobeIcon,
-	LayoutGridIcon,
-	StretchHorizontalIcon,
-	XIcon,
-} from 'lucide-react'
+import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon, MonitorIcon, XIcon } from 'lucide-react'
 import ChartTimeSelect from '../charts/chart-time-select'
-import {
-	chartTimeData,
-	cn,
-	getPbTimestamp,
-	useClampedIsInViewport,
-	useLocalStorage,
-} from '@/lib/utils'
+import { chartTimeData, cn, getPbTimestamp, useLocalStorage } from '@/lib/utils'
 import { Separator } from '../ui/separator'
-import { scaleTime } from 'd3-scale'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
-import { Button, buttonVariants } from '../ui/button'
+import { Button } from '../ui/button'
 import { Input } from '../ui/input'
+import { ChartAverage, ChartMax, Rows, TuxIcon } from '../ui/icons'
+import { useIntersectionObserver } from '@/lib/use-intersection-observer'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { timeTicks } from 'd3-time'
 
-const CpuChart = lazy(() => import('../charts/cpu-chart'))
-const ContainerCpuChart = lazy(() => import('../charts/container-cpu-chart'))
+const AreaChartDefault = lazy(() => import('../charts/area-chart'))
+const ContainerChart = lazy(() => import('../charts/container-chart'))
 const MemChart = lazy(() => import('../charts/mem-chart'))
-const ContainerMemChart = lazy(() => import('../charts/container-mem-chart'))
 const DiskChart = lazy(() => import('../charts/disk-chart'))
-const DiskIoChart = lazy(() => import('../charts/disk-io-chart'))
-const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
-const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
 const SwapChart = lazy(() => import('../charts/swap-chart'))
 const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
-const ExFsDiskChart = lazy(() => import('../charts/extra-fs-disk-chart'))
-const ExFsDiskIoChart = lazy(() => import('../charts/extra-fs-disk-io-chart'))
+
+const cache = new Map<string, any>()
+
+// create ticks and domain for charts
+function getTimeData(chartTime: ChartTimes, lastCreated: number) {
+	const cached = cache.get('td')
+	if (cached && cached.chartTime === chartTime) {
+		if (!lastCreated || cached.time >= lastCreated) {
+			return cached.data
+		}
+	}
+
+	const now = new Date()
+	const startTime = chartTimeData[chartTime].getOffset(now)
+	const ticks = timeTicks(startTime, now, chartTimeData[chartTime].ticks ?? 12).map((date) =>
+		date.getTime()
+	)
+	const data = {
+		ticks,
+		domain: [chartTimeData[chartTime].getOffset(now).getTime(), now.getTime()],
+	}
+	cache.set('td', { time: now.getTime(), data, chartTime })
+	return data
+}
+
+// add empty values between records to make gaps if interval is too large
+function addEmptyValues<T extends SystemStatsRecord | ContainerStatsRecord>(
+	prevRecords: T[],
+	newRecords: T[],
+	expectedInterval: number
+) {
+	const modifiedRecords: T[] = []
+	let prevTime = (prevRecords.at(-1)?.created ?? 0) as number
+	for (let i = 0; i < newRecords.length; i++) {
+		const record = newRecords[i]
+		record.created = new Date(record.created).getTime()
+		if (prevTime) {
+			const interval = record.created - prevTime
+			// if interval is too large, add a null record
+			if (interval > expectedInterval / 2 + expectedInterval) {
+				// @ts-ignore
+				modifiedRecords.push({ created: null, stats: null })
+			}
+		}
+		prevTime = record.created
+		modifiedRecords.push(record)
+	}
+	return modifiedRecords
+}
+
+async function getStats<T>(
+	collection: string,
+	system: SystemRecord,
+	chartTime: ChartTimes
+): Promise<T[]> {
+	const lastCached = cache.get(`${system.id}_${chartTime}_${collection}`)?.at(-1)?.created as number
+	return await pb.collection<T>(collection).getFullList({
+		filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
+			id: system.id,
+			created: getPbTimestamp(chartTime, lastCached ? new Date(lastCached + 1000) : undefined),
+			type: chartTimeData[chartTime].type,
+		}),
+		fields: 'created,stats',
+		sort: 'created',
+	})
+}
 
 export default function SystemDetail({ name }: { name: string }) {
 	const systems = useStore($systems)
 	const chartTime = useStore($chartTime)
+	/** Max CPU toggle value */
+	const cpuMaxStore = useState(false)
+	const bandwidthMaxStore = useState(false)
+	const diskIoMaxStore = useState(false)
 	const [grid, setGrid] = useLocalStorage('grid', true)
-	const [ticks, setTicks] = useState([] as number[])
 	const [system, setSystem] = useState({} as SystemRecord)
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
-	const [hasDockerStats, setHasDocker] = useState(false)
+	const [containerData, setContainerData] = useState([] as ChartData['containerData'])
 	const netCardRef = useRef<HTMLDivElement>(null)
-	const [dockerCpuChartData, setDockerCpuChartData] = useState<Record<string, number | string>[]>(
-		[]
-	)
-	const [dockerMemChartData, setDockerMemChartData] = useState<Record<string, number | string>[]>(
-		[]
-	)
-	const [dockerNetChartData, setDockerNetChartData] = useState<Record<string, number | number[]>[]>(
-		[]
-	)
+	const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
+	const [bottomSpacing, setBottomSpacing] = useState(0)
+	const isLongerChart = chartTime !== '1h'
 
 	useEffect(() => {
 		document.title = `${name} / Beszel`
 		return () => {
-			resetCharts()
-			$chartTime.set('1h')
+			$chartTime.set($userSettings.get().chartTime)
+			// resetCharts()
+			setSystemStats([])
+			setContainerData([])
+			setContainerFilterBar(null)
 			$containerFilter.set('')
-			setHasDocker(false)
+			cpuMaxStore[1](false)
+			bandwidthMaxStore[1](false)
+			diskIoMaxStore[1](false)
 		}
 	}, [name])
 
-	function resetCharts() {
-		setSystemStats([])
-		setDockerCpuChartData([])
-		setDockerMemChartData([])
-		setDockerNetChartData([])
-	}
+	// function resetCharts() {
+	// 	setSystemStats([])
+	// 	setContainerData([])
+	// }
 
-	useEffect(resetCharts, [chartTime])
+	// useEffect(resetCharts, [chartTime])
 
+	// find matching system
 	useEffect(() => {
 		if (system.id && system.name === name) {
 			return
@@ -98,43 +155,20 @@ export default function SystemDetail({ name }: { name: string }) {
 		return () => {
 			pb.collection('systems').unsubscribe(system.id)
 		}
-	}, [system])
+	}, [system.id])
 
-	async function getStats<T>(collection: string): Promise<T[]> {
-		return await pb.collection<T>(collection).getFullList({
-			filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
-				id: system.id,
-				created: getPbTimestamp(chartTime),
-				type: chartTimeData[chartTime].type,
-			}),
-			fields: 'created,stats',
-			sort: 'created',
-		})
-	}
-
-	// add empty values between records to make gaps if interval is too large
-	function addEmptyValues<T extends SystemStatsRecord | ContainerStatsRecord>(
-		records: T[],
-		expectedInterval: number
-	) {
-		const modifiedRecords: T[] = []
-		let prevTime = 0
-		for (let i = 0; i < records.length; i++) {
-			const record = records[i]
-			record.created = new Date(record.created).getTime()
-			if (prevTime) {
-				const interval = record.created - prevTime
-				// if interval is too large, add a null record
-				if (interval > expectedInterval / 2 + expectedInterval) {
-					// @ts-ignore
-					modifiedRecords.push({ created: null, stats: null })
-				}
-			}
-			prevTime = record.created
-			modifiedRecords.push(record)
+	const chartData: ChartData = useMemo(() => {
+		const lastCreated = Math.max(
+			(systemStats.at(-1)?.created as number) ?? 0,
+			(containerData.at(-1)?.created as number) ?? 0
+		)
+		return {
+			systemStats,
+			containerData,
+			chartTime,
+			...getTimeData(chartTime, lastCreated),
 		}
-		return modifiedRecords
-	}
+	}, [systemStats, containerData])
 
 	// get stats
 	useEffect(() => {
@@ -142,82 +176,113 @@ export default function SystemDetail({ name }: { name: string }) {
 			return
 		}
 		Promise.allSettled([
-			getStats<SystemStatsRecord>('system_stats'),
-			getStats<ContainerStatsRecord>('container_stats'),
+			getStats<SystemStatsRecord>('system_stats', system, chartTime),
+			getStats<ContainerStatsRecord>('container_stats', system, chartTime),
 		]).then(([systemStats, containerStats]) => {
-			const expectedInterval = chartTimeData[chartTime].expectedInterval
+			const { expectedInterval } = chartTimeData[chartTime]
+			// make new system stats
+			const ss_cache_key = `${system.id}_${chartTime}_system_stats`
+			let systemData = (cache.get(ss_cache_key) || []) as SystemStatsRecord[]
+			if (systemStats.status === 'fulfilled' && systemStats.value.length) {
+				systemData = systemData.concat(
+					addEmptyValues(systemData, systemStats.value, expectedInterval)
+				)
+				if (systemData.length > 120) {
+					systemData = systemData.slice(-100)
+				}
+				cache.set(ss_cache_key, systemData)
+			}
+			setSystemStats(systemData)
+			// make new container stats
+			const cs_cache_key = `${system.id}_${chartTime}_container_stats`
+			let containerData = (cache.get(cs_cache_key) || []) as ContainerStatsRecord[]
 			if (containerStats.status === 'fulfilled' && containerStats.value.length) {
-				makeContainerData(addEmptyValues(containerStats.value, expectedInterval))
-				setHasDocker(true)
+				containerData = containerData.concat(
+					addEmptyValues(containerData, containerStats.value, expectedInterval)
+				)
+				if (containerData.length > 120) {
+					containerData = containerData.slice(-100)
+				}
+				cache.set(cs_cache_key, containerData)
 			}
-			if (systemStats.status === 'fulfilled') {
-				setSystemStats(addEmptyValues(systemStats.value, expectedInterval))
+			if (containerData.length) {
+				!containerFilterBar && setContainerFilterBar(<ContainerFilterBar />)
+			} else if (containerFilterBar) {
+				setContainerFilterBar(null)
 			}
+			makeContainerData(containerData)
 		})
 	}, [system, chartTime])
 
-	useEffect(() => {
-		if (!systemStats.length) {
-			return
-		}
-		const now = new Date()
-		const startTime = chartTimeData[chartTime].getOffset(now)
-		const scale = scaleTime([startTime.getTime(), now], [0, systemStats.length])
-		setTicks(scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime()))
-	}, [chartTime, systemStats])
-
 	// make container stats for charts
 	const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => {
-		// console.log('containers', containers)
-		const dockerCpuData = []
-		const dockerMemData = []
-		const dockerNetData = []
+		const containerData = [] as ChartData['containerData']
 		for (let { created, stats } of containers) {
 			if (!created) {
-				let nullData = { time: null } as unknown
-				dockerCpuData.push(nullData as Record<string, number | string>)
-				dockerMemData.push(nullData as Record<string, number | string>)
-				dockerNetData.push(nullData as Record<string, number | number[]>)
+				// @ts-ignore add null value for gaps
+				containerData.push({ created: null })
 				continue
 			}
-			const time = new Date(created).getTime()
-			let cpuData = { time } as Record<string, number | string>
-			let memData = { time } as Record<string, number | string>
-			let netData = { time } as Record<string, number | number[]>
+			created = new Date(created).getTime()
+			// @ts-ignore not dealing with this rn
+			let containerStats: ChartData['containerData'][0] = { created }
 			for (let container of stats) {
-				cpuData[container.n] = container.c
-				memData[container.n] = container.m
-				netData[container.n] = [container.ns, container.nr, container.ns + container.nr] // sent, received, total
+				containerStats[container.n] = container
 			}
-			dockerCpuData.push(cpuData)
-			dockerMemData.push(memData)
-			dockerNetData.push(netData)
+			containerData.push(containerStats)
 		}
-		setDockerCpuChartData(dockerCpuData)
-		setDockerMemChartData(dockerMemData)
-		setDockerNetChartData(dockerNetData)
+		setContainerData(containerData)
 	}, [])
 
-	const uptime = useMemo(() => {
-		let uptime = system.info?.u || 0
-		if (uptime < 172800) {
-			return `${Math.trunc(uptime / 3600)} hours`
+	// values for system info bar
+	const systemInfo = useMemo(() => {
+		if (!system.info) {
+			return []
 		}
-		return `${Math.trunc(system.info?.u / 86400)} days`
-	}, [system.info?.u])
+		let uptime: number | string = system.info.u
+		if (system.info.u < 172800) {
+			const hours = Math.trunc(uptime / 3600)
+			uptime = `${hours} hour${hours == 1 ? '' : 's'}`
+		} else {
+			uptime = `${Math.trunc(system.info?.u / 86400)} days`
+		}
+		return [
+			{ value: system.host, Icon: GlobeIcon },
+			{
+				value: system.info.h,
+				Icon: MonitorIcon,
+				label: 'Hostname',
+				// hide if hostname is same as host or name
+				hide: system.info.h === system.host || system.info.h === system.name,
+			},
+			{ value: uptime, Icon: ClockArrowUp, label: 'Uptime' },
+			{ value: system.info.k, Icon: TuxIcon, label: 'Kernel' },
+			{
+				value: `${system.info.m} (${system.info.c}c${system.info.t ? `/${system.info.t}t` : ''})`,
+				Icon: CpuIcon,
+				hide: !system.info.m,
+			},
+		] as {
+			value: string | number | undefined
+			label?: string
+			Icon: any
+			hide?: boolean
+		}[]
+	}, [system.info])
 
 	/** Space for tooltip if more than 12 containers */
-	const bottomSpacing = useMemo(() => {
-		if (!netCardRef.current || !dockerNetChartData.length) {
-			return 0
+	useEffect(() => {
+		if (!netCardRef.current || !containerData.length) {
+			setBottomSpacing(0)
+			return
 		}
-		const tooltipHeight = (Object.keys(dockerNetChartData[0]).length - 11) * 17.8 - 40
+		const tooltipHeight = (Object.keys(containerData[0]).length - 11) * 17.8 - 40
 		const wrapperEl = document.getElementById('chartwrap') as HTMLDivElement
 		const wrapperRect = wrapperEl.getBoundingClientRect()
 		const chartRect = netCardRef.current.getBoundingClientRect()
 		const distanceToBottom = wrapperRect.bottom - chartRect.bottom
-		return tooltipHeight - distanceToBottom
-	}, [netCardRef.current, dockerNetChartData])
+		setBottomSpacing(tooltipHeight - distanceToBottom)
+	}, [netCardRef, containerData])
 
 	if (!system.id) {
 		return null
@@ -225,10 +290,10 @@ export default function SystemDetail({ name }: { name: string }) {
 
 	return (
 		<>
-			<div id="chartwrap" className="grid gap-4 mb-10">
+			<div id="chartwrap" className="grid gap-4 mb-10 overflow-x-clip">
 				{/* system info */}
 				<Card>
-					<div className="grid lg:flex items-center gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
+					<div className="grid lg:flex gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
 						<div>
 							<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
 							<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
@@ -251,32 +316,31 @@ export default function SystemDetail({ name }: { name: string }) {
 									</span>
 									{system.status}
 								</div>
-								<Separator orientation="vertical" className="h-4 bg-primary/30" />
-								<div className="flex gap-1.5 items-center">
-									<GlobeIcon className="h-4 w-4" /> {system.host}
-								</div>
-								{system.info?.u && (
-									<TooltipProvider>
-										<Tooltip>
-											<Separator orientation="vertical" className="h-4 bg-primary/30" />
-											<TooltipTrigger asChild>
-												<div className="flex gap-1.5">
-													<ClockArrowUp className="h-4 w-4 mt-[1px]" /> {uptime}
-												</div>
-											</TooltipTrigger>
-											<TooltipContent>Uptime</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-								)}
-								{system.info?.m && (
-									<>
-										<Separator orientation="vertical" className="h-4 bg-primary/30" />
-										<div className="flex gap-1.5">
-											<CpuIcon className="h-4 w-4 mt-[1px]" />
-											{system.info.m} ({system.info.c}c / {system.info.t}t)
+								{systemInfo.map(({ value, label, Icon, hide }, i) => {
+									if (hide || !value) {
+										return null
+									}
+									const content = (
+										<div className="flex gap-1.5 items-center">
+											<Icon className="h-4 w-4" /> {value}
 										</div>
-									</>
-								)}
+									)
+									return (
+										<div key={i} className="contents">
+											<Separator orientation="vertical" className="h-4 bg-primary/30" />
+											{label ? (
+												<TooltipProvider>
+													<Tooltip delayDuration={150}>
+														<TooltipTrigger asChild>{content}</TooltipTrigger>
+														<TooltipContent>{label}</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											) : (
+												content
+											)}
+										</div>
+									)
+								})}
 							</div>
 						</div>
 						<div className="lg:ml-auto flex items-center gap-2 max-sm:-mb-1">
@@ -286,16 +350,15 @@ export default function SystemDetail({ name }: { name: string }) {
 									<TooltipTrigger asChild>
 										<Button
 											aria-label="Toggle grid"
-											className={cn(
-												buttonVariants({ variant: 'outline', size: 'icon' }),
-												'hidden lg:flex p-0 text-primary'
-											)}
+											variant="outline"
+											size="icon"
+											className="hidden lg:flex p-0 text-primary"
 											onClick={() => setGrid(!grid)}
 										>
 											{grid ? (
 												<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-85" />
 											) : (
-												<StretchHorizontalIcon className="h-[1.2rem] w-[1.2rem] opacity-85" />
+												<Rows className="h-[1.3rem] w-[1.3rem] opacity-85" />
 											)}
 										</Button>
 									</TooltipTrigger>
@@ -311,19 +374,27 @@ export default function SystemDetail({ name }: { name: string }) {
 					<ChartCard
 						grid={grid}
 						title="Total CPU Usage"
-						description="Average system-wide CPU utilization"
+						description={`${
+							cpuMaxStore[0] && isLongerChart ? 'Max 1 min ' : 'Average'
+						} system-wide CPU utilization`}
+						cornerEl={isLongerChart ? <SelectAvgMax store={cpuMaxStore} /> : null}
 					>
-						<CpuChart ticks={ticks} systemData={systemStats} />
+						<AreaChartDefault
+							chartData={chartData}
+							chartName="CPU Usage"
+							maxToggled={cpuMaxStore[0]}
+							unit="%"
+						/>
 					</ChartCard>
 
-					{hasDockerStats && (
+					{containerFilterBar && (
 						<ChartCard
 							grid={grid}
 							title="Docker CPU Usage"
-							description="CPU utilization of docker containers"
-							isContainerChart={true}
+							description="Average CPU utilization of containers"
+							cornerEl={containerFilterBar}
 						>
-							<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
+							<ContainerChart chartData={chartData} dataKey="c" chartName="cpu" />
 						</ChartCard>
 					)}
 
@@ -332,43 +403,55 @@ export default function SystemDetail({ name }: { name: string }) {
 						title="Total Memory Usage"
 						description="Precise utilization at the recorded time"
 					>
-						<MemChart ticks={ticks} systemData={systemStats} />
+						<MemChart chartData={chartData} />
 					</ChartCard>
 
-					{hasDockerStats && (
+					{containerFilterBar && (
 						<ChartCard
 							grid={grid}
 							title="Docker Memory Usage"
 							description="Memory usage of docker containers"
-							isContainerChart={true}
+							cornerEl={containerFilterBar}
 						>
-							<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
-						</ChartCard>
-					)}
-
-					{(systemStats.at(-1)?.stats.s ?? 0) > 0 && (
-						<ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system">
-							<SwapChart ticks={ticks} systemData={systemStats} />
+							<ContainerChart chartData={chartData} chartName="mem" dataKey="m" unit=" MB" />
 						</ChartCard>
 					)}
 
 					<ChartCard grid={grid} title="Disk Space" description="Usage of root partition">
-						<DiskChart ticks={ticks} systemData={systemStats} />
+						<DiskChart
+							chartData={chartData}
+							dataKey="stats.du"
+							diskSize={Math.round(systemStats.at(-1)?.stats.d ?? NaN)}
+						/>
 					</ChartCard>
 
-					<ChartCard grid={grid} title="Disk I/O" description="Throughput of root filesystem">
-						<DiskIoChart ticks={ticks} systemData={systemStats} />
+					<ChartCard
+						grid={grid}
+						title="Disk I/O"
+						description="Throughput of root filesystem"
+						cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
+					>
+						<AreaChartDefault
+							chartData={chartData}
+							maxToggled={diskIoMaxStore[0]}
+							chartName="dio"
+						/>
 					</ChartCard>
 
 					<ChartCard
 						grid={grid}
 						title="Bandwidth"
+						cornerEl={isLongerChart ? <SelectAvgMax store={bandwidthMaxStore} /> : null}
 						description="Network traffic of public interfaces"
 					>
-						<BandwidthChart ticks={ticks} systemData={systemStats} />
+						<AreaChartDefault
+							chartData={chartData}
+							maxToggled={bandwidthMaxStore[0]}
+							chartName="bw"
+						/>
 					</ChartCard>
 
-					{hasDockerStats && dockerNetChartData.length > 0 && (
+					{containerFilterBar && containerData.length > 0 && (
 						<div
 							ref={netCardRef}
 							className={cn({
@@ -378,16 +461,23 @@ export default function SystemDetail({ name }: { name: string }) {
 							<ChartCard
 								title="Docker Network I/O"
 								description="Includes traffic between internal services"
-								isContainerChart={true}
+								cornerEl={containerFilterBar}
 							>
-								<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} />
+								{/* @ts-ignore */}
+								<ContainerChart chartData={chartData} chartName="net" dataKey="n" />
 							</ChartCard>
 						</div>
 					)}
 
+					{(systemStats.at(-1)?.stats.su ?? 0) > 0 && (
+						<ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system">
+							<SwapChart chartData={chartData} />
+						</ChartCard>
+					)}
+
 					{systemStats.at(-1)?.stats.t && (
 						<ChartCard grid={grid} title="Temperature" description="Temperatures of system sensors">
-							<TemperatureChart ticks={ticks} systemData={systemStats} />
+							<TemperatureChart chartData={chartData} />
 						</ChartCard>
 					)}
 				</div>
@@ -399,18 +489,27 @@ export default function SystemDetail({ name }: { name: string }) {
 							return (
 								<div key={extraFsName} className="contents">
 									<ChartCard
-										grid={true}
+										grid={grid}
 										title={`${extraFsName} Usage`}
 										description={`Disk usage of ${extraFsName}`}
 									>
-										<ExFsDiskChart ticks={ticks} systemData={systemStats} fs={extraFsName} />
+										<DiskChart
+											chartData={chartData}
+											dataKey={`stats.efs.${extraFsName}.du`}
+											diskSize={Math.round(systemStats.at(-1)?.stats.efs?.[extraFsName].d ?? NaN)}
+										/>
 									</ChartCard>
 									<ChartCard
-										grid={true}
+										grid={grid}
 										title={`${extraFsName} I/O`}
-										description={`Throughput of of ${extraFsName}`}
+										description={`Throughput of ${extraFsName}`}
+										cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
 									>
-										<ExFsDiskIoChart ticks={ticks} systemData={systemStats} fs={extraFsName} />
+										<AreaChartDefault
+											chartData={chartData}
+											maxToggled={diskIoMaxStore[0]}
+											chartName={`efs.${extraFsName}`}
+										/>
 									</ChartCard>
 								</div>
 							)
@@ -430,10 +529,10 @@ function ContainerFilterBar() {
 
 	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
 		$containerFilter.set(e.target.value)
-	}, []) // Use an empty dependency array to prevent re-creation
+	}, [])
 
 	return (
-		<div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:right-3.5">
+		<>
 			<Input
 				placeholder="Filter..."
 				className="pl-4 pr-8"
@@ -452,7 +551,33 @@ function ContainerFilterBar() {
 					<XIcon className="h-4 w-4" />
 				</Button>
 			)}
-		</div>
+		</>
+	)
+}
+
+function SelectAvgMax({
+	store,
+}: {
+	store: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+}) {
+	const [max, setMax] = store
+	const Icon = max ? ChartMax : ChartAverage
+
+	return (
+		<Select value={max ? 'max' : 'avg'} onValueChange={(e) => setMax(e === 'max')}>
+			<SelectTrigger className="relative pl-10 pr-5">
+				<Icon className="h-4 w-4 absolute left-4 top-1/2 -translate-y-1/2 opacity-85" />
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem key="avg" value="avg">
+					Average
+				</SelectItem>
+				<SelectItem key="max" value="max">
+					Max 1 min
+				</SelectItem>
+			</SelectContent>
+		</Select>
 	)
 }
 
@@ -461,31 +586,34 @@ function ChartCard({
 	description,
 	children,
 	grid,
-	isContainerChart,
+	cornerEl,
 }: {
 	title: string
 	description: string
 	children: React.ReactNode
 	grid?: boolean
-	isContainerChart?: boolean
+	cornerEl?: JSX.Element | null
 }) {
-	const target = useRef<HTMLDivElement>(null)
-	const [isInViewport, wrappedTargetRef] = useClampedIsInViewport({ target: target })
+	const { isIntersecting, ref } = useIntersectionObserver()
 
 	return (
 		<Card
 			className={cn('pb-2 sm:pb-4 odd:last-of-type:col-span-full', { 'col-span-full': !grid })}
-			ref={wrappedTargetRef}
+			ref={ref}
 		>
 			<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
 				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
-				{isContainerChart && <ContainerFilterBar />}
+				{cornerEl && (
+					<div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:right-3.5">
+						{cornerEl}
+					</div>
+				)}
 			</CardHeader>
-			<CardContent className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
+			<div className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
 				{<Spinner />}
-				{isInViewport && <Suspense>{children}</Suspense>}
-			</CardContent>
+				{isIntersecting && children}
+			</div>
 		</Card>
 	)
 }

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

@@ -44,30 +44,31 @@ import {
 
 import { SystemRecord } from '@/types'
 import {
-	MoreHorizontal,
-	ArrowUpDown,
-	Server,
-	Cpu,
-	MemoryStick,
-	HardDrive,
+	MoreHorizontalIcon,
+	ArrowUpDownIcon,
+	MemoryStickIcon,
 	CopyIcon,
 	PauseCircleIcon,
 	PlayCircleIcon,
 	Trash2Icon,
 	WifiIcon,
+	HardDriveIcon,
+	ServerIcon,
+	CpuIcon,
 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { $hubVersion, $systems, pb } from '@/lib/stores'
 import { useStore } from '@nanostores/react'
-import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils'
-import AlertsButton from '../table-alerts'
+import { cn, copyToClipboard, decimalString, isReadOnlyUser } from '@/lib/utils'
+import AlertsButton from '../alerts/alert-button'
 import { navigate } from '../router'
+import { EthernetIcon } from '../ui/icons'
 
 function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	const val = info.getValue() as number
 	return (
 		<div className="flex gap-1 items-center tabular-nums tracking-tight">
-			<span className="min-w-[3.5em]">{val.toFixed(1)}%</span>
+			<span className="min-w-[3.5em]">{decimalString(val, 1)}%</span>
 			<span className="grow min-w-10 block bg-muted h-[1em] relative rounded-sm overflow-hidden">
 				<span
 					className={cn(
@@ -95,7 +96,7 @@ function sortableHeader(
 		>
 			<Icon className="mr-2 h-4 w-4" />
 			{name}
-			{!hideSortIcon && <ArrowUpDown className="ml-2 h-4 w-4" />}
+			{!hideSortIcon && <ArrowUpDownIcon className="ml-2 h-4 w-4" />}
 		</Button>
 	)
 }
@@ -112,7 +113,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 		}
 	}, [filter])
 
-	const columns: ColumnDef<SystemRecord>[] = useMemo(() => {
+	const columns = useMemo(() => {
 		return [
 			{
 				// size: 200,
@@ -144,26 +145,46 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 						</span>
 					)
 				},
-				header: ({ column }) => sortableHeader(column, 'System', Server),
+				header: ({ column }) => sortableHeader(column, 'System', ServerIcon),
 			},
 			{
 				accessorKey: 'info.cpu',
+				invertSorting: true,
 				cell: CellFormatter,
-				header: ({ column }) => sortableHeader(column, 'CPU', Cpu),
+				header: ({ column }) => sortableHeader(column, 'CPU', CpuIcon),
 			},
 			{
 				accessorKey: 'info.mp',
+				invertSorting: true,
 				cell: CellFormatter,
-				header: ({ column }) => sortableHeader(column, 'Memory', MemoryStick),
+				header: ({ column }) => sortableHeader(column, 'Memory', MemoryStickIcon),
 			},
 			{
 				accessorKey: 'info.dp',
+				invertSorting: true,
 				cell: CellFormatter,
-				header: ({ column }) => sortableHeader(column, 'Disk', HardDrive),
+				header: ({ column }) => sortableHeader(column, 'Disk', HardDriveIcon),
+			},
+			{
+				accessorFn: (originalRow) => originalRow.info.b || 0,
+				id: 'n',
+				invertSorting: true,
+				size: 115,
+				header: ({ column }) => sortableHeader(column, 'Net', EthernetIcon),
+				cell: (info) => {
+					const val = info.getValue() as number
+					return (
+						<span className="tabular-nums whitespace-nowrap pl-1">
+							{decimalString(val, val >= 100 ? 1 : 2)} MB/s
+						</span>
+					)
+				},
 			},
 			{
 				accessorKey: 'info.v',
+				invertSorting: true,
 				size: 50,
+				header: ({ column }) => sortableHeader(column, 'Agent', WifiIcon, true),
 				cell: (info) => {
 					const version = info.getValue() as string
 					if (!version || !hubVersion) {
@@ -182,7 +203,6 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 						</span>
 					)
 				},
-				header: ({ column }) => sortableHeader(column, 'Agent', WifiIcon, true),
 			},
 			{
 				id: 'actions',
@@ -198,7 +218,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 									<DropdownMenuTrigger asChild>
 										<Button variant="ghost" size={'icon'} data-nolink>
 											<span className="sr-only">Open menu</span>
-											<MoreHorizontal className="w-5" />
+											<MoreHorizontalIcon className="w-5" />
 										</Button>
 									</DropdownMenuTrigger>
 									<DropdownMenuContent align="end">
@@ -259,7 +279,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 					)
 				},
 			},
-		]
+		] as ColumnDef<SystemRecord>[]
 	}, [hubVersion])
 
 	const table = useReactTable({
@@ -324,7 +344,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 													? 'auto'
 													: cell.column.getSize(),
 										}}
-										className={'overflow-hidden relative py-2.5'}
+										className={cn('overflow-hidden relative', data.length > 10 ? 'py-2' : 'py-2.5')}
 									>
 										{flexRender(cell.column.columnDef.cell, cell.getContext())}
 									</TableCell>

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

@@ -1,234 +0,0 @@
-import { $alerts, pb } from '@/lib/stores'
-import { useStore } from '@nanostores/react'
-import {
-	Dialog,
-	DialogTrigger,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from '@/components/ui/dialog'
-import { BellIcon } from 'lucide-react'
-import { cn, isAdmin } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Switch } from '@/components/ui/switch'
-import { AlertRecord, SystemRecord } from '@/types'
-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)
-
-	const active = useMemo(() => {
-		return alerts.find((alert) => alert.system === system.id)
-	}, [alerts, system])
-
-	const systemAlerts = useMemo(() => {
-		return alerts.filter((alert) => alert.system === system.id) as AlertRecord[]
-	}, [alerts, system])
-
-	return (
-		<Dialog>
-			<DialogTrigger asChild>
-				<Button variant="ghost" size={'icon'} aria-label="Alerts" data-nolink>
-					<BellIcon
-						className={cn('h-[1.2em] w-[1.2em] pointer-events-none', {
-							'fill-foreground': active,
-						})}
-					/>
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-full overflow-auto">
-				<DialogHeader>
-					<DialogTitle className="mb-1">Alerts for {system.name}</DialogTitle>
-					<DialogDescription>
-						{isAdmin() && (
-							<span>
-								Please{' '}
-								<a
-									href="/_/#/settings/mail"
-									className="font-medium text-primary opacity-80 hover:opacity-100 duration-100"
-								>
-									configure an SMTP server
-								</a>{' '}
-								to ensure alerts are delivered.{' '}
-							</span>
-						)}
-					</DialogDescription>
-				</DialogHeader>
-				<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 AlertStatus({ system, alerts }: { system: SystemRecord; alerts: AlertRecord[] }) {
-	const [pendingChange, setPendingChange] = useState(false)
-
-	const alert = useMemo(() => {
-		return alerts.find((alert) => alert.name === 'Status')
-	}, [alerts])
-
-	return (
-		<label
-			htmlFor="alert-status"
-			className="flex flex-row items-center justify-between gap-4 rounded-lg border p-4 cursor-pointer"
-		>
-			<div className="grid gap-1 select-none">
-				<p className="font-semibold">System Status</p>
-				<span className="block text-sm text-foreground opacity-80">
-					Triggers when status switches between up and down.
-				</span>
-			</div>
-			<Switch
-				id="alert-status"
-				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: 'Status',
-							})
-						}
-					} catch (e) {
-						failedUpdateToast()
-					} finally {
-						setPendingChange(false)
-					}
-				}}
-			/>
-		</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('flex flex-row items-center justify-between gap-4 cursor-pointer p-4', {
-					'pb-0': !!alert,
-				})}
-			>
-				<div className="grid gap-1 select-none">
-					<p className="font-semibold">{title}</p>
-					<span className="block text-sm 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>
-	)
-}

beszel/site/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+// import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+// const alertVariants = cva(
+//   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+//   {
+//     variants: {
+//       variant: {
+//         default: "bg-background text-foreground",
+//         destructive:
+//           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+//       },
+//     },
+//     defaultVariants: {
+//       variant: "default",
+//     },
+//   }
+// )
+
+const Alert = React.forwardRef<
+	HTMLDivElement,
+	// React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+	// >(({ className, variant, ...props }, ref) => (
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(
+			'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground bg-background text-foreground',
+			className
+		)}
+		{...props}
+	/>
+))
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+	({ className, ...props }, ref) => (
+		<h5
+			ref={ref}
+			className={cn('mb-1 -mt-0.5 font-medium leading-tight tracking-tight', className)}
+			{...props}
+		/>
+	)
+)
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+))
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }

beszel/site/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

beszel/site/src/components/ui/chart.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
 import * as RechartsPrimitive from 'recharts'
 
-import { cn } from '@/lib/utils'
+import { chartTimeData, cn } from '@/lib/utils'
+import { ChartData } from '@/types'
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: '', dark: '.dark' } as const
@@ -16,77 +17,77 @@ export type ChartConfig = {
 	)
 }
 
-type ChartContextProps = {
-	config: ChartConfig
-}
+// type ChartContextProps = {
+// 	config: ChartConfig
+// }
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+// const ChartContext = React.createContext<ChartContextProps | null>(null)
 
-function useChart() {
-	const context = React.useContext(ChartContext)
+// function useChart() {
+// 	const context = React.useContext(ChartContext)
 
-	if (!context) {
-		throw new Error('useChart must be used within a <ChartContainer />')
-	}
+// 	if (!context) {
+// 		throw new Error('useChart must be used within a <ChartContainer />')
+// 	}
 
-	return context
-}
+// 	return context
+// }
 
 const ChartContainer = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<'div'> & {
-		config: ChartConfig
+		// config: ChartConfig
 		children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']
 	}
->(({ id, className, children, config, ...props }, ref) => {
+>(({ id, className, children, ...props }, ref) => {
 	const uniqueId = React.useId()
 	const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
 
 	return (
-		<ChartContext.Provider value={{ config }}>
-			<div
-				data-chart={chartId}
-				ref={ref}
-				className={cn(
-					"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-					className
-				)}
-				{...props}
-			>
-				<ChartStyle id={chartId} config={config} />
-				<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-			</div>
-		</ChartContext.Provider>
+		//<ChartContext.Provider value={{ config }}>
+		<div
+			data-chart={chartId}
+			ref={ref}
+			className={cn(
+				"text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+				className
+			)}
+			{...props}
+		>
+			{/* <ChartStyle id={chartId} config={config} /> */}
+			<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+		</div>
+		//</ChartContext.Provider>
 	)
 })
 ChartContainer.displayName = 'Chart'
 
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-	const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color)
+// const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+// 	const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color)
 
-	if (!colorConfig.length) {
-		return null
-	}
+// 	if (!colorConfig.length) {
+// 		return null
+// 	}
 
-	return (
-		<style
-			dangerouslySetInnerHTML={{
-				__html: Object.entries(THEMES).map(
-					([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-	.map(([key, itemConfig]) => {
-		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
-		return color ? `  --color-${key}: ${color};` : null
-	})
-	.join('\n')}
-}
-`
-				),
-			}}
-		/>
-	)
-}
+// 	return (
+// 		<style
+// 			dangerouslySetInnerHTML={{
+// 				__html: Object.entries(THEMES).map(
+// 					([theme, prefix]) => `
+// ${prefix} [data-chart=${id}] {
+// ${colorConfig
+// 	.map(([key, itemConfig]) => {
+// 		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
+// 		return color ? `  --color-${key}: ${color};` : null
+// 	})
+// 	.join('\n')}
+// }
+// `
+// 				),
+// 			}}
+// 		/>
+// 	)
+// }
 
 const ChartTooltip = RechartsPrimitive.Tooltip
 
@@ -95,7 +96,6 @@ const ChartTooltipContent = React.forwardRef<
 	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
 		React.ComponentProps<'div'> & {
 			hideLabel?: boolean
-			hideIndicator?: boolean
 			indicator?: 'line' | 'dot' | 'dashed'
 			nameKey?: string
 			labelKey?: string
@@ -109,9 +109,8 @@ const ChartTooltipContent = React.forwardRef<
 			active,
 			payload,
 			className,
-			indicator = 'dot',
+			indicator = 'line',
 			hideLabel = false,
-			hideIndicator = false,
 			label,
 			labelFormatter,
 			labelClassName,
@@ -126,7 +125,8 @@ const ChartTooltipContent = React.forwardRef<
 		},
 		ref
 	) => {
-		const { config } = useChart()
+		// const { config } = useChart()
+		const config = {}
 
 		React.useMemo(() => {
 			if (filter) {
@@ -144,12 +144,9 @@ const ChartTooltipContent = React.forwardRef<
 			}
 
 			const [item] = payload
-			const key = `${labelKey || item.dataKey || item.name || 'value'}`
+			const key = `${labelKey || item.name || 'value'}`
 			const itemConfig = getPayloadConfigFromPayload(config, item, key)
-			const value =
-				!labelKey && typeof label === 'string'
-					? config[label as keyof typeof config]?.label || label
-					: itemConfig?.label
+			const value = !labelKey && typeof label === 'string' ? label : itemConfig?.label
 
 			if (labelFormatter) {
 				return (
@@ -168,7 +165,8 @@ const ChartTooltipContent = React.forwardRef<
 			return null
 		}
 
-		const nestLabel = payload.length === 1 && indicator !== 'dot'
+		// const nestLabel = payload.length === 1 && indicator !== 'dot'
+		const nestLabel = false
 
 		return (
 			<div
@@ -200,26 +198,24 @@ const ChartTooltipContent = React.forwardRef<
 										{itemConfig?.icon ? (
 											<itemConfig.icon />
 										) : (
-											!hideIndicator && (
-												<div
-													className={cn(
-														'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-														{
-															'h-2.5 w-2.5': indicator === 'dot',
-															'w-1': indicator === 'line',
-															'w-0 border-[1.5px] border-dashed bg-transparent':
-																indicator === 'dashed',
-															'my-0.5': nestLabel && indicator === 'dashed',
-														}
-													)}
-													style={
-														{
-															'--color-bg': indicatorColor,
-															'--color-border': indicatorColor,
-														} as React.CSSProperties
+											<div
+												className={cn(
+													'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+													{
+														'h-2.5 w-2.5': indicator === 'dot',
+														'w-1': indicator === 'line',
+														'w-0 border-[1.5px] border-dashed bg-transparent':
+															indicator === 'dashed',
+														'my-0.5': nestLabel && indicator === 'dashed',
 													}
-												/>
-											)
+												)}
+												style={
+													{
+														'--color-bg': indicatorColor,
+														'--color-border': indicatorColor,
+													} as React.CSSProperties
+												}
+											/>
 										)}
 										<div
 											className={cn(
@@ -262,7 +258,7 @@ const ChartLegendContent = React.forwardRef<
 			hideIcon?: boolean
 			nameKey?: string
 		}
->(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
+>(({ className, payload, verticalAlign = 'bottom' }, ref) => {
 	// const { config } = useChart()
 
 	if (!payload?.length) {
@@ -336,11 +332,34 @@ function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key:
 	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
 }
 
+let cachedAxis: JSX.Element
+const xAxis = function ({ domain, ticks, chartTime }: ChartData) {
+	if (cachedAxis && domain[0] === cachedAxis.props.domain[0]) {
+		return cachedAxis
+	}
+	cachedAxis = (
+		<RechartsPrimitive.XAxis
+			dataKey="created"
+			domain={domain}
+			ticks={ticks}
+			allowDataOverflow
+			type="number"
+			scale="time"
+			minTickGap={15}
+			tickMargin={8}
+			axisLine={false}
+			tickFormatter={chartTimeData[chartTime].format}
+		/>
+	)
+	return cachedAxis
+}
+
 export {
 	ChartContainer,
 	ChartTooltip,
 	ChartTooltipContent,
 	ChartLegend,
 	ChartLegendContent,
-	ChartStyle,
+	xAxis,
+	// ChartStyle,
 }

beszel/site/src/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef<
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			'peer h-4 w-4 shrink-0 rounded-[.3em] border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+			className
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+			<Check className="h-4 w-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

beszel/site/src/components/ui/icons.tsx

@@ -0,0 +1,72 @@
+import { SVGProps } from 'react'
+
+// linux-logo-bold from https://github.com/phosphor-icons/core (MIT license)
+export function TuxIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 256 256" {...props}>
+			<path
+				fill="currentColor"
+				d="M231 217a12 12 0 0 1-16-2c-2-1-35-44-35-127a52 52 0 1 0-104 0c0 83-33 126-35 127a12 12 0 0 1-18-14c0-1 29-39 29-113a76 76 0 1 1 152 0c0 74 29 112 29 113a12 12 0 0 1-2 16m-127-97a16 16 0 1 0-16-16 16 16 0 0 0 16 16m64-16a16 16 0 1 0-16 16 16 16 0 0 0 16-16m-73 51 28 12a12 12 0 0 0 10 0l28-12a12 12 0 0 0-10-22l-23 10-23-10a12 12 0 0 0-10 22m33 29a57 57 0 0 0-39 15 12 12 0 0 0 17 18 33 33 0 0 1 44 0 12 12 0 1 0 17-18 57 57 0 0 0-39-15"
+			/>
+		</svg>
+	)
+}
+
+// MingCute Apache License 2.0 https://github.com/Richard9394/MingCute
+export function Rows(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" {...props}>
+			<path
+				fill="currentColor"
+				d="M5 3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 2h14v4H5zm0 8a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2zm0 2h14v4H5z"
+			/>
+		</svg>
+	)
+}
+
+// IconPark Apache License 2.0 https://github.com/bytedance/IconPark
+export function ChartAverage(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg fill="none" viewBox="0 0 48 48" stroke="currentColor" {...props}>
+			<path strokeWidth="3" d="M4 4v40h40" />
+			<path strokeWidth="3" d="M10 38S15.3 4 27 4s17 34 17 34" />
+			<path strokeWidth="4" d="M10 24h34" />
+		</svg>
+	)
+}
+
+// IconPark Apache License 2.0 https://github.com/bytedance/IconPark
+export function ChartMax(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg fill="none" viewBox="0 0 48 48" stroke="currentColor" {...props}>
+			<path strokeWidth="3" d="M4 4v40h40" />
+			<path strokeWidth="3" d="M10 38S15.3 4 27 4s17 34 17 34" />
+			<path strokeWidth="4" d="M10 4h34" />
+		</svg>
+	)
+}
+
+// Lucide https://github.com/lucide-icons/lucide (not in package for some reason)
+export function EthernetIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			fill="none"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeWidth="2"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path d="m15 20 3-3h2a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2l3 3zM6 8v1m4-1v1m4-1v1m4-1v1" />
+		</svg>
+	)
+}
+
+// Phosphor MIT https://github.com/phosphor-icons/core
+export function ThermometerIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 256 256" {...props} fill="currentColor">
+			<path d="M212 56a28 28 0 1 0 28 28 28 28 0 0 0-28-28m0 40a12 12 0 1 1 12-12 12 12 0 0 1-12 12m-60 50V40a32 32 0 0 0-64 0v106a56 56 0 1 0 64 0m-16-42h-32V40a16 16 0 0 1 32 0Z" />
+		</svg>
+	)
+}

beszel/site/src/components/ui/input-tags.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { XIcon } from 'lucide-react'
+import { type InputProps } from './input'
+import { cn } from '@/lib/utils'
+
+type InputTagsProps = Omit<InputProps, 'value' | 'onChange'> & {
+	value: string[]
+	onChange: React.Dispatch<React.SetStateAction<string[]>>
+}
+
+const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
+	({ className, value, onChange, ...props }, ref) => {
+		const [pendingDataPoint, setPendingDataPoint] = React.useState('')
+
+		React.useEffect(() => {
+			if (pendingDataPoint.includes(',')) {
+				const newDataPoints = new Set([
+					...value,
+					...pendingDataPoint.split(',').map((chunk) => chunk.trim()),
+				])
+				onChange(Array.from(newDataPoints))
+				setPendingDataPoint('')
+			}
+		}, [pendingDataPoint, onChange, value])
+
+		const addPendingDataPoint = () => {
+			if (pendingDataPoint) {
+				const newDataPoints = new Set([...value, pendingDataPoint])
+				onChange(Array.from(newDataPoints))
+				setPendingDataPoint('')
+			}
+		}
+
+		return (
+			<div
+				className={cn(
+					'bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border border-input px-3 py-2 text-sm  placeholder:text-muted-foreground has-[:focus-visible]:outline-none ring-offset-background has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+					className
+				)}
+			>
+				{value.map((item) => (
+					<Badge key={item}>
+						{item}
+						<Button
+							variant="ghost"
+							size="icon"
+							className="ml-2 h-3 w-3"
+							onClick={() => {
+								onChange(value.filter((i) => i !== item))
+							}}
+						>
+							<XIcon className="w-3" />
+						</Button>
+					</Badge>
+				))}
+				<input
+					className="flex-1 outline-none bg-background placeholder:text-muted-foreground"
+					value={pendingDataPoint}
+					onChange={(e) => setPendingDataPoint(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' || e.key === ',') {
+							e.preventDefault()
+							addPendingDataPoint()
+						} else if (e.key === 'Backspace' && pendingDataPoint.length === 0 && value.length > 0) {
+							e.preventDefault()
+							onChange(value.slice(0, -1))
+						}
+					}}
+					{...props}
+					ref={ref}
+				/>
+			</div>
+		)
+	}
+)
+
+InputTags.displayName = 'InputTags'
+
+export { InputTags }

beszel/site/src/components/ui/table.tsx

@@ -44,7 +44,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 		<tr
 			ref={ref}
 			className={cn(
-				'border-b transition-colors hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted',
+				'border-b hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted',
 				className
 			)}
 			{...props}

beszel/site/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

beszel/site/src/components/ui/toast.tsx

@@ -1,112 +1,107 @@
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from 'react'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const ToastProvider = ToastPrimitives.Provider
 
 const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			'fixed top-0 z-[100] flex max-h-dvh w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+			className
+		)}
+		{...props}
+	/>
 ))
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+	'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+	{
+		variants: {
+			variant: {
+				default: 'border bg-background text-foreground',
+				destructive:
+					'destructive group border-destructive bg-destructive text-destructive-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
 )
 
 const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ variant }), className)}
+			{...props}
+		/>
+	)
 })
 Toast.displayName = ToastPrimitives.Root.displayName
 
 const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+			className
+		)}
+		{...props}
+	/>
 ))
 ToastAction.displayName = ToastPrimitives.Action.displayName
 
 const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+			className
+		)}
+		toast-close=""
+		{...props}
+	>
+		<X className="h-4 w-4" />
+	</ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
 
 const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
+	<ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold', className)} {...props} />
 ))
 ToastTitle.displayName = ToastPrimitives.Title.displayName
 
 const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn('text-sm opacity-90', className)}
+		{...props}
+	/>
 ))
 ToastDescription.displayName = ToastPrimitives.Description.displayName
 
@@ -115,13 +110,13 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
 type ToastActionElement = React.ReactElement<typeof ToastAction>
 
 export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
 }

beszel/site/src/index.css

@@ -78,6 +78,9 @@
 	body {
 		@apply bg-background text-foreground;
 	}
+	.link {
+		@apply text-primary font-medium underline-offset-4 hover:underline;
+	}
 }
 
 .recharts-tooltip-wrapper {
@@ -85,5 +88,5 @@
 }
 
 .recharts-yAxis {
-	font-variant-numeric: tabular-nums;
+	@apply tabular-nums;
 }

beszel/site/src/lib/stores.ts

@@ -1,6 +1,6 @@
 import PocketBase from 'pocketbase'
-import { atom, WritableAtom } from 'nanostores'
-import { AlertRecord, ChartTimes, SystemRecord } from '@/types'
+import { atom, map, WritableAtom } from 'nanostores'
+import { AlertRecord, ChartTimes, SystemRecord, UserSettings } from '@/types'
 
 /** PocketBase JS Client */
 export const pb = new PocketBase('/')
@@ -23,6 +23,17 @@ export const $hubVersion = atom('')
 /** Chart time period */
 export const $chartTime = atom('1h') as WritableAtom<ChartTimes>
 
+/** User settings */
+export const $userSettings = map<UserSettings>({
+	chartTime: '1h',
+	emails: [pb.authStore.model?.email || ''],
+})
+// update local storage on change
+$userSettings.subscribe((value) => {
+	// console.log('user settings changed', value)
+	$chartTime.set(value.chartTime)
+})
+
 /** Container chart filter */
 export const $containerFilter = atom('')
 

beszel/site/src/lib/use-intersection-observer.ts

@@ -0,0 +1,169 @@
+import { useEffect, useRef, useState } from 'react'
+
+// adapted from usehooks-ts/use-intersection-observer
+
+/** The hook internal state. */
+type State = {
+	/** A boolean indicating if the element is intersecting. */
+	isIntersecting: boolean
+	/** The intersection observer entry. */
+	entry?: IntersectionObserverEntry
+}
+
+/** Represents the options for configuring the Intersection Observer. */
+type UseIntersectionObserverOptions = {
+	/**
+	 * The element that is used as the viewport for checking visibility of the target.
+	 * @default null
+	 */
+	root?: Element | Document | null
+	/**
+	 * A margin around the root.
+	 * @default '0%'
+	 */
+	rootMargin?: string
+	/**
+	 * A threshold indicating the percentage of the target's visibility needed to trigger the callback.
+	 * @default 0
+	 */
+	threshold?: number | number[]
+	/**
+	 * If true, freezes the intersection state once the element becomes visible.
+	 * @default true
+	 */
+	freeze?: boolean
+	/**
+	 * A callback function to be invoked when the intersection state changes.
+	 * @param {boolean} isIntersecting - A boolean indicating if the element is intersecting.
+	 * @param {IntersectionObserverEntry} entry - The intersection observer Entry.
+	 * @default undefined
+	 */
+	onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void
+	/**
+	 * The initial state of the intersection.
+	 * @default false
+	 */
+	initialIsIntersecting?: boolean
+}
+
+/**
+ * The return type of the useIntersectionObserver hook.
+ *
+ * Supports both tuple and object destructing.
+ * @param {(node: Element | null) => void} ref - The ref callback function.
+ * @param {boolean} isIntersecting - A boolean indicating if the element is intersecting.
+ * @param {IntersectionObserverEntry | undefined} entry - The intersection observer Entry.
+ */
+type IntersectionReturn = {
+	ref: (node?: Element | null) => void
+	isIntersecting: boolean
+	entry?: IntersectionObserverEntry
+}
+
+/**
+ * Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+ * @param {UseIntersectionObserverOptions} options - The options for the Intersection Observer.
+ * @returns {IntersectionReturn} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
+ * @example
+ * ```tsx
+ * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+ * ```
+ */
+export function useIntersectionObserver({
+	threshold = 0,
+	root = null,
+	rootMargin = '0%',
+	freeze = true,
+	initialIsIntersecting = false,
+	onChange,
+}: UseIntersectionObserverOptions = {}): IntersectionReturn {
+	const [ref, setRef] = useState<Element | null>(null)
+
+	const [state, setState] = useState<State>(() => ({
+		isIntersecting: initialIsIntersecting,
+		entry: undefined,
+	}))
+
+	const callbackRef = useRef<UseIntersectionObserverOptions['onChange']>()
+
+	callbackRef.current = onChange
+
+	const frozen = state.entry?.isIntersecting && freeze
+
+	useEffect(() => {
+		// Ensure we have a ref to observe
+		if (!ref) return
+
+		// Ensure the browser supports the Intersection Observer API
+		if (!('IntersectionObserver' in window)) return
+
+		// Skip if frozen
+		if (frozen) return
+
+		let unobserve: (() => void) | undefined
+
+		const observer = new IntersectionObserver(
+			(entries: IntersectionObserverEntry[]): void => {
+				const thresholds = Array.isArray(observer.thresholds)
+					? observer.thresholds
+					: [observer.thresholds]
+
+				entries.forEach((entry) => {
+					const isIntersecting =
+						entry.isIntersecting &&
+						thresholds.some((threshold) => entry.intersectionRatio >= threshold)
+
+					setState({ isIntersecting, entry })
+
+					if (callbackRef.current) {
+						callbackRef.current(isIntersecting, entry)
+					}
+
+					if (isIntersecting && freeze && unobserve) {
+						unobserve()
+						unobserve = undefined
+					}
+				})
+			},
+			{ threshold, root, rootMargin }
+		)
+
+		observer.observe(ref)
+
+		return () => {
+			observer.disconnect()
+		}
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		ref,
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		JSON.stringify(threshold),
+		root,
+		rootMargin,
+		frozen,
+		freeze,
+	])
+
+	// ensures that if the observed element changes, the intersection observer is reinitialized
+	const prevRef = useRef<Element | null>(null)
+
+	useEffect(() => {
+		if (
+			!ref &&
+			state.entry?.target &&
+			!freeze &&
+			!frozen &&
+			prevRef.current !== state.entry.target
+		) {
+			prevRef.current = state.entry.target
+			setState({ isIntersecting: initialIsIntersecting, entry: undefined })
+		}
+	}, [ref, state.entry, freeze, frozen, initialIsIntersecting])
+
+	return {
+		ref: setRef,
+		isIntersecting: !!state.isIntersecting,
+		entry: state.entry,
+	} as IntersectionReturn
+}

beszel/site/src/lib/utils.ts

@@ -1,17 +1,19 @@
 import { toast } from '@/components/ui/use-toast'
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import { $alerts, $copyContent, $systems, pb } from './stores'
+import { $alerts, $copyContent, $systems, $userSettings, pb } from './stores'
 import { AlertRecord, ChartTimeData, ChartTimes, SystemRecord } from '@/types'
 import { RecordModel, RecordSubscription } from 'pocketbase'
 import { WritableAtom } from 'nanostores'
 import { timeDay, timeHour } from 'd3-time'
 import { useEffect, useState } from 'react'
-import useIsInViewport, { CallbackRef, HookOptions } from 'use-is-in-viewport'
+import { CpuIcon, HardDriveIcon, MemoryStickIcon, ServerIcon } from 'lucide-react'
+import { EthernetIcon, ThermometerIcon } from '@/components/ui/icons'
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
 }
+// export const cn = clsx
 
 export async function copyToClipboard(content: string) {
 	const duration = 1500
@@ -40,23 +42,19 @@ const verifyAuth = () => {
 }
 
 export const updateSystemList = async () => {
-	// try {
-	const records = await pb.collection<SystemRecord>('systems').getFullList({ sort: '+name' })
+	const records = await pb
+		.collection<SystemRecord>('systems')
+		.getFullList({ sort: '+name', fields: 'id,name,host,info,status' })
 	if (records.length) {
 		$systems.set(records)
 	} else {
 		verifyAuth()
 	}
-	// }
-	// catch (e) {
-	// 	console.log('verifying auth error', e)
-	// 	verifyAuth()
-	// }
 }
 
 export const updateAlerts = () => {
 	pb.collection('alerts')
-		.getFullList<AlertRecord>({ fields: 'id,name,system,value' })
+		.getFullList<AlertRecord>({ fields: 'id,name,system,value,min,triggered', sort: 'updated' })
 		.then((records) => {
 			$alerts.set(records)
 		})
@@ -104,8 +102,9 @@ export const formatDay = (timestamp: string) => {
 	return dayFormatter.format(new Date(timestamp))
 }
 
-export const updateFavicon = (newIcon: string) =>
-	((document.querySelector("link[rel='icon']") as HTMLLinkElement).href = `/static/${newIcon}`)
+export const updateFavicon = (newIcon: string) => {
+	;(document.querySelector("link[rel='icon']") as HTMLLinkElement).href = `/static/${newIcon}`
+}
 
 export const isAdmin = () => pb.authStore.model?.role === 'admin'
 export const isReadOnlyUser = () => pb.authStore.model?.role === 'readonly'
@@ -141,8 +140,8 @@ export function updateRecordList<T extends RecordModel>(
 	$store.set(newRecords)
 }
 
-export function getPbTimestamp(timeString: ChartTimes) {
-	const d = chartTimeData[timeString].getOffset(new Date())
+export function getPbTimestamp(timeString: ChartTimes, d?: Date) {
+	d ||= chartTimeData[timeString].getOffset(new Date())
 	const year = d.getUTCFullYear()
 	const month = String(d.getUTCMonth() + 1).padStart(2, '0')
 	const day = String(d.getUTCDate()).padStart(2, '0')
@@ -182,7 +181,7 @@ export const chartTimeData: ChartTimeData = {
 		expectedInterval: 60_000 * 120,
 		label: '1 week',
 		ticks: 7,
-		format: (timestamp: string) => formatShortDate(timestamp),
+		format: (timestamp: string) => formatDay(timestamp),
 		getOffset: (endTime: Date) => timeDay.offset(endTime, -7),
 	},
 	'30d': {
@@ -195,40 +194,30 @@ export const chartTimeData: ChartTimeData = {
 	},
 }
 
-/** Hacky solution to set the correct width of the yAxis in recharts */
-export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
-	const [yAxisWidth, setYAxisWidth] = useState(180)
-	useEffect(() => {
-		let interval = setInterval(() => {
-			// console.log('chartRef', chartRef.current)
-			const yAxisElement = chartRef?.current?.querySelector('.yAxis')
-			if (yAxisElement) {
-				// console.log('yAxisElement', yAxisElement)
-				clearInterval(interval)
-				setYAxisWidth(yAxisElement.getBoundingClientRect().width + 24)
-			}
-		}, 16)
-		return () => clearInterval(interval)
-	}, [])
-	return yAxisWidth
-}
-
-export function useClampedIsInViewport(options: HookOptions): [boolean | null, CallbackRef] {
-	const [isInViewport, wrappedTargetRef] = useIsInViewport(options)
-	const [wasInViewportAtleastOnce, setWasInViewportAtleastOnce] = useState(isInViewport)
-
-	useEffect(() => {
-		setWasInViewportAtleastOnce((prev) => {
-			// this will clamp it to the first true
-			// received from useIsInViewport
-			if (!prev) {
-				return isInViewport
-			}
-			return prev
-		})
-	}, [isInViewport])
-
-	return [wasInViewportAtleastOnce, wrappedTargetRef]
+/** Sets the correct width of the y axis in recharts based on the longest label */
+export function useYAxisWidth() {
+	const [yAxisWidth, setYAxisWidth] = useState(0)
+	let maxChars = 0
+	let timeout: Timer
+	function updateYAxisWidth(str: string) {
+		if (str.length > maxChars) {
+			maxChars = str.length
+			const div = document.createElement('div')
+			div.className = 'text-xs tabular-nums tracking-tighter table sr-only'
+			div.innerHTML = str
+			clearTimeout(timeout)
+			timeout = setTimeout(() => {
+				document.body.appendChild(div)
+				const width = div.offsetWidth + 24
+				if (width > yAxisWidth) {
+					setYAxisWidth(div.offsetWidth + 24)
+				}
+				document.body.removeChild(div)
+			})
+		}
+		return str
+	}
+	return { yAxisWidth, updateYAxisWidth }
 }
 
 export function toFixedWithoutTrailingZeros(num: number, digits: number) {
@@ -239,17 +228,18 @@ export function toFixedFloat(num: number, digits: number) {
 	return parseFloat(num.toFixed(digits))
 }
 
-let twoDecimalFormatter: Intl.NumberFormat
-/** Format number to two decimal places */
-export function twoDecimalString(num: number) {
-	if (!twoDecimalFormatter) {
-		twoDecimalFormatter = new Intl.NumberFormat(undefined, {
-			minimumFractionDigits: 2,
-			maximumFractionDigits: 2,
+let decimalFormatters: Map<number, Intl.NumberFormat> = new Map()
+/** Format number to x decimal places */
+export function decimalString(num: number, digits = 2) {
+	let formatter = decimalFormatters.get(digits)
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(undefined, {
+			minimumFractionDigits: digits,
+			maximumFractionDigits: digits,
 		})
+		decimalFormatters.set(digits, formatter)
 	}
-	// Return a function that formats numbers using the saved formatter
-	return twoDecimalFormatter.format(num)
+	return formatter.format(num)
 }
 
 /** Get value from local storage */
@@ -270,3 +260,81 @@ export const useLocalStorage = (key: string, defaultValue: any) => {
 
 	return [value, setValue]
 }
+
+export async function updateUserSettings() {
+	try {
+		const req = await pb.collection('user_settings').getFirstListItem('', { fields: 'settings' })
+		$userSettings.set(req.settings)
+		return
+	} catch (e) {
+		console.log('get settings', e)
+	}
+	// create user settings if error fetching existing
+	try {
+		const createdSettings = await pb
+			.collection('user_settings')
+			.create({ user: pb.authStore.model!.id })
+		$userSettings.set(createdSettings.settings)
+	} catch (e) {
+		console.log('create settings', e)
+	}
+}
+
+/**
+ * Get the value and unit of size (TB, GB, or MB) for a given size
+ * @param n size in gigabytes or megabytes
+ * @param isGigabytes boolean indicating if n represents gigabytes (true) or megabytes (false)
+ * @returns an object containing the value and unit of size
+ */
+export const getSizeAndUnit = (n: number, isGigabytes = true) => {
+	const sizeInGB = isGigabytes ? n : n / 1_000
+
+	if (sizeInGB >= 1_000) {
+		return { v: sizeInGB / 1_000, u: ' TB' }
+	} else if (sizeInGB >= 1) {
+		return { v: sizeInGB, u: ' GB' }
+	}
+	return { v: n, u: ' MB' }
+}
+
+export const chartMargin = { top: 12 }
+
+export const alertInfo = {
+	Status: {
+		name: 'Status',
+		unit: '',
+		icon: ServerIcon,
+		desc: 'Triggers when status switches between up and down.',
+		single: true,
+	},
+	CPU: {
+		name: 'CPU usage',
+		unit: '%',
+		icon: CpuIcon,
+		desc: 'Triggers when CPU usage exceeds a threshold.',
+	},
+	Memory: {
+		name: 'memory usage',
+		unit: '%',
+		icon: MemoryStickIcon,
+		desc: 'Triggers when memory usage exceeds a threshold.',
+	},
+	Disk: {
+		name: 'disk usage',
+		unit: '%',
+		icon: HardDriveIcon,
+		desc: 'Triggers when usage of any disk exceeds a threshold.',
+	},
+	Bandwidth: {
+		name: 'bandwidth',
+		unit: ' MB/s',
+		icon: EthernetIcon,
+		desc: 'Triggers when combined up/down exceeds a threshold.',
+	},
+	Temperature: {
+		name: 'temperature',
+		unit: '°C',
+		icon: ThermometerIcon,
+		desc: 'Triggers when any sensor exceeds a threshold.',
+	},
+}

beszel/site/src/main.tsx

@@ -1,5 +1,5 @@
 import './index.css'
-import React, { Suspense, lazy, useEffect } from 'react'
+import { Suspense, lazy, useEffect, StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import Home from './components/routes/home.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
@@ -14,6 +14,7 @@ import {
 import { ModeToggle } from './components/mode-toggle.tsx'
 import {
 	cn,
+	updateUserSettings,
 	isAdmin,
 	isReadOnlyUser,
 	updateAlerts,
@@ -27,6 +28,7 @@ import {
 	LogOutIcon,
 	LogsIcon,
 	ServerIcon,
+	SettingsIcon,
 	UserIcon,
 	UsersIcon,
 } from 'lucide-react'
@@ -42,7 +44,7 @@ import {
 	DropdownMenuTrigger,
 	DropdownMenuLabel,
 } from './components/ui/dropdown-menu.tsx'
-import { $router, Link, navigate } from './components/router.tsx'
+import { $router, Link } from './components/router.tsx'
 import SystemDetail from './components/routes/system.tsx'
 import { AddSystemButton } from './components/add-system.tsx'
 
@@ -50,6 +52,7 @@ import { AddSystemButton } from './components/add-system.tsx'
 const CommandPalette = lazy(() => import('./components/command-palette.tsx'))
 const LoginPage = lazy(() => import('./components/login/login.tsx'))
 const CopyToClipboardDialog = lazy(() => import('./components/copy-to-clipboard.tsx'))
+const Settings = lazy(() => import('./components/routes/settings/layout.tsx'))
 
 const App = () => {
 	const page = useStore($router)
@@ -66,32 +69,31 @@ const App = () => {
 			$publicKey.set(data.key)
 			$hubVersion.set(data.v)
 		})
-		// get servers / alerts
-		updateSystemList()
-		updateAlerts()
+		// get servers / alerts / settings
+		updateUserSettings()
+		// get alerts after system list is loaded
+		updateSystemList().then(updateAlerts)
+
+		return () => updateFavicon('favicon.svg')
 	}, [])
 
 	// update favicon
 	useEffect(() => {
-		if (!authenticated || !systems.length) {
+		if (!systems.length || !authenticated) {
 			updateFavicon('favicon.svg')
 		} else {
 			let up = false
 			for (const system of systems) {
 				if (system.status === 'down') {
 					updateFavicon('favicon-red.svg')
-					return () => updateFavicon('favicon.svg')
+					return
 				} else if (system.status === 'up') {
 					up = true
 				}
 			}
 			updateFavicon(up ? 'favicon-green.svg' : 'favicon.svg')
-			return () => updateFavicon('favicon.svg')
 		}
-		return () => {
-			updateFavicon('favicon.svg')
-		}
-	}, [authenticated, systems])
+	}, [systems])
 
 	if (!page) {
 		return <h1 className="text-3xl text-center my-14">404</h1>
@@ -99,6 +101,12 @@ const App = () => {
 		return <Home />
 	} else if (page.route === 'server') {
 		return <SystemDetail name={page.params.name} />
+	} else if (page.route === 'settings') {
+		return (
+			<Suspense>
+				<Settings />
+			</Suspense>
+		)
 	}
 }
 
@@ -118,20 +126,19 @@ const Layout = () => {
 		<>
 			<div className="container">
 				<div className="flex items-center h-14 md:h-16 bg-card px-4 pr-3 sm:px-6 border bt-0 rounded-md my-4">
-					<Link
-						href="/"
-						aria-label="Home"
-						className={'p-2 pl-0'}
-						onClick={(e) => {
-							e.preventDefault()
-							navigate('/')
-						}}
-					>
+					<Link href="/" aria-label="Home" className={'p-2 pl-0'}>
 						<Logo className="h-[1.15em] fill-foreground" />
 					</Link>
 
 					<div className={'flex ml-auto items-center'}>
 						<ModeToggle />
+						<Link
+							href="/settings/general"
+							aria-label="Settings"
+							className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
+						>
+							<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
+						</Link>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<button
@@ -209,10 +216,10 @@ const Layout = () => {
 ReactDOM.createRoot(document.getElementById('app')!).render(
 	// strict mode in dev mounts / unmounts components twice
 	// and breaks the clipboard dialog
-	//<React.StrictMode>
+	//<StrictMode>
 	<ThemeProvider>
 		<Layout />
 		<Toaster />
 	</ThemeProvider>
-	//</React.StrictMode>
+	//</StrictMode>
 )

beszel/site/src/types.d.ts

@@ -10,10 +10,14 @@ export interface SystemRecord extends RecordModel {
 }
 
 export interface SystemInfo {
+	/** hostname */
+	h: string
+	/** kernel **/
+	k?: string
 	/** cpu percent */
 	cpu: number
 	/** cpu threads */
-	t: number
+	t?: number
 	/** cpu cores */
 	c: number
 	/** cpu model */
@@ -26,11 +30,17 @@ export interface SystemInfo {
 	mp: number
 	/** disk percent */
 	dp: number
+	/** bandwidth (mb) */
+	b: number
+	/** agent version */
+	v: string
 }
 
 export interface SystemStats {
 	/** cpu percent */
 	cpu: number
+	/** peak cpu */
+	cpum?: number
 	/** total memory (gb) */
 	m: number
 	/** memory used (gb) */
@@ -39,6 +49,8 @@ export interface SystemStats {
 	mp: number
 	/** memory buffer + cache (gb) */
 	mb: number
+	/** zfs arc memory (gb) */
+	mz?: number
 	/** swap space (gb) */
 	s: number
 	/** swap used (gb) */
@@ -53,10 +65,18 @@ export interface SystemStats {
 	dr: number
 	/** disk write (mb) */
 	dw: number
+	/** max disk read (mb) */
+	drm?: number
+	/** max disk write (mb) */
+	dwm?: number
 	/** network sent (mb) */
 	ns: number
 	/** network received (mb) */
 	nr: number
+	/** max network sent (mb) */
+	nsm?: number
+	/** max network received (mb) */
+	nrm?: number
 	/** temperatures */
 	t?: Record<string, number>
 	/** extra filesystems */
@@ -72,6 +92,10 @@ export interface ExtraFsStats {
 	r: number
 	/** total write (mb) */
 	w: number
+	/** max read (mb) */
+	rm: number
+	/** max write (mb) */
+	wm: number
 }
 
 export interface ContainerStatsRecord extends RecordModel {
@@ -103,6 +127,8 @@ export interface AlertRecord extends RecordModel {
 	id: string
 	system: string
 	name: string
+	triggered: boolean
+	sysname?: string
 	// user: string
 }
 
@@ -118,3 +144,24 @@ export interface ChartTimeData {
 		getOffset: (endTime: Date) => Date
 	}
 }
+
+export type UserSettings = {
+	// lang?: string
+	chartTime: ChartTimes
+	emails?: string[]
+	webhooks?: string[]
+}
+
+type ChartDataContainer = {
+	created: number | null
+} & {
+	[key: string]: key extends 'created' ? never : ContainerStats
+}
+
+export interface ChartData {
+	systemStats: SystemStatsRecord[]
+	containerData: ChartDataContainer[]
+	ticks: number[]
+	domain: number[]
+	chartTime: ChartTimes
+}

beszel/site/tailwind.config.js

@@ -94,5 +94,10 @@ module.exports = {
 			},
 		},
 	},
-	plugins: [require('tailwindcss-animate')],
+	plugins: [
+		require('tailwindcss-animate'),
+		function ({ addVariant }) {
+			addVariant('light', '.light &')
+		},
+	],
 }

beszel/version.go

@@ -1,6 +1,6 @@
 package beszel
 
 const (
-	Version = "0.3.0"
+	Version = "0.6.1"
 	AppName = "beszel"
 )

readme.md

@@ -9,43 +9,43 @@ A lightweight server resource monitoring hub with historical data, docker stats,
 
 ## Features
 
-- **Lightweight**: Much smaller and less demanding than leading solutions.
-- **Docker stats**: CPU and memory usage history for each container.
-- **Alerts**: Configurable alerts for CPU, memory, and disk usage, and system status.
-- **Multi-user**: Each user has their own systems. Admins can share systems across users.
-- **Simple**: Easy setup and doesn't require anything to be publicly available online.
-- **OAuth / OIDC**: Supports many OAuth2 providers. Password auth can be disabled.
-- **Automatic backups**: Save and restore your data to / from disk or S3-compatible storage.
-- **REST API**: Use your metrics in your own scripts and applications.
+- **Lightweight**: Smaller and less resource-intensive than leading solutions.
+- **Simple**: Easy setup, no need for public internet exposure.
+- **Docker stats**: Tracks CPU, memory, and network usage history for each container.
+- **Alerts**: Configurable alerts for CPU, memory, disk, bandwidth, temperature, and system status.
+- **Multi-user**: Each user manages their own systems. Admins can share systems across users.
+- **OAuth / OIDC**: Supports multiple OAuth2 providers. Password authentication can be disabled.
+- **Automatic backups**: Save and restore data from disk or S3-compatible storage.
+- **REST API**: Use or update your data in your own scripts and applications.
 
 ## Introduction
 
-Beszel has two components: the hub and the agent.
+Beszel consists of two main components: the hub and the agent.
 
-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/).
+- **Hub:** A web application that provides a dashboard for viewing and managing connected systems. Built on [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.
+- **Agent:** Runs on each system you want to monitor, creating a minimal SSH server to communicate system metrics to the hub.
 
 ## Getting started
 
-If not using docker, ignore 4-5 and run the agent using the binary instead.
+If not using docker, skip steps 4-5 and run the agent using the binary.
 
 1. Start the hub (see [installation](#installation)).
-2. Open http://localhost:8090 and create an admin user.
+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).
+If all goes well, the system should flip to green. If it turns red, check the Logs page and refer to [troubleshooting tips](#faq--troubleshooting).
 
 ### Tutoriel en français
 
-Pour le tutoriel en français, consultez https://belginux.com/installer-beszel-avec-docker/
+Pour le tutoriel en français, consultez <https://belginux.com/installer-beszel-avec-docker/>
 
 ## Installation
 
-You may install the hub and agent as single binaries, or by using Docker.
+You can install the hub and agent as single binaries or using Docker.
 
 ### Docker
 
@@ -53,9 +53,9 @@ You may install the hub and agent as single binaries, or by using Docker.
 
 **Agent**: The hub provides compose content for the agent, but you can also reference the example [docker-compose.yml](/supplemental/docker/agent/docker-compose.yml) file.
 
-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.
+The agent uses host network mode to access network interface stats, which automatically exposes the port. Change the port using an environment variable if needed.
 
-If you don't need network stats, remove that line from the compose file and map the port manually.
+If you don't require network stats, remove that line from the compose file and map the port manually.
 
 > **Note**: If disk I/O stats are missing or incorrect, try using the `FILESYSTEM` environment variable ([instructions here](#finding-the-correct-filesystem)). Check agent logs to see the current device being used.
 
@@ -94,25 +94,32 @@ PORT=45876 KEY="{PASTE_YOUR_KEY}" ./beszel-agent
 
 Use `./beszel update` and `./beszel-agent update` to update to the latest version.
 
-## Environment Variables
+## Environment variables
 
 ### Hub
 
-| Name                    | Default | Description                      |
-| ----------------------- | ------- | -------------------------------- |
-| `DISABLE_PASSWORD_AUTH` | false   | Disables password authentication |
+| Name                    | Default | Description                                                                                                                                 |
+| ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `CSP`                   | unset   | Adds a [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) header with this value. |
+| `DISABLE_PASSWORD_AUTH` | false   | Disables password authentication.                                                                                                           |
 
 ### Agent
 
-| Name                | Default | Description                                                                              |
-| ------------------- | ------- | ---------------------------------------------------------------------------------------- |
-| `DOCKER_HOST`       | unset   | Overrides the docker host (docker.sock) if using a proxy.[^socket]                       |
-| `EXTRA_FILESYSTEMS` | unset   | See [Monitoring additional disks / partitions](#monitoring-additional-disks--partitions) |
-| `FILESYSTEM`        | unset   | Device or partition to use for root disk I/O stats.                                      |
-| `KEY`               | unset   | Public SSH key to use for authentication. Provided in hub.                               |
-| `PORT`              | 45876   | Port or address:port to listen on.                                                       |
+| Name                | Default | Description                                                                                                               |
+| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `DOCKER_HOST`       | unset   | Overrides the docker host (docker.sock) if using a proxy.[^socket]                                                        |
+| `EXTRA_FILESYSTEMS` | unset   | See [Monitoring additional disks, partitions, or remote mounts](#monitoring-additional-disks-partitions-or-remote-mounts) |
+| `FILESYSTEM`        | unset   | Device, partition, or mount point to use for root disk stats.                                                             |
+| `KEY`               | unset   | Public SSH key to use for authentication. Provided in hub.                                                                |
+| `LOG_LEVEL`         | info    | Logging level. Valid values: "debug", "info", "warn", "error".                                                            |
+| `MEM_CALC`          | unset   | Overrides the default memory calculation.[^memcalc]                                                                       |
+| `NICS`              | unset   | Whitelist of network interfaces to monitor for bandwidth chart.                                                           |
+| `PORT`              | 45876   | Port or address:port to listen on.                                                                                        |
+| `SENSORS`           | unset   | Whitelist of temperature sensors to monitor.                                                                              |
+| `SYS_SENSORS`       | unset   | Overrides sys path for sensors. See [#160](https://github.com/henrygd/beszel/discussions/160).                            |
 
 [^socket]: Beszel only needs access to read container information. For [linuxserver/docker-socket-proxy](https://github.com/linuxserver/docker-socket-proxy) you would set `CONTAINERS=1`.
+[^memcalc]: The default value for used memory is based on gopsutil's [Used](https://pkg.go.dev/github.com/shirou/gopsutil/v4@v4.24.6/mem#VirtualMemoryStat) calculation, which should align fairly closely with `free`. Set `MEM_CALC` to `htop` to align with htop's calculation.
 
 ## OAuth / OIDC Setup
 
@@ -145,20 +152,20 @@ Visit the "Auth providers" page to enable your provider. The redirect / callback
 - Twitter
 - VK
 - Yandex
+
 </details>
 
-## Monitoring additional disks / partitions
+## Monitoring additional disks, partitions, or remote mounts
 
-> [!NOTE]
-> This feature is new and has been tested on a limited number of systems. Please report any issues.
-
-You can configure the agent to monitor the usage and I/O of more than one disk or partition. The approach differs depending on the deployment method.
+The method for adding additional disks differs depending on your deployment method.
 
 Use `lsblk` to find the names and mount points of your partitions. If you have trouble, check the agent logs.
 
+> Note: The charts will use the name of the device or partition if available, and fall back to the folder name. You will not get I/O stats for network mounted drives.
+
 ### Docker
 
-Mount a folder from the partition's filesystem in the container's `/extra-filesystems` directory, like the example below. The charts will use the name of the device or partition, not the name of the folder.
+Mount a folder from the target filesystem in the container's `/extra-filesystems` directory. For example:
 
 ```yaml
 volumes:
@@ -168,10 +175,10 @@ volumes:
 
 ### Binary
 
-Set the `EXTRA_FILESYSTEMS` environment variable to a comma-separated list of devices or partitions to monitor. For example:
+Set the `EXTRA_FILESYSTEMS` environment variable to a comma-separated list of devices, partitions, or mount points to monitor. For example:
 
 ```bash
-EXTRA_FILESYSTEMS="sdb,sdc1,mmcblk0"
+EXTRA_FILESYSTEMS="sdb,sdc1,mmcblk0,/mnt/network-share"
 ```
 
 ## REST API
@@ -180,29 +187,27 @@ Because Beszel is built on PocketBase, you can use the PocketBase [web APIs](htt
 
 ## Security
 
-The hub and agent communicate over SSH, so they don't need to be exposed to the internet. And the connection won't break if you put your own auth gateway, such as Authelia, in front of the hub.
+The hub and agent communicate over SSH, so they don't need to be exposed to the internet. Even if you place an external auth gateway, such as Authelia, in front of the hub, it won't disrupt or break the connection between the hub and agent.
 
 When the hub is started for the first time, it generates an ED25519 key pair.
 
-The agent's SSH server is configured to accept connections only using this key. It does not provide a pseudo-terminal or accept input, so it's not possible to execute commands on the agent even if your private key is compromised.
+The agent's SSH server is configured to accept connections using this key only. It does not provide a pseudo-terminal or accept input, so it's impossible to execute commands on the agent even if your private key is compromised.
 
 ## User roles
 
 ### Admin
 
-Assumed to have an admin account in PocketBase, so links to backups, SMTP settings, etc., are shown in the hub.
+Admins have access to additional links in the hub, such as backups, SMTP settings, etc. The first user created is automatically an admin and can log into PocketBase.
 
-The first user created automatically becomes an admin and can log into PocketBase.
-
-Please note that changing a user's role will not create a PocketBase admin account for them. If you want to do that, go to Settings > Admins in PocketBase and add them there.
+Changing a user's role does not create a PocketBase admin account for them. To do that, go to Settings > Admins in PocketBase and add them manually.
 
 ### User
 
-Can create their own systems and alerts. Links to PocketBase settings are not shown in the hub.
+Users can create their own systems and alerts. Links to PocketBase settings are not shown in the hub.
 
 ### Read only
 
-Cannot create systems, but can view any system that has been shared with them by an admin. Can create alerts.
+Read-only users cannot create systems but can view any system shared with them by an admin and create alerts.
 
 ## FAQ / Troubleshooting
 
@@ -210,44 +215,44 @@ Cannot create systems, but can view any system that has been shared with them by
 
 Assuming the agent is running, the connection is probably being blocked by a firewall. You have two options:
 
-1. Add an inbound rule to the agent system's firewall(s) to allow TCP connections to the port. Check any active firewalls, like iptables, and in your cloud provider account if applicable.
-2. Alternatively, software like [Cloudflare Tunnel](https://www.cloudflare.com/products/tunnel/), [WireGuard](https://www.wireguard.com/), or [Tailscale](https://tailscale.com/) can be used to securely bypass your firewall.
+1. Add an inbound rule to the agent system's firewall(s) to allow TCP connections to the port. Check any active firewalls, like iptables, and your cloud provider's firewall settings if applicable.
+2. Alternatively, use software like [Cloudflare Tunnel](https://www.cloudflare.com/products/tunnel/), [WireGuard](https://www.wireguard.com/), or [Tailscale](https://tailscale.com/) to securely bypass your firewall.
 
-Connectivity can be tested by running `telnet <agent-ip> <port>`.
+You can test connectivity by running `telnet <agent-ip> <port>`.
 
 ### Connecting the hub and agent on the same system using Docker
 
-If using host network mode for the agent but not the hub, you can add your system using the hostname `host.docker.internal`, which resolves to the internal IP address used by the host. See [example docker-compose.yml](/supplemental/docker/same-system/docker-compose.yml).
+If using host network mode for the agent but not the hub, add your system using the hostname `host.docker.internal`, which resolves to the internal IP address used by the host. See the [example docker-compose.yml](/supplemental/docker/same-system/docker-compose.yml).
 
-If using host network for both, you can use `localhost` as the hostname.
+If using host network mode for both, you can use `localhost` as the hostname.
 
-Otherwise you can use the agent's `container_name` as the hostname if both are in the same docker network.
+Otherwise, use the agent's `container_name` as the hostname if both are in the same Docker network.
 
 ### Finding the correct filesystem
 
-The filesystem / device / partition to use for disk I/O stats is specified in the `FILESYSTEM` environment variable.
+Specify the filesystem/device/partition for root disk stats using the `FILESYSTEM` environment variable.
 
-If it's not set, the agent will try to find the partition mounted on `/` and use that. This doesn't seem to work in a container, so it's recommended to set this value. One of the following methods should work (you usually want the option mounted on `/`):
+If not set, the agent will try to find the partition mounted on `/` and use that. This may not work correctly in a container, so it's recommended to set this value. Use one of the following methods to find the correct filesystem:
 
-- Run `lsblk` and choose an option under "NAME"
-- Run `df -h` and choose an option under "Filesystem"
-- Run `sudo fdisk -l` and choose an option under "Device"
+- Run `lsblk` and choose an option under "NAME."
+- Run `df -h` and choose an option under "Filesystem."
+- Run `sudo fdisk -l` and choose an option under "Device."
 
 ### Docker container charts are empty or missing
 
-If container charts show empty data, or don't show up at all, you may need to enable cgroup memory accounting. To verify, run `docker stats`. If that also shows zero memory usage, follow this guide to fix:
+If container charts show empty data or don't appear at all, you may need to enable cgroup memory accounting. To verify, run `docker stats`. If that shows zero memory usage, follow this guide to fix the issue:
 
-https://akashrajpurohit.com/blog/resolving-missing-memory-stats-in-docker-stats-on-raspberry-pi/
+<https://akashrajpurohit.com/blog/resolving-missing-memory-stats-in-docker-stats-on-raspberry-pi/>
 
-### Docker containers are not populating reliably
+### Docker Containers Are Not Populating Reliably
 
-Try upgrading your docker version on the agent system. I had this issue on a machine running version 24. It was fixed by upgrading to version 27.
+Try upgrading your Docker version on the agent system. This issue was observed on a machine running version 24 and was resolved by upgrading to version 27.
 
 ### Month / week records are not populating reliably
 
-Records for longer time periods are made by averaging stats from the shorter time periods. They require the agent to be running uninterrupted for long enough to get a full set of data.
+Records for longer time periods are created by averaging stats from shorter periods. The agent must run uninterrupted for a full set of data to populate these records.
 
-If you pause / unpause the agent for longer than one minute, the data will be incomplete and the timing for the current interval will reset.
+Pausing/unpausing the agent for longer than one minute will result in incomplete data, resetting the timing for the current interval.
 
 ## Compiling
 
@@ -294,3 +299,7 @@ GOOS=freebsd GOARCH=arm64 CGO_ENABLED=0 go build -ldflags "-w -s" .
 ```
 
 You can see a list of valid options by running `go tool dist list`.
+
+## License
+
+Beszel is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

supplemental/guides/systemd.md

@@ -8,6 +8,8 @@ There are two scripts, one for the hub and one for the agent. You can run either
 
 The install script creates a dedicated user for the service (`beszel`), downloads the latest release, and installs the service.
 
+If you need to edit the service -- for instance, to change an environment variable -- you can edit the file(s) in `/etc/systemd/system/`. Then reload the systemd daemon and restart the service.
+
 > [!NOTE]
 > You need system administrator privileges to run the install script. If you encounter a problem, please [open an issue](https://github.com/henrygd/beszel/issues/new).
 
@@ -71,6 +73,8 @@ sudo /opt/beszel-agent/beszel-agent update && sudo systemctl restart beszel-agen
 
 ## Manual install
 
+### Hub
+
 1. Create the system service at `/etc/systemd/system/beszel.service`
 
 ```bash
@@ -97,9 +101,7 @@ sudo systemctl enable beszel.service
 sudo systemctl start beszel.service
 ```
 
-## Run the agent as a system service (Linux)
-
-This runs the agent in the background continuously using systemd.
+### Agent
 
 1. Create the system service at `/etc/systemd/system/beszel-agent.service`
 
@@ -112,6 +114,7 @@ After=network.target
 # update the values in curly braces below (remove the braces)
 Environment="PORT={PASTE_YOUR_PORT_HERE}"
 Environment="KEY={PASTE_YOUR_KEY_HERE}"
+# Environment="EXTRA_FILESYSTEMS={sdb}"
 ExecStart={/path/to/directory}/beszel-agent
 User={YOUR_USERNAME}
 Restart=always

supplemental/scripts/install-agent.sh

@@ -106,6 +106,7 @@ After=network.target
 [Service]
 Environment="PORT=$PORT"
 Environment="KEY=$KEY"
+# Environment="EXTRA_FILESYSTEMS=sdb"
 ExecStart=/opt/beszel-agent/beszel-agent
 User=beszel
 Restart=always