mirror of
https://github.com/fankes/beszel.git
synced 2025-10-20 02:09:28 +08:00
update navbar and home subtitle
* adds search button to navbar * removes need for home.subtitle_2
This commit is contained in:
Henry Dollman
@@ -20,30 +20,34 @@ import {
|
|||||||
CommandSeparator,
|
CommandSeparator,
|
||||||
CommandShortcut,
|
CommandShortcut,
|
||||||
} from '@/components/ui/command'
|
} from '@/components/ui/command'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect } from 'react'
|
||||||
import { useStore } from '@nanostores/react'
|
import { useStore } from '@nanostores/react'
|
||||||
import { $systems } from '@/lib/stores'
|
import { $systems } from '@/lib/stores'
|
||||||
import { isAdmin } from '@/lib/utils'
|
import { isAdmin } from '@/lib/utils'
|
||||||
import { navigate } from './router'
|
import { navigate } from './router'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
export default function CommandPalette() {
|
export default function CommandPalette({
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
}: {
|
||||||
|
open: boolean
|
||||||
|
setOpen: (open: boolean) => void
|
||||||
|
}) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const [open, setOpen] = useState(false)
|
|
||||||
const systems = useStore($systems)
|
const systems = useStore($systems)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const down = (e: KeyboardEvent) => {
|
const down = (e: KeyboardEvent) => {
|
||||||
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
|
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setOpen((open) => !open)
|
setOpen(!open)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('keydown', down)
|
document.addEventListener('keydown', down)
|
||||||
return () => document.removeEventListener('keydown', down)
|
return () => document.removeEventListener('keydown', down)
|
||||||
}, [])
|
}, [open, setOpen])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CommandDialog open={open} onOpenChange={setOpen}>
|
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||||
@@ -75,7 +79,7 @@ export default function CommandPalette() {
|
|||||||
keywords={['home']}
|
keywords={['home']}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
navigate('/')
|
navigate('/')
|
||||||
setOpen((open) => !open)
|
setOpen(false)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<LayoutDashboard className="mr-2 h-4 w-4" />
|
<LayoutDashboard className="mr-2 h-4 w-4" />
|
||||||
@@ -85,7 +89,7 @@ export default function CommandPalette() {
|
|||||||
<CommandItem
|
<CommandItem
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
navigate('/settings/general')
|
navigate('/settings/general')
|
||||||
setOpen((open) => !open)
|
setOpen(false)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SettingsIcon className="mr-2 h-4 w-4" />
|
<SettingsIcon className="mr-2 h-4 w-4" />
|
||||||
@@ -96,7 +100,7 @@ export default function CommandPalette() {
|
|||||||
keywords={['alerts']}
|
keywords={['alerts']}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
navigate('/settings/notifications')
|
navigate('/settings/notifications')
|
||||||
setOpen((open) => !open)
|
setOpen(false)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MailIcon className="mr-2 h-4 w-4" />
|
<MailIcon className="mr-2 h-4 w-4" />
|
||||||
@@ -117,7 +121,7 @@ export default function CommandPalette() {
|
|||||||
{isAdmin() && (
|
{isAdmin() && (
|
||||||
<>
|
<>
|
||||||
<CommandSeparator className="mb-1.5" />
|
<CommandSeparator className="mb-1.5" />
|
||||||
<CommandGroup heading={t("command.admin")}>
|
<CommandGroup heading={t('command.admin')}>
|
||||||
<CommandItem
|
<CommandItem
|
||||||
keywords={['pocketbase']}
|
keywords={['pocketbase']}
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
@@ -127,7 +131,7 @@ export default function CommandPalette() {
|
|||||||
>
|
>
|
||||||
<UsersIcon className="mr-2 h-4 w-4" />
|
<UsersIcon className="mr-2 h-4 w-4" />
|
||||||
<span>{t('user_dm.users')}</span>
|
<span>{t('user_dm.users')}</span>
|
||||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
<CommandShortcut>{t('command.admin')}</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem
|
<CommandItem
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
@@ -137,7 +141,7 @@ export default function CommandPalette() {
|
|||||||
>
|
>
|
||||||
<LogsIcon className="mr-2 h-4 w-4" />
|
<LogsIcon className="mr-2 h-4 w-4" />
|
||||||
<span>{t('user_dm.logs')}</span>
|
<span>{t('user_dm.logs')}</span>
|
||||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
<CommandShortcut>{t('command.admin')}</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem
|
<CommandItem
|
||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
@@ -147,7 +151,7 @@ export default function CommandPalette() {
|
|||||||
>
|
>
|
||||||
<DatabaseBackupIcon className="mr-2 h-4 w-4" />
|
<DatabaseBackupIcon className="mr-2 h-4 w-4" />
|
||||||
<span>{t('user_dm.backups')}</span>
|
<span>{t('user_dm.backups')}</span>
|
||||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
<CommandShortcut>{t('command.admin')}</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem
|
<CommandItem
|
||||||
keywords={['oauth', 'oicd']}
|
keywords={['oauth', 'oicd']}
|
||||||
@@ -158,7 +162,7 @@ export default function CommandPalette() {
|
|||||||
>
|
>
|
||||||
<LockKeyholeIcon className="mr-2 h-4 w-4" />
|
<LockKeyholeIcon className="mr-2 h-4 w-4" />
|
||||||
<span>{t('user_dm.auth_providers')}</span>
|
<span>{t('user_dm.auth_providers')}</span>
|
||||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
<CommandShortcut>{t('command.admin')}</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem
|
<CommandItem
|
||||||
keywords={['email']}
|
keywords={['email']}
|
||||||
@@ -169,7 +173,7 @@ export default function CommandPalette() {
|
|||||||
>
|
>
|
||||||
<MailIcon className="mr-2 h-4 w-4" />
|
<MailIcon className="mr-2 h-4 w-4" />
|
||||||
<span>{t('command.SMTP_settings')}</span>
|
<span>{t('command.SMTP_settings')}</span>
|
||||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
<CommandShortcut>{t('command.admin')}</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export function LangToggle() {
|
|||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant={'ghost'} size="icon" className="hidden 450:flex">
|
<Button variant={'ghost'} size="icon" className="hidden 450:flex">
|
||||||
<LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem]" />
|
<LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem] light:opacity-85" />
|
||||||
<span className="sr-only">Language</span>
|
<span className="sr-only">Language</span>
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|||||||
147
beszel/site/src/components/navbar.tsx
Normal file
147
beszel/site/src/components/navbar.tsx
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
import { useState, lazy, Suspense } from 'react'
|
||||||
|
import { Button, buttonVariants } from '@/components/ui/button'
|
||||||
|
import {
|
||||||
|
DatabaseBackupIcon,
|
||||||
|
LockKeyholeIcon,
|
||||||
|
LogOutIcon,
|
||||||
|
LogsIcon,
|
||||||
|
SearchIcon,
|
||||||
|
ServerIcon,
|
||||||
|
SettingsIcon,
|
||||||
|
UserIcon,
|
||||||
|
UsersIcon,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { TFunction } from 'i18next'
|
||||||
|
import { Link } from './router'
|
||||||
|
import { LangToggle } from './lang-toggle'
|
||||||
|
import { ModeToggle } from './mode-toggle'
|
||||||
|
import { Logo } from './logo'
|
||||||
|
import { pb } from '@/lib/stores'
|
||||||
|
import { cn, isReadOnlyUser, isAdmin } from '@/lib/utils'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuItem,
|
||||||
|
} from '@/components/ui/dropdown-menu'
|
||||||
|
import { AddSystemButton } from './add-system'
|
||||||
|
|
||||||
|
const CommandPalette = lazy(() => import('./command-palette.tsx'))
|
||||||
|
|
||||||
|
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
|
||||||
|
|
||||||
|
export default function Navbar(t: TFunction<'translation', undefined>) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center h-14 md:h-16 bg-card px-4 pr-3 sm:px-6 border bt-0 rounded-md my-4">
|
||||||
|
<Link href="/" aria-label="Home" className={'p-2 pl-0'}>
|
||||||
|
<Logo className="h-[1.3em] fill-foreground" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<SearchButton />
|
||||||
|
|
||||||
|
<div className={'flex ml-auto items-center'}>
|
||||||
|
<LangToggle />
|
||||||
|
<ModeToggle />
|
||||||
|
<Link
|
||||||
|
href="/settings/general"
|
||||||
|
aria-label="Settings"
|
||||||
|
className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
|
||||||
|
>
|
||||||
|
<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
|
||||||
|
</Link>
|
||||||
|
<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={isReadOnlyUser() ? 'end' : 'center'} 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>{t('user_dm.users')}</span>
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx" target="_blank">
|
||||||
|
<ServerIcon className="mr-2.5 h-4 w-4" />
|
||||||
|
<span>{t('systems')}</span>
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<a href="/_/#/logs" target="_blank">
|
||||||
|
<LogsIcon className="mr-2.5 h-4 w-4" />
|
||||||
|
<span>{t('user_dm.logs')}</span>
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<a href="/_/#/settings/backups" target="_blank">
|
||||||
|
<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
|
||||||
|
<span>{t('user_dm.backups')}</span>
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<a href="/_/#/settings/auth-providers" target="_blank">
|
||||||
|
<LockKeyholeIcon className="mr-2.5 h-4 w-4" />
|
||||||
|
<span>{t('user_dm.auth_providers')}</span>
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
<DropdownMenuItem onSelect={() => pb.authStore.clear()}>
|
||||||
|
<LogOutIcon className="mr-2.5 h-4 w-4" />
|
||||||
|
<span>{t('user_dm.log_out')}</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
<AddSystemButton className="ml-2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SearchButton() {
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
|
||||||
|
const Kbd = ({ children }: { children: React.ReactNode }) => (
|
||||||
|
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
|
||||||
|
{children}
|
||||||
|
</kbd>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="hidden md:block text-sm text-muted-foreground px-4 mx-3"
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
|
>
|
||||||
|
<span className="flex items-center">
|
||||||
|
<SearchIcon className="mr-1.5 h-4 w-4" />
|
||||||
|
Search
|
||||||
|
<span className="sr-only">Search</span>
|
||||||
|
<span className="flex items-center ml-3.5">
|
||||||
|
<Kbd>{isMac ? '⌘' : 'Ctrl'}</Kbd>
|
||||||
|
<Kbd>K</Kbd>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
<Suspense>
|
||||||
|
<CommandPalette open={open} setOpen={setOpen} />
|
||||||
|
</Suspense>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -13,8 +13,6 @@ import { useTranslation } from 'react-i18next'
|
|||||||
|
|
||||||
const SystemsTable = lazy(() => import('../systems-table/systems-table'))
|
const SystemsTable = lazy(() => import('../systems-table/systems-table'))
|
||||||
|
|
||||||
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
|
|
||||||
|
|
||||||
export default function () {
|
export default function () {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
@@ -105,18 +103,12 @@ export default function () {
|
|||||||
<div className="grid md:flex gap-3 w-full items-end">
|
<div className="grid md:flex gap-3 w-full items-end">
|
||||||
<div className="px-2 sm:px-1">
|
<div className="px-2 sm:px-1">
|
||||||
<CardTitle className="mb-2.5">{t('all_systems')}</CardTitle>
|
<CardTitle className="mb-2.5">{t('all_systems')}</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>{t('home.subtitle_1')}</CardDescription>
|
||||||
{t('home.subtitle_1')}{' '}
|
|
||||||
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
|
|
||||||
<span className="text-xs">{isMac ? '⌘' : 'Ctrl'}</span>K
|
|
||||||
</kbd>{' '}
|
|
||||||
{t('home.subtitle_2')}
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
</div>
|
||||||
<Input
|
<Input
|
||||||
placeholder={t('filter')}
|
placeholder={t('filter')}
|
||||||
onChange={(e) => setFilter(e.target.value)}
|
onChange={(e) => setFilter(e.target.value)}
|
||||||
className="w-full md:w-56 lg:w-80 ml-auto px-4"
|
className="w-full md:w-56 lg:w-72 ml-auto px-4"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|||||||
@@ -1,178 +1,178 @@
|
|||||||
{
|
{
|
||||||
"all_systems": "All Systems",
|
"all_systems": "All Systems",
|
||||||
"filter": "Filter...",
|
"filter": "Filter...",
|
||||||
"copy": "Copy",
|
"copy": "Copy",
|
||||||
"add": "Add",
|
"add": "Add",
|
||||||
"system": "System",
|
"system": "System",
|
||||||
"systems": "Systems",
|
"systems": "Systems",
|
||||||
"cancel": "Cancel",
|
"cancel": "Cancel",
|
||||||
"continue": "Continue",
|
"continue": "Continue",
|
||||||
"home": {
|
"home": {
|
||||||
"active_alerts": "Active Alerts",
|
"active_alerts": "Active Alerts",
|
||||||
"active_des": "Exceeds {{value}}{{unit}} average in last {{minutes}} min",
|
"active_des": "Exceeds {{value}}{{unit}} average in last {{minutes}} min",
|
||||||
"subtitle_1": "Updated in real time. Press",
|
"subtitle_1": "Updated in real time. Click on a system to view information.",
|
||||||
"subtitle_2": "to open the command palette."
|
"subtitle_2": "to open the command palette."
|
||||||
},
|
},
|
||||||
"systems_table": {
|
"systems_table": {
|
||||||
"system": "System",
|
"system": "System",
|
||||||
"memory": "Memory",
|
"memory": "Memory",
|
||||||
"cpu": "CPU",
|
"cpu": "CPU",
|
||||||
"disk": "Disk",
|
"disk": "Disk",
|
||||||
"net": "Net",
|
"net": "Net",
|
||||||
"agent": "Agent",
|
"agent": "Agent",
|
||||||
"no_systems_found": "No systems found.",
|
"no_systems_found": "No systems found.",
|
||||||
"open_menu": "Open menu",
|
"open_menu": "Open menu",
|
||||||
"resume": "Resume",
|
"resume": "Resume",
|
||||||
"pause": "Pause",
|
"pause": "Pause",
|
||||||
"copy_host": "Copy host",
|
"copy_host": "Copy host",
|
||||||
"delete": "Delete",
|
"delete": "Delete",
|
||||||
"delete_confirm": "Are you sure you want to delete {{name}}?",
|
"delete_confirm": "Are you sure you want to delete {{name}}?",
|
||||||
"delete_confirm_des_1": "This action cannot be undone. This will permanently delete all current records for",
|
"delete_confirm_des_1": "This action cannot be undone. This will permanently delete all current records for",
|
||||||
"delete_confirm_des_2": "from the database."
|
"delete_confirm_des_2": "from the database."
|
||||||
},
|
},
|
||||||
"alerts": {
|
"alerts": {
|
||||||
"title": "Alerts",
|
"title": "Alerts",
|
||||||
"subtitle_1": "See",
|
"subtitle_1": "See",
|
||||||
"notification_settings": "notification settings",
|
"notification_settings": "notification settings",
|
||||||
"subtitle_2": "to configure how you receive alerts.",
|
"subtitle_2": "to configure how you receive alerts.",
|
||||||
"overwrite_existing_alerts": "Overwrite existing alerts",
|
"overwrite_existing_alerts": "Overwrite existing alerts",
|
||||||
"info": {
|
"info": {
|
||||||
"status": "Status",
|
"status": "Status",
|
||||||
"status_des": "Triggers when status switches between up and down.",
|
"status_des": "Triggers when status switches between up and down.",
|
||||||
"cpu_usage": "CPU Usage",
|
"cpu_usage": "CPU Usage",
|
||||||
"cpu_usage_des": "Triggers when CPU usage exceeds a threshold.",
|
"cpu_usage_des": "Triggers when CPU usage exceeds a threshold.",
|
||||||
"memory_usage": "Memory Usage",
|
"memory_usage": "Memory Usage",
|
||||||
"memory_usage_des": "Triggers when memory usage exceeds a threshold.",
|
"memory_usage_des": "Triggers when memory usage exceeds a threshold.",
|
||||||
"disk_usage": "Disk Usage",
|
"disk_usage": "Disk Usage",
|
||||||
"disk_usage_des": "Triggers when usage of any disk exceeds a threshold.",
|
"disk_usage_des": "Triggers when usage of any disk exceeds a threshold.",
|
||||||
"bandwidth": "Bandwidth",
|
"bandwidth": "Bandwidth",
|
||||||
"bandwidth_des": "Triggers when combined up/down exceeds a threshold.",
|
"bandwidth_des": "Triggers when combined up/down exceeds a threshold.",
|
||||||
"temperature": "Temperature",
|
"temperature": "Temperature",
|
||||||
"temperature_des": "Triggers when any sensor exceeds a threshold."
|
"temperature_des": "Triggers when any sensor exceeds a threshold."
|
||||||
},
|
},
|
||||||
"average_exceeds": "Average exceeds",
|
"average_exceeds": "Average exceeds",
|
||||||
"for": "For",
|
"for": "For",
|
||||||
"minute": "minute",
|
"minute": "minute",
|
||||||
"minutes": "minutes"
|
"minutes": "minutes"
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"settings": "Settings",
|
"settings": "Settings",
|
||||||
"subtitle": "Manage display and notification preferences.",
|
"subtitle": "Manage display and notification preferences.",
|
||||||
"save_settings": "Save Settings",
|
"save_settings": "Save Settings",
|
||||||
"export_configuration": "Export configuration",
|
"export_configuration": "Export configuration",
|
||||||
"general": {
|
"general": {
|
||||||
"title": "General",
|
"title": "General",
|
||||||
"subtitle": "Change general application options.",
|
"subtitle": "Change general application options.",
|
||||||
"language": {
|
"language": {
|
||||||
"title": "Language",
|
"title": "Language",
|
||||||
"subtitle_1": "Want to help us make our translations even better? Check out",
|
"subtitle_1": "Want to help us make our translations even better? Check out",
|
||||||
"subtitle_2": "for more details.",
|
"subtitle_2": "for more details.",
|
||||||
"preferred_language": "Preferred Language"
|
"preferred_language": "Preferred Language"
|
||||||
},
|
},
|
||||||
"chart_options": {
|
"chart_options": {
|
||||||
"title": "Chart options",
|
"title": "Chart options",
|
||||||
"subtitle": "Adjust display options for charts.",
|
"subtitle": "Adjust display options for charts.",
|
||||||
"default_time_period": "Default time period",
|
"default_time_period": "Default time period",
|
||||||
"default_time_period_des": "Sets the default time range for charts when a system is viewed."
|
"default_time_period_des": "Sets the default time range for charts when a system is viewed."
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"notifications": {
|
"notifications": {
|
||||||
"title": "Notifications",
|
"title": "Notifications",
|
||||||
"subtitle_1": "Configure how you receive alert notifications.",
|
"subtitle_1": "Configure how you receive alert notifications.",
|
||||||
"subtitle_2": "Looking instead for where to create alerts? Click the bell",
|
"subtitle_2": "Looking instead for where to create alerts? Click the bell",
|
||||||
"subtitle_3": "icons in the systems table.",
|
"subtitle_3": "icons in the systems table.",
|
||||||
"email": {
|
"email": {
|
||||||
"title": "Email notifications",
|
"title": "Email notifications",
|
||||||
"please": "Please",
|
"please": "Please",
|
||||||
"configure_an_SMTP_server": "configure an SMTP server",
|
"configure_an_SMTP_server": "configure an SMTP server",
|
||||||
"to_ensure_alerts_are_delivered": "to ensure alerts are delivered.",
|
"to_ensure_alerts_are_delivered": "to ensure alerts are delivered.",
|
||||||
"to_email_s": "To email(s)",
|
"to_email_s": "To email(s)",
|
||||||
"enter_email_address": "Enter email address...",
|
"enter_email_address": "Enter email address...",
|
||||||
"des": "Save address using enter key or comma. Leave blank to disable email notifications."
|
"des": "Save address using enter key or comma. Leave blank to disable email notifications."
|
||||||
},
|
},
|
||||||
"webhook_push": {
|
"webhook_push": {
|
||||||
"title": "Webhook / Push notifications",
|
"title": "Webhook / Push notifications",
|
||||||
"des_1": "Beszel uses",
|
"des_1": "Beszel uses",
|
||||||
"des_2": "to integrate with popular notification services.",
|
"des_2": "to integrate with popular notification services.",
|
||||||
"add_url": "Add URL"
|
"add_url": "Add URL"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"yaml_config": {
|
"yaml_config": {
|
||||||
"short_title": "YAML Config",
|
"short_title": "YAML Config",
|
||||||
"title": "YAML Configuration",
|
"title": "YAML Configuration",
|
||||||
"subtitle": "Export your current systems configuration.",
|
"subtitle": "Export your current systems configuration.",
|
||||||
"des_1": "Systems may be managed in a",
|
"des_1": "Systems may be managed in a",
|
||||||
"des_2": "file inside your data directory.",
|
"des_2": "file inside your data directory.",
|
||||||
"des_3": "On each restart, systems in the database will be updated to match the systems defined in the file.",
|
"des_3": "On each restart, systems in the database will be updated to match the systems defined in the file.",
|
||||||
"alert": {
|
"alert": {
|
||||||
"title": "Caution - potential data loss",
|
"title": "Caution - potential data loss",
|
||||||
"des_1": "Existing systems not defined in",
|
"des_1": "Existing systems not defined in",
|
||||||
"des_2": "will be deleted. Please make regular backups."
|
"des_2": "will be deleted. Please make regular backups."
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"language": "Language"
|
"language": "Language"
|
||||||
},
|
},
|
||||||
"user_dm": {
|
"user_dm": {
|
||||||
"users": "Users",
|
"users": "Users",
|
||||||
"logs": "Logs",
|
"logs": "Logs",
|
||||||
"backups": "Backups",
|
"backups": "Backups",
|
||||||
"auth_providers": "Auth Providers",
|
"auth_providers": "Auth Providers",
|
||||||
"log_out": "Log Out"
|
"log_out": "Log Out"
|
||||||
},
|
},
|
||||||
"themes": {
|
"themes": {
|
||||||
"toggle_theme": "Toggle theme",
|
"toggle_theme": "Toggle theme",
|
||||||
"light": "Light",
|
"light": "Light",
|
||||||
"dark": "Dark",
|
"dark": "Dark",
|
||||||
"system": "System"
|
"system": "System"
|
||||||
},
|
},
|
||||||
"add_system": {
|
"add_system": {
|
||||||
"add_new_system": "Add New System",
|
"add_new_system": "Add New System",
|
||||||
"binary": "Binary",
|
"binary": "Binary",
|
||||||
"dialog_des_1": "The agent must be running on the system to connect. Copy the",
|
"dialog_des_1": "The agent must be running on the system to connect. Copy the",
|
||||||
"dialog_des_2": "for the agent below.",
|
"dialog_des_2": "for the agent below.",
|
||||||
"name": "Name",
|
"name": "Name",
|
||||||
"host_ip": "Host / IP",
|
"host_ip": "Host / IP",
|
||||||
"port": "Port",
|
"port": "Port",
|
||||||
"public_key": "Public Key",
|
"public_key": "Public Key",
|
||||||
"click_to_copy": "Click to copy",
|
"click_to_copy": "Click to copy",
|
||||||
"command": "command",
|
"command": "command",
|
||||||
"add_system": "Add system"
|
"add_system": "Add system"
|
||||||
},
|
},
|
||||||
"command": {
|
"command": {
|
||||||
"search": "Search for systems or settings...",
|
"search": "Search for systems or settings...",
|
||||||
"pages_settings": "Pages / Settings",
|
"pages_settings": "Pages / Settings",
|
||||||
"dashboard": "Dashboard",
|
"dashboard": "Dashboard",
|
||||||
"documentation": "Documentation",
|
"documentation": "Documentation",
|
||||||
"SMTP_settings": "SMTP settings",
|
"SMTP_settings": "SMTP settings",
|
||||||
"page": "Page",
|
"page": "Page",
|
||||||
"admin": "Admin"
|
"admin": "Admin"
|
||||||
},
|
},
|
||||||
"monitor": {
|
"monitor": {
|
||||||
"toggle_grid": "Toggle grid",
|
"toggle_grid": "Toggle grid",
|
||||||
"average": "Average",
|
"average": "Average",
|
||||||
"max_1_min": "Max 1 min ",
|
"max_1_min": "Max 1 min ",
|
||||||
"total_cpu_usage": "Total CPU Usage",
|
"total_cpu_usage": "Total CPU Usage",
|
||||||
"cpu_des": "system-wide CPU utilization",
|
"cpu_des": "system-wide CPU utilization",
|
||||||
"docker_cpu_usage": "Docker CPU Usage",
|
"docker_cpu_usage": "Docker CPU Usage",
|
||||||
"docker_cpu_des": "Average CPU utilization of containers",
|
"docker_cpu_des": "Average CPU utilization of containers",
|
||||||
"total_memory_usage": "Total Memory Usage",
|
"total_memory_usage": "Total Memory Usage",
|
||||||
"memory_des": "Precise utilization at the recorded time",
|
"memory_des": "Precise utilization at the recorded time",
|
||||||
"docker_memory_usage": "Docker Memory Usage",
|
"docker_memory_usage": "Docker Memory Usage",
|
||||||
"docker_memory_des": "Memory usage of docker containers",
|
"docker_memory_des": "Memory usage of docker containers",
|
||||||
"disk_space": "Disk Space",
|
"disk_space": "Disk Space",
|
||||||
"disk_des": "Usage of root partition",
|
"disk_des": "Usage of root partition",
|
||||||
"disk_io": "Disk I/O",
|
"disk_io": "Disk I/O",
|
||||||
"disk_io_des": "Throughput of root filesystem",
|
"disk_io_des": "Throughput of root filesystem",
|
||||||
"bandwidth": "Bandwidth",
|
"bandwidth": "Bandwidth",
|
||||||
"bandwidth_des": "Network traffic of public interfaces",
|
"bandwidth_des": "Network traffic of public interfaces",
|
||||||
"docker_network_io": "Docker Network I/O",
|
"docker_network_io": "Docker Network I/O",
|
||||||
"docker_network_io_des": "Network traffic of docker containers",
|
"docker_network_io_des": "Network traffic of docker containers",
|
||||||
"swap_usage": "Swap Usage",
|
"swap_usage": "Swap Usage",
|
||||||
"swap_des": "Swap space used by the system",
|
"swap_des": "Swap space used by the system",
|
||||||
"temperature": "Temperature",
|
"temperature": "Temperature",
|
||||||
"temperature_des": "Temperatures of system sensors",
|
"temperature_des": "Temperatures of system sensors",
|
||||||
"usage": "Usage",
|
"usage": "Usage",
|
||||||
"disk_usage_of": "Disk usage of",
|
"disk_usage_of": "Disk usage of",
|
||||||
"throughput_of": "Throughput of"
|
"throughput_of": "Throughput of"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -11,50 +11,17 @@ import {
|
|||||||
$hubVersion,
|
$hubVersion,
|
||||||
$copyContent,
|
$copyContent,
|
||||||
} from './lib/stores.ts'
|
} from './lib/stores.ts'
|
||||||
import { LangToggle } from './components/lang-toggle.tsx'
|
import { updateUserSettings, updateAlerts, updateFavicon, updateSystemList } from './lib/utils.ts'
|
||||||
import { ModeToggle } from './components/mode-toggle.tsx'
|
|
||||||
import {
|
|
||||||
cn,
|
|
||||||
updateUserSettings,
|
|
||||||
isAdmin,
|
|
||||||
isReadOnlyUser,
|
|
||||||
updateAlerts,
|
|
||||||
updateFavicon,
|
|
||||||
updateSystemList,
|
|
||||||
} from './lib/utils.ts'
|
|
||||||
import { buttonVariants } from './components/ui/button.tsx'
|
|
||||||
import {
|
|
||||||
DatabaseBackupIcon,
|
|
||||||
LockKeyholeIcon,
|
|
||||||
LogOutIcon,
|
|
||||||
LogsIcon,
|
|
||||||
ServerIcon,
|
|
||||||
SettingsIcon,
|
|
||||||
UserIcon,
|
|
||||||
UsersIcon,
|
|
||||||
} from 'lucide-react'
|
|
||||||
import { useStore } from '@nanostores/react'
|
import { useStore } from '@nanostores/react'
|
||||||
import { Toaster } from './components/ui/toaster.tsx'
|
import { Toaster } from './components/ui/toaster.tsx'
|
||||||
import { Logo } from './components/logo.tsx'
|
import { $router } from './components/router.tsx'
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuGroup,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
} from './components/ui/dropdown-menu.tsx'
|
|
||||||
import { $router, Link } from './components/router.tsx'
|
|
||||||
import SystemDetail from './components/routes/system.tsx'
|
import SystemDetail from './components/routes/system.tsx'
|
||||||
import { AddSystemButton } from './components/add-system.tsx'
|
|
||||||
|
|
||||||
import './lib/i18n.ts'
|
import './lib/i18n.ts'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { TFunction } from 'i18next'
|
import Navbar from './components/navbar.tsx'
|
||||||
|
|
||||||
// const ServerDetail = lazy(() => import('./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 LoginPage = lazy(() => import('./components/login/login.tsx'))
|
||||||
const CopyToClipboardDialog = lazy(() => import('./components/copy-to-clipboard.tsx'))
|
const CopyToClipboardDialog = lazy(() => import('./components/copy-to-clipboard.tsx'))
|
||||||
const Settings = lazy(() => import('./components/routes/settings/layout.tsx'))
|
const Settings = lazy(() => import('./components/routes/settings/layout.tsx'))
|
||||||
@@ -115,84 +82,6 @@ const App = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const Navbar = (t: TFunction<'translation', undefined>) => {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center h-14 md:h-16 bg-card px-4 pr-3 sm:px-6 border bt-0 rounded-md my-4">
|
|
||||||
<Link href="/" aria-label="Home" className={'p-2 pl-0'}>
|
|
||||||
<Logo className="h-[1.15em] fill-foreground" />
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className={'flex ml-auto items-center'}>
|
|
||||||
<LangToggle />
|
|
||||||
<ModeToggle />
|
|
||||||
<Link
|
|
||||||
href="/settings/general"
|
|
||||||
aria-label="Settings"
|
|
||||||
className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
|
|
||||||
>
|
|
||||||
<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
|
|
||||||
</Link>
|
|
||||||
<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={isReadOnlyUser() ? 'end' : 'center'} 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>{t('user_dm.users')}</span>
|
|
||||||
</a>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem asChild>
|
|
||||||
<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx" target="_blank">
|
|
||||||
<ServerIcon className="mr-2.5 h-4 w-4" />
|
|
||||||
<span>{t('systems')}</span>
|
|
||||||
</a>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem asChild>
|
|
||||||
<a href="/_/#/logs" target="_blank">
|
|
||||||
<LogsIcon className="mr-2.5 h-4 w-4" />
|
|
||||||
<span>{t('user_dm.logs')}</span>
|
|
||||||
</a>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem asChild>
|
|
||||||
<a href="/_/#/settings/backups" target="_blank">
|
|
||||||
<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
|
|
||||||
<span>{t('user_dm.backups')}</span>
|
|
||||||
</a>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem asChild>
|
|
||||||
<a href="/_/#/settings/auth-providers" target="_blank">
|
|
||||||
<LockKeyholeIcon className="mr-2.5 h-4 w-4" />
|
|
||||||
<span>{t('user_dm.auth_providers')}</span>
|
|
||||||
</a>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
<DropdownMenuItem onSelect={() => pb.authStore.clear()}>
|
|
||||||
<LogOutIcon className="mr-2.5 h-4 w-4" />
|
|
||||||
<span>{t('user_dm.log_out')}</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
<AddSystemButton className="ml-2" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Layout = () => {
|
const Layout = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
@@ -212,9 +101,6 @@ const Layout = () => {
|
|||||||
<div className="container">{Navbar(t)}</div>
|
<div className="container">{Navbar(t)}</div>
|
||||||
<div className="container mb-14 relative">
|
<div className="container mb-14 relative">
|
||||||
<App />
|
<App />
|
||||||
<Suspense>
|
|
||||||
<CommandPalette />
|
|
||||||
</Suspense>
|
|
||||||
{copyContent && (
|
{copyContent && (
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<CopyToClipboardDialog content={copyContent} />
|
<CopyToClipboardDialog content={copyContent} />
|
||||||
|
|||||||
Reference in New Issue
Block a user