diff --git a/beszel/site/.prettierrc b/beszel/site/.prettierrc new file mode 100644 index 0000000..e255148 --- /dev/null +++ b/beszel/site/.prettierrc @@ -0,0 +1,8 @@ +{ + "trailingComma": "es5", + "useTabs": true, + "tabWidth": 2, + "semi": false, + "singleQuote": false, + "printWidth": 120 +} diff --git a/beszel/site/components.json b/beszel/site/components.json index 5b4a89e..b433aac 100644 --- a/beszel/site/components.json +++ b/beszel/site/components.json @@ -1,17 +1,17 @@ { - "$schema": "https://ui.shadcn.com/schema.json", - "style": "default", - "rsc": false, - "tsx": true, - "tailwind": { - "config": "tailwind.config.js", - "css": "src/index.css", - "baseColor": "gray", - "cssVariables": true, - "prefix": "" - }, - "aliases": { - "components": "@/components", - "utils": "@/lib/utils" - } -} \ No newline at end of file + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/index.css", + "baseColor": "gray", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} diff --git a/beszel/site/postcss.config.js b/beszel/site/postcss.config.js index 2e7af2b..1a52624 100644 --- a/beszel/site/postcss.config.js +++ b/beszel/site/postcss.config.js @@ -1,6 +1,6 @@ export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, } diff --git a/beszel/site/src/components/add-system.tsx b/beszel/site/src/components/add-system.tsx index c0892ec..dce8408 100644 --- a/beszel/site/src/components/add-system.tsx +++ b/beszel/site/src/components/add-system.tsx @@ -1,4 +1,4 @@ -import { Button } from '@/components/ui/button' +import { Button } from "@/components/ui/button" import { Dialog, DialogContent, @@ -7,19 +7,19 @@ import { DialogHeader, DialogTitle, DialogTrigger, -} from '@/components/ui/dialog' -import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' +} from "@/components/ui/dialog" +import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" -import { Input } from '@/components/ui/input' -import { Label } from '@/components/ui/label' -import { $publicKey, pb } from '@/lib/stores' -import { Copy, PlusIcon } from 'lucide-react' -import { useState, useRef, MutableRefObject } from 'react' -import { useStore } from '@nanostores/react' -import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils' -import { navigate } from './router' -import { useTranslation } from 'react-i18next' +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { $publicKey, pb } from "@/lib/stores" +import { Copy, PlusIcon } from "lucide-react" +import { useState, useRef, MutableRefObject } from "react" +import { useStore } from "@nanostores/react" +import { cn, copyToClipboard, isReadOnlyUser } from "@/lib/utils" +import { navigate } from "./router" +import { useTranslation } from "react-i18next" export function AddSystemButton({ className }: { className?: string }) { const { t } = useTranslation() @@ -58,8 +58,8 @@ export function AddSystemButton({ className }: { className?: string }) { data.users = pb.authStore.model!.id try { setOpen(false) - await pb.collection('systems').create(data) - navigate('/') + await pb.collection("systems").create(data) + navigate("/") // console.log(record) } catch (e) { console.log(e) @@ -71,73 +71,64 @@ export function AddSystemButton({ className }: { className?: string }) { - {t('add_system.add_new_system')} + {t("add_system.add_new_system")} Docker - {t('add_system.binary')} + {t("add_system.binary")} {/* Docker */} - - {t('add_system.dialog_des_1')}{' '} - docker-compose.yml{' '} - {t('add_system.dialog_des_2')} + + {t("add_system.dialog_des_1")} docker-compose.yml{" "} + {t("add_system.dialog_des_2")} {/* Binary */} - - {t('add_system.dialog_des_1')}{' '} - install command{' '} - {t('add_system.dialog_des_2')} + + {t("add_system.dialog_des_1")} install command{" "} + {t("add_system.dialog_des_2")}
- +
@@ -145,7 +136,7 @@ export function AddSystemButton({ className }: { className?: string }) { -

{t('add_system.click_to_copy')}

+

{t("add_system.click_to_copy")}

 @@ -162,27 +153,19 @@ export function AddSystemButton({ className }: { className?: string }) { {/* Docker */} - - + {/* Binary */} - - + diff --git a/beszel/site/src/components/alerts/alert-button.tsx b/beszel/site/src/components/alerts/alert-button.tsx index ecdc569..660775a 100644 --- a/beszel/site/src/components/alerts/alert-button.tsx +++ b/beszel/site/src/components/alerts/alert-button.tsx @@ -1,6 +1,6 @@ -import { memo, useState } from 'react' -import { useStore } from '@nanostores/react' -import { $alerts, $systems } from '@/lib/stores' +import { memo, useState } from "react" +import { useStore } from "@nanostores/react" +import { $alerts, $systems } from "@/lib/stores" import { Dialog, DialogTrigger, @@ -8,16 +8,16 @@ import { 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' -import { useTranslation } from 'react-i18next' +} 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" +import { useTranslation } from "react-i18next" export default memo(function AlertsButton({ system }: { system: SystemRecord }) { const alerts = useStore($alerts) @@ -29,16 +29,10 @@ export default memo(function AlertsButton({ system }: { system: SystemRecord }) return ( - @@ -57,7 +51,7 @@ function TheContent({ }) { const { t } = useTranslation() - const [overwriteExisting, setOverwriteExisting] = useState(false) + const [overwriteExisting, setOverwriteExisting] = useState(false) const systems = $systems.get() const data = Object.keys(alertInfo).map((key) => { @@ -72,13 +66,13 @@ function TheContent({ return ( <> - {t('alerts.title')} + {t("alerts.title")} - {t('alerts.subtitle_1')}{' '} + {t("alerts.subtitle_1")}{" "} - {t('alerts.notification_settings')} - {' '} - {t('alerts.subtitle_2')} + {t("alerts.notification_settings")} + {" "} + {t("alerts.subtitle_2")} @@ -89,7 +83,7 @@ function TheContent({ - {t('all_systems')} + {t("all_systems")} @@ -110,17 +104,11 @@ function TheContent({ checked={overwriteExisting} onCheckedChange={setOverwriteExisting} /> - {t('alerts.overwrite_existing_alerts')} + {t("alerts.overwrite_existing_alerts")}
{data.map((d) => ( - + ))}
diff --git a/beszel/site/src/components/alerts/alerts-system.tsx b/beszel/site/src/components/alerts/alerts-system.tsx index cc8c30e..aca1671 100644 --- a/beszel/site/src/components/alerts/alerts-system.tsx +++ b/beszel/site/src/components/alerts/alerts-system.tsx @@ -1,12 +1,12 @@ -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' -import { useTranslation } from 'react-i18next' +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" +import { useTranslation } from "react-i18next" interface AlertData { checked?: boolean @@ -18,15 +18,15 @@ interface AlertData { system: SystemRecord } -const Slider = lazy(() => import('@/components/ui/slider')) +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', + title: "Failed to update alert", + description: "Please check logs for more details.", + variant: "destructive", }) export function SystemAlert({ @@ -43,11 +43,11 @@ export function SystemAlert({ data.updateAlert = async (checked: boolean, value: number, min: number) => { try { if (alert && !checked) { - await pb.collection('alerts').delete(alert.id) + await pb.collection("alerts").delete(alert.id) } else if (alert && checked) { - await pb.collection('alerts').update(alert.id, { value, min, triggered: false }) + await pb.collection("alerts").update(alert.id, { value, min, triggered: false }) } else if (checked) { - pb.collection('alerts').create({ + pb.collection("alerts").create({ system: system.id, user: pb.authStore.model!.id, name: data.key, @@ -76,7 +76,7 @@ export function SystemAlertGlobal({ systems, }: { data: AlertData - overwrite: boolean | 'indeterminate' + overwrite: boolean | "indeterminate" alerts: AlertRecord[] systems: SystemRecord[] }) { @@ -111,9 +111,7 @@ export function SystemAlertGlobal({ continue } // find matching existing alert - const existingAlert = alerts.find( - (alert) => alert.system === system.id && data.key === alert.name - ) + 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) @@ -128,13 +126,13 @@ export function SystemAlertGlobal({ if (existingAlert) { // console.log('updating', system.name) queue - .add(() => pb.collection('alerts').update(existingAlert.id, recordData, requestOptions)) + .add(() => pb.collection("alerts").update(existingAlert.id, recordData, requestOptions)) .catch(failedUpdateToast) } else { // console.log('creating', system.name) queue .add(() => - pb.collection('alerts').create( + pb.collection("alerts").create( { system: system.id, user: pb.authStore.model!.id, @@ -148,7 +146,7 @@ export function SystemAlertGlobal({ } } else if (existingAlert) { // console.log('deleting', system.name) - queue.add(() => pb.collection('alerts').delete(existingAlert.id)).catch(failedUpdateToast) + queue.add(() => pb.collection("alerts").delete(existingAlert.id)).catch(failedUpdateToast) } } systemsWithExistingAlerts.current.populatedSet = true @@ -162,7 +160,7 @@ function AlertContent({ data }: { data: AlertData }) { const { key } = data - const hasSliders = !('single' in data.alert) + const hasSliders = !("single" in data.alert) const [checked, setChecked] = useState(data.checked || false) const [min, setMin] = useState(data.min || (hasSliders ? 10 : 0)) @@ -175,24 +173,21 @@ function AlertContent({ data }: { data: AlertData }) { const Icon = alertInfo[key].icon - const updateAlert = (c?: boolean) => - data.updateAlert?.(c ?? checked, newValue.current, newMin.current) + const updateAlert = (c?: boolean) => data.updateAlert?.(c ?? checked, newValue.current, newMin.current) return (