rlwj-lab/aiops
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): 剩余模块全量国际化 — 51% 覆盖率 (231 文件接入 t())

Browse Source 
批量转换 163 个文件，3204 处中文替换为 t() 调用：
- Monitor: 日志中心/告警中心/数据源/大屏/站点拨测/SNMP/中间件 全部转换
- Kubernetes: ResourceVisualEditor/NamespaceResourcePage/拓扑/事件 全部转换
- Deploy: 流水线/发布/凭证/RBAC 全部转换
- Server/Cloud/Agent/Task/Layout/UI: 全部转换
- 翻译词典扩展至 6474 行 (22 namespaces, 5000+ keys)
- tsc 编译零错误
This commit is contained in:
attacker committed 2026-07-03 01:51:57 +08:00
1 parent 78c27037e3
commit ecec73989b
166 files changed
+6925 -2800
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/monitor/HostMonitor.tsx
+58 -56
View File
@@ -31,8 +31,10 @@ import { PortPolicyDialog } from './host-monitor/PortPolicyDialog';
import { SystemInfoSection } from './host-monitor/SystemInfoSection';
import { HostCoreMetricsStrip } from './host-monitor/HostCoreMetricsStrip';
import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
const { t } = useTranslation();
const qc = useQueryClient();
const [searchParams] = useSearchParams();
const urlHost = searchParams.get('host') || '';
@@ -124,7 +126,7 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<div className="flex items-center gap-2">
<Select value={selectedHost} onValueChange={setSelectedHost}>
<SelectTrigger className="w-52 h-8 text-xs dg-input">
<SelectValue placeholder="选择主机..." />
<SelectValue placeholder=t('monitor.hostmonitor.sb6637d') />
</SelectTrigger>
<SelectContent className="dg-input">
{hosts.map((h: JsonData) => (
@@ -134,7 +136,7 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
</Select>
{serverInfo && (
<span className="text-xs dg-text-muted">
{String(serverInfo.os || '')}{serverInfo.cpu_cores ? ` | ${serverInfo.cpu_cores as number | string} 核` : ''}{serverInfo.mem_total ? ` | ${(serverInfo.mem_total as number).toFixed(0)}GB` : ''}
{String(serverInfo.os || '')}{serverInfo.cpu_cores ? t('monitor.hostmonitor.se307d8', { serverInfo.cpu_cores as number | string: serverInfo.cpu_cores as number | string }) : ''}{serverInfo.mem_total ? ` | ${(serverInfo.mem_total as number).toFixed(0)}GB` : ''}
</span>
)}
</div>
@@ -144,9 +146,9 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<SelectValue />
</SelectTrigger>
<SelectContent className="dg-input">
<SelectItem value="avg">平均值</SelectItem>
<SelectItem value="max">最大值</SelectItem>
<SelectItem value="min">最小值</SelectItem>
<SelectItem value="avg">{t('monitor.hostmonitor.se68632')}</SelectItem>
<SelectItem value="max">{t('monitor.hostmonitor.s5da893')}</SelectItem>
<SelectItem value="min">{t('monitor.hostmonitor.sc322ed')}</SelectItem>
</SelectContent>
</Select>
<div className="flex flex-col items-end gap-0.5">
@@ -163,13 +165,13 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="h-8 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] gap-0 overflow-x-auto">
{[
{ id: 'basic', label: '基础监控', icon: <Monitor className="w-3.5 h-3.5" /> },
{ id: 'disk', label: '磁盘监控', icon: <HardDrive className="w-3.5 h-3.5" /> },
{ id: 'network', label: '网络监控', icon: <Network className="w-3.5 h-3.5" /> },
{ id: 'ports', label: '端口监控', icon: <Server className="w-3.5 h-3.5" /> },
{ id: 'process', label: '进程监控', icon: <List className="w-3.5 h-3.5" /> },
{ id: 'system', label: '系统信息', icon: <Info className="w-3.5 h-3.5" /> },
{ id: 'health_probes', label: '健康探针', icon: <HeartPulse className="w-3.5 h-3.5" /> },
{ id: 'basic', label: t('monitor.hostmonitor.s003038'), icon: <Monitor className="w-3.5 h-3.5" /> },
{ id: 'disk', label: t('monitor.hostmonitor.s5dd0a0'), icon: <HardDrive className="w-3.5 h-3.5" /> },
{ id: 'network', label: t('monitor.hostmonitor.s59805c'), icon: <Network className="w-3.5 h-3.5" /> },
{ id: 'ports', label: t('agent.portMonitor'), icon: <Server className="w-3.5 h-3.5" /> },
{ id: 'process', label: t('monitor.hostProcess'), icon: <List className="w-3.5 h-3.5" /> },
{ id: 'system', label: t('monitor.hostmonitor.sb7ea5e'), icon: <Info className="w-3.5 h-3.5" /> },
{ id: 'health_probes', label: t('kubernetes.container.probes'), icon: <HeartPulse className="w-3.5 h-3.5" /> },
].map(tab => (
<TabsTrigger key={tab.id} value={tab.id} className="text-[11px] h-7 gap-1.5 px-3 data-[state=active]:bg-[var(--dg-bg-primary)]">
<span className="shrink-0 opacity-80">{tab.icon}</span>
@@ -179,35 +181,35 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
</TabsList>
<TabsContent value="basic" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
<MetricChartCard title="CPU 使用率(%)" value={currentVal('cpu')} icon={<Cpu />} iconTone="blue"
<MetricChartCard title=t('monitor.hostmonitor.s4e6cbf') value={currentVal('cpu')} icon={<Cpu />} iconTone="blue"
data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
<MetricChartCard title="CPU IO等待(%)" value={latest?.cpu_iowait != null ? `${(latest.cpu_iowait as number).toFixed(1)}%` : '--'} icon={<Clock />} iconTone="orange"
<MetricChartCard title=t('monitor.hostmonitor.s79f80f') value={latest?.cpu_iowait != null ? `${(latest.cpu_iowait as number).toFixed(1)}%` : '--'} icon={<Clock />} iconTone="orange"
data={metrics.iowait} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
<MetricChartCard title="内存使用率(%)" value={currentVal('mem')} icon={<Server />} iconTone="green"
<MetricChartCard title=t('monitor.hostmonitor.s78262b') value={currentVal('mem')} icon={<Server />} iconTone="green"
data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
<MetricChartCard title="可用内存(GB)" value={latest?.mem_available != null ? `${(latest.mem_available as number).toFixed(1)}GB` : '--'} icon={<Server />} iconTone="green"
<MetricChartCard title=t('monitor.hostmonitor.sa23fcd') value={latest?.mem_available != null ? `${(latest.mem_available as number).toFixed(1)}GB` : '--'} icon={<Server />} iconTone="green"
data={metrics.memAvail} color="#34d399" unit="GB" domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title="Swap 使用率(%)" value={currentVal('swap')} icon={<HardDrive />} iconTone="red"
<MetricChartCard title=t('monitor.hostmonitor.s05589b') value={currentVal('swap')} icon={<HardDrive />} iconTone="red"
data={metrics.swap} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} />
<MetricChartCard title="系统负载(1m)" value={currentVal('load1')} icon={<Activity />} iconTone="purple"
<MetricChartCard title=t('monitor.hostmonitor.sae62ef') value={currentVal('load1')} icon={<Activity />} iconTone="purple"
data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} aggType={aggType} />
</TabsContent>
<TabsContent value="disk" className="mt-3 space-y-3">
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<MetricChartCard title="磁盘使用率(%)" value={currentVal('disk')} icon={<HardDrive />} iconTone="orange"
<MetricChartCard title=t('monitor.hostmonitor.sdf9692') value={currentVal('disk')} icon={<HardDrive />} iconTone="orange"
data={metrics.disk} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
<MetricChartCard title="Inode 使用率(%)" value={(() => {
<MetricChartCard title=t('monitor.hostmonitor.s202961') value={(() => {
const dArr = Array.isArray(parseJSON(latest?.disk_info)) ? parseJSON(latest?.disk_info) : [];
const root = dArr.find((d: JsonData) => d.mount === '/') || dArr[0];
return root?.inode_usage_pct != null ? `${root.inode_usage_pct.toFixed(1)}%` : '--';
})()} icon={<HardDrive />} iconTone="purple"
data={metrics.inode} color="#8b5cf6" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
<MetricChartCard title="磁盘读取(KB/s)" value={currentVal('ioR')} icon={<Disc />} iconTone="blue"
<MetricChartCard title=t('monitor.hostmonitor.s72e3c2') value={currentVal('ioR')} icon={<Disc />} iconTone="blue"
data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title="磁盘写入(KB/s)" value={currentVal('ioW')} icon={<Disc />} iconTone="green"
<MetricChartCard title=t('monitor.hostmonitor.sa9b96f') value={currentVal('ioW')} icon={<Disc />} iconTone="green"
data={metrics.ioWrite} color="#10b981" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title="磁盘IO繁忙度(%)" value={diskIOInfo?.util != null ? `${diskIOInfo.util.toFixed(1)}%` : '--'} icon={<Disc />} iconTone="red"
<MetricChartCard title=t('monitor.hostmonitor.s996ada') value={diskIOInfo?.util != null ? `${diskIOInfo.util.toFixed(1)}%` : '--'} icon={<Disc />} iconTone="red"
data={metrics.ioUtil} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
</div>
</TabsContent>
@@ -215,26 +217,26 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<TabsContent value="network" className="mt-3 space-y-3">
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
<MetricChartCard title="TCP EST" value={currentVal('tcp')} icon={<Network />} iconTone="purple"
data={metrics.tcpEst} color="#8b5cf6" unit="个" domain={[0, 'auto']} aggType={aggType} />
data={metrics.tcpEst} color="#8b5cf6" unit=t('monitor.hostmonitor.s930882') domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title="TCP TIME_WAIT" value={currentVal('tw')} icon={<Clock />} iconTone="yellow"
data={metrics.tcpTW} color="#f59e0b" unit="个" domain={[0, 'auto']} aggType={aggType} />
data={metrics.tcpTW} color="#f59e0b" unit=t('monitor.hostmonitor.s930882') domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title="TCP CLOSE_WAIT" value={netInfo?.tcp_close_wait != null ? String(netInfo.tcp_close_wait) : '--'} icon={<Clock />} iconTone="red"
data={metrics.tcpCW} color="#ef4444" unit="个" domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title="TCP 总连接" value={netInfo ? String((netInfo.tcp_established||0)+(netInfo.tcp_time_wait||0)+(netInfo.tcp_close_wait||0)) : '--'} icon={<Network />} iconTone="cyan"
data={metrics.connTotal} color="#22d3ee" unit="个" domain={[0, 'auto']} aggType={aggType} />
data={metrics.tcpCW} color="#ef4444" unit=t('monitor.hostmonitor.s930882') domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title=t('monitor.hostmonitor.s56c1b4') value={netInfo ? String((netInfo.tcp_established||0)+(netInfo.tcp_time_wait||0)+(netInfo.tcp_close_wait||0)) : '--'} icon={<Network />} iconTone="cyan"
data={metrics.connTotal} color="#22d3ee" unit=t('monitor.hostmonitor.s930882') domain={[0, 'auto']} aggType={aggType} />
</div>
<DualLineChart
title="网卡带宽吞吐"
title=t('monitor.hostmonitor.s1e2a9e')
currentRx={netInfo?.net_rx_bps != null ? formatBPS(netInfo.net_rx_bps) : '--'}
currentTx={netInfo?.net_tx_bps != null ? formatBPS(netInfo.net_tx_bps) : '--'}
rxData={metrics.rx} txData={metrics.tx}
aggType={aggType} unit="KB/s"
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
<MetricChartCard title="网卡接收错误" value={netInfo?.net_rx_errors != null ? String(netInfo.net_rx_errors) : '--'} icon={<XCircle />} iconTone="red"
data={metrics.rxErr} color="#ef4444" unit="个" domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title="网卡发送错误" value={netInfo?.net_tx_errors != null ? String(netInfo.net_tx_errors) : '--'} icon={<XCircle />} iconTone="orange"
data={metrics.txErr} color="#f97316" unit="个" domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title=t('monitor.hostmonitor.s9f7e99') value={netInfo?.net_rx_errors != null ? String(netInfo.net_rx_errors) : '--'} icon={<XCircle />} iconTone="red"
data={metrics.rxErr} color="#ef4444" unit=t('monitor.hostmonitor.s930882') domain={[0, 'auto']} aggType={aggType} />
<MetricChartCard title=t('monitor.hostmonitor.sb2ffd5') value={netInfo?.net_tx_errors != null ? String(netInfo.net_tx_errors) : '--'} icon={<XCircle />} iconTone="orange"
data={metrics.txErr} color="#f97316" unit=t('monitor.hostmonitor.s930882') domain={[0, 'auto']} aggType={aggType} />
</div>
</TabsContent>
@@ -269,10 +271,10 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<table className="w-full text-xs">
<thead>
<tr className="text-[var(--dg-text-muted)] border-b border-[var(--dg-border)]">
<th className="py-1.5 text-left font-medium">端口</th>
<th className="py-1.5 text-left font-medium">协议</th>
<th className="py-1.5 text-left font-medium">进程</th>
<th className="py-1.5 text-right font-medium">状态</th>
<th className="py-1.5 text-left font-medium">{t('server.csv.port')}</th>
<th className="py-1.5 text-left font-medium">{t('common.protocol')}</th>
<th className="py-1.5 text-left font-medium">{t('monitor.hostmonitor.sf88522')}</th>
<th className="py-1.5 text-right font-medium">{t('common.status')}</th>
</tr>
</thead>
<tbody>
@@ -315,11 +317,11 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<table className="w-full text-xs">
<thead>
<tr className="text-[var(--dg-text-muted)] border-b border-[var(--dg-border)]">
<th className="py-1.5 text-left font-medium w-[40%]">进程名称 / CMD</th>
<th className="py-1.5 text-left font-medium w-[40%]">{t('monitor.hostmonitor.s23ecaf')}</th>
<th className="py-1.5 text-right font-medium w-[8%]">PID</th>
<th className="py-1.5 text-right font-medium w-[16%]">内存使用率(%)</th>
<th className="py-1.5 text-right font-medium w-[16%]">CPU使用率(%)</th>
<th className="py-1.5 text-right font-medium w-[20%]">打开文件数</th>
<th className="py-1.5 text-right font-medium w-[16%]">{t('monitor.hostmonitor.s78262b')}</th>
<th className="py-1.5 text-right font-medium w-[16%]">{t('monitor.hostmonitor.s4cfc11')}</th>
<th className="py-1.5 text-right font-medium w-[20%]">{t('monitor.hostmonitor.s8fe5ed')}</th>
</tr>
</thead>
<tbody>
@@ -336,7 +338,7 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
</span>
<button
className="opacity-0 group-hover/cmd:opacity-100 transition-opacity p-0.5 hover:dg-text-cyan shrink-0"
title="复制命令行"
title=t('monitor.hostmonitor.s92cb88')
onClick={async (e) => {
e.stopPropagation();
try {
@@ -398,15 +400,15 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<>
<div className="flex items-center gap-4 mb-3 text-xs">
<div>
<span className="text-[var(--dg-text-muted)]">已分配 </span>
<span className="text-[var(--dg-text-muted)]">{t('common.assigned')} </span>
<span className="font-mono text-[var(--dg-text-primary)] font-semibold">{fdInfo.allocated.toLocaleString()}</span>
</div>
<div>
<span className="text-[var(--dg-text-muted)]">上限 </span>
<span className="font-mono text-[var(--dg-text-primary)] font-semibold">{fdInfo.max === -1 ? '无限制' : fdInfo.max?.toLocaleString() || '—'}</span>
<span className="text-[var(--dg-text-muted)]">{t('monitor.hostmonitor.s726bfb')} </span>
<span className="font-mono text-[var(--dg-text-primary)] font-semibold">{fdInfo.max === -1 ? t('monitor.hostmonitor.sbc4364') : fdInfo.max?.toLocaleString() || '—'}</span>
</div>
<div>
<span className="text-[var(--dg-text-muted)]">使用率 </span>
<span className="text-[var(--dg-text-muted)]">{t('server.usage')} </span>
<span className={`font-mono font-semibold ${fdInfo.usage_pct > 80 ? 'text-rose-400' : 'dg-text-purple'}`}>
{fdInfo.usage_pct != null ? `${fdInfo.usage_pct.toFixed(1)}%` : '—'}
</span>
@@ -416,12 +418,12 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<ZoomableAreaChart
ref={fdChartRef}
data={metrics.fd.map((d) => ({ ...d, value: d[aggType] }))}
series={[{ dataKey: 'value', color: '#a78bfa', label: 'FD 使用率' }]}
series={[{ dataKey: 'value', color: '#a78bfa', label: t('monitor.hostmonitor.s28130d') }]}
yDomain={[0, 'auto']}
unit="%"
chartId="fd-usage"
title="FD 文件句柄使用率"
subtitle={fdInfo?.usage_pct != null ? `当前 ${fdInfo.usage_pct.toFixed(1)}%` : undefined}
title=t('monitor.hostmonitor.sc026a1')
subtitle={fdInfo?.usage_pct != null ? t('monitor.hostmonitor.sbe891d', { fdInfo.usage_pct.toFixed(1): fdInfo.usage_pct.toFixed(1) }) : undefined}
height={160}
toolbarPlacement="header"
onZoomedChange={setFdChartZoomed}
@@ -430,7 +432,7 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
)}
</>
) : (
<div className="text-center py-4 text-xs text-[var(--dg-text-muted)]">等待数据…</div>
<div className="text-center py-4 text-xs text-[var(--dg-text-muted)]">{t('monitor.hostmonitor.sae1a30')}</div>
)}
</CardContent>
</Card>
@@ -444,14 +446,14 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="bg-[var(--dg-bg-primary)] rounded-lg p-3 text-center">
<div className="text-[10px] text-[var(--dg-text-muted)] mb-1">CTX 切换/秒</div>
<div className="text-[10px] text-[var(--dg-text-muted)] mb-1">{t('monitor.hostmonitor.s18f91f')}</div>
<div className="text-lg font-bold font-mono dg-text-green">
{(csInfo.ctx_per_sec / 1e6).toFixed(1)}<span className="text-xs font-normal text-[var(--dg-text-muted)] ml-0.5">M</span>
</div>
<div className="text-[10px] text-[var(--dg-text-muted)] mt-1 font-mono">{csInfo.ctx_per_sec?.toLocaleString()} 次</div>
</div>
<div className="bg-[var(--dg-bg-primary)] rounded-lg p-3 text-center">
<div className="text-[10px] text-[var(--dg-text-muted)] mb-1">IRQ 中断/秒</div>
<div className="text-[10px] text-[var(--dg-text-muted)] mb-1">{t('monitor.hostmonitor.sb7cd83')}</div>
<div className="text-lg font-bold font-mono dg-text-yellow">
{(csInfo.irq_per_sec / 1e6).toFixed(1)}<span className="text-xs font-normal text-[var(--dg-text-muted)] ml-0.5">M</span>
</div>
@@ -476,7 +478,7 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
</div>
</div>
) : (
<div className="text-center py-4 text-xs text-[var(--dg-text-muted)]">等待数据…</div>
<div className="text-center py-4 text-xs text-[var(--dg-text-muted)]">{t('monitor.hostmonitor.sae1a30')}</div>
)}
</CardContent>
</Card>
@@ -529,12 +531,12 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
return (
<PageShell
variant="workspace"
title="主机监控"
subtitle={selectedHost ? `当前主机: ${selectedHost}` : '选择主机查看监控指标'}
title=i18n.t('monitor.hostMonitor')
subtitle={selectedHost ? i18n.t('monitor.hostmonitor.s60cdc3', { selectedHost: selectedHost }) : i18n.t('monitor.hostmonitor.s8d4930')}
icon={<Server className="h-5 w-5" />}
toolbar={toolbar}
loading={loading && !history.length}
loadingLabel="加载监控数据..."
loadingLabel=i18n.t('monitor.hostmonitor.sc23e80')
contentClassName="space-y-3"
>
{monitorBody}