feat: PTY kubectl终端 + 侧边栏对齐修复 + 构建缓存清理
**kubectl WebShell 修复：** - 引入 github.com/creack/pty 库实现真正的伪终端 - 替换 bash --noediting + TERM=dumb 方案为 PTY-backed bash - 支持 xterm-256color、窗口自适应、readline 交互 - 修复键盘输入无响应问题 **侧边栏优化：** - 独立菜单项高度从 py-1.5 改为 h-8，与父菜单对齐 - 独立菜单图标从 h-3 w-3 改为 h-3.5 w-3.5，统一 14px **构建优化：** - run.sh docker up 增加 docker image prune -f 清理悬空镜像 - 每次部署自动清理 builder cache + dangling images **认证修复（历史）：** - Token 存储：Zustand + localStorage 双写，http.ts 双源 fallback - YamlViewer/DeploymentDetail token 来源统一为 Zustand store
This commit is contained in:
attacker committed
1 parent
cac1414917
commit
a3cd0d3910
29 files changed
+2954
-180
No files matched your search
@@ -0,0 +1,147 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { RefreshCw, ChevronRight, Bell, AlertTriangle, Info } from 'lucide-react';
|
||||
import { kubernetesApi } from '@/services/api';
|
||||
|
||||
export default function EventsPage() {
|
||||
const { clusterCode } = useParams<{ clusterCode: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [events, setEvents] = useState<any[]>([]);
|
||||
const [clusters, setClusters] = useState<any[]>([]);
|
||||
const [namespaces, setNamespaces] = useState<string[]>([]);
|
||||
const [selectedNs, setSelectedNs] = useState('all');
|
||||
const [filterType, setFilterType] = useState('all');
|
||||
const [activeCluster, setActiveCluster] = useState(clusterCode || '');
|
||||
|
||||
useEffect(() => {
|
||||
kubernetesApi.getClusters().then((res: any) => {
|
||||
const list = res?.list || [];
|
||||
setClusters(list);
|
||||
if (!activeCluster && list.length > 0) {
|
||||
const code = list[0].code || String(list[0].id);
|
||||
setActiveCluster(code);
|
||||
navigate(`/kubernetes/${code}/events`, { replace: true });
|
||||
}
|
||||
}).catch(() => {});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeCluster) return;
|
||||
kubernetesApi.getNamespaces(activeCluster).then((res: any) => {
|
||||
setNamespaces(Array.isArray(res) ? res : (res?.list || res?.data || []));
|
||||
}).catch(() => {});
|
||||
}, [activeCluster]);
|
||||
|
||||
const loadEvents = useCallback(async () => {
|
||||
if (!activeCluster) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
||||
const ft = filterType === 'all' ? undefined : filterType;
|
||||
const res: any = await kubernetesApi.getEvents(activeCluster, ns, ft);
|
||||
setEvents(Array.isArray(res) ? res : (res?.list || []));
|
||||
} catch { setEvents([]); } finally { setLoading(false); }
|
||||
}, [activeCluster, selectedNs, filterType]);
|
||||
|
||||
useEffect(() => { loadEvents(); }, [loadEvents]);
|
||||
|
||||
const warningCount = useMemo(() => events.filter(e => e.type === 'Warning').length, [events]);
|
||||
const normalCount = useMemo(() => events.filter(e => e.type === 'Normal').length, [events]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 text-sm text-slate-500">
|
||||
<Link to="/kubernetes" className="hover:text-slate-300">集群</Link>
|
||||
{activeCluster && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${activeCluster}`} className="hover:text-slate-300">{activeCluster}</Link></>}
|
||||
<ChevronRight className="h-3 w-3" /><span className="text-slate-300">事件</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<h2 className="text-lg font-semibold text-slate-100 flex items-center gap-2"><Bell className="h-5 w-5 text-yellow-400" />集群事件</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/events`); }}>
|
||||
<SelectTrigger className="w-40 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue /></SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
{clusters.map((c: any) => <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={selectedNs} onValueChange={setSelectedNs}>
|
||||
<SelectTrigger className="w-32 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
<SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
|
||||
{namespaces.map(n => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={filterType} onValueChange={setFilterType}>
|
||||
<SelectTrigger className="w-28 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有类型" /></SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
<SelectItem value="all" className="text-xs">所有类型</SelectItem>
|
||||
<SelectItem value="Warning" className="text-xs">⚠ Warning</SelectItem>
|
||||
<SelectItem value="Normal" className="text-xs">ℹ Normal</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={loadEvents} disabled={loading}>
|
||||
<RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
|
||||
<p className="text-xs text-slate-500">总数</p><p className="text-xl font-bold text-slate-200">{events.length}</p>
|
||||
</CardContent></Card>
|
||||
<Card className="bg-slate-900 border-red-900/30"><CardContent className="p-3 text-center">
|
||||
<p className="text-xs text-slate-500">Warning</p><p className="text-xl font-bold text-red-400">{warningCount}</p>
|
||||
</CardContent></Card>
|
||||
<Card className="bg-slate-900 border-emerald-900/30"><CardContent className="p-3 text-center">
|
||||
<p className="text-xs text-slate-500">Normal</p><p className="text-xl font-bold text-emerald-400">{normalCount}</p>
|
||||
</CardContent></Card>
|
||||
</div>
|
||||
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader><TableRow className="border-slate-800 hover:bg-transparent">
|
||||
<TableHead className="text-slate-400 w-16">类型</TableHead>
|
||||
<TableHead className="text-slate-400">原因</TableHead>
|
||||
<TableHead className="text-slate-400">对象</TableHead>
|
||||
<TableHead className="text-slate-400">消息</TableHead>
|
||||
<TableHead className="text-slate-400 w-12">次数</TableHead>
|
||||
<TableHead className="text-slate-400 w-36">最后时间</TableHead>
|
||||
</TableRow></TableHeader>
|
||||
<TableBody>
|
||||
{events.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={6} className="text-center text-slate-500 py-8">暂无事件{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
|
||||
) : events.map((e, i) => (
|
||||
<TableRow key={`${e.name}-${i}`} className="border-slate-800 hover:bg-slate-800/30">
|
||||
<TableCell>
|
||||
{e.type === 'Warning' ? (
|
||||
<Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-xs"><AlertTriangle className="h-3 w-3 mr-1 inline" />Warning</Badge>
|
||||
) : (
|
||||
<Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 text-xs"><Info className="h-3 w-3 mr-1 inline" />Normal</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-slate-300">{e.reason || '-'}</TableCell>
|
||||
<TableCell className="text-xs text-slate-500 font-mono">{e.object || '-'}</TableCell>
|
||||
<TableCell className="text-xs text-slate-400 max-w-[350px] truncate" title={e.message}>{e.message || '-'}</TableCell>
|
||||
<TableCell className="text-sm text-slate-400">{e.count || 1}</TableCell>
|
||||
<TableCell className="text-xs text-slate-500">{e.last_time?.replace('T', ' ').substring(0, 19) || '-'}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user