mirror of
https://github.com/fankes/beszel.git
synced 2025-10-20 10:19:27 +08:00
234 lines
6.5 KiB
Go
234 lines
6.5 KiB
Go
import './index.css'
|
|
import React, { Suspense, lazy, useEffect } from 'react'
|
|
import ReactDOM from 'react-dom/client'
|
|
import Home from './components/routes/home.tsx'
|
|
import { ThemeProvider } from './components/theme-provider.tsx'
|
|
import { $alerts, $authenticated, $updatedSystem, $systems, pb } from './lib/stores.ts'
|
|
import { ModeToggle } from './components/mode-toggle.tsx'
|
|
import {
|
|
cn,
|
|
isAdmin,
|
|
updateAlerts,
|
|
updateFavicon,
|
|
updateRecordList,
|
|
updateSystemList,
|
|
} from './lib/utils.ts'
|
|
import { buttonVariants } from './components/ui/button.tsx'
|
|
import {
|
|
DatabaseBackupIcon,
|
|
GithubIcon,
|
|
LockKeyholeIcon,
|
|
LogOutIcon,
|
|
LogsIcon,
|
|
ServerIcon,
|
|
UserIcon,
|
|
UsersIcon,
|
|
} from 'lucide-react'
|
|
import { useStore } from '@nanostores/react'
|
|
import { Toaster } from './components/ui/toaster.tsx'
|
|
import { Logo } from './components/logo.tsx'
|
|
import {
|
|
TooltipProvider,
|
|
Tooltip,
|
|
TooltipTrigger,
|
|
TooltipContent,
|
|
} from '@/components/ui/tooltip.tsx'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuLabel,
|
|
} from './components/ui/dropdown-menu.tsx'
|
|
import { AlertRecord, SystemRecord } from './types'
|
|
import { $router, Link, navigate } from './components/router.tsx'
|
|
import ServerDetail from './components/routes/system.tsx'
|
|
|
|
// const ServerDetail = lazy(() => import('./components/routes/system.tsx'))
|
|
const CommandPalette = lazy(() => import('./components/command-palette.tsx'))
|
|
const LoginPage = lazy(() => import('./components/login/login.tsx'))
|
|
|
|
const App = () => {
|
|
const page = useStore($router)
|
|
const authenticated = useStore($authenticated)
|
|
const systems = useStore($systems)
|
|
|
|
useEffect(() => {
|
|
// change auth store on auth change
|
|
pb.authStore.onChange(() => {
|
|
$authenticated.set(pb.authStore.isValid)
|
|
})
|
|
// get servers / alerts
|
|
updateSystemList()
|
|
updateAlerts()
|
|
// subscribe to real time updates for systems / alerts
|
|
pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
|
|
updateRecordList(e, $systems)
|
|
$updatedSystem.set(e.record)
|
|
})
|
|
pb.collection<AlertRecord>('alerts').subscribe('*', (e) => {
|
|
updateRecordList(e, $alerts)
|
|
})
|
|
return () => {
|
|
pb.collection('systems').unsubscribe('*')
|
|
pb.collection('alerts').unsubscribe('*')
|
|
}
|
|
}, [])
|
|
|
|
// update favicon
|
|
useEffect(() => {
|
|
if (!authenticated || !systems.length) {
|
|
updateFavicon('favicon.svg')
|
|
} else {
|
|
let up = false
|
|
for (const system of systems) {
|
|
if (system.status === 'down') {
|
|
updateFavicon('favicon-red.svg')
|
|
return () => updateFavicon('favicon.svg')
|
|
} else if (system.status === 'up') {
|
|
up = true
|
|
}
|
|
}
|
|
updateFavicon(up ? 'favicon-green.svg' : 'favicon.svg')
|
|
return () => updateFavicon('favicon.svg')
|
|
}
|
|
return () => {
|
|
updateFavicon('favicon.svg')
|
|
}
|
|
}, [authenticated, systems])
|
|
|
|
if (!page) {
|
|
return <h1 className="text-3xl text-center my-14">404</h1>
|
|
} else if (page.path === '/') {
|
|
return <Home />
|
|
} else if (page.route === 'server') {
|
|
return <ServerDetail name={page.params.name} />
|
|
}
|
|
}
|
|
|
|
const Layout = () => {
|
|
const authenticated = useStore($authenticated)
|
|
|
|
if (!authenticated) {
|
|
return (
|
|
<Suspense>
|
|
<LoginPage />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="container">
|
|
<div className="flex items-center h-16 bg-card px-6 border bt-0 rounded-md my-4">
|
|
<Link
|
|
href="/"
|
|
aria-label="Home"
|
|
className={'p-2 pl-0'}
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
navigate('/')
|
|
}}
|
|
>
|
|
<Logo className="h-[1.15em] fill-foreground" />
|
|
</Link>
|
|
|
|
<div className={'flex ml-auto'}>
|
|
<ModeToggle />
|
|
<TooltipProvider delayDuration={300}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<a
|
|
title={'Github'}
|
|
aria-label="Github repo"
|
|
href={'https://github.com/henrygd/beszel'}
|
|
target="_blank"
|
|
className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
|
|
>
|
|
<GithubIcon className="h-[1.2rem] w-[1.2rem]" />
|
|
</a>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Github Repository</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
aria-label="User Actions"
|
|
className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
|
|
>
|
|
<UserIcon className="h-[1.2rem] w-[1.2rem]" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="min-w-44">
|
|
<DropdownMenuLabel>{pb.authStore.model?.email}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
{isAdmin() && (
|
|
<>
|
|
<DropdownMenuItem asChild>
|
|
<a href="/_/" target="_blank">
|
|
<UsersIcon className="mr-2.5 h-4 w-4" />
|
|
<span>Users</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx" target="_blank">
|
|
<ServerIcon className="mr-2.5 h-4 w-4" />
|
|
<span>Systems</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<a href="/_/#/logs" target="_blank">
|
|
<LogsIcon className="mr-2.5 h-4 w-4" />
|
|
<span>Logs</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<a href="/_/#/settings/backups" target="_blank">
|
|
<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
|
|
<span>Backups</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<a href="/_/#/settings/auth-providers" target="_blank">
|
|
<LockKeyholeIcon className="mr-2.5 h-4 w-4" />
|
|
<span>Auth providers</span>
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
</>
|
|
)}
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuItem onSelect={() => pb.authStore.clear()}>
|
|
<LogOutIcon className="mr-2.5 h-4 w-4" />
|
|
<span>Log out</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="container mb-14 relative">
|
|
<App />
|
|
<Suspense>
|
|
<CommandPalette />
|
|
</Suspense>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('app')!).render(
|
|
<React.StrictMode>
|
|
<ThemeProvider>
|
|
<Layout />
|
|
<Toaster />
|
|
</ThemeProvider>
|
|
</React.StrictMode>
|
|
)
|