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

fix: 仪表盘死按钮修复+K8s进度条可视化+标题简化

Browse Source 
- Dashboard: 移除无功能的"实时监控"按钮，"刷新"按钮接上数据重载(useCallback+spin动画)
- DashboardRecent: 4个"查看全部"按钮接上路由导航(告警→/alerts, 发布→/releases, 服务器→/servers, 集群→/clusters)
- K8sNodes: CPU/Mem使用率从纯文本改为迷你进度条(颜色阈值:绿<60%/黄60-85%/红>85%)
- K8sWorkloads: Deployment副本比用进度条可视化(满=绿/未满=黄)
- K8sClusters: 页面标题"K8s集群管理"→"集群列表"
This commit is contained in:
attacker committed 2026-06-15 03:35:30 +08:00
1 parent bf3d642b59
commit 18aa445b32
5 files changed
+104 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/k8s/K8sClusters.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ export function K8sClusters() {
{/* Page Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-slate-100">K8s集群管理</h1>
<h1 className="text-2xl font-bold text-slate-100">集群列表</h1>
<p className="text-sm text-slate-500 mt-1">管理Kubernetes集群资源</p>
</div>
<div className="flex items-center gap-2">
frontend/src/components/k8s/K8sNodes.tsx
+24 -4
View File
@@ -145,10 +145,30 @@ export function K8sNodes() {
{n.cpu ? `${n.cpu}核` : '-'} / {n.memory ? `${Math.round(n.memory / 1024)}GB` : '-'}
</TableCell>
<TableCell>
<div className="flex flex-col gap-0.5 text-xs">
<span className="text-blue-400">CPU {(n.cpu_usage || 0).toFixed(1)}%</span>
<span className="text-emerald-400">Mem {(n.memory_usage || 0).toFixed(1)}%</span>
</div>
{(() => {
const cpu = n.cpu_usage || 0;
const mem = n.memory_usage || 0;
const bar = (val: number) => val >= 85 ? 'bg-red-500' : val >= 60 ? 'bg-yellow-500' : 'bg-emerald-500';
const txt = (val: number) => val >= 85 ? 'text-red-400' : val >= 60 ? 'text-yellow-400' : 'text-emerald-400';
return (
<div className="flex flex-col gap-1 min-w-[120px]">
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500 w-7">CPU</span>
<div className="flex-1 h-1.5 rounded-full bg-slate-700/50 overflow-hidden">
<div className={`h-full rounded-full ${bar(cpu)}`} style={{ width: `${Math.min(cpu, 100)}%` }} />
</div>
<span className={`text-xs w-9 text-right ${txt(cpu)}`}>{cpu.toFixed(0)}%</span>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500 w-7">Mem</span>
<div className="flex-1 h-1.5 rounded-full bg-slate-700/50 overflow-hidden">
<div className={`h-full rounded-full ${bar(mem)}`} style={{ width: `${Math.min(mem, 100)}%` }} />
</div>
<span className={`text-xs w-9 text-right ${txt(mem)}`}>{mem.toFixed(0)}%</span>
</div>
</div>
);
})()}
</TableCell>
<TableCell className="text-sm text-slate-400">{n.pod_count || 0} / {n.max_pods || '-'}</TableCell>
<TableCell className="text-xs text-slate-500">{n.kubelet_version || '-'}</TableCell>
frontend/src/components/k8s/K8sWorkloads.tsx
+14 -3
View File
@@ -146,9 +146,20 @@ export function K8sWorkloads() {
<TableCell className="font-medium text-slate-200">{d.name}</TableCell>
<TableCell><Badge variant="outline" className="border-slate-700 text-slate-400">{d.namespace}</Badge></TableCell>
<TableCell>
<span className={d.ready_replicas === d.replicas ? 'text-emerald-400' : 'text-yellow-400'}>
{d.ready_replicas || 0} / {d.replicas || 0}
</span>
{(() => {
const ready = d.ready_replicas || 0;
const total = d.replicas || 0;
const pct = total > 0 ? (ready / total) * 100 : 0;
const done = ready === total;
return (
<div className="flex items-center gap-2 min-w-[100px]">
<div className="flex-1 h-1.5 rounded-full bg-slate-700/50 overflow-hidden">
<div className={`h-full rounded-full ${done ? 'bg-emerald-500' : 'bg-yellow-500'}`} style={{ width: `${pct}%` }} />
</div>
<span className={`text-xs ${done ? 'text-emerald-400' : 'text-yellow-400'}`}>{ready}/{total}</span>
</div>
);
})()}
</TableCell>
<TableCell className="text-xs text-slate-500 max-w-[200px] truncate">{d.image || '-'}</TableCell>
<TableCell className="text-sm text-slate-400">{d.strategy || 'RollingUpdate'}</TableCell>