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

feat(i18n): 安全批量转换 135 文件 — 覆盖率 34%→62%

Browse Source 
使用 i18n.t() 全局方式（避免 hook 定位问题）:
- 288 目标文件中 135 个成功转换
- 2228 处中文替换为 i18n.t() 调用
- 1006 个新翻译 key 添加到 zh-CN.json + en-US.json
- 词典总量: 3554 keys (22 namespaces)
- tsc 零错误 + Vite 构建成功
- 6 个含代码示例/数据字符串的文件安全回退
This commit is contained in:
attacker committed 2026-07-03 02:14:20 +08:00
1 parent 72bfb0e12d
commit 55f216cfbb
131 files changed
+4049 -1908
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/monitor/HostMonitor.tsx
+46 -45
View File
@@ -31,6 +31,7 @@ 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 i18n from '@/i18n';
export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
const qc = useQueryClient();
@@ -124,7 +125,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={i18n.t('monitor.hostmonitortsx.sb6637d99')} />
</SelectTrigger>
<SelectContent className="dg-input">
{hosts.map((h: JsonData) => (
@@ -144,9 +145,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"> {i18n.t('monitor.hostmonitortsx.se68632a3')} </SelectItem>
<SelectItem value="max"> {i18n.t('monitor.hostmonitortsx.s5da89314')} </SelectItem>
<SelectItem value="min"> {i18n.t('monitor.hostmonitortsx.sc322edb8')} </SelectItem>
</SelectContent>
</Select>
<div className="flex flex-col items-end gap-0.5">
@@ -163,13 +164,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: i18n.t('monitor.hostmonitortsx.s00303869'), icon: <Monitor className="w-3.5 h-3.5" /> },
{ id: 'disk', label: i18n.t('monitor.hostmonitortsx.s5dd0a090'), icon: <HardDrive className="w-3.5 h-3.5" /> },
{ id: 'network', label: i18n.t('monitor.hostmonitortsx.s59805cc8'), icon: <Network className="w-3.5 h-3.5" /> },
{ id: 'ports', label: i18n.t('agent.portMonitor'), icon: <Server className="w-3.5 h-3.5" /> },
{ id: 'process', label: i18n.t('monitor.hostProcess'), icon: <List className="w-3.5 h-3.5" /> },
{ id: 'system', label: i18n.t('system.systemInfo'), icon: <Info className="w-3.5 h-3.5" /> },
{ id: 'health_probes', label: i18n.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 +180,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={i18n.t('monitor.hostmonitortsx.s4e6cbf10')} 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={i18n.t('monitor.hostmonitortsx.s79f80fbf')} 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={i18n.t('monitor.hostmonitortsx.s78262b59')} 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={i18n.t('monitor.hostmonitortsx.sa23fcda0')} 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={i18n.t('monitor.hostmonitortsx.s05589bfd')} 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={i18n.t('monitor.hostmonitortsx.sae62efb2')} 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={i18n.t('monitor.hostmonitortsx.sdf969221')} 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={i18n.t('monitor.hostmonitortsx.s20296121')} 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={i18n.t('monitor.hostmonitortsx.s72e3c273')} 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={i18n.t('monitor.hostmonitortsx.sa9b96f9b')} 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={i18n.t('monitor.hostmonitortsx.s996adabd')} 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>
@@ -220,20 +221,20 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
data={metrics.tcpTW} color="#f59e0b" unit="个" 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"
<MetricChartCard title={i18n.t('monitor.hostmonitortsx.s56c1b42a')} 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} />
</div>
<DualLineChart
title="网卡带宽吞吐"
title={i18n.t('monitor.hostmonitortsx.s1e2a9e41')}
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"
<MetricChartCard title={i18n.t('monitor.hostmonitortsx.s9f7e9902')} 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"
<MetricChartCard title={i18n.t('monitor.hostmonitortsx.sb2ffd58e')} 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} />
</div>
</TabsContent>
@@ -269,10 +270,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"> {i18n.t('system.ldapPort')} </th>
<th className="py-1.5 text-left font-medium"> {i18n.t('kubernetes.service.protocol')} </th>
<th className="py-1.5 text-left font-medium"> {i18n.t('monitor.hostmonitortsx.sf88522cf')} </th>
<th className="py-1.5 text-right font-medium"> {i18n.t('system.terminalStatus')} </th>
</tr>
</thead>
<tbody>
@@ -315,11 +316,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%]"> {i18n.t('monitor.hostmonitortsx.s23ecaf10')} </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%]"> {i18n.t('monitor.hostmonitortsx.s78262b59')} </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-[20%]"> {i18n.t('monitor.hostmonitortsx.s8fe5ed35')} </th>
</tr>
</thead>
<tbody>
@@ -336,7 +337,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={i18n.t('monitor.hostmonitortsx.s92cb88ae')}
onClick={async (e) => {
e.stopPropagation();
try {
@@ -398,15 +399,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)]"> {i18n.t('deploy.toast.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)]"> {i18n.t('monitor.metricCatalog.colMax')} </span>
<span className="font-mono text-[var(--dg-text-primary)] font-semibold">{fdInfo.max === -1 ? i18n.t('monitor.hostmonitortsx.sbc436447') : fdInfo.max?.toLocaleString() || '—'}</span>
</div>
<div>
<span className="text-[var(--dg-text-muted)]">使用率 </span>
<span className="text-[var(--dg-text-muted)]"> {i18n.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,11 +417,11 @@ 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: i18n.t('monitor.hostmonitortsx.s28130dec') }]}
yDomain={[0, 'auto']}
unit="%"
chartId="fd-usage"
title="FD 文件句柄使用率"
title={i18n.t('monitor.hostmonitortsx.sc026a1ea')}
subtitle={fdInfo?.usage_pct != null ? `当前 ${fdInfo.usage_pct.toFixed(1)}%` : undefined}
height={160}
toolbarPlacement="header"
@@ -430,7 +431,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)]"> {i18n.t('monitor.hostmonitortsx.sae1a30b7')} </div>
)}
</CardContent>
</Card>
@@ -476,7 +477,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)]"> {i18n.t('monitor.hostmonitortsx.sae1a30b7')} </div>
)}
</CardContent>
</Card>
@@ -529,12 +530,12 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
return (
<PageShell
variant="workspace"
title="主机监控"
subtitle={selectedHost ? `当前主机: ${selectedHost}` : '选择主机查看监控指标'}
title={i18n.t('monitor.alertRulesTab.catHost')}
subtitle={selectedHost ? `当前主机: ${selectedHost}` : i18n.t('monitor.hostmonitortsx.s8d493048')}
icon={<Server className="h-5 w-5" />}
toolbar={toolbar}
loading={loading && !history.length}
loadingLabel="加载监控数据..."
loadingLabel={i18n.t('monitor.hostmonitortsx.sc23e802e')}
contentClassName="space-y-3"
>
{monitorBody}
frontend/src/pages/monitor/MetricsExplorer.tsx
+16 -15
View File
@@ -9,6 +9,7 @@ import { metricsApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import { PageEmpty } from '@/components/layout/PageEmpty';
import type { JsonData } from '@/types/common';
import i18n from '@/i18n';
interface TargetInfo {
id: number;
@@ -29,11 +30,11 @@ interface MetricPoint {
const METRIC_CATEGORIES: Record<string, { label: string; icon: React.ReactNode }> = {
cpu: { label: 'CPU', icon: <Cpu className="h-4 w-4" /> },
memory: { label: '内存', icon: <HardDrive className="h-4 w-4" /> },
disk: { label: '磁盘', icon: <HardDrive className="h-4 w-4" /> },
network: { label: '网络', icon: <Network className="h-4 w-4" /> },
middleware: { label: '中间件', icon: <Database className="h-4 w-4" /> },
device: { label: '设备', icon: <Activity className="h-4 w-4" /> },
memory: { label: i18n.t('kubernetes.pod.memory'), icon: <HardDrive className="h-4 w-4" /> },
disk: { label: i18n.t('monitor.dashboard.col.disk'), icon: <HardDrive className="h-4 w-4" /> },
network: { label: i18n.t('monitor.hostMetric.network'), icon: <Network className="h-4 w-4" /> },
middleware: { label: i18n.t('monitor.alertRulesTab.catMiddleware'), icon: <Database className="h-4 w-4" /> },
device: { label: i18n.t('monitor.metricsexplorer.sf55f1736'), icon: <Activity className="h-4 w-4" /> },
};
export function MetricsExplorer() {
@@ -108,7 +109,7 @@ export function MetricsExplorer() {
<div className="flex items-center gap-4 flex-wrap w-full">
<Select value={selectedTarget} onValueChange={setSelectedTarget}>
<SelectTrigger className="w-64 dg-input">
<SelectValue placeholder={loading ? '加载中...' : '选择监控目标...'} />
<SelectValue placeholder={loading ? i18n.t('monitor.logPanel.logResults.loading') : i18n.t('monitor.metricsexplorer.sce4193cc')} />
</SelectTrigger>
<SelectContent className="dg-input max-h-80">
{targets.map(t => (
@@ -125,7 +126,7 @@ export function MetricsExplorer() {
<Search className="absolute left-2.5 top-2 h-4 w-4 dg-text-muted" />
<Input
className="pl-8 dg-input h-9"
placeholder="搜索指标..."
placeholder={i18n.t('monitor.metricsexplorer.s21512a93')}
value={searchKw}
onChange={(e) => setSearchKw(e.target.value)}
/>
@@ -139,19 +140,19 @@ export function MetricsExplorer() {
return (
<PageShell
variant="workspace"
title="指标浏览器"
subtitle="按分类/主机浏览所有指标，支持叠加对比"
title={i18n.t('monitor.metricsexplorer.s26a10dc0')}
subtitle={i18n.t('monitor.metricsexplorer.s454945df')}
icon={<Activity className="h-5 w-5" />}
toolbar={toolbar}
loading={loading}
loadingLabel="加载监控目标..."
loadingLabel={i18n.t('monitor.metricsexplorer.s17f42742')}
contentClassName="space-y-6"
>
{!selectedTarget ? (
<PageEmpty
icon={<Filter className="h-12 w-12" />}
title="请选择监控目标"
description="选择目标主机后，从左侧勾选要查看的指标"
title={i18n.t('monitor.metricsexplorer.sce251ece')}
description={i18n.t('monitor.metricsexplorer.sc1966a27')}
/>
) : (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -159,7 +160,7 @@ export function MetricsExplorer() {
<CardContent className="p-4">
<div className="flex items-center gap-2 mb-3">
<BarChart3 className="h-4 w-4 dg-text-muted" />
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]">指标列表</h3>
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]"> {i18n.t('monitor.metricsexplorer.s3ec50388')} </h3>
<span className="text-xs dg-text-muted ml-auto">{selectedMetrics.length} 已选</span>
</div>
<div className="space-y-4 max-h-[60vh] overflow-y-auto">
@@ -204,9 +205,9 @@ export function MetricsExplorer() {
</h3>
</div>
{selectedMetrics.length === 0 ? (
<PageEmpty icon={<Plus className="h-8 w-8" />} title="请从左侧勾选指标" className="py-16" />
<PageEmpty icon={<Plus className="h-8 w-8" />} title={i18n.t('monitor.metricsexplorer.s701e608d')} className="py-16" />
) : sortedTimes.length === 0 ? (
<PageEmpty title="暂无数据" className="py-16" />
<PageEmpty title={i18n.t('aiops.assistantNoData')} className="py-16" />
) : (
<div className="h-80 overflow-x-auto">
<svg viewBox={`0 0 ${Math.max(sortedTimes.length * 4, 400)} 300`} className="w-full h-full min-w-[400px]">
frontend/src/pages/monitor/MiddlewareMonitor.tsx
+23 -22
View File
@@ -12,6 +12,7 @@ import { InstanceCard } from './middleware-monitor/InstanceCard';
import { MiddlewareDialog } from './middleware-monitor/MiddlewareDialog';
import type { MwTarget } from './middleware-monitor/helpers';
import { REDIS_CHARTS, MYSQL_CHARTS, evalMwHealth, worstHealthLevel } from './middleware-monitor/helpers';
import i18n from '@/i18n';
type TabKey = 'redis' | 'mysql';
const REFRESH_INTERVAL_MS = 30_000;
@@ -61,7 +62,7 @@ export function MiddlewareMonitor() {
hasLoaded.current = true;
} catch (err) {
if (!silent) {
setError((err as { message?: string }).message || '加载失败');
setError((err as { message?: string }).message || i18n.t('kubernetes.msg.loadFailed'));
setTargets([]);
}
} finally {
@@ -85,14 +86,14 @@ export function MiddlewareMonitor() {
const warnCount = targets.filter((t) => worstHealthLevel(evalMwHealth(t)) !== 'ok').length;
const handleDelete = async (target: MwTarget) => {
const ok = await confirm({ title: '删除监控', description: `确认删除 "${target.name}"？`, confirmText: '删除' });
const ok = await confirm({ title: i18n.t('monitor.middlewaremonit.sf9be97ed'), description: `确认删除 "${target.name}"？`, confirmText: i18n.t('kubernetes.storage.delete2') });
if (!ok) return;
try {
await middlewareMonitorApi.delete(target.id);
toast.success('已删除');
toast.success(i18n.t('monitor.silenceRules.deleted'));
loadTargets();
} catch (err) {
toast.error('删除失败', { description: (err as { message?: string }).message });
toast.error(i18n.t('kubernetes.msg.deleteFailed2'), { description: (err as { message?: string }).message });
}
};
@@ -100,10 +101,10 @@ export function MiddlewareMonitor() {
setTesting(target.id);
try {
const res = await middlewareMonitorApi.test(target.id) as { success: boolean; message: string };
if (res.success) { toast.success('连接成功', { description: res.message }); loadTargets(true); }
else toast.error('连接失败', { description: res.message });
if (res.success) { toast.success(i18n.t('aiops.llmTestSuccess'), { description: res.message }); loadTargets(true); }
else toast.error(i18n.t('aiops.llmTestFailed'), { description: res.message });
} catch (err) {
toast.error('测试失败', { description: (err as { message?: string }).message });
toast.error(i18n.t('monitor.alertChannels.testFailed'), { description: (err as { message?: string }).message });
} finally {
setTesting(null);
}
@@ -114,11 +115,11 @@ export function MiddlewareMonitor() {
try {
const res = await middlewareMonitorApi.seedDefaults() as { created: number; message: string; failed?: string[] };
await loadTargets();
if (res.failed?.length) toast.error('部分失败', { description: res.message });
else if (res.created > 0) toast.success('已添加默认监控', { description: res.message });
else toast.success('默认目标已存在');
if (res.failed?.length) toast.error(i18n.t('monitor.middlewaremonit.s669e8995'), { description: res.message });
else if (res.created > 0) toast.success(i18n.t('monitor.middlewaremonit.s11a31e75'), { description: res.message });
else toast.success(i18n.t('monitor.middlewaremonit.s7dda0fcb'));
} catch (err) {
toast.error('添加失败', { description: (err as { message?: string }).message });
toast.error(i18n.t('monitor.dashboard.custom.toastPanelFailed'), { description: (err as { message?: string }).message });
} finally {
setSeeding(false);
}
@@ -127,10 +128,10 @@ export function MiddlewareMonitor() {
const handleCollectNow = async () => {
try {
const res = await middlewareMonitorApi.collectNow() as { message: string };
toast.success('采集完成', { description: res.message });
toast.success(i18n.t('monitor.middlewaremonit.sc2c744ef'), { description: res.message });
loadTargets(true);
} catch (err) {
toast.error('采集失败', { description: (err as { message?: string }).message });
toast.error(i18n.t('monitor.middlewaremonit.s5665b68b'), { description: (err as { message?: string }).message });
}
};
@@ -148,13 +149,13 @@ export function MiddlewareMonitor() {
<div className="space-y-6">
<div className="flex items-center justify-between flex-wrap gap-2">
<div>
<h2 className="text-lg font-semibold">中间件监控</h2>
<h2 className="text-lg font-semibold"> {i18n.t('monitor.alertHelper.srcMiddleware')} </h2>
<p className="text-xs text-[var(--dg-text-muted)] mt-0.5">
Redis 单机/集群 · MySQL · 30s 自动刷新
{lastRefreshAt && (
<span className="ml-2">
上次更新 {lastRefreshAt.toLocaleTimeString()}
{refreshing && ' · 刷新中...'}
{refreshing && i18n.t('monitor.middlewaremonit.s4d2bc924')}
</span>
)}
</p>
@@ -192,10 +193,10 @@ export function MiddlewareMonitor() {
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-12 text-center">
<Database className="h-12 w-12 mx-auto mb-4 text-[var(--dg-text-muted)]" />
<p className="text-sm text-[var(--dg-text-muted)]">暂无中间件监控目标</p>
<p className="text-sm text-[var(--dg-text-muted)]"> {i18n.t('monitor.middlewaremonit.sbbe62a10')} </p>
<div className="flex justify-center gap-2 mt-4">
<Button size="sm" onClick={handleSeedDefaults} disabled={seeding}>添加平台默认</Button>
<Button size="sm" variant="outline" onClick={() => openCreate()}>手动添加</Button>
<Button size="sm" onClick={handleSeedDefaults} disabled={seeding}> {i18n.t('monitor.middlewaremonit.se5caf12b')} </Button>
<Button size="sm" variant="outline" onClick={() => openCreate()}> {i18n.t('monitor.middlewaremonit.s63edd678')} </Button>
</div>
</CardContent>
</Card>
@@ -205,9 +206,9 @@ export function MiddlewareMonitor() {
<>
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
{[
{ label: '监控实例', value: targets.length, icon: Activity },
{ label: '在线', value: onlineCount, icon: Database, color: 'dg-text-green' },
{ label: '告警', value: warnCount, icon: Activity, color: warnCount > 0 ? 'dg-text-yellow' : 'dg-text-green' },
{ label: i18n.t('monitor.middlewaremonit.s35a55853'), value: targets.length, icon: Activity },
{ label: i18n.t('agent.agentOnline'), value: onlineCount, icon: Database, color: 'dg-text-green' },
{ label: i18n.t('monitor.hostDashboard.alert'), value: warnCount, icon: Activity, color: warnCount > 0 ? 'dg-text-yellow' : 'dg-text-green' },
{ label: 'Redis', value: redisTargets.length, icon: Database, color: 'dg-text-red' },
{ label: 'MySQL', value: mysqlTargets.length, icon: Server, color: 'dg-text-blue' },
].map((item) => (
@@ -250,7 +251,7 @@ export function MiddlewareMonitor() {
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-8 text-center text-sm text-[var(--dg-text-muted)]">
暂无 {tab === 'redis' ? 'Redis' : 'MySQL'} 实例，
<button type="button" className="dg-text-cyan ml-1 underline" onClick={() => openCreate(tab)}>立即添加</button>
<button type="button" className="dg-text-cyan ml-1 underline" onClick={() => openCreate(tab)}> {i18n.t('monitor.middlewaremonit.s8ec8a6e8')} </button>
</CardContent>
</Card>
) : (
frontend/src/pages/monitor/MonitorCenter.tsx
+7 -6
View File
@@ -7,14 +7,15 @@ import { HostMonitor } from './HostMonitor';
import { MiddlewareMonitor } from './MiddlewareMonitor';
import { SNMPMonitor } from './SNMPMonitor';
import { SiteMonitor } from './SiteMonitor';
import i18n from '@/i18n';
type TabId = 'host' | 'middleware' | 'snmp' | 'site';
const tabs: { id: TabId; name: string; description: string }[] = [
{ id: 'host', name: '主机监控', description: 'CPU / 内存 / 磁盘 / 网络 / 磁盘IO' },
{ id: 'middleware', name: '中间件', description: 'Redis 单机·集群 / MySQL 指标与趋势' },
{ id: 'snmp', name: 'SNMP', description: '网络设备 / BMC 采集与趋势' },
{ id: 'site', name: '站点拨测', description: 'HTTP Web · SSL 证书 · TCP / DNS / PING' },
{ id: 'host', name: i18n.t('monitor.alertRulesTab.catHost'), description: i18n.t('monitor.monitorcenterts.s811145d6') },
{ id: 'middleware', name: i18n.t('monitor.alertRulesTab.catMiddleware'), description: i18n.t('monitor.monitorcenterts.s757cdaf9') },
{ id: 'snmp', name: 'SNMP', description: i18n.t('monitor.monitorcenterts.s24f24e6f') },
{ id: 'site', name: i18n.t('monitor.alertRulesTab.catSite'), description: i18n.t('monitor.monitorcenterts.s5ea4cd7a') },
];
const TAB_IDS: TabId[] = ['host', 'middleware', 'snmp', 'site'];
@@ -42,8 +43,8 @@ export function MonitorCenter() {
return (
<PageShell
variant="list"
title="监控中心"
subtitle={current?.description ?? '全面的基础设施与应用监控'}
title={i18n.t('monitor.title')}
subtitle={current?.description ?? i18n.t('monitor.monitorcenterts.s771120b2')}
icon={<Activity className="h-5 w-5" />}
tabs={tabs.map((t) => ({ id: t.id, label: t.name }))}
activeTab={activeTab}
frontend/src/pages/monitor/SNMPMonitor.tsx
+25 -24
View File
@@ -21,6 +21,7 @@ import { SnmpOverviewCharts } from './snmp-monitor/SnmpOverviewCharts';
import { SnmpDeviceChartsPanel } from './snmp-monitor/SnmpDeviceChartsPanel';
import { SnmpTemplatesCollapsible, type SnmpTemplate } from './snmp-monitor/SnmpTemplatesCollapsible';
import type { SnmpDevice, SnmpMetric, SnmpOverviewItem } from './snmp-monitor/helpers';
import i18n from '@/i18n';
interface SnmpStats { total: number; online: number; abnormal: number }
@@ -104,7 +105,7 @@ export function SNMPMonitor() {
const handleAdd = async () => {
if (!form.name.trim() || !form.ip.trim() || !form.template_id) {
toast.error('请填写设备名称、IP 并选择 OID 模板');
toast.error(i18n.t('monitor.snmpmonitortsx.se385b8ab'));
return;
}
setSubmitting(true);
@@ -117,12 +118,12 @@ export function SNMPMonitor() {
template_id: Number(form.template_id),
vendor: tpl?.vendor || '', device_type: tpl?.device_type || 'switch',
});
toast.success('设备已添加');
toast.success(i18n.t('monitor.snmpmonitortsx.sbd007705'));
setDialogOpen(false);
setForm({ ...emptyForm });
refresh();
} catch (e) {
toast.error((e as { message?: string }).message || '添加失败');
toast.error((e as { message?: string }).message || i18n.t('monitor.dashboard.custom.toastPanelFailed'));
} finally {
setSubmitting(false);
}
@@ -136,7 +137,7 @@ export function SNMPMonitor() {
toast.success(`${d.name} 采集成功`);
refresh();
} catch (err) {
toast.error((err as { message?: string }).message || '采集失败');
toast.error((err as { message?: string }).message || i18n.t('monitor.middlewaremonit.s5665b68b'));
refresh();
} finally {
setCollectingId(null);
@@ -162,18 +163,18 @@ export function SNMPMonitor() {
e.stopPropagation();
try {
await snmpApi.deleteDevice(id);
toast.success('已删除');
toast.success(i18n.t('monitor.silenceRules.deleted'));
if (selectedDevice?.id === id) setSelectedDevice(null);
refresh();
} catch {
toast.error('删除失败');
toast.error(i18n.t('kubernetes.msg.deleteFailed2'));
}
};
const statusBadge = (status?: string) => {
if (status === 'online') return <Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30">在线</Badge>;
if (status === 'error') return <Badge className="bg-red-500/15 dg-text-red border-red-500/30">异常</Badge>;
return <Badge className="bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]">离线</Badge>;
if (status === 'online') return <Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30"> {i18n.t('agent.agentOnline')} </Badge>;
if (status === 'error') return <Badge className="bg-red-500/15 dg-text-red border-red-500/30"> {i18n.t('agent.heartbeatAbnormal')} </Badge>;
return <Badge className="bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]"> {i18n.t('agent.agentOffline')} </Badge>;
};
return (
@@ -196,13 +197,13 @@ export function SNMPMonitor() {
</DialogTrigger>
<DialogContent className="sm:max-w-md bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<DialogHeader>
<DialogTitle>添加 SNMP 设备</DialogTitle>
<DialogDescription>选择厂商 OID 模板，配置管理 IP 与 Community</DialogDescription>
<DialogTitle> {i18n.t('monitor.snmpmonitortsx.s29b90990')} </DialogTitle>
<DialogDescription> {i18n.t('monitor.snmpmonitortsx.s11ea7d0c')} </DialogDescription>
</DialogHeader>
<div className="grid gap-3 py-2">
<div className="grid gap-1.5">
<Label>设备名称</Label>
<Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="核心交换机-A" />
<Label> {i18n.t('monitor.snmpmonitortsx.s9f694f60')} </Label>
<Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder={i18n.t('monitor.snmpmonitortsx.s490f68f6')} />
</div>
<div className="grid grid-cols-2 gap-3">
<div className="grid gap-1.5">
@@ -210,14 +211,14 @@ export function SNMPMonitor() {
<Input value={form.ip} onChange={(e) => setForm({ ...form, ip: e.target.value })} placeholder="192.168.1.1" />
</div>
<div className="grid gap-1.5">
<Label>端口</Label>
<Label> {i18n.t('system.ldapPort')} </Label>
<Input type="number" value={form.port} onChange={(e) => setForm({ ...form, port: Number(e.target.value) || 161 })} />
</div>
</div>
<div className="grid gap-1.5">
<Label>OID 模板</Label>
<Select value={form.template_id} onValueChange={(v) => setForm({ ...form, template_id: v })}>
<SelectTrigger><SelectValue placeholder="选择模板" /></SelectTrigger>
<SelectTrigger><SelectValue placeholder={i18n.t('pipeline.selectTemplate')} /></SelectTrigger>
<SelectContent>
{templates.map((t) => (
<SelectItem key={t.id} value={String(t.id)}>{t.name} ({t.vendor})</SelectItem>
@@ -243,7 +244,7 @@ export function SNMPMonitor() {
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
<Button variant="outline" onClick={() => setDialogOpen(false)}> {i18n.t('rbac.jobRole.cancel')} </Button>
<Button onClick={handleAdd} disabled={submitting}>
{submitting && <Loader2 className="h-4 w-4 animate-spin mr-1" />}确认
</Button>
@@ -256,10 +257,10 @@ export function SNMPMonitor() {
{/* 紧凑统计 */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
{[
{ label: '设备总数', value: stats.total, color: '' },
{ label: '在线', value: stats.online, color: 'dg-text-green' },
{ label: '异常', value: stats.abnormal, color: 'dg-text-red' },
{ label: 'OID 模板', value: templates.length, color: 'dg-text-cyan' },
{ label: i18n.t('monitor.snmpmonitortsx.sc615660d'), value: stats.total, color: '' },
{ label: i18n.t('agent.agentOnline'), value: stats.online, color: 'dg-text-green' },
{ label: i18n.t('agent.heartbeatAbnormal'), value: stats.abnormal, color: 'dg-text-red' },
{ label: i18n.t('monitor.snmpmonitortsx.s48cfbb79'), value: templates.length, color: 'dg-text-cyan' },
].map((item) => (
<div key={item.label} className="rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] px-3 py-2 text-center">
<p className="text-[10px] text-[var(--dg-text-muted)]">{item.label}</p>
@@ -292,9 +293,9 @@ export function SNMPMonitor() {
<Table>
<TableHeader>
<TableRow>
<TableHead className="text-xs">名称</TableHead>
<TableHead className="text-xs"> {i18n.t('kubernetes.secret.secretName')} </TableHead>
<TableHead className="text-xs">IP</TableHead>
<TableHead className="text-xs">状态</TableHead>
<TableHead className="text-xs"> {i18n.t('system.terminalStatus')} </TableHead>
<TableHead className="w-24" />
</TableRow>
</TableHeader>
@@ -350,7 +351,7 @@ export function SNMPMonitor() {
<DialogDescription>{metricsDevice?.ip} · {templateName(metricsDevice?.template_id || 0)}</DialogDescription>
</DialogHeader>
{metricsLoading ? (
<div className="py-8 text-center text-sm text-muted-foreground">加载中...</div>
<div className="py-8 text-center text-sm text-muted-foreground"> {i18n.t('monitor.logPanel.logResults.loading')} </div>
) : metrics.length === 0 ? (
<div className="py-8 text-center text-sm text-muted-foreground">
暂无指标，请先采集
@@ -371,7 +372,7 @@ export function SNMPMonitor() {
<Table>
<TableHeader>
<TableRow>
<TableHead>指标</TableHead><TableHead>索引</TableHead><TableHead>值</TableHead><TableHead>OID</TableHead>
<TableHead> {i18n.t('cloud.colMetric')} </TableHead><TableHead> {i18n.t('monitor.logIndex')} </TableHead><TableHead>值</TableHead><TableHead>OID</TableHead>
</TableRow>
</TableHeader>
<TableBody>
frontend/src/pages/monitor/SiteMonitor.tsx
+40 -39
View File
@@ -23,6 +23,7 @@ import { useConfirm } from '@/components/ui/confirm-dialog';
import type { JsonData } from '@/types/common';
import { SiteProtocolPieChart } from './site-monitor/SiteProtocolPieChart';
import { SiteTaskDetailPage } from './site-monitor/SiteTaskDetailPage';
import i18n from '@/i18n';
import {
PROBE_TYPE_OPTIONS, type ProbeType, type SiteStats, type SiteTask,
probeTypeMeta, probeFrequencyHint, defaultProbeFrequency, MIN_PROBE_FREQUENCY, fmtAvailResponse, fmtFrequency,
@@ -43,9 +44,9 @@ const FILTER_TYPES: Array<ProbeType | 'ALL'> = ['ALL', ...PROBE_TYPE_OPTIONS];
function alertStatusBadge(status?: string) {
if (status === 'alerting') {
return <Badge className="bg-red-500/15 dg-text-red border-red-500/30 text-[10px]">告警中</Badge>;
return <Badge className="bg-red-500/15 dg-text-red border-red-500/30 text-[10px]"> {i18n.t('monitor.sitemonitortsx.sb2da5804')} </Badge>;
}
return <Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30 text-[10px]">正常</Badge>;
return <Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30 text-[10px]"> {i18n.t('agent.heartbeatNormal')} </Badge>;
}
export function SiteMonitor() {
@@ -136,7 +137,7 @@ export function SiteMonitor() {
};
const handleSave = async () => {
if (!form.name.trim() || !form.url.trim()) { toast.error('名称和地址不能为空'); return; }
if (!form.name.trim() || !form.url.trim()) { toast.error(i18n.t('monitor.sitemonitortsx.s8eb6b1a6')); return; }
setSaving(true);
const payload = {
name: form.name.trim(), url: form.url.trim(), type: form.type.toLowerCase(),
@@ -145,34 +146,34 @@ export function SiteMonitor() {
expected_status_code: Number(form.expected_status_code) || 200,
};
try {
if (editingTaskId) { await siteApi.updateTask(editingTaskId, payload); toast.success('任务已更新'); }
else { await siteApi.createTask(payload); toast.success('拨测任务已创建'); }
if (editingTaskId) { await siteApi.updateTask(editingTaskId, payload); toast.success(i18n.t('monitor.sitemonitortsx.se01498ee')); }
else { await siteApi.createTask(payload); toast.success(i18n.t('monitor.sitemonitortsx.s48723e14')); }
setFormOpen(false); setEditingTaskId(null);
loadTasks(); loadStats();
} catch (e) {
toast.error((e as JsonData).message || (editingTaskId ? '更新失败' : '创建失败'));
toast.error((e as JsonData).message || (editingTaskId ? i18n.t('kubernetes.deployment.imageUpdateFailed') : i18n.t('monitor.dashboard.custom.toastCreateFailed')));
} finally { setSaving(false); }
};
const handleDelete = async (task: SiteTask) => {
const ok = await _confirm({ title: '删除拨测任务', description: `确定删除「${task.name}」吗？`, variant: 'destructive' });
const ok = await _confirm({ title: i18n.t('monitor.deleteProbe'), description: `确定删除「${task.name}」吗？`, variant: 'destructive' });
if (!ok) return;
try {
await siteApi.deleteTask(task.id);
if (taskIdParam === String(task.id)) {
closeDetail();
}
toast.success('任务已删除');
toast.success(i18n.t('monitor.sitemonitortsx.sb2ae04aa'));
loadTasks(); loadStats();
} catch (e) { toast.error((e as JsonData).message || '删除失败'); }
} catch (e) { toast.error((e as JsonData).message || i18n.t('kubernetes.msg.deleteFailed2')); }
};
const handleToggle = async (task: SiteTask) => {
try {
await siteApi.toggleTask(task.id, !task.enabled);
toast.success(task.enabled ? '已停用' : '已启用');
toast.success(task.enabled ? i18n.t('cloud.stopped') : i18n.t('aiops.llmEnabled'));
loadTasks(); loadStats();
} catch (e) { toast.error((e as JsonData).message || '操作失败'); }
} catch (e) { toast.error((e as JsonData).message || i18n.t('cloud.operationFailed')); }
};
const targetMeta = probeTypeMeta[form.type];
@@ -191,8 +192,8 @@ export function SiteMonitor() {
if (!detailTask) {
return (
<div className="space-y-4 text-center py-16">
<p className="text-sm text-[var(--dg-text-muted)]">拨测任务不存在或已删除</p>
<Button variant="outline" size="sm" onClick={closeDetail}>返回列表</Button>
<p className="text-sm text-[var(--dg-text-muted)]"> {i18n.t('monitor.sitemonitortsx.s62a0023a')} </p>
<Button variant="outline" size="sm" onClick={closeDetail}> {i18n.t('monitor.siteTask.backToList')} </Button>
</div>
);
}
@@ -209,7 +210,7 @@ export function SiteMonitor() {
<div className="space-y-4">
<div className="flex items-center justify-between flex-wrap gap-2">
<div>
<h2 className="text-lg font-semibold">站点拨测</h2>
<h2 className="text-lg font-semibold"> {i18n.t('monitor.alertRulesTab.catSite')} </h2>
<p className="text-xs text-[var(--dg-text-muted)]">HTTP Web 拨测 · SSL 证书检测 · TCP / DNS / PING</p>
</div>
<div className="flex gap-2">
@@ -226,11 +227,11 @@ export function SiteMonitor() {
<div className="xl:col-span-8 space-y-4">
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
{[
{ label: '总任务', value: stats?.total_tasks ?? '--' },
{ label: '正常', value: stats?.up_count ?? '--', color: 'dg-text-green' },
{ label: '异常', value: stats?.down_count ?? '--', color: 'dg-text-red' },
{ label: '可用率(24h)', value: availStr, color: 'dg-text-blue' },
{ label: '探测次数', value: probeCountStr },
{ label: i18n.t('monitor.sitemonitortsx.s0f7991c2'), value: stats?.total_tasks ?? '--' },
{ label: i18n.t('agent.heartbeatNormal'), value: stats?.up_count ?? '--', color: 'dg-text-green' },
{ label: i18n.t('agent.heartbeatAbnormal'), value: stats?.down_count ?? '--', color: 'dg-text-red' },
{ label: i18n.t('monitor.sitemonitortsx.s72a1a913'), value: availStr, color: 'dg-text-blue' },
{ label: i18n.t('monitor.sitemonitortsx.s0fad73a6'), value: probeCountStr },
].map((item) => (
<div key={item.label} className="rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] px-3 py-2 text-center">
<p className="text-[10px] text-[var(--dg-text-muted)]">{item.label}</p>
@@ -244,8 +245,8 @@ export function SiteMonitor() {
<div className="flex items-center justify-between mb-3 flex-wrap gap-2">
<div className="flex items-center gap-2">
<Activity className="h-4 w-4 text-[var(--dg-text-muted)]" />
<h3 className="text-sm font-medium">拨测任务</h3>
<span className="text-[10px] text-[var(--dg-text-muted)]">点击可观测进入详情页</span>
<h3 className="text-sm font-medium"> {i18n.t('monitor.sitemonitortsx.s30319e1c')} </h3>
<span className="text-[10px] text-[var(--dg-text-muted)]"> {i18n.t('monitor.sitemonitortsx.sa5e6b654')} </span>
</div>
<div className="flex flex-wrap gap-1">
{FILTER_TYPES.map((type) => {
@@ -262,7 +263,7 @@ export function SiteMonitor() {
: 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] border border-transparent hover:text-[var(--dg-text-primary)]'
}`}
>
{type === 'ALL' ? '全部' : type} {count > 0 && count}
{type === 'ALL' ? i18n.t('system.auditAll') : type} {count > 0 && count}
</button>
);
})}
@@ -271,19 +272,19 @@ export function SiteMonitor() {
{filteredTasks.length === 0 ? (
<div className="text-center py-10 text-sm text-[var(--dg-text-muted)]">
{tasks.length === 0 ? '暂无拨测任务' : '当前筛选无任务'}
{tasks.length === 0 ? i18n.t('monitor.sitemonitortsx.sdd8ebb79') : i18n.t('monitor.sitemonitortsx.s0f961fe6')}
</div>
) : (
<div className="overflow-x-auto">
<Table>
<TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-xs">名称</TableHead>
<TableHead className="text-xs">类型</TableHead>
<TableHead className="text-xs">频率</TableHead>
<TableHead className="text-xs">报警状态</TableHead>
<TableHead className="text-xs">可用率/响应时间</TableHead>
<TableHead className="text-xs">启用</TableHead>
<TableHead className="text-xs"> {i18n.t('kubernetes.secret.secretName')} </TableHead>
<TableHead className="text-xs"> {i18n.t('system.credentialType')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteTask.frequency')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.sitemonitortsx.sdb4470d9')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.sitemonitortsx.s4fe553c8')} </TableHead>
<TableHead className="text-xs"> {i18n.t('system.userActive')} </TableHead>
<TableHead className="text-xs w-24" />
</TableRow>
</TableHeader>
@@ -342,16 +343,16 @@ export function SiteMonitor() {
<Dialog open={formOpen} onOpenChange={(open) => { setFormOpen(open); if (!open) setEditingTaskId(null); }}>
<DialogContent className="sm:max-w-md bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<DialogHeader>
<DialogTitle>{editingTaskId ? '编辑拨测任务' : '添加拨测任务'}</DialogTitle>
<DialogDescription className="text-[var(--dg-text-muted)]">按协议类型配置探活任务，系统将按间隔自动拨测</DialogDescription>
<DialogTitle>{editingTaskId ? i18n.t('monitor.editProbe') : i18n.t('monitor.addProbe')}</DialogTitle>
<DialogDescription className="text-[var(--dg-text-muted)]"> {i18n.t('monitor.sitemonitortsx.s6173cf9a')} </DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-2">
<div className="grid gap-1.5">
<Label>任务名称</Label>
<Input placeholder="例如：官网首页" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
<Label> {i18n.t('automation.cronJobName')} </Label>
<Input placeholder={i18n.t('monitor.sitemonitortsx.s024a6a59')} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
</div>
<div className="grid gap-1.5">
<Label>协议类型</Label>
<Label> {i18n.t('monitor.sitemonitortsx.se825ec78')} </Label>
<Select value={form.type} onValueChange={(v) => {
const t = v as ProbeType;
setForm({ ...form, type: t, frequency_sec: editingTaskId ? form.frequency_sec : defaultProbeFrequency(t) });
@@ -369,30 +370,30 @@ export function SiteMonitor() {
</div>
<div className="grid grid-cols-2 gap-3">
<div className="grid gap-1.5">
<Label>检测间隔 (秒)</Label>
<Label> {i18n.t('monitor.sitemonitortsx.s4966e6e5')} </Label>
<Input type="number" min={MIN_PROBE_FREQUENCY[form.type]} max={86400} value={form.frequency_sec}
onChange={(e) => setForm({ ...form, frequency_sec: Number(e.target.value) || defaultProbeFrequency(form.type) })} />
<p className="text-[10px] text-[var(--dg-text-muted)]">{probeFrequencyHint(form.type)}</p>
</div>
<div className="grid gap-1.5">
<Label>超时 (秒)</Label>
<Label> {i18n.t('monitor.sitemonitortsx.s52e9bc2c')} </Label>
<Input type="number" min={1} max={300} value={form.timeout_sec}
onChange={(e) => setForm({ ...form, timeout_sec: Number(e.target.value) || 10 })} />
</div>
</div>
{form.type === 'HTTP' && (
<div className="grid gap-1.5">
<Label>期望状态码</Label>
<Label> {i18n.t('monitor.sitemonitortsx.s88cbfb5c')} </Label>
<Input type="number" min={100} max={599} value={form.expected_status_code}
onChange={(e) => setForm({ ...form, expected_status_code: Number(e.target.value) || 200 })} />
</div>
)}
</div>
<DialogFooter>
<Button variant="outline" onClick={() => { setFormOpen(false); setEditingTaskId(null); }} disabled={saving}>取消</Button>
<Button variant="outline" onClick={() => { setFormOpen(false); setEditingTaskId(null); }} disabled={saving}> {i18n.t('rbac.jobRole.cancel')} </Button>
<Button onClick={handleSave} disabled={saving}>
{saving && <Loader2 className="h-4 w-4 animate-spin mr-1" />}
{editingTaskId ? '保存' : '创建任务'}
{editingTaskId ? i18n.t('task.script.save') : i18n.t('monitor.sitemonitortsx.s6ef95fe9')}
</Button>
</DialogFooter>
</DialogContent>
frontend/src/pages/monitor/host-monitor/DualLineChart.tsx
+3 -2
View File
@@ -6,6 +6,7 @@ import { ZoomableAreaChart, type ZoomableChartHandle } from './ZoomableAreaChart
import { ChartToolbar } from './ChartToolbar';
import { MetricIconBox } from './MetricIconBox';
import type { AggType, BucketPoint } from './types';
import i18n from '@/i18n';
interface DualLineChartProps {
title: string;
@@ -60,8 +61,8 @@ export function DualLineChart({
ref={chartRef}
data={chartData}
series={[
{ dataKey: 'rx', color: '#3b82f6', label: '接收' },
{ dataKey: 'tx', color: '#10b981', label: '发送' },
{ dataKey: 'rx', color: '#3b82f6', label: i18n.t('common.receive') },
{ dataKey: 'tx', color: '#10b981', label: i18n.t('aiops.sendMessage') },
]}
yDomain={[0, 'auto']}
unit={unit}
frontend/src/pages/monitor/host-monitor/HealthProbeSection.tsx
+22 -21
View File
@@ -18,6 +18,7 @@ import {
import { DEFAULT_PROBE_FORM, type ProbeForm } from './types';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner';
import i18n from '@/i18n';
interface HealthProbeSectionProps {
selectedHost: string;
@@ -68,15 +69,15 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
setProbeDialogOpen(false);
qc.invalidateQueries({ queryKey: queryKeys.hostMonitor.probes(selectedHost) });
} catch {
toast.error('保存失败');
toast.error(i18n.t('kubernetes.msg.saveFailed'));
}
};
const handleDeleteProbe = async (p: Record<string, unknown>) => {
const ok = await confirm({
title: '删除探针',
title: i18n.t('monitor.healthprobesect.s9da33b04'),
description: `确定删除探针「${p.name}」？`,
confirmText: '删除',
confirmText: i18n.t('kubernetes.storage.delete2'),
variant: 'destructive',
});
if (!ok) return;
@@ -88,7 +89,7 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
<>
<TabsContent value="health_probes" className="mt-3 space-y-3">
<div className="flex items-center justify-between">
<h3 className="text-xs font-medium text-[var(--dg-text-primary)]">探针列表（Agent 在目标主机本地执行探测）</h3>
<h3 className="text-xs font-medium text-[var(--dg-text-primary)]"> {i18n.t('monitor.healthprobesect.s518614fc')} </h3>
<div className="flex gap-2">
<Button size="sm" variant="outline" className="h-7 text-[11px]" onClick={() => refetch()} disabled={isFetching}>
<RefreshCw className={cn('w-3 h-3 mr-1', isFetching && 'animate-spin')} />刷新
@@ -101,7 +102,7 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
{probes.length === 0 ? (
<Card className="bg-[var(--dg-bg-secondary)] border-dashed border-[var(--dg-border)]">
<CardContent className="p-8 text-center text-xs text-[var(--dg-text-muted)]">
暂无健康探针，点击"添加探针"创建
暂无健康探针，点击i18n.t('monitor.healthprobesect.s5bf2e80a')创建
</CardContent>
</Card>
) : (
@@ -139,8 +140,8 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
<div className="truncate font-mono">{String(p.exec_command)}</div>
)}
<div className="flex items-center gap-3">
<span>状态: <span className={p.last_status === 'up' ? 'dg-text-green' : p.last_status === 'down' ? 'dg-text-red' : 'dg-text-secondary'}>
{p.last_status ? String(p.last_status).toUpperCase() : '未检测'}
<span> {i18n.t('monitor.healthprobesect.s13b5c750')} <span className={p.last_status === 'up' ? 'dg-text-green' : p.last_status === 'down' ? 'dg-text-red' : 'dg-text-secondary'}>
{p.last_status ? String(p.last_status).toUpperCase() : i18n.t('monitor.healthprobesect.s5c6585e0')}
</span></span>
{Number(p.last_latency_ms) > 0 && <span>延迟: {String(p.last_latency_ms)}ms</span>}
{Number(p.fail_count) > 0 && <span className="dg-text-red">连续失败: {String(p.fail_count)}次</span>}
@@ -158,23 +159,23 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
<DialogContent showOverlay={false} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-lg">
<DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)]">
{editingProbe ? '编辑探针' : '添加探针'}
{editingProbe ? i18n.t('monitor.healthprobesect.sc7c452e5') : i18n.t('monitor.healthprobesect.s5bf2e80a')}
</DialogTitle>
<DialogDescription className="text-[var(--dg-text-secondary)]">
{editingProbe ? '修改健康探针配置' : '创建新的健康探针，Agent 在目标主机本地执行探测'}
{editingProbe ? i18n.t('monitor.healthprobesect.se98536d2') : i18n.t('monitor.healthprobesect.s6f43d059')}
</DialogDescription>
</DialogHeader>
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
<div>
<label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">探针名称 <span className="dg-text-red">*</span></label>
<input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.name} onChange={e => setProbeForm({ ...probeForm, name: e.target.value })} placeholder="如：cex-agent 健康检查" />
<label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('monitor.healthprobesect.s1fdfad47')} <span className="dg-text-red">*</span></label>
<input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.name} onChange={e => setProbeForm({ ...probeForm, name: e.target.value })} placeholder={i18n.t('monitor.healthprobesect.s2b576719')} />
</div>
<div>
<label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">目标主机</label>
<label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('agent.installTarget')} </label>
<input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.hostname} onChange={e => setProbeForm({ ...probeForm, hostname: e.target.value })} />
</div>
<div>
<label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">探针类型</label>
<label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('kubernetes.container.probeType')} </label>
<select className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.probe_type} onChange={e => setProbeForm({ ...probeForm, probe_type: e.target.value })}>
<option value="http_get">HTTP GET</option>
<option value="tcp_socket">TCP Socket</option>
@@ -187,9 +188,9 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">HTTP URL <span className="dg-text-red">*</span></label>
<input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.http_url} onChange={e => setProbeForm({ ...probeForm, http_url: e.target.value })} placeholder="http://localhost:8080/health" /></div>
<div className="grid grid-cols-2 gap-2">
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">期望状态码</label>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('monitor.sitemonitortsx.s88cbfb5c')} </label>
<input type="number" className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.http_expect_code} onChange={e => setProbeForm({ ...probeForm, http_expect_code: Number(e.target.value) })} /></div>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">期望响应内容(可选)</label>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('monitor.healthprobesect.s27f2c428')} </label>
<input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.http_expect_body} onChange={e => setProbeForm({ ...probeForm, http_expect_body: e.target.value })} /></div>
</div>
</>
@@ -205,24 +206,24 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
)}
{probeForm.probe_type === 'exec_command' && (
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">执行命令 <span className="dg-text-red">*</span></label>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('aiops.assistantCommand')} <span className="dg-text-red">*</span></label>
<input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs font-mono text-[var(--dg-text-primary)]" value={probeForm.exec_command} onChange={e => setProbeForm({ ...probeForm, exec_command: e.target.value })} placeholder="pgrep -x mysqld" /></div>
)}
<div className="grid grid-cols-2 gap-2">
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">超时(秒)</label>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('automation.remoteTimeout')} </label>
<input type="number" className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.timeout} onChange={e => setProbeForm({ ...probeForm, timeout: Number(e.target.value) })} /></div>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">间隔(秒)</label>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('monitor.healthprobesect.sc7f8350a')} </label>
<input type="number" className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.interval} onChange={e => setProbeForm({ ...probeForm, interval: Number(e.target.value) })} /></div>
</div>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">描述</label>
<div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block"> {i18n.t('aiops.llmModelDesc')} </label>
<input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.description} onChange={e => setProbeForm({ ...probeForm, description: e.target.value })} /></div>
</div>
<DialogFooter>
<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={() => setProbeDialogOpen(false)}>取消</Button>
<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={() => setProbeDialogOpen(false)}> {i18n.t('rbac.jobRole.cancel')} </Button>
<Button size="sm" className="h-7 text-[11px] bg-blue-600 hover:bg-blue-500" onClick={handleSaveProbe} disabled={!probeForm.name || !probeForm.hostname}>
{editingProbe ? '保存' : '创建'}
{editingProbe ? i18n.t('task.script.save') : i18n.t('rbac.jobRole.create')}
</Button>
</DialogFooter>
</DialogContent>
frontend/src/pages/monitor/host-monitor/HostTimeRangePicker.tsx
+5 -4
View File
@@ -9,6 +9,7 @@ import {
type TimeRangePresetId,
} from './types';
import { presetToRange, toDatetimeLocalValue, formatRangeSummary } from './timeRange';
import i18n from '@/i18n';
interface Props {
value: HostMonitorTimeRange;
@@ -44,7 +45,7 @@ export function HostTimeRangePicker({ value, onChange }: Props) {
const e = start.getTime() <= end.getTime() ? end : start;
onChange({
preset: 'custom',
label: '自定义',
label: i18n.t('aiops.providerCustom'),
start: s.toISOString(),
end: e.toISOString(),
buckets: Math.min(120, Math.max(36, Math.ceil((e.getTime() - s.getTime()) / 60_000 / 2))),
@@ -85,10 +86,10 @@ export function HostTimeRangePicker({ value, onChange }: Props) {
</Button>
{customOpen && (
<div className="absolute right-0 top-full mt-1 z-50 w-72 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-primary)] p-3 shadow-lg">
<p className="text-xs font-medium text-[var(--dg-text-primary)] mb-2">自定义时间范围</p>
<p className="text-xs font-medium text-[var(--dg-text-primary)] mb-2"> {i18n.t('monitor.hosttimerangepi.s0122e022')} </p>
<div className="space-y-2">
<div>
<label className="text-[10px] dg-text-muted">开始</label>
<label className="text-[10px] dg-text-muted"> {i18n.t('common.start')} </label>
<Input
type="datetime-local"
value={customStart}
@@ -97,7 +98,7 @@ export function HostTimeRangePicker({ value, onChange }: Props) {
/>
</div>
<div>
<label className="text-[10px] dg-text-muted">结束</label>
<label className="text-[10px] dg-text-muted"> {i18n.t('monitor.hosttimerangepi.s12f1d7ef')} </label>
<Input
type="datetime-local"
value={customEnd}
frontend/src/pages/monitor/host-monitor/PortPolicyDialog.tsx
+10 -9
View File
@@ -1,6 +1,7 @@
// 端口策略对话框 // Logan.Li
import { Button } from '@/components/ui/button';
import { parsePortList } from '@/utils/validate';
import i18n from '@/i18n';
import {
Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
} from '@/components/ui/dialog';
@@ -30,12 +31,12 @@ export function PortPolicyDialog({
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent showOverlay={false} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-md">
<DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)]">端口监控策略</DialogTitle>
<DialogDescription className="text-[var(--dg-text-secondary)]">配置 Agent 端口上报过滤规则</DialogDescription>
<DialogTitle className="text-[var(--dg-text-primary)]"> {i18n.t('monitor.portpolicydialo.s868e3dd0')} </DialogTitle>
<DialogDescription className="text-[var(--dg-text-secondary)]"> {i18n.t('monitor.portpolicydialo.scd27ad47')} </DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div>
<label className="text-[11px] text-[var(--dg-text-muted)] mb-1.5 block">过滤模式</label>
<label className="text-[11px] text-[var(--dg-text-muted)] mb-1.5 block"> {i18n.t('monitor.portpolicydialo.s7824bdd1')} </label>
<div className="flex gap-2">
<button
className={`flex-1 h-9 rounded text-xs font-medium border transition-colors ${portPolicyMode === 'whitelist' ? 'bg-blue-500/20 border-blue-500 dg-text-blue' : 'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
@@ -52,8 +53,8 @@ export function PortPolicyDialog({
</div>
<p className="text-[10px] text-[var(--dg-text-muted)] mt-1.5 leading-relaxed">
{portPolicyMode === 'whitelist'
? '所有发现的端口都上报，任意端口变化都会触发告警 + 恢复通知。'
: '仅上报选中端口的变化，其余端口变化静默忽略（不告警）。系统进程端口（sshd/rpcbind/systemd等）永远忽略。'}
? i18n.t('monitor.portpolicydialo.sf5cd9d7c')
: i18n.t('monitor.portpolicydialo.sf3bf3319')}
</p>
</div>
@@ -72,7 +73,7 @@ export function PortPolicyDialog({
const val = e.target.value;
onWhitelistChange(parsePortList(val));
}}
placeholder={portPolicyMode === 'whitelist' ? '白名单模式下所有端口自动上报' : '80,443,3306,6379'}
placeholder={portPolicyMode === 'whitelist' ? i18n.t('monitor.portpolicydialo.s51b8453b') : '80,443,3306,6379'}
readOnly={portPolicyMode === 'whitelist'}
/>
<p className="text-[10px] text-[var(--dg-text-muted)] mt-1">
@@ -82,14 +83,14 @@ export function PortPolicyDialog({
<div className="bg-amber-500/5 border border-amber-500/20 rounded p-2.5">
<p className="text-[10px] text-amber-300/80 leading-relaxed">
⚠️ 无论选择哪种模式，以下系统进程端口<b>永远不上报</b>：sshd、rpcbind、master、systemd、dbus-daemon、rsyslogd 等。Agent 采集时自动跳过。
⚠️ 无论选择哪种模式，以下系统进程端口<b> {i18n.t('monitor.portpolicydialo.s2ff12d51')} </b>：sshd、rpcbind、master、systemd、dbus-daemon、rsyslogd 等。Agent 采集时自动跳过。
</p>
</div>
</div>
<DialogFooter>
<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={() => onOpenChange(false)}>取消</Button>
<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={() => onOpenChange(false)}> {i18n.t('rbac.jobRole.cancel')} </Button>
<Button size="sm" className="h-7 text-[11px] bg-blue-600 hover:bg-blue-500" onClick={onSave} disabled={saving}>
{saving ? '保存中…' : '保存策略'}
{saving ? i18n.t('monitor.silenceDialog.saving') : i18n.t('monitor.portpolicydialo.s2d3f52b4')}
</Button>
</DialogFooter>
</DialogContent>
frontend/src/pages/monitor/host-monitor/ZoomableAreaChart.tsx
+3 -2
View File
@@ -13,6 +13,7 @@ import {
import { ChartToolbar } from './ChartToolbar';
import { MonitorChartTooltip } from '../shared/monitorChartTheme';
import { ChartRangeHint } from '../shared/ChartRangeHint';
import i18n from '@/i18n';
export interface ChartSeries {
dataKey: string;
@@ -314,11 +315,11 @@ export const ZoomableAreaChart = forwardRef<ZoomableChartHandle, Props>(function
<DialogContent className={dialogClass}>
<DialogHeader className="shrink-0 flex-row items-start justify-between gap-4 space-y-0 pr-10">
<div className="min-w-0">
<DialogTitle className="text-base truncate">{title || '指标详情'}</DialogTitle>
<DialogTitle className="text-base truncate">{title || i18n.t('monitor.zoomableareacha.sdaf53351')}</DialogTitle>
{subtitle && (
<p className="text-xs dg-text-muted mt-0.5 truncate">{subtitle}</p>
)}
<DialogDescription className="sr-only">放大查看监控指标趋势</DialogDescription>
<DialogDescription className="sr-only"> {i18n.t('monitor.zoomableareacha.s365f8fe8')} </DialogDescription>
</div>
<ChartToolbar
size="md"
frontend/src/pages/monitor/host-monitor/types.ts
+9 -8
View File
@@ -1,14 +1,15 @@
import i18n from '@/i18n';
// 主机监控类型定义 // Logan.Li
/** 预设时间范围（分钟粒度，支持 15/30 分钟） // Logan.Li */
export const TIME_RANGE_PRESETS = [
{ id: '15m', label: '15分钟', minutes: 15, buckets: 30 },
{ id: '30m', label: '30分钟', minutes: 30, buckets: 36 },
{ id: '1h', label: '1小时', minutes: 60, buckets: 60 },
{ id: '6h', label: '6小时', minutes: 360, buckets: 72 },
{ id: '12h', label: '12小时', minutes: 720, buckets: 72 },
{ id: '1d', label: '1天', minutes: 1440, buckets: 96 },
{ id: '7d', label: '7天', minutes: 10080, buckets: 84 },
{ id: '15m', label: i18n.t('monitor.traceMgr.min15'), minutes: 15, buckets: 30 },
{ id: '30m', label: i18n.t('monitor.typests.s751a79af'), minutes: 30, buckets: 36 },
{ id: '1h', label: i18n.t('monitor.traceMgr.hour1'), minutes: 60, buckets: 60 },
{ id: '6h', label: i18n.t('monitor.traceMgr.hour6'), minutes: 360, buckets: 72 },
{ id: '12h', label: i18n.t('monitor.typests.sd04708fe'), minutes: 720, buckets: 72 },
{ id: '1d', label: i18n.t('monitor.typests.s7db888de'), minutes: 1440, buckets: 96 },
{ id: '7d', label: i18n.t('monitor.traceMgr.day7'), minutes: 10080, buckets: 84 },
] as const;
export type TimeRangePresetId = (typeof TIME_RANGE_PRESETS)[number]['id'] | 'custom';
@@ -26,7 +27,7 @@ export interface HostMonitorTimeRange {
export const DEFAULT_TIME_RANGE: HostMonitorTimeRange = {
preset: '1h',
label: '1小时',
label: i18n.t('monitor.traceMgr.hour1'),
minutes: 60,
buckets: 60,
};
frontend/src/pages/monitor/middleware-monitor/MiddlewareDialog.tsx
+16 -15
View File
@@ -10,6 +10,7 @@ import { Loader2 } from 'lucide-react';
import { middlewareMonitorApi } from '@/api';
import { toast } from 'sonner';
import type { MwTarget } from './helpers';
import i18n from '@/i18n';
interface Props {
open: boolean;
@@ -45,7 +46,7 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
const handleSubmit = async () => {
if (!form.name.trim() || !form.ip.trim()) {
toast.error('请填写名称和 IP');
toast.error(i18n.t('monitor.middlewaredialo.s0fa2360e'));
return;
}
setSaving(true);
@@ -62,15 +63,15 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
}
if (editTarget) {
await middlewareMonitorApi.update(editTarget.id, payload);
toast.success('更新成功');
toast.success(i18n.t('monitor.middlewaredialo.s55aa6366'));
} else {
await middlewareMonitorApi.create(payload);
toast.success('创建成功');
toast.success(i18n.t('monitor.dashboard.custom.toastCreateSuccess'));
}
onOpenChange(false);
onSuccess();
} catch (err) {
toast.error(editTarget ? '更新失败' : '创建失败', { description: (err as { message?: string }).message });
toast.error(editTarget ? i18n.t('kubernetes.deployment.imageUpdateFailed') : i18n.t('monitor.dashboard.custom.toastCreateFailed'), { description: (err as { message?: string }).message });
} finally {
setSaving(false);
}
@@ -80,12 +81,12 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent showOverlay={false} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-md">
<DialogHeader>
<DialogTitle>{editTarget ? '编辑中间件' : '添加中间件'}</DialogTitle>
<DialogDescription>配置 Redis（单机/集群）或 MySQL 连接，平台自动采集指标</DialogDescription>
<DialogTitle>{editTarget ? i18n.t('monitor.middlewaredialo.sc38ddef8') : i18n.t('monitor.middlewaredialo.sa24241b6')}</DialogTitle>
<DialogDescription> {i18n.t('monitor.middlewaredialo.s6ee71754')} </DialogDescription>
</DialogHeader>
<div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
<div className="space-y-2">
<Label>类型</Label>
<Label> {i18n.t('system.credentialType')} </Label>
<div className="flex gap-2">
{(['redis', 'mysql'] as const).map((t) => (
<button key={t} type="button" onClick={() => setForm((f) => ({ ...f, type: t, port: t === 'redis' ? 6379 : 3306 }))}
@@ -97,9 +98,9 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
</div>
{form.type === 'redis' && (
<div className="space-y-2">
<Label>部署模式</Label>
<Label> {i18n.t('deploy.form.deployMode')} </Label>
<div className="flex gap-2">
{[{ value: 'standalone' as const, label: '单机' }, { value: 'cluster' as const, label: '集群' }].map((opt) => (
{[{ value: 'standalone' as const, label: i18n.t('monitor.helpersts.s047499fc') }, { value: 'cluster' as const, label: i18n.t('k8s.topology.typeCluster') }].map((opt) => (
<button key={opt.value} type="button" onClick={() => setForm((f) => ({ ...f, redis_mode: opt.value }))}
className={`flex-1 py-2 rounded-lg text-sm ${form.redis_mode === opt.value ? 'bg-blue-600 text-white' : 'bg-[var(--dg-bg-tertiary)]'}`}>
{opt.label}
@@ -109,7 +110,7 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
</div>
)}
<div className="space-y-2">
<Label>名称 *</Label>
<Label> {i18n.t('deploy.form.nameStar')} </Label>
<Input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} />
</div>
<div className="grid grid-cols-3 gap-2">
@@ -118,7 +119,7 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
<Input value={form.ip} onChange={(e) => setForm((f) => ({ ...f, ip: e.target.value }))} />
</div>
<div className="space-y-2">
<Label>端口</Label>
<Label> {i18n.t('system.ldapPort')} </Label>
<Input type="number" value={form.port} onChange={(e) => setForm((f) => ({ ...f, port: Number(e.target.value) }))} />
</div>
</div>
@@ -129,21 +130,21 @@ export function MiddlewareDialog({ open, onOpenChange, editTarget, onSuccess }:
{form.type === 'mysql' && (
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label>用户名</Label>
<Label> {i18n.t('system.userName')} </Label>
<Input value={form.username} onChange={(e) => setForm((f) => ({ ...f, username: e.target.value }))} />
</div>
<div className="space-y-2">
<Label>数据库</Label>
<Label> {i18n.t('k8s.topology.typeDatabase')} </Label>
<Input value={form.database} onChange={(e) => setForm((f) => ({ ...f, database: e.target.value }))} />
</div>
</div>
)}
</div>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
<Button variant="outline" onClick={() => onOpenChange(false)}> {i18n.t('rbac.jobRole.cancel')} </Button>
<Button onClick={handleSubmit} disabled={saving}>
{saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
{editTarget ? '保存' : '创建'}
{editTarget ? i18n.t('task.script.save') : i18n.t('rbac.jobRole.create')}
</Button>
</DialogFooter>
</DialogContent>
frontend/src/pages/monitor/middleware-monitor/MwOverviewCharts.tsx
+8 -7
View File
@@ -10,6 +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';
interface Props {
targets: MwTarget[];
@@ -24,8 +25,8 @@ export function MwOverviewCharts({ targets }: Props) {
const online = targets.filter((t) => t.status === 'online').length;
const offline = targets.length - online;
return [
{ name: '在线', value: online, fill: 'var(--dg-green)' },
{ name: '离线', value: offline, fill: 'var(--dg-red)' },
{ name: i18n.t('agent.agentOnline'), value: online, fill: 'var(--dg-green)' },
{ name: i18n.t('agent.agentOffline'), value: offline, fill: 'var(--dg-red)' },
].filter((d) => d.value > 0);
}, [targets]);
@@ -52,7 +53,7 @@ export function MwOverviewCharts({ targets }: Props) {
return (
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
<OverviewChartCard title="实例状态" icon={<PieChartIcon className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={statusData.length === 0}>
<OverviewChartCard title={i18n.t('monitor.mwoverviewchart.s2eeb27f9')} icon={<PieChartIcon className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={statusData.length === 0}>
{(h) => (
<ResponsiveContainer width="100%" height={h}>
<PieChart>
@@ -66,13 +67,13 @@ export function MwOverviewCharts({ targets }: Props) {
)}
</OverviewChartCard>
<OverviewChartCard title="Redis 命中率" icon={<Percent className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={redisHitData.length === 0}>
<OverviewChartCard title={i18n.t('monitor.mwoverviewchart.s29d98d86')} icon={<Percent className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={redisHitData.length === 0}>
{(h) => (
<ResponsiveContainer width="100%" height={h}>
<BarChart data={redisHitData} layout="vertical" margin={{ left: 0, right: 8 }}>
<XAxis type="number" domain={[0, 100]} tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} tickFormatter={(v) => `${v}%`} />
<YAxis type="category" dataKey="name" width={64} tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} tickLine={false} axisLine={false} />
<Tooltip content={<MonitorChartTooltip valueFormatter={(v) => fmtHitRate(v / 100)} nameFormatter={() => '命中率'} />} />
<Tooltip content={<MonitorChartTooltip valueFormatter={(v) => fmtHitRate(v / 100)} nameFormatter={() => i18n.t('monitor.mwtargetchartsp.s6787355b')} />} />
<Bar dataKey="value" radius={[0, 3, 3, 0]} maxBarSize={14} isAnimationActive={false}>
{redisHitData.map((e) => <Cell key={e.fullName} fill={e.fill} />)}
</Bar>
@@ -96,13 +97,13 @@ export function MwOverviewCharts({ targets }: Props) {
)}
</OverviewChartCard>
<OverviewChartCard title="MySQL 连接" icon={<BarChart3 className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={mysqlConnData.length === 0}>
<OverviewChartCard title={i18n.t('monitor.mwoverviewchart.s07d3e014')} icon={<BarChart3 className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={mysqlConnData.length === 0}>
{(h) => (
<ResponsiveContainer width="100%" height={h}>
<BarChart data={mysqlConnData} layout="vertical" margin={{ left: 0, right: 8 }}>
<XAxis type="number" tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} />
<YAxis type="category" dataKey="name" width={64} tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} tickLine={false} axisLine={false} />
<Tooltip content={<MonitorChartTooltip valueFormatter={(v) => fmtVal(v)} nameFormatter={() => '连接'} />} />
<Tooltip content={<MonitorChartTooltip valueFormatter={(v) => fmtVal(v)} nameFormatter={() => i18n.t('monitor.mwoverviewchart.s30f7dd4e')} />} />
<Bar dataKey="value" radius={[0, 3, 3, 0]} maxBarSize={14} isAnimationActive={false}>
{mysqlConnData.map((e) => <Cell key={e.fullName} fill={e.fill} />)}
</Bar>
frontend/src/pages/monitor/middleware-monitor/MwTargetChartsPanel.tsx
+19 -18
View File
@@ -18,6 +18,7 @@ import { MwTrendChart } from './MwTrendChart';
import { MwGaugeBar } from './MwGaugeBar';
import { MwHealthStrip } from './MwHealthStrip';
import { ChartExpandShell } from '../shared/ChartExpandShell';
import i18n from '@/i18n';
interface Props {
target: MwTarget | null;
@@ -91,15 +92,15 @@ export function MwTargetChartsPanel({ target, chartDefs, accent }: Props) {
</div>
<div className="flex items-center gap-1.5">
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => setShowAll((v) => !v)}>
{showAll ? '核心指标' : '全部指标'}
{showAll ? i18n.t('monitor.mwtargetchartsp.s9e75621e') : i18n.t('monitor.mwtargetchartsp.s9dea79ec')}
</Button>
<Select value={timeRange} onValueChange={(v) => setTimeRange(v as MwTimeRange)}>
<SelectTrigger className="h-7 w-[92px] text-xs"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="1h">近 1 小时</SelectItem>
<SelectItem value="6h">近 6 小时</SelectItem>
<SelectItem value="24h">近 24 小时</SelectItem>
<SelectItem value="7d">近 7 天</SelectItem>
<SelectItem value="1h"> {i18n.t('monitor.helpersts.sf972b7b1')} </SelectItem>
<SelectItem value="6h"> {i18n.t('monitor.siteProtocol.rangeDefault')} </SelectItem>
<SelectItem value="24h"> {i18n.t('monitor.helpersts.s6e99b786')} </SelectItem>
<SelectItem value="7d"> {i18n.t('monitor.helpersts.sd765efc4')} </SelectItem>
</SelectContent>
</Select>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={loadCharts} disabled={loading}>
@@ -115,20 +116,20 @@ export function MwTargetChartsPanel({ target, chartDefs, accent }: Props) {
{accent === 'redis' && (
<>
<MwGaugeBar
label="命中率"
label={i18n.t('monitor.mwtargetchartsp.s6787355b')}
value={(m.redis_hit_rate || 0) * 100}
display={fmtHitRate(m.redis_hit_rate)}
level={m.redis_hit_rate > 0 ? gaugeToneLow((m.redis_hit_rate || 0) * 100, 90, 80) : 'ok'}
/>
<MwGaugeBar
label="内存占用"
label={i18n.t('monitor.mwtargetchartsp.s44cdb3f7')}
value={memPct ?? (m.redis_used_memory > 0 ? 50 : 0)}
display={fmtMemory(m.redis_used_memory)}
level={memPct != null ? gaugeTone(memPct, 80, 90) : 'ok'}
hint={memPct != null ? `已用 ${memPct.toFixed(0)}%` : '未配置 maxmemory'}
hint={memPct != null ? `已用 ${memPct.toFixed(0)}%` : i18n.t('monitor.mwtargetchartsp.s1c1ce805')}
/>
<MwGaugeBar
label="连接数"
label={i18n.t('kubernetes.topology.connections')}
value={Math.min(100, (m.redis_connected_clients || 0) / 2)}
display={fmtVal(m.redis_connected_clients)}
level={(m.redis_blocked_clients || 0) > 0 ? 'warn' : 'ok'}
@@ -139,19 +140,19 @@ export function MwTargetChartsPanel({ target, chartDefs, accent }: Props) {
{accent === 'mysql' && (
<>
<MwGaugeBar
label="缓冲池命中率"
label={i18n.t('monitor.mwtargetchartsp.sa2d02e56')}
value={(m.mysql_buffer_hit_rate || 0) * 100}
display={fmtHitRate(m.mysql_buffer_hit_rate)}
level={m.mysql_buffer_hit_rate > 0 ? gaugeToneLow((m.mysql_buffer_hit_rate || 0) * 100, 95, 90) : 'ok'}
/>
<MwGaugeBar
label="连接占用"
label={i18n.t('monitor.mwtargetchartsp.se84e4bc5')}
value={connPct ?? 0}
display={`${fmtVal(m.mysql_connections)} / ${fmtVal(m.mysql_max_connections)}`}
level={connPct != null ? gaugeTone(connPct, 80, 90) : 'ok'}
/>
<MwGaugeBar
label="活跃线程"
label={i18n.t('monitor.mwtargetchartsp.se0f6abb7')}
value={Math.min(100, (m.mysql_threads_running || 0) * 5)}
display={fmtVal(m.mysql_threads_running)}
level={(m.mysql_threads_running || 0) > 20 ? 'warn' : 'ok'}
@@ -166,16 +167,16 @@ export function MwTargetChartsPanel({ target, chartDefs, accent }: Props) {
{accent === 'redis' ? (
<>
<SummaryTile label="QPS" value={fmtVal(m.redis_qps, 1)} />
<SummaryTile label="Key 数" value={fmtVal(m.redis_db_size)} />
<SummaryTile label="逐出 Key" value={fmtVal(m.redis_evicted_keys)} warn={(m.redis_evicted_keys || 0) > 0} />
<SummaryTile label="碎片率" value={m.redis_mem_fragmentation_ratio ? fmtVal(m.redis_mem_fragmentation_ratio, 2) : '--'} />
<SummaryTile label={i18n.t('monitor.mwtargetchartsp.s196eef1f')} value={fmtVal(m.redis_db_size)} />
<SummaryTile label={i18n.t('monitor.mwtargetchartsp.s0a5e7a61')} value={fmtVal(m.redis_evicted_keys)} warn={(m.redis_evicted_keys || 0) > 0} />
<SummaryTile label={i18n.t('monitor.mwtargetchartsp.s3bc8dd1f')} value={m.redis_mem_fragmentation_ratio ? fmtVal(m.redis_mem_fragmentation_ratio, 2) : '--'} />
</>
) : (
<>
<SummaryTile label="QPS" value={fmtVal(m.mysql_qps, 1)} />
<SummaryTile label="接收流量" value={fmtMemory(m.mysql_bytes_received)} />
<SummaryTile label="发送流量" value={fmtMemory(m.mysql_bytes_sent)} />
<SummaryTile label="运行时长" value={m.mysql_uptime ? `${Math.floor(m.mysql_uptime / 3600)}h` : '--'} />
<SummaryTile label={i18n.t('monitor.mwtargetchartsp.s3e54c81c')} value={fmtMemory(m.mysql_bytes_received)} />
<SummaryTile label={i18n.t('monitor.mwtargetchartsp.s90d6afb7')} value={fmtMemory(m.mysql_bytes_sent)} />
<SummaryTile label={i18n.t('agent.agentUptime')} value={m.mysql_uptime ? `${Math.floor(m.mysql_uptime / 3600)}h` : '--'} />
</>
)}
</div>
frontend/src/pages/monitor/middleware-monitor/helpers.ts
+24 -23
View File
@@ -1,3 +1,4 @@
import i18n from '@/i18n';
// 中间件监控可视化辅助 // Logan.Li
export interface MwConfigPublic {
@@ -58,20 +59,20 @@ 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: '内存占用', color: 'var(--dg-red)', formatter: fmtMemory },
{ key: 'redis_hit_rate', label: '命中率', color: 'var(--dg-green)', percent: true },
{ key: 'redis_connected_clients', label: '连接数', color: 'var(--dg-cyan)' },
{ key: 'redis_db_size', label: 'Key 总数', color: 'var(--dg-purple)' },
{ key: 'redis_blocked_clients', label: '阻塞客户端', color: 'var(--dg-orange)' },
{ key: 'redis_used_memory', label: i18n.t('monitor.mwtargetchartsp.s44cdb3f7'), color: 'var(--dg-red)', formatter: fmtMemory },
{ key: 'redis_hit_rate', label: i18n.t('monitor.mwtargetchartsp.s6787355b'), 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('monitor.helpersts.sc5f65eec'), color: 'var(--dg-purple)' },
{ key: 'redis_blocked_clients', label: i18n.t('monitor.helpersts.s2ad27e85'), color: 'var(--dg-orange)' },
];
export const MYSQL_CHARTS: MwChartDef[] = [
{ key: 'mysql_qps', label: 'QPS', color: 'var(--dg-blue)', unit: 'q/s' },
{ key: 'mysql_connections', label: '连接数', color: 'var(--dg-cyan)' },
{ key: 'mysql_threads_running', label: '活跃线程', color: 'var(--dg-purple)' },
{ key: 'mysql_buffer_hit_rate', label: '缓冲池命中率', color: 'var(--dg-green)', percent: true },
{ key: 'mysql_slow_queries', label: '慢查询速率', color: 'var(--dg-orange)', unit: '次/周期', counterDelta: true },
{ key: 'mysql_bytes_sent', label: '发送流量', color: 'var(--dg-amber)', formatter: fmtMemory },
{ key: 'mysql_connections', label: i18n.t('kubernetes.topology.connections'), color: 'var(--dg-cyan)' },
{ key: 'mysql_threads_running', label: i18n.t('monitor.mwtargetchartsp.se0f6abb7'), color: 'var(--dg-purple)' },
{ key: 'mysql_buffer_hit_rate', label: i18n.t('monitor.mwtargetchartsp.sa2d02e56'), color: 'var(--dg-green)', percent: true },
{ key: 'mysql_slow_queries', label: i18n.t('monitor.helpersts.sbd73bca3'), color: 'var(--dg-orange)', unit: i18n.t('monitor.helpersts.s3878fe68'), counterDelta: true },
{ key: 'mysql_bytes_sent', label: i18n.t('monitor.mwtargetchartsp.s90d6afb7'), color: 'var(--dg-amber)', formatter: fmtMemory },
];
export function fmtMemory(bytes: number): string {
@@ -138,7 +139,7 @@ export function statusBg(status: string): string {
}
export function redisModeLabel(mode?: string): string {
return mode === 'cluster' ? '集群' : '单机';
return mode === 'cluster' ? i18n.t('k8s.topology.typeCluster') : i18n.t('monitor.helpersts.s047499fc');
}
export function redisMemoryPct(metrics: Record<string, number>): number | null {
@@ -208,27 +209,27 @@ export function evalMwHealth(target: MwTarget): MwHealthIssue[] {
const m = target.latest_metrics || {};
const issues: MwHealthIssue[] = [];
if (target.status !== 'online') {
issues.push({ level: 'crit', message: '实例离线' });
issues.push({ level: 'crit', message: i18n.t('monitor.helpersts.s4ace6502') });
return issues;
}
if (target.description === 'redis') {
if (m.redis_hit_rate > 0 && m.redis_hit_rate < 0.8) issues.push({ level: 'crit', message: '命中率 < 80%' });
else if (m.redis_hit_rate > 0 && m.redis_hit_rate < 0.9) issues.push({ level: 'warn', message: '命中率 < 90%' });
if (m.redis_hit_rate > 0 && m.redis_hit_rate < 0.8) issues.push({ level: 'crit', message: i18n.t('monitor.helpersts.sff1d979b') });
else if (m.redis_hit_rate > 0 && m.redis_hit_rate < 0.9) issues.push({ level: 'warn', message: i18n.t('monitor.helpersts.s11902306') });
const memPct = redisMemoryPct(m);
if (memPct != null && memPct > 90) issues.push({ level: 'crit', message: '内存 > 90%' });
else if (memPct != null && memPct > 80) issues.push({ level: 'warn', message: '内存 > 80%' });
if (m.redis_blocked_clients > 0) issues.push({ level: 'warn', message: '阻塞客户端' });
if (m.redis_evicted_keys > 0) issues.push({ level: 'warn', message: 'Key 逐出' });
if (memPct != null && memPct > 90) issues.push({ level: 'crit', message: i18n.t('monitor.helpersts.s07eee3b9') });
else if (memPct != null && memPct > 80) issues.push({ level: 'warn', message: i18n.t('monitor.helpersts.sbb098add') });
if (m.redis_blocked_clients > 0) issues.push({ level: 'warn', message: i18n.t('monitor.helpersts.s2ad27e85') });
if (m.redis_evicted_keys > 0) issues.push({ level: 'warn', message: i18n.t('monitor.helpersts.sc4db73a4') });
} else if (target.description === 'mysql') {
if (m.mysql_buffer_hit_rate > 0 && m.mysql_buffer_hit_rate < 0.9) {
issues.push({ level: 'crit', message: '缓冲池命中 < 90%' });
issues.push({ level: 'crit', message: i18n.t('monitor.helpersts.s99844184') });
} else if (m.mysql_buffer_hit_rate > 0 && m.mysql_buffer_hit_rate < 0.95) {
issues.push({ level: 'warn', message: '缓冲池命中 < 95%' });
issues.push({ level: 'warn', message: i18n.t('monitor.helpersts.s41ec17d6') });
}
const connPct = mysqlConnPct(m);
if (connPct != null && connPct > 90) issues.push({ level: 'crit', message: '连接 > 90% 上限' });
else if (connPct != null && connPct > 80) issues.push({ level: 'warn', message: '连接 > 80% 上限' });
if (m.mysql_threads_running > 20) issues.push({ level: 'warn', message: '活跃线程偏多' });
if (connPct != null && connPct > 90) issues.push({ level: 'crit', message: i18n.t('monitor.helpersts.s5b95d546') });
else if (connPct != null && connPct > 80) issues.push({ level: 'warn', message: i18n.t('monitor.helpersts.se0b952ab') });
if (m.mysql_threads_running > 20) issues.push({ level: 'warn', message: i18n.t('monitor.helpersts.s56174d14') });
}
return issues;
}
frontend/src/pages/monitor/shared/ChartRangeHint.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
// 图表选区提示 — 仅缩放后显示恢复入口 // Logan.Li
import { ZoomOut } from 'lucide-react';
import { Button } from '@/components/ui/button';
import i18n from '@/i18n';
interface Props {
label: string | null;
@@ -12,7 +13,7 @@ export function ChartRangeHint({ label, zoomed, onReset }: Props) {
if (!zoomed) return null;
return (
<div className="flex items-center justify-between text-[10px] text-[var(--dg-text-muted)] mt-1 px-0.5">
<span>已选时段: <span className="text-[var(--dg-text-primary)] font-mono">{label}</span></span>
<span> {i18n.t('monitor.chartrangehintt.s39ce9bad')} <span className="text-[var(--dg-text-primary)] font-mono">{label}</span></span>
<Button type="button" variant="ghost" size="sm" className="h-6 text-[10px] px-2" onClick={onReset}>
<ZoomOut className="h-3 w-3 mr-1" />恢复全量
</Button>
frontend/src/pages/monitor/site-monitor/SiteProtocolPieChart.tsx
+3 -2
View File
@@ -6,6 +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';
interface Props {
tasks: SiteTask[];
@@ -35,7 +36,7 @@ export function SiteProtocolPieChart({ tasks }: Props) {
if (tasks.length === 0) {
return (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-6 text-center text-sm text-[var(--dg-text-muted)]">暂无任务</CardContent>
<CardContent className="p-6 text-center text-sm text-[var(--dg-text-muted)]"> {i18n.t('monitor.siteprotocolpie.s0589e591')} </CardContent>
</Card>
);
}
@@ -45,7 +46,7 @@ export function SiteProtocolPieChart({ tasks }: Props) {
<CardContent className="p-4">
<div className="flex items-center gap-2 mb-2">
<PieChartIcon className="h-4 w-4 text-[var(--dg-text-muted)]" />
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]">协议数量分布</h3>
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]"> {i18n.t('monitor.siteprotocolpie.s20721c88')} </h3>
<span className="text-[10px] text-[var(--dg-text-muted)]">共 {tasks.length} 个任务</span>
</div>
<ResponsiveContainer width="100%" height={200}>
frontend/src/pages/monitor/site-monitor/SiteResultsPanel.tsx
+30 -29
View File
@@ -19,6 +19,7 @@ import {
SITE_TIME_RANGE_HOURS, SITE_TIME_RANGE_LABELS,
} from './helpers';
import { SiteProtocolObs } from './observability/SiteProtocolObs';
import i18n from '@/i18n';
interface Props {
task: SiteTask | null;
@@ -34,7 +35,7 @@ function statusBadge(status: string) {
<Badge className={ok
? 'bg-emerald-500/15 dg-text-green border-emerald-500/30 text-[10px]'
: 'bg-red-500/15 dg-text-red border-red-500/30 text-[10px]'}>
{ok ? '成功' : timeout ? '超时' : '失败'}
{ok ? i18n.t('system.loginSuccess') : timeout ? i18n.t('kubernetes.container.timeoutSeconds') : i18n.t('system.loginFailed')}
</Badge>
);
}
@@ -76,11 +77,11 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
setProbing(true);
try {
await siteApi.probeNow(task.id);
toast.success('拨测完成');
toast.success(i18n.t('monitor.siteresultspane.sb8649f2b'));
loadResults();
onProbed();
} catch (e) {
toast.error((e as { message?: string }).message || '拨测失败');
toast.error((e as { message?: string }).message || i18n.t('monitor.siteresultspane.s3f60d8f1'));
} finally {
setProbing(false);
}
@@ -116,41 +117,41 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
case 'HTTP':
return (
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-xs">时间</TableHead>
<TableHead className="text-xs">状态</TableHead>
<TableHead className="text-xs">状态码</TableHead>
<TableHead className="text-xs">延迟</TableHead>
<TableHead className="text-xs">说明</TableHead>
<TableHead className="text-xs"> {i18n.t('system.auditTime')} </TableHead>
<TableHead className="text-xs"> {i18n.t('system.terminalStatus')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteProtocol.http.statusCodeName')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteProtocol.latency.latencyName')} </TableHead>
<TableHead className="text-xs"> {i18n.t('cloud.colDescription')} </TableHead>
</TableRow>
);
case 'SSL':
return (
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-xs">时间</TableHead>
<TableHead className="text-xs">握手</TableHead>
<TableHead className="text-xs">到期日</TableHead>
<TableHead className="text-xs">剩余</TableHead>
<TableHead className="text-xs">签发者</TableHead>
<TableHead className="text-xs"> {i18n.t('system.auditTime')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteresultspane.s3f04bb50')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteresultspane.s499b9a62')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteProtocol.ssl.daysName')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteProtocol.ssl.issuer')} </TableHead>
</TableRow>
);
case 'TCP':
return (
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-xs">时间</TableHead>
<TableHead className="text-xs">连通</TableHead>
<TableHead className="text-xs">延迟</TableHead>
<TableHead className="text-xs">远端</TableHead>
<TableHead className="text-xs">说明</TableHead>
<TableHead className="text-xs"> {i18n.t('system.auditTime')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteProtocol.tcp.connected')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteProtocol.latency.latencyName')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteresultspane.sa7d1436b')} </TableHead>
<TableHead className="text-xs"> {i18n.t('cloud.colDescription')} </TableHead>
</TableRow>
);
default:
return (
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-xs">时间</TableHead>
<TableHead className="text-xs">状态</TableHead>
<TableHead className="text-xs">延迟</TableHead>
<TableHead className="text-xs">解析/主机</TableHead>
<TableHead className="text-xs">说明</TableHead>
<TableHead className="text-xs"> {i18n.t('system.auditTime')} </TableHead>
<TableHead className="text-xs"> {i18n.t('system.terminalStatus')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteProtocol.latency.latencyName')} </TableHead>
<TableHead className="text-xs"> {i18n.t('monitor.siteresultspane.s3197ed7a')} </TableHead>
<TableHead className="text-xs"> {i18n.t('cloud.colDescription')} </TableHead>
</TableRow>
);
}
@@ -187,7 +188,7 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
<TableCell>{statusBadge(r.status)}</TableCell>
<TableCell className="text-xs">{fmtMs(r.response_time || r.total_time)}</TableCell>
<TableCell className="text-xs text-[var(--dg-text-muted)] truncate max-w-[120px]">{r.remote_ip || '--'}</TableCell>
<TableCell className="text-xs text-[var(--dg-text-muted)] max-w-[160px] truncate">{r.error_message || (r.status === 'success' ? '连通' : '--')}</TableCell>
<TableCell className="text-xs text-[var(--dg-text-muted)] max-w-[160px] truncate">{r.error_message || (r.status === 'success' ? i18n.t('monitor.siteProtocol.tcp.connected') : '--')}</TableCell>
</TableRow>
);
default:
@@ -222,10 +223,10 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
<Select value={timeRange} onValueChange={(v) => setTimeRange(v as SiteTimeRange)}>
<SelectTrigger className="h-7 w-[92px] text-xs"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="1h">近 1 小时</SelectItem>
<SelectItem value="6h">近 6 小时</SelectItem>
<SelectItem value="24h">近 24 小时</SelectItem>
<SelectItem value="7d">近 7 天</SelectItem>
<SelectItem value="1h"> {i18n.t('monitor.helpersts.sf972b7b1')} </SelectItem>
<SelectItem value="6h"> {i18n.t('monitor.siteProtocol.rangeDefault')} </SelectItem>
<SelectItem value="24h"> {i18n.t('monitor.helpersts.s6e99b786')} </SelectItem>
<SelectItem value="7d"> {i18n.t('monitor.helpersts.sd765efc4')} </SelectItem>
</SelectContent>
</Select>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={loadResults} disabled={loading}>
@@ -258,7 +259,7 @@ export function SiteResultsPanel({ task, onProbed, fullPage = false }: Props) {
<SiteProtocolObs task={task} results={results} rangeLabel={rangeLabel} />
<div className={`mt-4 overflow-x-auto ${fullPage ? 'max-h-80' : 'max-h-56'}`}>
{results.length === 0 ? (
<p className="text-center py-6 text-sm text-[var(--dg-text-muted)]">该时段暂无拨测记录</p>
<p className="text-center py-6 text-sm text-[var(--dg-text-muted)]"> {i18n.t('monitor.siteresultspane.s592b56ff')} </p>
) : (
<Table>
<TableHeader>{renderTableHead()}</TableHeader>
frontend/src/pages/monitor/site-monitor/helpers.ts
+11 -10
View File
@@ -1,3 +1,4 @@
import i18n from '@/i18n';
// 站点拨测辅助函数 // Logan.Li
export const PROBE_TYPE_OPTIONS = ['HTTP', 'SSL', 'TCP', 'DNS', 'PING'] as const;
@@ -56,10 +57,10 @@ export const SITE_TIME_RANGE_HOURS: Record<SiteTimeRange, number> = {
};
export const SITE_TIME_RANGE_LABELS: Record<SiteTimeRange, string> = {
'1h': '近 1 小时',
'6h': '近 6 小时',
'24h': '近 24 小时',
'7d': '近 7 天',
'1h': i18n.t('monitor.helpersts.sf972b7b1'),
'6h': i18n.t('monitor.siteProtocol.rangeDefault'),
'24h': i18n.t('monitor.helpersts.s6e99b786'),
'7d': i18n.t('monitor.helpersts.sd765efc4'),
};
/** 各协议推荐默认拨测间隔（秒）// Logan.Li */
@@ -85,11 +86,11 @@ export function defaultProbeFrequency(type: ProbeType): number {
}
export const probeTypeMeta: Record<ProbeType, { label: string; placeholder: string; hint: string }> = {
HTTP: { label: '目标 URL', placeholder: 'https://example.com/health', hint: 'Web 请求（支持 http/https），检测状态码与响应时间' },
SSL: { label: 'SSL 地址', placeholder: 'example.com:443 或 https://example.com', hint: 'TLS 握手检测证书（支持 host:port / https:// 域名，不发起 HTTP 请求）' },
TCP: { label: '主机:端口', placeholder: '192.168.1.1:8080 或 example.com:443', hint: 'TCP 端口连通性' },
DNS: { label: '域名', placeholder: 'example.com', hint: 'DNS 解析延迟与结果' },
PING: { label: '主机地址', placeholder: '192.168.1.1 或 example.com', hint: 'ICMP 连通性与延迟（默认 2 分钟/次）' },
HTTP: { label: i18n.t('monitor.helpersts.s277c74b4'), placeholder: 'https://example.com/health', hint: i18n.t('monitor.helpersts.s953f0b93') },
SSL: { label: i18n.t('monitor.helpersts.s8e3a1ea5'), placeholder: i18n.t('monitor.helpersts.s8a6cb9ae'), hint: i18n.t('monitor.helpersts.sefe596b0') },
TCP: { label: i18n.t('monitor.helpersts.seeda3abc'), placeholder: i18n.t('monitor.helpersts.sd315f501'), hint: i18n.t('monitor.helpersts.s5a87d291') },
DNS: { label: i18n.t('cloud.domainName'), placeholder: 'example.com', hint: i18n.t('monitor.helpersts.sd3fd8f1d') },
PING: { label: i18n.t('monitor.helpersts.saeb5271e'), placeholder: i18n.t('monitor.helpersts.sd6bbd624'), hint: i18n.t('monitor.helpersts.se850c8e9') },
};
export function probeFrequencyHint(type: ProbeType): string {
@@ -145,7 +146,7 @@ export function isSslExpiringSoon(days?: number, threshold = SSL_EXPIRY_WARN_DAY
/** SSL 证书剩余天数展示 // Logan.Li */
export function fmtSslDays(days?: number): { text: string; tone: string } {
if (days == null) return { text: '--', tone: 'text-[var(--dg-text-muted)]' };
if (days < 0) return { text: '已过期', tone: 'dg-text-red' };
if (days < 0) return { text: i18n.t('system.expired2'), tone: 'dg-text-red' };
if (days <= 7) return { text: `${days}天`, tone: 'dg-text-red' };
if (days <= 30) return { text: `${days}天`, tone: 'dg-text-yellow' };
return { text: `${days}天`, tone: 'dg-text-green' };
frontend/src/pages/monitor/site-monitor/observability/analytics.ts
+8 -7
View File
@@ -1,6 +1,7 @@
// 站点拨测可观测分析 — 按协议聚合指标与异常事件 // Logan.Li
import type { SiteResult, SiteTask } from '../helpers';
import { fmtMs, fmtTime, normalizeProbeType } from '../helpers';
import i18n from '@/i18n';
export interface ProbeEvent {
id: string;
@@ -92,16 +93,16 @@ export function analyzeHttpResults(results: SiteResult[], task: SiteTask): HttpO
}
if (code >= 500) {
err5xx++;
pushEvent(events, r, `HTTP ${code}`, 'error', r.error_message || '服务端错误');
pushEvent(events, r, `HTTP ${code}`, 'error', r.error_message || i18n.t('monitor.analyticsts.s71de8af8'));
} else if (code >= 400) {
err4xx++;
pushEvent(events, r, `HTTP ${code}`, 'warn', r.error_message || '客户端/鉴权错误');
pushEvent(events, r, `HTTP ${code}`, 'warn', r.error_message || i18n.t('monitor.analyticsts.sdc751cd0'));
} else if (r.status === 'timeout') {
otherErr++;
pushEvent(events, r, '请求超时', 'error', r.error_message);
pushEvent(events, r, i18n.t('common.timeoutError'), 'error', r.error_message);
} else {
otherErr++;
pushEvent(events, r, code > 0 ? `HTTP ${code}` : '请求失败', 'error', r.error_message);
pushEvent(events, r, code > 0 ? `HTTP ${code}` : i18n.t('monitor.analyticsts.sf50bf418'), 'error', r.error_message);
}
}
const latest = results[0];
@@ -127,7 +128,7 @@ export function analyzeSslResults(results: SiteResult[], task: SiteTask): SslObs
const events: ProbeEvent[] = [];
for (const r of results) {
if (r.status !== 'success') {
pushEvent(events, r, 'TLS 握手失败', 'error', r.error_message);
pushEvent(events, r, i18n.t('monitor.analyticsts.sddbae5b7'), 'error', r.error_message);
} else if (r.ssl_days_remaining != null && r.ssl_days_remaining < 30) {
pushEvent(events, r, `证书剩余 ${r.ssl_days_remaining} 天`, r.ssl_days_remaining <= 7 ? 'error' : 'warn', expiry);
}
@@ -172,7 +173,7 @@ export function analyzePingResults(results: SiteResult[]): LatencyObsSummary {
}
export function analyzeDnsResults(results: SiteResult[]): LatencyObsSummary {
return analyzeLatencyResults(results, 'DNS 解析');
return analyzeLatencyResults(results, i18n.t('cloud.domainResolve'));
}
export function analyzeTcpResults(results: SiteResult[]): ConnectivityObsSummary {
@@ -185,7 +186,7 @@ export function analyzeTcpResults(results: SiteResult[]): ConnectivityObsSummary
const failed = r.status !== 'success';
if (failed) {
lastFailAt = r.checked_at;
pushEvent(events, r, 'TCP 不通', 'error', r.error_message || '连接失败');
pushEvent(events, r, i18n.t('monitor.analyticsts.s0614a3ce'), 'error', r.error_message || i18n.t('aiops.llmTestFailed'));
}
return { time: fmtTime(r.checked_at).slice(-5), up: failed ? 0 : 100, failed };
});
frontend/src/pages/monitor/snmp-monitor/SnmpDeviceChartsPanel.tsx
+7 -6
View File
@@ -15,6 +15,7 @@ import {
SNMP_TIME_RANGE_HOURS, fmtMetricValue, isSnmpCounterMetric, metricColor, pickSeriesByCategory,
} from './helpers';
import { SnmpMetricTrendChart } from './SnmpMetricTrendChart';
import i18n from '@/i18n';
interface Props {
device: SnmpDevice | null;
@@ -114,9 +115,9 @@ export function SnmpDeviceChartsPanel({ device, templateName }: Props) {
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="6h">近 6 小时</SelectItem>
<SelectItem value="24h">近 24 小时</SelectItem>
<SelectItem value="7d">近 7 天</SelectItem>
<SelectItem value="6h"> {i18n.t('monitor.siteProtocol.rangeDefault')} </SelectItem>
<SelectItem value="24h"> {i18n.t('monitor.helpersts.s6e99b786')} </SelectItem>
<SelectItem value="7d"> {i18n.t('monitor.helpersts.sd765efc4')} </SelectItem>
</SelectContent>
</Select>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={loadCharts} disabled={loading}>
@@ -128,9 +129,9 @@ export function SnmpDeviceChartsPanel({ device, templateName }: Props) {
<div className="grid grid-cols-3 gap-3 mb-4">
{[
{ label: '最新 CPU', value: latestCpu ? fmtMetricValue(latestCpu.latest_value, latestCpu.unit || '%') : '--' },
{ label: '最新内存', value: latestMem ? fmtMetricValue(latestMem.latest_value, latestMem.unit || '%') : '--' },
{ label: '数据保留', value: '7 天' },
{ label: i18n.t('monitor.snmpdevicechart.s53a04150'), value: latestCpu ? fmtMetricValue(latestCpu.latest_value, latestCpu.unit || '%') : '--' },
{ label: i18n.t('monitor.snmpdevicechart.s33962aa4'), value: latestMem ? fmtMetricValue(latestMem.latest_value, latestMem.unit || '%') : '--' },
{ label: i18n.t('monitor.snmpdevicechart.s26bddc00'), value: i18n.t('monitor.snmpdevicechart.sfdef8c23') },
].map((item) => (
<div key={item.label} className="rounded-lg bg-[var(--dg-bg-tertiary)] p-3 text-center">
<p className="text-[10px] text-[var(--dg-text-muted)]">{item.label}</p>
frontend/src/pages/monitor/snmp-monitor/SnmpOverviewCharts.tsx
+7 -6
View File
@@ -9,6 +9,7 @@ import { BarChart3, PieChart as PieChartIcon } from 'lucide-react';
import type { SnmpDevice, SnmpOverviewItem } from './helpers';
import { fmtMetricValue, statusColor } from './helpers';
import { MonitorChartTooltip, MONITOR_PIE_STROKE, MonitorPieTooltip } from '../shared/monitorChartTheme';
import i18n from '@/i18n';
interface Props {
devices: SnmpDevice[];
@@ -21,9 +22,9 @@ export function SnmpOverviewCharts({ devices, overview }: Props) {
const error = devices.filter((d) => d.status === 'error').length;
const offline = devices.length - online - error;
return [
{ name: '在线', value: online, fill: 'var(--dg-green)' },
{ name: '异常', value: error, fill: 'var(--dg-red)' },
{ name: '离线', value: offline, fill: 'var(--dg-text-muted)' },
{ name: i18n.t('agent.agentOnline'), value: online, fill: 'var(--dg-green)' },
{ name: i18n.t('agent.heartbeatAbnormal'), value: error, fill: 'var(--dg-red)' },
{ name: i18n.t('agent.agentOffline'), value: offline, fill: 'var(--dg-text-muted)' },
].filter((d) => d.value > 0);
}, [devices]);
@@ -47,10 +48,10 @@ export function SnmpOverviewCharts({ devices, overview }: Props) {
<CardContent className="p-4">
<div className="flex items-center gap-2 mb-3">
<BarChart3 className="h-4 w-4 text-[var(--dg-text-muted)]" />
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]">设备 CPU 对比</h3>
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]"> {i18n.t('monitor.snmpoverviewcha.s64f5a4da')} </h3>
</div>
{cpuData.length === 0 ? (
<p className="text-xs text-[var(--dg-text-muted)] py-8 text-center">暂无 CPU 指标，请先完成采集</p>
<p className="text-xs text-[var(--dg-text-muted)] py-8 text-center"> {i18n.t('monitor.snmpoverviewcha.s1f441890')} </p>
) : (
<ResponsiveContainer width="100%" height={Math.max(160, cpuData.length * 36)}>
<BarChart data={cpuData} layout="vertical" margin={{ top: 0, right: 16, left: 0, bottom: 0 }}>
@@ -98,7 +99,7 @@ export function SnmpOverviewCharts({ devices, overview }: Props) {
<CardContent className="p-4">
<div className="flex items-center gap-2 mb-3">
<PieChartIcon className="h-4 w-4 text-[var(--dg-text-muted)]" />
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]">设备状态</h3>
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]"> {i18n.t('monitor.snmpoverviewcha.sbb0ae97f')} </h3>
</div>
<ResponsiveContainer width="100%" height={180}>
<PieChart>