-
+
{(['redis', 'mysql'] as const).map((t) => (
{form.type === 'redis' && (
-
+
- {[{ value: 'standalone' as const, label: i18n.t('单机') }, { value: 'cluster' as const, label: i18n.t('k8s.topology.typeCluster') }].map((opt) => (
+ {[{ value: 'standalone' as const, label: t('monitor.lbl.standalone') }, { value: 'cluster' as const, label: t('k8s.topology.typeCluster') }].map((opt) => (
)}
-
+
setForm((f) => ({ ...f, name: e.target.value }))} />
@@ -119,7 +120,7 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
setForm((f) => ({ ...f, ip: e.target.value }))} />
-
+
setForm((f) => ({ ...f, port: Number(e.target.value) }))} />
@@ -130,21 +131,21 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
{form.type === 'mysql' && (
)}
diff --git a/frontend/src/pages/monitor/middleware-monitor/MwOverviewCharts.tsx b/frontend/src/pages/monitor/middleware-monitor/MwOverviewCharts.tsx
index fcb9195..25b91ea 100644
--- a/frontend/src/pages/monitor/middleware-monitor/MwOverviewCharts.tsx
+++ b/frontend/src/pages/monitor/middleware-monitor/MwOverviewCharts.tsx
@@ -10,7 +10,7 @@ import type { MwTarget } from './helpers';
import { fmtHitRate, fmtVal } from './helpers';
import { ChartExpandShell } from '../shared/ChartExpandShell';
import { MonitorChartTooltip, MONITOR_PIE_STROKE, MonitorPieTooltip } from '../shared/monitorChartTheme';
-import i18n from '@/i18n';
+import { useTranslation } from 'react-i18next';
interface Props {
targets: MwTarget[];
@@ -21,12 +21,13 @@ function shortName(name: string) {
}
export function MwOverviewCharts({ targets }: Props) {
+ const { t } = useTranslation();
const statusData = useMemo(() => {
const online = targets.filter((t) => t.status === 'online').length;
const offline = targets.length - online;
return [
- { name: i18n.t('agent.agentOnline'), value: online, fill: 'var(--dg-green)' },
- { name: i18n.t('agent.agentOffline'), value: offline, fill: 'var(--dg-red)' },
+ { name: t('agent.agentOnline'), value: online, fill: 'var(--dg-green)' },
+ { name: t('agent.agentOffline'), value: offline, fill: 'var(--dg-red)' },
].filter((d) => d.value > 0);
}, [targets]);
@@ -53,7 +54,7 @@ export function MwOverviewCharts({ targets }: Props) {
return (
-
} empty={statusData.length === 0}>
+
} empty={statusData.length === 0}>
{(h) => (
@@ -67,13 +68,13 @@ export function MwOverviewCharts({ targets }: Props) {
)}
- } empty={redisHitData.length === 0}>
+ } empty={redisHitData.length === 0}>
{(h) => (
`${v}%`} />
- fmtHitRate(v / 100)} nameFormatter={() => i18n.t('命中率')} />} />
+ fmtHitRate(v / 100)} nameFormatter={() => t('monitor.lbl.hitRate')} />} />
{redisHitData.map((e) => | )}
@@ -97,13 +98,13 @@ export function MwOverviewCharts({ targets }: Props) {
)}
- } empty={mysqlConnData.length === 0}>
+ } empty={mysqlConnData.length === 0}>
{(h) => (
- fmtVal(v)} nameFormatter={() => i18n.t('连接')} />} />
+ fmtVal(v)} nameFormatter={() => t('monitor.lbl.connections')} />} />
{mysqlConnData.map((e) => | )}
diff --git a/frontend/src/pages/monitor/middleware-monitor/MwTargetChartsPanel.tsx b/frontend/src/pages/monitor/middleware-monitor/MwTargetChartsPanel.tsx
index 01e048a..b03ab98 100644
--- a/frontend/src/pages/monitor/middleware-monitor/MwTargetChartsPanel.tsx
+++ b/frontend/src/pages/monitor/middleware-monitor/MwTargetChartsPanel.tsx
@@ -18,7 +18,7 @@ import { MwTrendChart } from './MwTrendChart';
import { MwGaugeBar } from './MwGaugeBar';
import { MwHealthStrip } from './MwHealthStrip';
import { ChartExpandShell } from '../shared/ChartExpandShell';
-import i18n from '@/i18n';
+import { useTranslation } from 'react-i18next';
interface Props {
target: MwTarget | null;
@@ -27,6 +27,7 @@ interface Props {
}
export function MwTargetChartsPanel({ target, chartDefs, accent }: Props) {
+ const { t } = useTranslation();
const [timeRange, setTimeRange] = useState('6h');
const [historyMap, setHistoryMap] = useState>>({});
const [loading, setLoading] = useState(false);
@@ -92,15 +93,15 @@ export function MwTargetChartsPanel({ target, chartDefs, accent }: Props) {
diff --git a/frontend/src/pages/monitor/middleware-monitor/helpers.ts b/frontend/src/pages/monitor/middleware-monitor/helpers.ts
index d629a44..0d14238 100644
--- a/frontend/src/pages/monitor/middleware-monitor/helpers.ts
+++ b/frontend/src/pages/monitor/middleware-monitor/helpers.ts
@@ -60,7 +60,7 @@ export const MYSQL_PRIMARY_KEYS = ['mysql_qps', 'mysql_connections', 'mysql_buff
export const REDIS_CHARTS: MwChartDef[] = [
{ key: 'redis_qps', label: 'QPS', color: 'var(--dg-blue)', unit: 'ops/s' },
{ key: 'redis_used_memory', label: i18n.t('内存占用'), color: 'var(--dg-red)', formatter: fmtMemory },
- { key: 'redis_hit_rate', label: i18n.t('命中率'), color: 'var(--dg-green)', percent: true },
+ { key: 'redis_hit_rate', label: i18n.t('monitor.lbl.hitRate'), color: 'var(--dg-green)', percent: true },
{ key: 'redis_connected_clients', label: i18n.t('kubernetes.topology.connections'), color: 'var(--dg-cyan)' },
{ key: 'redis_db_size', label: i18n.t('慢查询速率'), color: 'var(--dg-purple)' },
{ key: 'redis_blocked_clients', label: i18n.t('阻塞客户端'), color: 'var(--dg-orange)' },
diff --git a/frontend/src/pages/monitor/shared/ChartRangeHint.tsx b/frontend/src/pages/monitor/shared/ChartRangeHint.tsx
index 3a08dbb..62c9694 100644
--- a/frontend/src/pages/monitor/shared/ChartRangeHint.tsx
+++ b/frontend/src/pages/monitor/shared/ChartRangeHint.tsx
@@ -1,7 +1,7 @@
// 图表选区提示 — 仅缩放后显示恢复入口 // Logan.Li
import { ZoomOut } from 'lucide-react';
import { Button } from '@/components/ui/button';
-import i18n from '@/i18n';
+import { useTranslation } from 'react-i18next';
interface Props {
label: string | null;
@@ -10,10 +10,11 @@ interface Props {
}
export function ChartRangeHint({ label, zoomed, onReset }: Props) {
+ const { t } = useTranslation();
if (!zoomed) return null;
return (
-
{i18n.t('monitor.chartrangehintt.s39ce9bad')} {label}
+
{t('monitor.chartrangehintt.s39ce9bad')} {label}
diff --git a/frontend/src/pages/monitor/site-monitor/SiteProtocolPieChart.tsx b/frontend/src/pages/monitor/site-monitor/SiteProtocolPieChart.tsx
index 583de87..efe454e 100644
--- a/frontend/src/pages/monitor/site-monitor/SiteProtocolPieChart.tsx
+++ b/frontend/src/pages/monitor/site-monitor/SiteProtocolPieChart.tsx
@@ -6,7 +6,7 @@ import { Card, CardContent } from '@/components/ui/card';
import { PieChart as PieChartIcon } from 'lucide-react';
import { PROBE_TYPE_OPTIONS, normalizeProbeType } from './helpers';
import type { SiteTask } from './helpers';
-import i18n from '@/i18n';
+import { useTranslation } from 'react-i18next';
interface Props {
tasks: SiteTask[];
@@ -21,6 +21,7 @@ const PROTOCOL_COLORS: Record
= {
};
export function SiteProtocolPieChart({ tasks }: Props) {
+ const { t } = useTranslation();
const protocolData = useMemo(() => {
const counts: Record = {};
for (const t of PROBE_TYPE_OPTIONS) counts[t] = 0;
@@ -36,7 +37,7 @@ export function SiteProtocolPieChart({ tasks }: Props) {
if (tasks.length === 0) {
return (
- {i18n.t('可用率(24h)')}
+ {t('monitor.lbl.availability24h')}
);
}
@@ -46,7 +47,7 @@ export function SiteProtocolPieChart({ tasks }: Props) {
-
{i18n.t('可用率(24h)')}
+
{t('monitor.lbl.availability24h')}
共 {tasks.length} 个任务
diff --git a/frontend/src/pages/monitor/site-monitor/SiteResultsPanel.tsx b/frontend/src/pages/monitor/site-monitor/SiteResultsPanel.tsx
index e91a71a..e8e32b8 100644
--- a/frontend/src/pages/monitor/site-monitor/SiteResultsPanel.tsx
+++ b/frontend/src/pages/monitor/site-monitor/SiteResultsPanel.tsx
@@ -19,6 +19,7 @@ import {
SITE_TIME_RANGE_HOURS, SITE_TIME_RANGE_LABELS,
} from './helpers';
import { SiteProtocolObs } from './observability/SiteProtocolObs';
+import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
interface Props {
@@ -48,6 +49,7 @@ function httpCodeBadge(code?: number, expected = 200) {
}
export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
+ const { t } = useTranslation();
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [probing, setProbing] = useState(false);
@@ -77,11 +79,11 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
setProbing(true);
try {
await siteApi.probeNow(task.id);
- toast.success(i18n.t('拨测完成'));
+ toast.success(t('monitor.lbl.probeDone'));
loadResults();
onProbed();
} catch (e) {
- toast.error((e as { message?: string }).message || i18n.t('拨测失败'));
+ toast.error((e as { message?: string }).message || t('monitor.lbl.probeFail'));
} finally {
setProbing(false);
}
@@ -117,41 +119,41 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
case 'HTTP':
return (
- {i18n.t('system.auditTime')}
- {i18n.t('system.terminalStatus')}
- {i18n.t('monitor.siteProtocol.http.statusCodeName')}
- {i18n.t('monitor.siteProtocol.latency.latencyName')}
- {i18n.t('cloud.colDescription')}
+ {t('system.auditTime')}
+ {t('system.terminalStatus')}
+ {t('monitor.siteProtocol.http.statusCodeName')}
+ {t('monitor.siteProtocol.latency.latencyName')}
+ {t('cloud.colDescription')}
);
case 'SSL':
return (
- {i18n.t('system.auditTime')}
- {i18n.t('编辑拨测任务')}
- {i18n.t('编辑拨测任务')}
- {i18n.t('monitor.siteProtocol.ssl.daysName')}
- {i18n.t('monitor.siteProtocol.ssl.issuer')}
+ {t('system.auditTime')}
+ {t('monitor.lbl.editTask')}
+ {t('monitor.lbl.editTask')}
+ {t('monitor.siteProtocol.ssl.daysName')}
+ {t('monitor.siteProtocol.ssl.issuer')}
);
case 'TCP':
return (
- {i18n.t('system.auditTime')}
- {i18n.t('monitor.siteProtocol.tcp.connected')}
- {i18n.t('monitor.siteProtocol.latency.latencyName')}
- {i18n.t('编辑拨测任务')}
- {i18n.t('cloud.colDescription')}
+ {t('system.auditTime')}
+ {t('monitor.siteProtocol.tcp.connected')}
+ {t('monitor.siteProtocol.latency.latencyName')}
+ {t('monitor.lbl.editTask')}
+ {t('cloud.colDescription')}
);
default:
return (
- {i18n.t('system.auditTime')}
- {i18n.t('system.terminalStatus')}
- {i18n.t('monitor.siteProtocol.latency.latencyName')}
- {i18n.t('编辑拨测任务')}
- {i18n.t('cloud.colDescription')}
+ {t('system.auditTime')}
+ {t('system.terminalStatus')}
+ {t('monitor.siteProtocol.latency.latencyName')}
+ {t('monitor.lbl.editTask')}
+ {t('cloud.colDescription')}
);
}
@@ -188,7 +190,7 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
{statusBadge(r.status)}
{fmtMs(r.response_time || r.total_time)}
{r.remote_ip || '--'}
- {r.error_message || (r.status === 'success' ? i18n.t('monitor.siteProtocol.tcp.connected') : '--')}
+ {r.error_message || (r.status === 'success' ? t('monitor.siteProtocol.tcp.connected') : '--')}
);
default:
@@ -223,10 +225,10 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {