mirror of
https://github.com/henrygd/beszel.git
synced 2025-12-17 10:46:16 +01:00
i18n
This commit is contained in:
Arsfy
@@ -77,7 +77,7 @@ export function AddSystemButton({ className }: { className?: string }) {
|
||||
className={cn('flex gap-1 max-xs:h-[2.4rem]', className, isReadOnlyUser() && 'hidden')}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 -ml-1" />
|
||||
{t('add')} <span className="hidden xs:inline">{t('system')}</span>
|
||||
{t('add')}<span className="hidden xs:inline">{t('system')}</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="w-[90%] sm:max-w-[425px] rounded-lg">
|
||||
@@ -89,67 +89,78 @@ export function AddSystemButton({ className }: { className?: string }) {
|
||||
<TabsTrigger value="binary">{t('add_system.binary')}</TabsTrigger>
|
||||
</TabsList>
|
||||
</DialogHeader>
|
||||
{/* Docker */}
|
||||
<TabsContent value="docker">
|
||||
<DialogDescription className={'mb-4'}>
|
||||
{t('add_system.dialog_des_1')}{' '}
|
||||
<code className="bg-muted px-1 rounded-sm">docker-compose.yml</code> {t('add_system.dialog_des_2')}
|
||||
</DialogDescription>
|
||||
<form onSubmit={handleSubmit as any}>
|
||||
<div className="grid gap-3 mt-1 mb-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="name" className="text-right">
|
||||
{t('add_system.name')}
|
||||
</Label>
|
||||
<Input id="name" name="name" className="col-span-3" required />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="host" className="text-right">
|
||||
{t('add_system.host_ip')}
|
||||
</Label>
|
||||
<Input id="host" name="host" className="col-span-3" required />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="port" className="text-right">
|
||||
{t('add_system.port')}
|
||||
</Label>
|
||||
<Input
|
||||
ref={port}
|
||||
name="port"
|
||||
id="port"
|
||||
defaultValue="45876"
|
||||
className="col-span-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 relative">
|
||||
<Label htmlFor="pkey" className="text-right whitespace-pre">
|
||||
{t('add_system.public_key')}
|
||||
</Label>
|
||||
<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
|
||||
<div
|
||||
className={
|
||||
'h-6 w-24 bg-gradient-to-r from-transparent to-background to-65% absolute right-1 pointer-events-none'
|
||||
}
|
||||
></div>
|
||||
<TooltipProvider delayDuration={100}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant={'link'}
|
||||
className="absolute right-0"
|
||||
onClick={() => copyToClipboard(publicKey)}
|
||||
>
|
||||
<Copy className="h-4 w-4 " />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('add_system.click_to_copy')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</TabsContent>
|
||||
{/* Binary */}
|
||||
<TabsContent value="binary">
|
||||
<DialogDescription className={'mb-4'}>
|
||||
{t('add_system.dialog_des_1')}{' '}
|
||||
<code className="bg-muted px-1 rounded-sm">install command</code> {t('add_system.dialog_des_2')}
|
||||
</DialogDescription>
|
||||
</TabsContent>
|
||||
<form onSubmit={handleSubmit as any}>
|
||||
<div className="grid gap-3 mt-1 mb-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="name" className="text-right">
|
||||
{t('add_system.name')}
|
||||
</Label>
|
||||
<Input id="name" name="name" className="col-span-3" required />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="host" className="text-right">
|
||||
{t('add_system.host_ip')}
|
||||
</Label>
|
||||
<Input id="host" name="host" className="col-span-3" required />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="port" className="text-right">
|
||||
{t('add_system.port')}
|
||||
</Label>
|
||||
<Input
|
||||
ref={port}
|
||||
name="port"
|
||||
id="port"
|
||||
defaultValue="45876"
|
||||
className="col-span-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 relative">
|
||||
<Label htmlFor="pkey" className="text-right whitespace-pre">
|
||||
{t('add_system.public_key')}
|
||||
</Label>
|
||||
<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
|
||||
<div
|
||||
className={
|
||||
'h-6 w-24 bg-gradient-to-r from-transparent to-background to-65% absolute right-1 pointer-events-none'
|
||||
}
|
||||
></div>
|
||||
<TooltipProvider delayDuration={100}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant={'link'}
|
||||
className="absolute right-0"
|
||||
onClick={() => copyToClipboard(publicKey)}
|
||||
>
|
||||
<Copy className="h-4 w-4 " />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('add_system.click_to_copy')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
{/* Docker */}
|
||||
<TabsContent value="docker">
|
||||
<DialogFooter className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
@@ -160,69 +171,9 @@ export function AddSystemButton({ className }: { className?: string }) {
|
||||
</Button>
|
||||
<Button>{t('add_system.add_system')}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</TabsContent>
|
||||
<TabsContent value="binary">
|
||||
<DialogDescription className={'mb-4'}>
|
||||
{t('add_system.dialog_des_1')}{' '}
|
||||
<code className="bg-muted px-1 rounded-sm">install command</code> {t('add_system.dialog_des_2')}
|
||||
</DialogDescription>
|
||||
<form onSubmit={handleSubmit as any}>
|
||||
<div className="grid gap-3 mt-1 mb-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="name" className="text-right">
|
||||
{t('add_system.name')}
|
||||
</Label>
|
||||
<Input id="name" name="name" className="col-span-3" required />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="host" className="text-right">
|
||||
{t('add_system.host_ip')}
|
||||
</Label>
|
||||
<Input id="host" name="host" className="col-span-3" required />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="port" className="text-right">
|
||||
{t('add_system.port')}
|
||||
</Label>
|
||||
<Input
|
||||
ref={port}
|
||||
name="port"
|
||||
id="port"
|
||||
defaultValue="45876"
|
||||
className="col-span-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 relative">
|
||||
<Label htmlFor="pkey" className="text-right whitespace-pre">
|
||||
{t('add_system.public_key')}
|
||||
</Label>
|
||||
<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
|
||||
<div
|
||||
className={
|
||||
'h-6 w-24 bg-gradient-to-r from-transparent to-background to-65% absolute right-1 pointer-events-none'
|
||||
}
|
||||
></div>
|
||||
<TooltipProvider delayDuration={100}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant={'link'}
|
||||
className="absolute right-0"
|
||||
onClick={() => copyToClipboard(publicKey)}
|
||||
>
|
||||
<Copy className="h-4 w-4 " />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('add_system.click_to_copy')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
{/* Binary */}
|
||||
<TabsContent value="binary">
|
||||
<DialogFooter className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
@@ -233,8 +184,8 @@ export function AddSystemButton({ className }: { className?: string }) {
|
||||
</Button>
|
||||
<Button>{t('add_system.add_system')}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</TabsContent>
|
||||
</TabsContent>
|
||||
</form>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@@ -6,6 +6,7 @@ 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
|
||||
@@ -157,6 +158,8 @@ export function SystemAlertGlobal({
|
||||
}
|
||||
|
||||
function AlertContent({ data }: { data: AlertData }) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { key } = data
|
||||
|
||||
const hasSliders = !('single' in data.alert)
|
||||
@@ -185,10 +188,10 @@ function AlertContent({ data }: { data: AlertData }) {
|
||||
>
|
||||
<div className="grid gap-1 select-none">
|
||||
<p className="font-semibold flex gap-3 items-center capitalize">
|
||||
<Icon className="h-4 w-4 opacity-85" /> {data.alert.name}
|
||||
<Icon className="h-4 w-4 opacity-85" /> {t(data.alert.name)}
|
||||
</p>
|
||||
{!showSliders && (
|
||||
<span className="block text-sm text-muted-foreground">{data.alert.desc}</span>
|
||||
<span className="block text-sm text-muted-foreground">{t(data.alert.desc)}</span>
|
||||
)}
|
||||
</div>
|
||||
<Switch
|
||||
@@ -205,7 +208,7 @@ function AlertContent({ data }: { data: AlertData }) {
|
||||
<Suspense fallback={<div className="h-10" />}>
|
||||
<div>
|
||||
<p id={`v${key}`} className="text-sm block h-8">
|
||||
Average exceeds{' '}
|
||||
{t('alerts.average_exceeds')}{' '}
|
||||
<strong className="text-foreground">
|
||||
{value}
|
||||
{data.alert.unit}
|
||||
@@ -224,8 +227,7 @@ function AlertContent({ data }: { data: AlertData }) {
|
||||
</div>
|
||||
<div>
|
||||
<p id={`t${key}`} className="text-sm block h-8">
|
||||
For <strong className="text-foreground">{min}</strong> minute
|
||||
{min > 1 && 's'}
|
||||
{t('alerts.for')} <strong className="text-foreground">{min}</strong> {min > 1 ? t('alerts.minutes') : t('alerts.minute')}
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Slider
|
||||
|
||||
@@ -25,8 +25,11 @@ import { useStore } from '@nanostores/react'
|
||||
import { $systems } from '@/lib/stores'
|
||||
import { isAdmin } from '@/lib/utils'
|
||||
import { navigate } from './router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function CommandPalette() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const systems = useStore($systems)
|
||||
|
||||
@@ -44,7 +47,7 @@ export default function CommandPalette() {
|
||||
|
||||
return (
|
||||
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||
<CommandInput placeholder="Search for systems or settings..." />
|
||||
<CommandInput placeholder={t('command.search')} />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
{systems.length > 0 && (
|
||||
@@ -67,7 +70,7 @@ export default function CommandPalette() {
|
||||
<CommandSeparator className="mb-1.5" />
|
||||
</>
|
||||
)}
|
||||
<CommandGroup heading="Pages / Settings">
|
||||
<CommandGroup heading={t('command.pages_settings')}>
|
||||
<CommandItem
|
||||
keywords={['home']}
|
||||
onSelect={() => {
|
||||
@@ -76,8 +79,8 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<LayoutDashboard className="mr-2 h-4 w-4" />
|
||||
<span>Dashboard</span>
|
||||
<CommandShortcut>Page</CommandShortcut>
|
||||
<span>{t('command.dashboard')}</span>
|
||||
<CommandShortcut>{t('command.page')}</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
@@ -86,8 +89,8 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<SettingsIcon className="mr-2 h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
<CommandShortcut>Settings</CommandShortcut>
|
||||
<span>{t('settings.settings')}</span>
|
||||
<CommandShortcut>{t('settings.settings')}</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
keywords={['alerts']}
|
||||
@@ -97,8 +100,8 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<MailIcon className="mr-2 h-4 w-4" />
|
||||
<span>Notification settings</span>
|
||||
<CommandShortcut>Settings</CommandShortcut>
|
||||
<span>{t('settings.notifications.title')}</span>
|
||||
<CommandShortcut>{t('settings.settings')}</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
keywords={['github']}
|
||||
@@ -107,14 +110,14 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
<span>Documentation</span>
|
||||
<span>{t('command.documentation')}</span>
|
||||
<CommandShortcut>GitHub</CommandShortcut>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
{isAdmin() && (
|
||||
<>
|
||||
<CommandSeparator className="mb-1.5" />
|
||||
<CommandGroup heading="Admin">
|
||||
<CommandGroup heading={t("command.admin")}>
|
||||
<CommandItem
|
||||
keywords={['pocketbase']}
|
||||
onSelect={() => {
|
||||
@@ -123,8 +126,8 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<UsersIcon className="mr-2 h-4 w-4" />
|
||||
<span>Users</span>
|
||||
<CommandShortcut>Admin</CommandShortcut>
|
||||
<span>{t('user_dm.users')}</span>
|
||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
@@ -133,8 +136,8 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<LogsIcon className="mr-2 h-4 w-4" />
|
||||
<span>Logs</span>
|
||||
<CommandShortcut>Admin</CommandShortcut>
|
||||
<span>{t('user_dm.logs')}</span>
|
||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
@@ -143,8 +146,8 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<DatabaseBackupIcon className="mr-2 h-4 w-4" />
|
||||
<span>Backups</span>
|
||||
<CommandShortcut>Admin</CommandShortcut>
|
||||
<span>{t('user_dm.backups')}</span>
|
||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
keywords={['oauth', 'oicd']}
|
||||
@@ -154,8 +157,8 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<LockKeyholeIcon className="mr-2 h-4 w-4" />
|
||||
<span>Auth Providers</span>
|
||||
<CommandShortcut>Admin</CommandShortcut>
|
||||
<span>{t('user_dm.auth_providers')}</span>
|
||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
keywords={['email']}
|
||||
@@ -165,8 +168,8 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
<MailIcon className="mr-2 h-4 w-4" />
|
||||
<span>SMTP settings</span>
|
||||
<CommandShortcut>Admin</CommandShortcut>
|
||||
<span>{t('command.SMTP_settings')}</span>
|
||||
<CommandShortcut>{t("command.admin")}</CommandShortcut>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</>
|
||||
|
||||
@@ -10,8 +10,11 @@ import { useState } from 'react'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import clsx from 'clsx'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function ConfigYaml() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [configContent, setConfigContent] = useState<string>('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
@@ -40,30 +43,27 @@ export default function ConfigYaml() {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="text-xl font-medium mb-2">YAML Configuration</h3>
|
||||
<h3 className="text-xl font-medium mb-2">{t('settings.yaml_config.title')}</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
Export your current systems configuration.
|
||||
{t('settings.yaml_config.subtitle')}
|
||||
</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.
|
||||
{t('settings.yaml_config.des_1')}{' '}
|
||||
<code className="bg-muted rounded-sm px-1 text-primary">config.yml</code> {t('settings.yaml_config.des_2')}
|
||||
</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.
|
||||
{t('settings.yaml_config.des_3')}
|
||||
</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>
|
||||
<AlertTitle>{t('settings.yaml_config.alert.title')}</AlertTitle>
|
||||
<AlertDescription>
|
||||
<p>
|
||||
Existing systems not defined in <code>config.yml</code> will be deleted. Please make
|
||||
regular backups.
|
||||
{t('settings.yaml_config.alert.des_1')} <code>config.yml</code> {t('settings.yaml_config.alert.des_2')}
|
||||
</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
@@ -86,7 +86,7 @@ export default function ConfigYaml() {
|
||||
disabled={isLoading}
|
||||
>
|
||||
<ButtonIcon className={clsx('h-4 w-4 mr-0.5', isLoading && 'animate-spin')} />
|
||||
Export configuration
|
||||
{t('settings.export_configuration')}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -61,7 +61,7 @@ export default function SettingsLayout() {
|
||||
|
||||
if (isAdmin()) {
|
||||
sidebarNavItems.push({
|
||||
title: 'YAML Config',
|
||||
title: t('settings.yaml_config.short_title'),
|
||||
href: '/settings/config',
|
||||
icon: FileSlidersIcon,
|
||||
})
|
||||
|
||||
@@ -85,38 +85,42 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<div className="mb-4">
|
||||
<h3 className="mb-1 text-lg font-medium">Email notifications</h3>
|
||||
<h3 className="mb-1 text-lg font-medium">
|
||||
{t('settings.notifications.email.title')}
|
||||
</h3>
|
||||
{isAdmin() && (
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
Please{' '}
|
||||
{t('settings.notifications.email.please')}{' '}
|
||||
<a href="/_/#/settings/mail" className="link" target="_blank">
|
||||
configure an SMTP server
|
||||
{t('settings.notifications.email.configure_an_SMTP_server')}
|
||||
</a>{' '}
|
||||
to ensure alerts are delivered.{' '}
|
||||
{t('settings.notifications.email.to_ensure_alerts_are_delivered')}{' '}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Label className="block" htmlFor="email">
|
||||
To email(s)
|
||||
{t('settings.notifications.email.to_email_s')}
|
||||
</Label>
|
||||
<InputTags
|
||||
value={emails}
|
||||
onChange={setEmails}
|
||||
placeholder="Enter email address..."
|
||||
placeholder={t('settings.notifications.email.enter_email_address')}
|
||||
className="w-full"
|
||||
type="email"
|
||||
id="email"
|
||||
/>
|
||||
<p className="text-[0.8rem] text-muted-foreground">
|
||||
Save address using enter key or comma. Leave blank to disable email notifications.
|
||||
{t('settings.notifications.email.des')}
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="mb-1 text-lg font-medium">Webhook / Push notifications</h3>
|
||||
<h3 className="mb-1 text-lg font-medium">
|
||||
{t('settings.notifications.webhook_push.title')}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
Beszel uses{' '}
|
||||
{t('settings.notifications.webhook_push.des_1')}{' '}
|
||||
<a
|
||||
href="https://containrrr.dev/shoutrrr/services/overview/"
|
||||
target="_blank"
|
||||
@@ -124,7 +128,7 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
|
||||
>
|
||||
Shoutrrr
|
||||
</a>{' '}
|
||||
to integrate with popular notification services.
|
||||
{t('settings.notifications.webhook_push.des_2')}
|
||||
</p>
|
||||
</div>
|
||||
{webhooks.length > 0 && (
|
||||
@@ -149,7 +153,7 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
|
||||
onClick={addWebhook}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 -ml-0.5" />
|
||||
Add URL
|
||||
{t('settings.notifications.webhook_push.add_url')}
|
||||
</Button>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
@@ -97,6 +97,8 @@ async function getStats<T>(
|
||||
}
|
||||
|
||||
export default function SystemDetail({ name }: { name: string }) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const systems = useStore($systems)
|
||||
const chartTime = useStore($chartTime)
|
||||
/** Max CPU toggle value */
|
||||
@@ -350,7 +352,7 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
aria-label="Toggle grid"
|
||||
aria-label={t('monitor.toggle_grid')}
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="hidden lg:flex p-0 text-primary"
|
||||
@@ -363,7 +365,7 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Toggle grid</TooltipContent>
|
||||
<TooltipContent>{t('monitor.toggle_grid')}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
@@ -374,9 +376,8 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
<div className="grid lg:grid-cols-2 gap-4">
|
||||
<ChartCard
|
||||
grid={grid}
|
||||
title="Total CPU Usage"
|
||||
description={`${cpuMaxStore[0] && isLongerChart ? 'Max 1 min ' : 'Average'
|
||||
} system-wide CPU utilization`}
|
||||
title={t('monitor.total_cpu_usage')}
|
||||
description={`${cpuMaxStore[0] && isLongerChart ? t('monitor.max_1_min') : t('monitor.average') } ${t('monitor.cpu_des')}`}
|
||||
cornerEl={isLongerChart ? <SelectAvgMax store={cpuMaxStore} /> : null}
|
||||
>
|
||||
<AreaChartDefault
|
||||
@@ -390,8 +391,8 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
{containerFilterBar && (
|
||||
<ChartCard
|
||||
grid={grid}
|
||||
title="Docker CPU Usage"
|
||||
description="Average CPU utilization of containers"
|
||||
title={t('monitor.docker_cpu_usage')}
|
||||
description={t('monitor.docker_cpu_des')}
|
||||
cornerEl={containerFilterBar}
|
||||
>
|
||||
<ContainerChart chartData={chartData} dataKey="c" chartName="cpu" />
|
||||
@@ -400,8 +401,8 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
|
||||
<ChartCard
|
||||
grid={grid}
|
||||
title="Total Memory Usage"
|
||||
description="Precise utilization at the recorded time"
|
||||
title={t('monitor.total_memory_usage')}
|
||||
description={t('monitor.memory_des')}
|
||||
>
|
||||
<MemChart chartData={chartData} />
|
||||
</ChartCard>
|
||||
@@ -409,15 +410,15 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
{containerFilterBar && (
|
||||
<ChartCard
|
||||
grid={grid}
|
||||
title="Docker Memory Usage"
|
||||
description="Memory usage of docker containers"
|
||||
title={t('monitor.docker_memory_usage')}
|
||||
description={t('monitor.docker_memory_des')}
|
||||
cornerEl={containerFilterBar}
|
||||
>
|
||||
<ContainerChart chartData={chartData} chartName="mem" dataKey="m" unit=" MB" />
|
||||
</ChartCard>
|
||||
)}
|
||||
|
||||
<ChartCard grid={grid} title="Disk Space" description="Usage of root partition">
|
||||
<ChartCard grid={grid} title={t('monitor.disk_space')} description={t('monitor.disk_des')}>
|
||||
<DiskChart
|
||||
chartData={chartData}
|
||||
dataKey="stats.du"
|
||||
@@ -427,8 +428,8 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
|
||||
<ChartCard
|
||||
grid={grid}
|
||||
title="Disk I/O"
|
||||
description="Throughput of root filesystem"
|
||||
title={t('monitor.disk_io')}
|
||||
description={t('monitor.disk_io_des')}
|
||||
cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
|
||||
>
|
||||
<AreaChartDefault
|
||||
@@ -440,9 +441,9 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
|
||||
<ChartCard
|
||||
grid={grid}
|
||||
title="Bandwidth"
|
||||
title={t('monitor.bandwidth')}
|
||||
cornerEl={isLongerChart ? <SelectAvgMax store={bandwidthMaxStore} /> : null}
|
||||
description="Network traffic of public interfaces"
|
||||
description={t('monitor.bandwidth_des')}
|
||||
>
|
||||
<AreaChartDefault
|
||||
chartData={chartData}
|
||||
@@ -459,8 +460,8 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
})}
|
||||
>
|
||||
<ChartCard
|
||||
title="Docker Network I/O"
|
||||
description="Includes traffic between internal services"
|
||||
title={t('monitor.docker_network_io')}
|
||||
description={t('monitor.docker_network_io_des')}
|
||||
cornerEl={containerFilterBar}
|
||||
>
|
||||
{/* @ts-ignore */}
|
||||
@@ -470,13 +471,13 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
)}
|
||||
|
||||
{(systemStats.at(-1)?.stats.su ?? 0) > 0 && (
|
||||
<ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system">
|
||||
<ChartCard grid={grid} title={t('monitor.swap_usage')} description={t('monitor.swap_des')}>
|
||||
<SwapChart chartData={chartData} />
|
||||
</ChartCard>
|
||||
)}
|
||||
|
||||
{systemStats.at(-1)?.stats.t && (
|
||||
<ChartCard grid={grid} title="Temperature" description="Temperatures of system sensors">
|
||||
<ChartCard grid={grid} title={t('monitor.temperature')} description={t('monitor.temperature_des')}>
|
||||
<TemperatureChart chartData={chartData} />
|
||||
</ChartCard>
|
||||
)}
|
||||
@@ -490,8 +491,8 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
<div key={extraFsName} className="contents">
|
||||
<ChartCard
|
||||
grid={grid}
|
||||
title={`${extraFsName} Usage`}
|
||||
description={`Disk usage of ${extraFsName}`}
|
||||
title={`${extraFsName} ${t('monitor.usage')}`}
|
||||
description={`${t('monitor.disk_usage_of')} ${extraFsName}`}
|
||||
>
|
||||
<DiskChart
|
||||
chartData={chartData}
|
||||
@@ -502,7 +503,7 @@ export default function SystemDetail({ name }: { name: string }) {
|
||||
<ChartCard
|
||||
grid={grid}
|
||||
title={`${extraFsName} I/O`}
|
||||
description={`Throughput of ${extraFsName}`}
|
||||
description={`${t('monitor.throughput_of')} ${extraFsName}`}
|
||||
cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
|
||||
>
|
||||
<AreaChartDefault
|
||||
@@ -562,6 +563,8 @@ function SelectAvgMax({
|
||||
}: {
|
||||
store: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [max, setMax] = store
|
||||
const Icon = max ? ChartMax : ChartAverage
|
||||
|
||||
@@ -573,10 +576,10 @@ function SelectAvgMax({
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem key="avg" value="avg">
|
||||
Average
|
||||
{t('monitor.average')}
|
||||
</SelectItem>
|
||||
<SelectItem key="max" value="max">
|
||||
Max 1 min
|
||||
{t('monitor.max_1_min')}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
Reference in New Issue
Block a user