i18n

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

@@ -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>
 	)

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

@@ -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,
 		})

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

@@ -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 />

beszel/site/src/components/routes/system.tsx

@@ -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>