fix: 修复 Agent 状态与监控大屏
This commit is contained in:
Logan.Li committed
1 parent
83662487cb
commit
e557782176
9 files changed
+155
-591
No files matched your search
@@ -50,7 +50,6 @@ const ROUTE_I18N_MAP: Record<string, string> = {
|
||||
'datasources': 'breadcrumb.datasources',
|
||||
'dashboards': 'breadcrumb.dashboards',
|
||||
'host-monitor': 'breadcrumb.hostMonitor',
|
||||
'host-dashboard': 'breadcrumb.hostDashboard',
|
||||
'alerts': 'breadcrumb.alerts',
|
||||
'approval': 'breadcrumb.approval',
|
||||
'approval-resource': 'breadcrumb.approvalResource',
|
||||
|
||||
@@ -5,7 +5,6 @@ import { cn } from '@/lib/utils';
|
||||
import { useThemeStore, useMenuStore } from '@/store';
|
||||
import { usePermission } from '@/hooks/usePermission';
|
||||
import {
|
||||
|
||||
LayoutDashboard,
|
||||
Server,
|
||||
Cloud,
|
||||
@@ -115,7 +114,6 @@ const menuItems: MenuItem[] = [
|
||||
children: [
|
||||
{ id: 'grafana', name: 'Dashboards', labelKey: 'menu.grafana', icon: Monitor, path: '/dashboards', permission: 'monitor:alert' },
|
||||
{ id: 'monitor-center', name: 'Resource Monitor', labelKey: 'menu.resourceMonitor', icon: Activity, path: '/monitor-center', permission: 'agent:monitor' },
|
||||
{ id: 'host-dashboard', name: 'Host Dashboard', labelKey: 'menu.hostDashboard', icon: LayoutDashboard, path: '/host-dashboard', permission: 'agent:monitor' },
|
||||
{ id: 'trace', name: 'Tracing', labelKey: 'menu.trace', icon: GitBranch, path: '/trace', permission: 'monitor:alert' },
|
||||
{ id: 'alert-center', name: 'Alert Center', labelKey: 'menu.alertCenter', icon: Bell, path: '/alert-center', permission: 'monitor:alert' },
|
||||
{ id: 'datasources', name: 'Datasources', labelKey: 'menu.datasources', icon: Database, path: '/datasources', permission: 'monitor:alert' },
|
||||
|
||||
@@ -1,497 +0,0 @@
|
||||
// 主机监控大屏 — Grafana 风格：统计卡片 + 资源条状图 + 可排序列表 // Logan.Li
|
||||
// 参照: Grafana node-dashboard.json (表格+时序) / kubernetes-dashboard.json (bargauge+阈值)
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
|
||||
Server,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
Activity,
|
||||
Monitor,
|
||||
Bell,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
RefreshCw,
|
||||
Search,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import { serverApi } from '@/api';
|
||||
import type { JsonData } from '@/types/common';
|
||||
|
||||
type SortField = 'hostname' | 'ip' | 'agent_version' | 'agent_status' | 'cpu_usage' | 'memory_usage' | 'disk_usage' | 'region';
|
||||
type SortDir = 'asc' | 'desc';
|
||||
|
||||
function getUsageBar(val: number) {
|
||||
const v = val || 0;
|
||||
const color = v > 85 ? 'bg-red-500' : v > 60 ? 'bg-amber-500' : 'bg-emerald-500';
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 min-w-[80px]">
|
||||
<div className="flex-1 h-1.5 rounded-full bg-[var(--dg-bg-active)]/50 overflow-hidden">
|
||||
<div className={`h-full rounded-full ${color}`} style={{ width: `${Math.min(v, 100)}%` }} />
|
||||
</div>
|
||||
<span className="text-xs font-mono w-10 text-right text-[var(--dg-text-primary)]">{v.toFixed(0)}%</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HostMonitorDashboard() {
|
||||
const { t } = useTranslation(['monitor', 'common']);
|
||||
const navigate = useNavigate();
|
||||
const [hosts, setHosts] = useState<JsonData[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [search, setSearch] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
// 排序状态
|
||||
const [sortField, setSortField] = useState<SortField>('hostname');
|
||||
const [sortDir, setSortDir] = useState<SortDir>('asc');
|
||||
|
||||
// 统计
|
||||
const [stats, setStats] = useState<{ online: number; offline: number; total: number }>({ online: 0, offline: 0, total: 0 });
|
||||
|
||||
const loadData = useCallback(async (isRefresh = false) => {
|
||||
if (isRefresh) setRefreshing(true);
|
||||
else setLoading(true);
|
||||
try {
|
||||
const params: JsonData = { page, page_size: pageSize };
|
||||
if (search.trim()) params.keyword = search.trim();
|
||||
const res = await serverApi.getServers(params);
|
||||
const list = (res as JsonData)?.list || [];
|
||||
setHosts(list);
|
||||
setTotal((res as JsonData)?.total || 0);
|
||||
|
||||
// 统计
|
||||
const online = list.filter((h: JsonData) => h.agent_status === 'online').length;
|
||||
setStats({ online, offline: list.length - online, total: (res as JsonData)?.total || 0 });
|
||||
} catch {
|
||||
setHosts([]);
|
||||
setTotal(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [page, pageSize, search]);
|
||||
|
||||
useEffect(() => { loadData(); }, [loadData]);
|
||||
|
||||
// 排序后的数据
|
||||
const sorted = [...hosts].sort((a: JsonData, b: JsonData) => {
|
||||
let va: JsonData | undefined, vb: JsonData | undefined;
|
||||
if (sortField === 'region') {
|
||||
va = (a.region?.name || a.region?.Name || '').toLowerCase();
|
||||
vb = (b.region?.name || b.region?.Name || '').toLowerCase();
|
||||
} else if (sortField === 'agent_status') {
|
||||
va = a.agent_status || 'offline';
|
||||
vb = b.agent_status || 'offline';
|
||||
} else if (sortField === 'agent_version') {
|
||||
va = a.agent_version || '';
|
||||
vb = b.agent_version || '';
|
||||
} else {
|
||||
va = a[sortField] || '';
|
||||
vb = b[sortField] || '';
|
||||
}
|
||||
|
||||
if (typeof va === 'number' && typeof vb === 'number') {
|
||||
return sortDir === 'asc' ? va - vb : vb - va;
|
||||
}
|
||||
const sa = String(va).toLowerCase();
|
||||
const sb = String(vb).toLowerCase();
|
||||
if (sa < sb) return sortDir === 'asc' ? -1 : 1;
|
||||
if (sa > sb) return sortDir === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
setSortDir(d => d === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDir('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const SortIcon = ({ field }: { field: SortField }) => {
|
||||
if (sortField !== field) return <ArrowUpDown className="w-3 h-3 dg-text-muted" />;
|
||||
return sortDir === 'asc'
|
||||
? <ArrowUp className="w-3 h-3 dg-text-blue" />
|
||||
: <ArrowDown className="w-3 h-3 dg-text-blue" />;
|
||||
};
|
||||
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
const handleSearch = () => {
|
||||
setPage(1);
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 状态标签颜色
|
||||
const statusBadge = (status: string) => {
|
||||
if (status === 'online') return <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-[11px]">{t('common:online')}</Badge>;
|
||||
if (status === 'running') return <Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30 text-[11px]">{t('common:running')}</Badge>;
|
||||
if (status === 'stopped') return <Badge className="bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)] text-[11px]">{t('common:stopped')}</Badge>;
|
||||
return <Badge variant="outline" className="text-[11px] dg-text-muted">{status || '--'}</Badge>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 统计卡片 — Grafana Quick Facts 风格 (参照 JVM Dashboard) */}
|
||||
<div className="grid grid-cols-6 gap-3">
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-3 flex items-center gap-2.5">
|
||||
<div className="p-1.5 rounded-lg bg-blue-500/10"><Server className="h-4 w-4 dg-text-blue" /></div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-[var(--dg-text-primary)]">{stats.total}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)]">{t('monitor:hostDashboard.hostTotal')}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-3 flex items-center gap-2.5">
|
||||
<div className="p-1.5 rounded-lg bg-emerald-500/10"><Wifi className="h-4 w-4 dg-text-green" /></div>
|
||||
<div>
|
||||
<div className="text-xl font-bold dg-text-green">{stats.online}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)]">{t('monitor:hostDashboard.agentOnline')}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-3 flex items-center gap-2.5">
|
||||
<div className="p-1.5 rounded-lg bg-[var(--dg-bg-active)]/10"><WifiOff className="h-4 w-4 dg-text-secondary" /></div>
|
||||
<div>
|
||||
<div className="text-xl font-bold dg-text-secondary">{stats.offline}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)]">{t('common:offline')}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{(() => {
|
||||
const onlines = hosts.filter((h: JsonData) => h.agent_status === 'online');
|
||||
const avgCpu = onlines.length > 0 ? onlines.reduce((s: number, h: JsonData) => s + (h.cpu_usage || 0), 0) / onlines.length : 0;
|
||||
const avgMem = onlines.length > 0 ? onlines.reduce((s: number, h: JsonData) => s + (h.memory_usage || 0), 0) / onlines.length : 0;
|
||||
const cpuColor = avgCpu > 85 ? 'dg-text-red' : avgCpu > 60 ? 'dg-text-yellow' : 'dg-text-green';
|
||||
const memColor = avgMem > 85 ? 'dg-text-red' : avgMem > 60 ? 'dg-text-yellow' : 'dg-text-green';
|
||||
return (<>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-3 flex items-center gap-2.5">
|
||||
<div className="p-1.5 rounded-lg bg-red-500/10"><Cpu className="h-4 w-4 dg-text-red" /></div>
|
||||
<div>
|
||||
<div className={`text-xl font-bold ${cpuColor}`}>{avgCpu.toFixed(1)}<span className="text-sm">%</span></div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)]">{t('monitor:hostDashboard.avgCpu')}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-3 flex items-center gap-2.5">
|
||||
<div className="p-1.5 rounded-lg bg-amber-500/10"><Server className="h-4 w-4 dg-text-yellow" /></div>
|
||||
<div>
|
||||
<div className={`text-xl font-bold ${memColor}`}>{avgMem.toFixed(1)}<span className="text-sm">%</span></div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)]">{t('monitor:hostDashboard.avgMemory')}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* 资源条状图 — Grafana Bargauge 风格 (参照 K8s Node CPU/Memory Ratio) */}
|
||||
{hosts.filter((h: JsonData) => h.agent_status === 'online').length > 0 && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{/* CPU 排行 */}
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm flex items-center gap-2 text-[var(--dg-text-primary)]">
|
||||
<Cpu className="h-4 w-4 dg-text-red" />
|
||||
{t('monitor:hostDashboard.cpuTop5')}
|
||||
<Badge variant="outline" className="text-[10px] bg-red-500/10 dg-text-red border-red-500/30">{t('monitor:hostDashboard.threshold')}</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{[...hosts]
|
||||
.filter((h: JsonData) => h.agent_status === 'online')
|
||||
.sort((a: JsonData, b: JsonData) => (b.cpu_usage || 0) - (a.cpu_usage || 0))
|
||||
.slice(0, 5)
|
||||
.map((h: JsonData) => {
|
||||
const val = h.cpu_usage || 0;
|
||||
return (
|
||||
<div key={h.id} className="flex items-center gap-2">
|
||||
<span className="text-xs text-[var(--dg-text-secondary)] w-20 truncate" title={h.hostname}>{h.hostname}</span>
|
||||
<div className="flex-1 h-4 rounded bg-[var(--dg-bg-active)]/50 overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded transition-all"
|
||||
style={{
|
||||
width: `${Math.min(val, 100)}%`,
|
||||
background: val >= 85
|
||||
? 'linear-gradient(90deg, #ef4444, #f87171)'
|
||||
: val >= 60
|
||||
? 'linear-gradient(90deg, #f59e0b, #fbbf24)'
|
||||
: 'linear-gradient(90deg, #10b981, #34d399)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs font-mono w-10 text-right ${
|
||||
val >= 85 ? 'dg-text-red' : val >= 60 ? 'dg-text-yellow' : 'dg-text-green'
|
||||
}`}>{val.toFixed(1)}%</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 内存排行 */}
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm flex items-center gap-2 text-[var(--dg-text-primary)]">
|
||||
<Server className="h-4 w-4 dg-text-yellow" />
|
||||
{t('monitor:hostDashboard.memTop5')}
|
||||
<Badge variant="outline" className="text-[10px] bg-amber-500/10 dg-text-yellow border-amber-500/30">{t('monitor:hostDashboard.threshold')}</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{[...hosts]
|
||||
.filter((h: JsonData) => h.agent_status === 'online')
|
||||
.sort((a: JsonData, b: JsonData) => (b.memory_usage || 0) - (a.memory_usage || 0))
|
||||
.slice(0, 5)
|
||||
.map((h: JsonData) => {
|
||||
const val = h.memory_usage || 0;
|
||||
return (
|
||||
<div key={h.id} className="flex items-center gap-2">
|
||||
<span className="text-xs text-[var(--dg-text-secondary)] w-20 truncate" title={h.hostname}>{h.hostname}</span>
|
||||
<div className="flex-1 h-4 rounded bg-[var(--dg-bg-active)]/50 overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded transition-all"
|
||||
style={{
|
||||
width: `${Math.min(val, 100)}%`,
|
||||
background: val >= 85
|
||||
? 'linear-gradient(90deg, #ef4444, #f87171)'
|
||||
: val >= 60
|
||||
? 'linear-gradient(90deg, #f59e0b, #fbbf24)'
|
||||
: 'linear-gradient(90deg, #10b981, #34d399)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs font-mono w-10 text-right ${
|
||||
val >= 85 ? 'dg-text-red' : val >= 60 ? 'dg-text-yellow' : 'dg-text-green'
|
||||
}`}>{val.toFixed(1)}%</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 表格卡片 */}
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="h-5 w-5 dg-text-green" />
|
||||
<CardTitle className="text-base text-[var(--dg-text-primary)]">{t('monitor:hostDashboard.listTitle')}</CardTitle>
|
||||
<Badge variant="outline" className="text-xs bg-emerald-500/10 dg-text-green border-emerald-500/30">{t('monitor:hostDashboard.realtime')}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
|
||||
<Input
|
||||
className="w-[200px] pl-8 h-8 text-sm bg-[var(--dg-bg-primary)]"
|
||||
placeholder={t('monitor:hostDashboard.searchPlaceholder')}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={() => loadData(true)} disabled={refreshing}>
|
||||
<RefreshCw className={`h-4 w-4 mr-1 ${refreshing ? 'animate-spin' : ''}`} />
|
||||
{t('common:refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<div className="py-16 text-center text-[var(--dg-text-muted)]">
|
||||
<Activity className="h-8 w-8 mx-auto mb-2 animate-spin dg-text-green" />
|
||||
<p className="text-sm">{t('common:loading')}</p>
|
||||
</div>
|
||||
) : sorted.length === 0 ? (
|
||||
<div className="py-16 text-center text-[var(--dg-text-muted)]">
|
||||
<Server className="h-10 w-10 mx-auto mb-2 dg-text-muted" />
|
||||
<p className="text-sm">{t('monitor:hostDashboard.noData')}</p>
|
||||
<p className="text-xs mt-1">{t('monitor:hostDashboard.noDataDesc')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--dg-border)]">
|
||||
{[
|
||||
{ key: 'hostname', label: t('monitor:hostDashboard.colHostId'), w: '' },
|
||||
{ key: 'agent_version', label: t('monitor:hostDashboard.colAgentVersion'), w: 'w-[100px]' },
|
||||
{ key: 'agent_status', label: t('monitor:hostDashboard.colAgentStatus'), w: 'w-[90px]' },
|
||||
{ key: 'cpu_usage', label: 'CPU', w: 'w-[130px]' },
|
||||
{ key: 'memory_usage', label: t('monitor:hostMetric.memory'), w: 'w-[130px]' },
|
||||
{ key: 'disk_usage', label: t('monitor:hostMetric.disk'), w: 'w-[130px]' },
|
||||
{ key: 'region', label: t('monitor:hostDashboard.colRegion'), w: 'w-[120px]' },
|
||||
{ key: 'ip', label: t('monitor:hostDashboard.colIp'), w: 'w-[140px]' },
|
||||
].map(col => (
|
||||
<th
|
||||
key={col.key}
|
||||
className={`text-left px-3 py-2.5 text-xs font-medium text-[var(--dg-text-muted)] cursor-pointer select-none hover:text-[var(--dg-text-primary)] transition-colors ${col.w}`}
|
||||
onClick={() => handleSort(col.key as SortField)}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
{col.label}
|
||||
<SortIcon field={col.key as SortField} />
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
<th className="text-left px-3 py-2.5 text-xs font-medium text-[var(--dg-text-muted)]">{t('common:actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sorted.map((h: JsonData) => (
|
||||
<tr key={h.id} className="border-b border-[var(--dg-border)]/50 hover:bg-[var(--dg-bg-tertiary)]/50 transition-colors">
|
||||
{/* 主机名/ID */}
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full flex-shrink-0 ${h.agent_status === 'online' ? 'bg-emerald-400' : h.status === 'running' ? 'bg-blue-400' : 'bg-[var(--dg-bg-active)]'}`} />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[var(--dg-text-primary)]">{h.hostname}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)]">ID: {h.id}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{/* Agent 版本 */}
|
||||
<td className="px-3 py-2">
|
||||
<code className="text-xs text-blue-300">{h.agent_version || '--'}</code>
|
||||
</td>
|
||||
{/* Agent 状态 */}
|
||||
<td className="px-3 py-2">
|
||||
{statusBadge(h.agent_status)}
|
||||
</td>
|
||||
{/* CPU 使用率 */}
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Cpu className="h-3 w-3 dg-text-red flex-shrink-0" />
|
||||
{getUsageBar(h.cpu_usage)}
|
||||
</div>
|
||||
</td>
|
||||
{/* 内存使用率 */}
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Server className="h-3 w-3 dg-text-yellow flex-shrink-0" />
|
||||
{getUsageBar(h.memory_usage)}
|
||||
</div>
|
||||
</td>
|
||||
{/* 磁盘使用率 */}
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<HardDrive className="h-3 w-3 dg-text-orange flex-shrink-0" />
|
||||
{getUsageBar(h.disk_usage)}
|
||||
</div>
|
||||
</td>
|
||||
{/* 所在区域 */}
|
||||
<td className="px-3 py-2">
|
||||
<span className="text-xs text-[var(--dg-text-secondary)]">
|
||||
{h.region?.name || h.region?.Name || (h.region ? h.region : '--')}
|
||||
</span>
|
||||
</td>
|
||||
{/* IP 地址 */}
|
||||
<td className="px-3 py-2">
|
||||
<code className="text-xs text-[var(--dg-text-secondary)] font-mono">{h.ip || '--'}</code>
|
||||
</td>
|
||||
{/* 操作栏 */}
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs dg-text-blue hover:text-blue-300 hover:bg-blue-500/10"
|
||||
onClick={() => navigate(`/monitor-center?host=${encodeURIComponent(h.hostname)}`)}
|
||||
title={t('monitor:hostDashboard.viewMonitorChart')}
|
||||
>
|
||||
<Monitor className="h-3 w-3 mr-1" />
|
||||
{t('monitor:hostDashboard.monitor')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs dg-text-yellow hover:text-amber-300 hover:bg-amber-500/10"
|
||||
onClick={() => navigate(`/alerts?hostname=${encodeURIComponent(h.hostname)}`)}
|
||||
title={t('monitor:hostDashboard.viewAlertRules')}
|
||||
>
|
||||
<Bell className="h-3 w-3 mr-1" />
|
||||
{t('monitor:hostDashboard.alert')}
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t border-[var(--dg-border)]">
|
||||
<div className="flex items-center gap-2 text-xs text-[var(--dg-text-muted)]">
|
||||
<span>{t('monitor:hostDashboard.perPage')}</span>
|
||||
<Select value={String(pageSize)} onValueChange={(v) => { setPageSize(Number(v)); setPage(1); }}>
|
||||
<SelectTrigger className="h-7 w-[60px] text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="10">10</SelectItem>
|
||||
<SelectItem value="20">20</SelectItem>
|
||||
<SelectItem value="30">30</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span>{t('monitor:hostDashboard.totalCount', { count: total })}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage(p => p - 1)}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-xs text-[var(--dg-text-secondary)] px-2">
|
||||
{page} / {Math.max(totalPages, 1)}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,8 @@ import {
|
||||
Trash2,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -140,6 +142,25 @@ export const AgentTab: React.FC = () => {
|
||||
const selectedHosts = useMemo(() => hosts.filter((h) => selected.has(String(h.server_id))), [hosts, selected]);
|
||||
const needInstall = useMemo(() => selectedHosts.filter((h) => h.agent_status !== 'online'), [selectedHosts]);
|
||||
const needUpgrade = useMemo(() => selectedHosts.filter((h) => h.agent_status === 'online'), [selectedHosts]);
|
||||
// 全量概览基于接口完整结果，不受列表分页和当前排序影响。 // Logan.Li
|
||||
const summary = useMemo(() => {
|
||||
const online = hosts.filter((host) => host.agent_status === 'online');
|
||||
const offline = hosts.filter((host) => host.agent_status === 'offline');
|
||||
const notInstalled = hosts.filter((host) => host.agent_status === 'not_installed');
|
||||
const average = (field: 'cpu_usage' | 'mem_usage') =>
|
||||
online.length
|
||||
? online.reduce((total, host) => total + Number(host[field] || 0), 0) / online.length
|
||||
: 0;
|
||||
|
||||
return {
|
||||
total: hosts.length,
|
||||
online: online.length,
|
||||
offline: offline.length,
|
||||
notInstalled: notInstalled.length,
|
||||
avgCPU: average('cpu_usage'),
|
||||
avgMemory: average('mem_usage'),
|
||||
};
|
||||
}, [hosts]);
|
||||
|
||||
const openBatchDialog = () => {
|
||||
setBatchAck(false);
|
||||
@@ -338,6 +359,25 @@ export const AgentTab: React.FC = () => {
|
||||
onSubmit={handleBatchSubmit}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3 mb-3">
|
||||
{[
|
||||
{ label: i18n.t('monitor.dashboard.agent.overview.totalHosts'), value: summary.total, icon: Server, tone: 'dg-text-blue' },
|
||||
{ label: i18n.t('monitor.dashboard.agent.overview.online'), value: summary.online, icon: Wifi, tone: 'dg-text-green' },
|
||||
{ label: i18n.t('monitor.dashboard.agent.overview.offline'), value: summary.offline, icon: WifiOff, tone: 'dg-text-orange' },
|
||||
{ label: i18n.t('monitor.dashboard.agent.overview.notInstalled'), value: summary.notInstalled, icon: PackageOpen, tone: 'dg-text-yellow' },
|
||||
{ label: i18n.t('monitor.dashboard.agent.overview.avgCpu'), value: `${summary.avgCPU.toFixed(1)}%`, icon: Cpu, tone: 'dg-text-blue' },
|
||||
{ label: i18n.t('monitor.dashboard.agent.overview.avgMemory'), value: `${summary.avgMemory.toFixed(1)}%`, icon: HardDrive, tone: 'dg-text-purple' },
|
||||
].map(({ label, value, icon: Icon, tone }) => (
|
||||
<div key={label} className="rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] px-3 py-2.5">
|
||||
<div className="flex items-center justify-between gap-2 text-xs text-[var(--dg-text-secondary)]">
|
||||
<span>{label}</span>
|
||||
<Icon className={cn('h-3.5 w-3.5', tone)} />
|
||||
</div>
|
||||
<div className="mt-1 text-xl font-semibold tabular-nums text-[var(--dg-text-primary)]">{value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto rounded-lg border border-[var(--dg-border)]">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-[var(--dg-bg-tertiary)] border-b">
|
||||
|
||||
Reference in new issue
Block a user