alert updates

site/src/components/command-palette.tsx

@@ -21,12 +21,12 @@ import {
 } from '@/components/ui/command'
 import { useEffect, useState } from 'react'
 import { useStore } from '@nanostores/react'
-import { $servers, navigate } from '@/lib/stores'
+import { $systems, navigate } from '@/lib/stores'
 import { isAdmin } from '@/lib/utils'
 
 export default function CommandPalette() {
 	const [open, setOpen] = useState(false)
-	const servers = useStore($servers)
+	const servers = useStore($systems)
 
 	useEffect(() => {
 		const down = (e: KeyboardEvent) => {

site/src/components/routes/server.tsx

@@ -1,4 +1,4 @@
-import { $servers, pb } from '@/lib/stores'
+import { $systems, pb } from '@/lib/stores'
 import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
 import { Suspense, lazy, useEffect, useState } from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
@@ -39,7 +39,7 @@ function timestampToBrowserTime(timestamp: string) {
 // }
 
 export default function ServerDetail({ name }: { name: string }) {
-	const servers = useStore($servers)
+	const servers = useStore($systems)
 	const [server, setServer] = useState({} as SystemRecord)
 	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
 
@@ -107,7 +107,7 @@ export default function ServerDetail({ name }: { name: string }) {
 	}, [serverStats])
 
 	useEffect(() => {
-		if ($servers.get().length === 0) {
+		if ($systems.get().length === 0) {
 			// console.log('skipping')
 			return
 		}

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

@@ -55,23 +55,13 @@ import {
 	PauseCircleIcon,
 	PlayCircleIcon,
 	Trash2Icon,
-	BellIcon,
 } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
-import { $servers, pb, navigate } from '@/lib/stores'
+import { useMemo, useState } from 'react'
+import { $systems, pb, navigate } from '@/lib/stores'
 import { useStore } from '@nanostores/react'
 import { AddServerButton } from '../add-server'
 import { cn, copyToClipboard, isAdmin } from '@/lib/utils'
-import {
-	Dialog,
-	DialogContent,
-	DialogTrigger,
-	DialogDescription,
-	DialogTitle,
-	DialogHeader,
-} from '@/components/ui/dialog'
-import { Switch } from '@/components/ui/switch'
-import { Separator } from '../ui/separator'
+import AlertsButton from '../table-alerts'
 
 function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	const val = info.getValue() as number
@@ -106,14 +96,10 @@ function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Ico
 }
 
 export default function SystemsTable() {
-	const data = useStore($servers)
+	const data = useStore($systems)
 	const [sorting, setSorting] = useState<SortingState>([])
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 
-	// useEffect(() => {
-	// 	console.log('servers', data)
-	// }, [data])
-
 	const columns: ColumnDef<SystemRecord>[] = useMemo(() => {
 		return [
 			{
@@ -171,49 +157,7 @@ export default function SystemsTable() {
 					const { id, name, status, host } = row.original
 					return (
 						<div className={'flex justify-end items-center gap-1'}>
-							<Dialog>
-								<DialogTrigger asChild>
-									<Button variant="ghost" size={'icon'} aria-label="Alerts" data-nolink>
-										<BellIcon className="h-[1.2em] w-[1.2em] pointer-events-none" />
-									</Button>
-								</DialogTrigger>
-								<DialogContent>
-									<DialogHeader>
-										<DialogTitle className="mb-1">Alerts for {name}</DialogTitle>
-										{isAdmin() && (
-											<DialogDescription>
-												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.
-											</DialogDescription>
-										)}
-									</DialogHeader>
-									<DialogDescription>
-										<div className="space-y-2 flex flex-row items-center justify-between rounded-lg border p-4">
-											<div className="space-y-0.5">
-												<label
-													className="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-base"
-													htmlFor=":r3m:-form-item"
-												>
-													Status change
-												</label>
-												<p
-													id=":r3m:-form-item-description"
-													className="text-[0.8rem] text-muted-foreground"
-												>
-													Triggers when system status switches between up and down.
-												</p>
-											</div>
-											<Switch />
-										</div>
-									</DialogDescription>
-								</DialogContent>
-							</Dialog>
+							<AlertsButton system={row.original} />
 							<AlertDialog>
 								<DropdownMenu>
 									<DropdownMenuTrigger asChild>

site/src/components/table-alerts.tsx

@@ -0,0 +1,120 @@
+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 { useMemo, useState } from 'react'
+import { toast } from './ui/use-toast'
+
+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>
+				<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>
+						)}
+						Webhook delivery and more alert options will be added in the future.
+					</DialogDescription>
+				</DialogHeader>
+				<Alert system={system} alerts={systemAlerts} />
+			</DialogContent>
+		</Dialog>
+	)
+}
+
+function Alert({ 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="status"
+			className="space-y-2 flex flex-row items-center justify-between rounded-lg border p-4 cursor-pointer"
+		>
+			<div className="grid gap-0.5 select-none">
+				<p className="font-medium text-base">System status</p>
+				<span
+					id=":r3m:-form-item-description"
+					className="block text-[0.8rem] text-foreground opacity-80"
+				>
+					Triggers when status switches between up and down.
+				</span>
+			</div>
+			<Switch
+				id="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) {
+						toast({
+							title: 'Failed to update alert',
+							description: 'Please check logs for more details.',
+							variant: 'destructive',
+						})
+					} finally {
+						setPendingChange(false)
+					}
+				}}
+			/>
+		</label>
+	)
+}