CPU {Number.isFinite(cpu) ? `${formatNumber(cpu)}%` : '—'}
@@ -124,28 +125,28 @@ const NodeRow = memo(function NodeRow({ item, previousID, nextID, reorderEnabled
↓ {formatBitrate(rx)} ↑ {formatBitrate(tx)}
-
{formatBytes(used)} {limit > 0 ? `/ ${formatBytes(limit)}` : 'без лимита'}
+
{formatBytes(used)} {limit > 0 ? `/ ${formatBytes(limit)}` : t('nodes.noLimit')}
0 ? '' : ' is-unlimited'}`}
role="img"
- aria-label={limit > 0 ? `Использовано ${Math.round(quota)} процентов квоты` : 'Трафик без лимита'}
+ aria-label={limit > 0 ? t('nodes.roundPercentOfQuotaUsed', { round: Math.round(quota) }) : t('nodes.trafficWithoutLimit')}
>
0 ? quota / 100 : 1 } as CSSProperties} />
-
{limit > 0 ? `${Math.round(quota)}%` : item.traffic_month || 'нет данных'}
+
{limit > 0 ? `${Math.round(quota)}%` : item.traffic_month || t('nodes.noData')}
HAProxy {shortHAProxy(metrics?.haproxy_version)} Agent {heartbeat?.agent_version ?? '—'}
-
+
-
@@ -197,9 +198,9 @@ export function NodesTable({ nodes, page, pageSize, total, onPageChange, reorder
void latest.current.onReorder(sourceID, targetID);
}, []);
return (
-
+
- Статус Нода Маршруты Соединения CPU / RAM RX / TX Трафик за месяц HAProxy / Agent {t('nodes.status')} {t('nodes.node')} {t('nodes.routes')} {t('nodes.connections')} CPU / RAM RX / TX {t('nodes.monthlyTraffic')} HAProxy / Agent
{nodes.map((item, index) => (
@@ -222,9 +223,9 @@ export function NodesTable({ nodes, page, pageSize, total, onPageChange, reorder
))}
- Показано {total ? (page - 1) * pageSize + 1 : 0}–{Math.min(total, page * pageSize)} из {total} нод
+ {t('nodes.showingNodes', { from: total ? (page - 1) * pageSize + 1 : 0, to: Math.min(total, page * pageSize), count: total })}
{pageSize} / стр.
+ {t('app.perPage', { size: pageSize })}
);
diff --git a/frontend/src/features/nodes/RoutesRanking.tsx b/frontend/src/features/nodes/RoutesRanking.tsx
index dfb0754..006801e 100644
--- a/frontend/src/features/nodes/RoutesRanking.tsx
+++ b/frontend/src/features/nodes/RoutesRanking.tsx
@@ -3,11 +3,12 @@ import { Link, useLocation } from 'react-router-dom';
import type { DashboardRoute } from '../../lib/contracts';
import { formatBitrate, formatBytes } from '../../lib/format';
import { demoSuffix } from '../../lib/navigation';
+import { t } from '../../i18n';
function routeLabel(route: DashboardRoute): string {
if (route.name) return route.name;
- if (route.fallback) return `Весь трафик · ${route.listener_ip || '*'}:${route.listener_port}`;
- return route.snis[0] ?? `Маршрут · ${route.listener_ip || '*'}:${route.listener_port}`;
+ if (route.fallback) return t('nodes.allTrafficP0ListenerPort', { p0: route.listener_ip || '*', listener_port: route.listener_port });
+ return route.snis[0] ?? t('nodes.routeP0ListenerPort', { p0: route.listener_ip || '*', listener_port: route.listener_port });
}
export function RoutesRanking({ routes }: { routes: DashboardRoute[] }) {
@@ -16,10 +17,10 @@ export function RoutesRanking({ routes }: { routes: DashboardRoute[] }) {
return (
- Топ маршрутов
+ {t('nodes.topRoutes')}
RX + TX
-
# Маршрут Нода Трафик %
+
# {t('nodes.route')} {t('nodes.node')} {t('app.traffic')} %
{visible.length ? visible.map((route, index) => (
@@ -29,12 +30,12 @@ export function RoutesRanking({ routes }: { routes: DashboardRoute[] }) {
{route.node_name}
-
{formatBitrate(route.bits_per_second)}
+
{formatBitrate(route.bits_per_second)}
{Math.round(route.share_percent)}%
- )) :
Маршрутов пока нет }
+ )) :
{t('nodes.noRoutesYet')} }
-
Посмотреть все маршруты
+
{t('nodes.viewAllRoutes')}
);
}
diff --git a/frontend/src/features/nodes/TrafficChart.tsx b/frontend/src/features/nodes/TrafficChart.tsx
index c8fa925..00ef06d 100644
--- a/frontend/src/features/nodes/TrafficChart.tsx
+++ b/frontend/src/features/nodes/TrafficChart.tsx
@@ -10,6 +10,7 @@ import { nodeFlowChartTheme } from '../../lib/appearance';
import type { TrafficHistorySample } from '../../lib/contracts';
import { formatBitrate } from '../../lib/format';
import type { TrafficRange } from './useNodesOverview';
+import { t, locale } from '../../i18n';
interface TrafficChartProps {
samples: TrafficHistorySample[];
@@ -27,12 +28,12 @@ interface TrafficChartProps {
}
const ranges = [
- { label: '1м', value: '1m' },
- { label: '5м', value: '5m' },
- { label: '1ч', value: '1h' },
- { label: '24ч', value: '24h' },
- { label: '7д', value: '7d' },
- { label: '30д', value: '30d' },
+ { label: t('nodes.n1m'), value: '1m' },
+ { label: t('nodes.n5m'), value: '5m' },
+ { label: t('nodes.n1h'), value: '1h' },
+ { label: t('nodes.n24h'), value: '24h' },
+ { label: t('nodes.n7d'), value: '7d' },
+ { label: t('nodes.n30d'), value: '30d' },
];
type TooltipParam = { axisValueLabel?: string; marker?: string; seriesName?: string; value?: [number, number | null] };
@@ -40,18 +41,18 @@ type TooltipParam = { axisValueLabel?: string; marker?: string; seriesName?: str
function formatAxisTick(value: number | string, range: TrafficRange) {
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '';
- if (range === '1m') return new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(date);
- if (range === '5m' || range === '1h' || range === '24h') return new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit' }).format(date);
- return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: '2-digit' }).format(date);
+ if (range === '1m') return new Intl.DateTimeFormat(locale(), { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(date);
+ if (range === '5m' || range === '1h' || range === '24h') return new Intl.DateTimeFormat(locale(), { hour: '2-digit', minute: '2-digit' }).format(date);
+ return new Intl.DateTimeFormat(locale(), { day: '2-digit', month: '2-digit' }).format(date);
}
echarts.use([LineChart, GridComponent, TooltipComponent, AriaComponent, CanvasRenderer]);
export function TrafficChart({
samples, range, onRangeChange, currentRx, currentTx, status,
- emptyTitle = 'История трафика собирается',
- emptyDescription = 'Первая точка появится после сигнала Node Agent.',
- emptyFooterLabel = 'Ожидаем первую точку',
+ emptyTitle = t('nodes.collectingTrafficHistory'),
+ emptyDescription = t('nodes.theFirstSampleWillAppear'),
+ emptyFooterLabel = t('nodes.waitingForTheFirstSample'),
}: TrafficChartProps) {
const reducedMotion = useReducedMotion();
const compactChart = useMediaQuery('(max-width: 479px)') ?? false;
@@ -153,22 +154,22 @@ export function TrafficChart({
}), [samples, range, reducedMotion, compactChart, timeExtent, chartTheme]);
const updatedAt = latest?.timestamp ? new Date(latest.timestamp) : null;
const updatedLabel = updatedAt && !Number.isNaN(updatedAt.getTime())
- ? `Обновлено: ${new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(updatedAt)}`
+ ? t('nodes.updatedP0', { p0: new Intl.DateTimeFormat(locale(), { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(updatedAt) })
: emptyFooterLabel;
const explicitCurrent = currentRx !== undefined || currentTx !== undefined;
const actualRx = currentRx === undefined ? latest?.rx_bps : currentRx;
const actualTx = currentTx === undefined ? latest?.tx_bps : currentTx;
- const valueScope = explicitCurrent ? 'Сейчас' : 'Последняя точка';
- const chartLabel = `Трафик за период ${ranges.find((item) => item.value === range)?.label ?? range}. ${valueScope} RX ${formatBitrate(actualRx)}, TX ${formatBitrate(actualTx)}.`;
+ const valueScope = explicitCurrent ? t('nodes.now') : t('nodes.latestSample');
+ const chartLabel = t('nodes.trafficForP0ValuescopeRx', { p0: ranges.find((item) => item.value === range)?.label ?? range, valueScope, formatBitrate: formatBitrate(actualRx), p3: formatBitrate(actualTx) });
const currentStatus = status ?? {
tone: latest ? 'stale' as const : 'offline' as const,
- label: latest ? 'Исторические данные' : 'Нет свежих данных',
+ label: latest ? t('nodes.historicalData') : t('nodes.noFreshData'),
};
return (
-
+
{formatBitrate(actualRx)} {formatBitrate(actualTx)}
@@ -178,7 +179,7 @@ export function TrafficChart({
onChange={(value) => onRangeChange(value as TrafficRange)}
data={ranges}
size="sm"
- aria-label="Период графика"
+ aria-label={t('nodes.chartPeriod')}
/>
{latest ? (
diff --git a/frontend/src/features/nodes/model.ts b/frontend/src/features/nodes/model.ts
index 47a6365..7eea4c6 100644
--- a/frontend/src/features/nodes/model.ts
+++ b/frontend/src/features/nodes/model.ts
@@ -1,5 +1,6 @@
import type { DashboardNode, HeartbeatMetrics, NodeBundle, RouteRecord, TrafficHistorySample } from '../../lib/contracts';
import type { TrafficRange } from './useNodesOverview';
+import { t } from '../../i18n';
export type OperationalState = 'online' | 'degraded' | 'offline';
@@ -43,6 +44,6 @@ export function filterSamples(samples: TrafficHistorySample[], range: TrafficRan
export function routeName(route: RouteRecord): string {
return route.name || (route.fallback
- ? `Весь трафик · ${route.listener_ip || '*'}:${route.listener_port}`
- : route.snis[0] ?? route.hostname ?? 'Без имени');
+ ? t('nodes.allTrafficP0ListenerPort', { p0: route.listener_ip || '*', listener_port: route.listener_port })
+ : route.snis[0] ?? route.hostname ?? t('nodes.unnamed'));
}
diff --git a/frontend/src/features/routes/RouteLibraryDialog.tsx b/frontend/src/features/routes/RouteLibraryDialog.tsx
index 47163d6..a1efbe8 100644
--- a/frontend/src/features/routes/RouteLibraryDialog.tsx
+++ b/frontend/src/features/routes/RouteLibraryDialog.tsx
@@ -5,11 +5,12 @@ import { useLocation, useNavigate } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import type { NodeRecord, RouteRecord } from '../../lib/contracts';
import { copyRoutes, deleteTemplate, listTemplates, saveRouteTemplate, templateNodes, type CopyResult, type RouteTemplate } from './templates';
+import { apiErrorText, t } from '../../i18n';
// Same Modal chrome as every other panel dialog (node settings, delete route).
const dialogClassNames = { content: 'nf-dialog', header: 'nf-dialog__header', body: 'nf-dialog__body' };
-const COPY_NOTE = 'Копии создаются выключенными; счётчики и история не переносятся.';
-const LISTENER_HINT = 'На другой ноде проверьте listener IP и Unix-сокеты перед включением.';
+const COPY_NOTE = t('templates.copiesAreCreatedDisabledCounters');
+const LISTENER_HINT = t('templates.onAnotherNodeCheckThe');
function errorText(e: unknown, fallback: string) {
return e instanceof Error ? e.message : fallback;
@@ -30,17 +31,17 @@ function CopyTargets({ nodes, nodeID, targets, setTargets, name, setName, namePl
const nodeName = (id: string) => nodes.find((n) => n.id === id)?.name || id;
return <>
({ value: n.id, label: n.id === nodeID ? `${n.name} (эта нода)` : n.name }))}
+ label={t('templates.targetNodes')} placeholder={targets.length ? '' : t('templates.selectNodes')} searchable maxValues={100}
+ data={nodes.map((n) => ({ value: n.id, label: n.id === nodeID ? t('templates.nameThisNode', { name: n.name }) : n.name }))}
value={targets} onChange={setTargets} disabled={busy}
description={otherNode ? LISTENER_HINT : undefined}
/>
- setName(e.currentTarget.value)} maxLength={80} disabled={busy} />
- {results.length > 0 &&
+ setName(e.currentTarget.value)} maxLength={80} disabled={busy} />
+ {results.length > 0 &&
{results.map((r) =>
{nodeName(r.node_id)}
- {r.error || 'Черновик создан'}
- {r.route && onOpen(r)}>Открыть }
+ {r.error ? apiErrorText(r.error_code, r.error) : t('templates.draftCreated')}
+ {r.route && onOpen(r)}>{t('templates.open')} }
)}
}
;
@@ -63,7 +64,7 @@ export function RouteCopyDialog({ opened, onClose, nodeID, source }: {
if (!opened) return;
let active = true;
setError(''); setResults([]); setTargets([]); setName('');
- templateNodes().then((n) => { if (active) setNodes(n); }).catch((e) => { if (active) setError(errorText(e, 'Список нод недоступен')); });
+ templateNodes().then((n) => { if (active) setNodes(n); }).catch((e) => { if (active) setError(errorText(e, t('templates.nodeListUnavailable'))); });
return () => { active = false; };
}, [opened, source?.id]);
const copy = async () => {
@@ -76,10 +77,10 @@ export function RouteCopyDialog({ opened, onClose, nodeID, source }: {
// Keep failed targets selected, so a retry cannot duplicate successful copies.
setTargets(copied.filter((r) => r.error).map((r) => r.node_id));
await cache.invalidateQueries({ queryKey: ['node-detail'] });
- } catch (e) { setError(errorText(e, 'Копии не созданы')); } finally { setBusy(false); }
+ } catch (e) { setError(errorText(e, t('templates.copiesNotCreated'))); } finally { setBusy(false); }
};
const done = results.length > 0 && targets.length === 0;
- return {} : onClose} title="Копировать на ноды" size="md" closeOnClickOutside={!busy} closeOnEscape={!busy} classNames={dialogClassNames}>
+ return {} : onClose} title={t('node.copyToNodes')} size="md" closeOnClickOutside={!busy} closeOnEscape={!busy} classNames={dialogClassNames}>
{COPY_NOTE}
{error}
}
- {done ? 'Закрыть' : 'Отмена'}
- {!done && {done ? t('nodes.close') : t('node.cancel')}
+ {!done &&
;
}
/** «Сохранить как шаблон»: name and an optional short description. */
-export function RouteTemplateSaveDialog({ opened, onClose, title = 'Сохранить как шаблон', initialName, initialDescription = '', onSave }: {
+export function RouteTemplateSaveDialog({ opened, onClose, title = t('node.saveAsTemplate'), initialName, initialDescription = '', onSave }: {
opened: boolean; onClose: () => void; title?: string; initialName: string; initialDescription?: string;
onSave: (name: string, description: string) => Promise;
}) {
@@ -111,17 +112,17 @@ export function RouteTemplateSaveDialog({ opened, onClose, title = 'Сохран
}, [opened]); // eslint-disable-line react-hooks/exhaustive-deps
const save = async () => {
setBusy(true); setError('');
- try { await onSave(name.trim(), description.trim()); } catch (e) { setError(errorText(e, 'Шаблон не сохранён')); } finally { setBusy(false); }
+ try { await onSave(name.trim(), description.trim()); } catch (e) { setError(errorText(e, t('templates.templateNotSaved'))); } finally { setBusy(false); }
};
return {} : onClose} title={title} size="md" closeOnClickOutside={!busy} closeOnEscape={!busy} classNames={dialogClassNames}>
- Изменение шаблона не меняет созданные из него маршруты.
- setName(e.currentTarget.value)} maxLength={80} disabled={busy} data-autofocus required />
- 
+