refactor: add subscribe / unsubscribe to alertManager

beszel/site/src/components/routes/settings/tokens-fingerprints.tsx

@@ -292,11 +292,11 @@ const SectionTable = memo(({ fingerprints = [] }: { fingerprints: FingerprintRec
 				<TableBody className="whitespace-pre">
 					{fingerprints.map((fingerprint, i) => (
 						<TableRow key={i}>
-							<TableCell className="font-medium ps-5 py-2.5">{fingerprint.expand.system.name}</TableCell>
-							<TableCell className="font-mono text-[0.95em] py-2.5">{fingerprint.token}</TableCell>
-							<TableCell className="font-mono text-[0.95em] py-2.5">{fingerprint.fingerprint}</TableCell>
+							<TableCell className="font-medium ps-5 py-2">{fingerprint.expand.system.name}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.token}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.fingerprint}</TableCell>
 							{!isReadOnly && (
-								<TableCell className="py-2.5 px-4 xl:px-2">
+								<TableCell className="py-2 px-4 xl:px-2">
 									<ActionsButtonTable fingerprint={fingerprint} />
 								</TableCell>
 							)}

beszel/site/src/lib/utils.ts

@@ -537,6 +537,7 @@ export const getSystemNameFromId = (() => {
 /** Helper to manage user alerts */
 export const alertManager = (() => {
 	const collection = pb.collection<AlertRecord>("alerts")
+	let unsub: () => void
 
 	/** Fields to fetch from alerts collection */
 	const fields = "id,name,system,value,min,triggered"
@@ -597,17 +598,29 @@ export const alertManager = (() => {
 		}
 	})()
 
-	collection.subscribe("*", batchUpdate, { fields })
+	async function subscribe() {
+		unsub = await collection.subscribe("*", batchUpdate, { fields })
+	}
+
+	function unsubscribe() {
+		unsub?.()
+	}
+
+	async function refresh() {
+		const records = await fetchAlerts()
+		add(records)
+	}
 
 	return {
 		/** Add alerts to store */
 		add,
 		/** Remove alerts from store */
 		remove,
+		/** Subscribe to alerts */
+		subscribe,
+		/** Unsubscribe from alerts */
+		unsubscribe,
 		/** Refresh alerts with latest data from hub */
-		async refresh() {
-			const records = await fetchAlerts()
-			add(records)
-		},
+		refresh,
 	}
 })()

beszel/site/src/main.tsx

@@ -38,10 +38,17 @@ const App = memo(() => {
 		})
 		// get servers / alerts / settings
 		updateUserSettings()
-		// get alerts after system list is loaded
-		updateSystemList().then(alertManager.refresh)
+		// need to get system list before alerts
+		updateSystemList()
+			// get alerts
+			.then(alertManager.refresh)
+			// subscribe to new alert updates
+			.then(alertManager.subscribe)
 
-		return () => updateFavicon("favicon.svg")
+		return () => {
+			updateFavicon("favicon.svg")
+			alertManager.unsubscribe()
+		}
 	}, [])
 
 	// update favicon
@@ -54,7 +61,8 @@ const App = memo(() => {
 				if (system.status === SystemStatus.Down) {
 					updateFavicon("favicon-red.svg")
 					return
-				} else if (system.status === SystemStatus.Up) {
+				} 
+				if (system.status === SystemStatus.Up) {
 					up = true
 				}
 			}