add settings page and api route for generating config.yml

beszel/site/src/components/routes/settings/config-yaml.tsx

@@ -0,0 +1,93 @@
+import { isAdmin } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+import { redirectPage } from '@nanostores/router'
+import { $router } from '@/components/router'
+import { AlertCircleIcon, FileSlidersIcon, LoaderCircleIcon } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { pb } from '@/lib/stores'
+import { useState } from 'react'
+import { Textarea } from '@/components/ui/textarea'
+import { toast } from '@/components/ui/use-toast'
+import clsx from 'clsx'
+
+export default function ConfigYaml() {
+	const [configContent, setConfigContent] = useState<string>('')
+	const [isLoading, setIsLoading] = useState(false)
+
+	const ButtonIcon = isLoading ? LoaderCircleIcon : FileSlidersIcon
+
+	async function fetchConfig() {
+		try {
+			setIsLoading(true)
+			const { config } = await pb.send<{ config: string }>('/api/beszel/config-yaml', {})
+			setConfigContent(config)
+		} catch (error: any) {
+			toast({
+				title: 'Error',
+				description: error.message,
+				variant: 'destructive',
+			})
+		} finally {
+			setIsLoading(false)
+		}
+	}
+
+	if (!isAdmin()) {
+		redirectPage($router, 'settings', { name: 'general' })
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">YAML Configuration</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					Export your current systems configuration.
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<div className="space-y-2">
+				<div className="mb-4">
+					<p className="text-sm text-muted-foreground leading-relaxed my-1">
+						Systems may be managed in a{' '}
+						<code className="bg-muted rounded-sm px-1 text-primary">config.yml</code> file inside
+						your data directory.
+					</p>
+					<p className="text-sm text-muted-foreground leading-relaxed">
+						On each restart, systems in the database will be updated to match the systems defined in
+						the file.
+					</p>
+					<Alert className="my-4 border-destructive text-destructive w-auto table md:pr-6">
+						<AlertCircleIcon className="h-4 w-4 stroke-destructive" />
+						<AlertTitle>Caution - potential data loss</AlertTitle>
+						<AlertDescription>
+							<p>
+								Existing systems not defined in <code>config.yml</code> will be deleted. Please make
+								regular backups.
+							</p>
+						</AlertDescription>
+					</Alert>
+				</div>
+				{configContent && (
+					<Textarea
+						autoFocus
+						defaultValue={configContent}
+						spellCheck="false"
+						rows={Math.min(25, configContent.split('\n').length)}
+						className="font-mono whitespace-pre"
+					/>
+				)}
+			</div>
+			<Separator className="my-5" />
+			<Button
+				type="button"
+				className="mt-2 flex items-center gap-1"
+				onClick={fetchConfig}
+				disabled={isLoading}
+			>
+				<ButtonIcon className={clsx('h-4 w-4 mr-0.5', isLoading && 'animate-spin')} />
+				Export configuration
+			</Button>
+		</div>
+	)
+}

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

@@ -5,12 +5,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { useStore } from '@nanostores/react'
 import { $router } from '@/components/router.tsx'
 import { redirectPage } from '@nanostores/router'
-import { BellIcon, SettingsIcon } from 'lucide-react'
+import { BellIcon, FileSlidersIcon, 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'
+import ConfigYaml from './config-yaml.tsx'
+import { isAdmin } from '@/lib/utils.ts'
 
 const sidebarNavItems = [
 	{
@@ -25,6 +27,14 @@ const sidebarNavItems = [
 	},
 ]
 
+if (isAdmin()) {
+	sidebarNavItems.push({
+		title: 'YAML Config',
+		href: '/settings/config',
+		icon: FileSlidersIcon,
+	})
+}
+
 export async function saveSettings(newSettings: Partial<UserSettings>) {
 	try {
 		// get fresh copy of settings
@@ -94,5 +104,7 @@ function SettingsContent({ name }: { name: string }) {
 			return <General userSettings={userSettings} />
 		case 'notifications':
 			return <Notifications userSettings={userSettings} />
+		case 'config':
+			return <ConfigYaml />
 	}
 }

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

@@ -260,7 +260,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 										<AlertDialogTitle>Are you sure you want to delete {name}?</AlertDialogTitle>
 										<AlertDialogDescription>
 											This action cannot be undone. This will permanently delete all current records
-											for <code className={'bg-muted rounded-sm px-1'}>{name}</code> from the
+											for <code className="bg-muted rounded-sm px-1">{name}</code> from the
 											database.
 										</AlertDialogDescription>
 									</AlertDialogHeader>

beszel/site/src/index.css

@@ -48,7 +48,7 @@
 		--muted-foreground: 240 5.03% 64.9%;
 		--accent: 240 3.7% 15.88%;
 		--accent-foreground: 0 0% 98.04%;
-		--destructive: 0 56.48% 42.35%;
+		--destructive: 0 59% 46%;
 		--destructive-foreground: 0 0% 98.04%;
 		--border: 240 2.86% 12%;
 		--input: 240 3.7% 15.88%;