feat(k8s): M11 StatefulSet/DaemonSet 详情页 — WorkloadViewPage 重写 + YAML 路由冲突修复
后端: - routes.go: 为 statefulsets/daemonsets 注册专门 YAML 子路由（Gin radix tree 冲突） - kubernetes.go: GetResourceYAMLNS/UpdateResourceYAMLNS 添加 URL path fallback 前端: - WorkloadViewPage.tsx 重写: 修复 kind 提取 bug(useLocation) + 更新策略/选择器/PVC模板/InitContainers - NamespaceResourcePage.tsx: handleDetail 添加 STS/DS 点击导航 验证: DS YAML API 200 ✅ | DS Detail 200 ✅ | Dep YAML 200 ✅ | SPA路由 200 ✅ | TS零错误 ✅
This commit is contained in:
attacker committed
1 parent
87b7755094
commit
d1c557bb6c
14 files changed
+1103
-178
No files matched your search
@@ -204,8 +204,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
|
||||
statefulsets: {
|
||||
title: 'StatefulSets', subtitle: '有状态应用', icon: Boxes,
|
||||
columns: ['名称', '命名空间', '副本', '就绪', '镜像'],
|
||||
renderRow: (s) => (
|
||||
<TableRow key={s.name} className="border-slate-800 hover:bg-slate-800/30">
|
||||
renderRow: (s, opts) => (
|
||||
<TableRow key={s.name} className="border-slate-800 hover:bg-slate-800/30 cursor-pointer" onClick={() => opts.onDetail?.(s)}>
|
||||
<TableCell className="font-medium text-slate-200">{s.name}</TableCell>
|
||||
<TableCell><Badge variant="outline" className="border-slate-700 text-slate-400">{s.namespace}</Badge></TableCell>
|
||||
<TableCell className="text-sm text-slate-400">{s.replicas || 0}</TableCell>
|
||||
@@ -217,8 +217,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
|
||||
daemonsets: {
|
||||
title: 'DaemonSets', subtitle: '守护进程集', icon: Boxes,
|
||||
columns: ['名称', '命名空间', '期望', '当前', '就绪', '镜像'],
|
||||
renderRow: (d) => (
|
||||
<TableRow key={d.name} className="border-slate-800 hover:bg-slate-800/30">
|
||||
renderRow: (d, opts) => (
|
||||
<TableRow key={d.name} className="border-slate-800 hover:bg-slate-800/30 cursor-pointer" onClick={() => opts.onDetail?.(d)}>
|
||||
<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 className="text-sm text-slate-400">{d.desired || 0}</TableCell>
|
||||
@@ -308,6 +308,10 @@ export default function NamespaceResourcePage() {
|
||||
if (type === 'deployments') {
|
||||
// Kuboard 风格双模式路由（默认 view 模式）
|
||||
navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/Deployment/${item.name}`);
|
||||
} else if (type === 'statefulsets') {
|
||||
navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/StatefulSet/${item.name}`);
|
||||
} else if (type === 'daemonsets') {
|
||||
navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/DaemonSet/${item.name}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -23,38 +23,21 @@ import { cn } from '@/lib/utils';
|
||||
import { kubernetesApi } from '@/services/api';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
|
||||
/**
|
||||
* Pod 级 exec 终端 — 进入容器执行命令 (kubectl exec -it)
|
||||
*
|
||||
* 复用 KubectlTerminal.tsx 的 xterm.js 模式，连接 Pod exec WebSocket 通道：
|
||||
* ws://host/ws/kubernetes-exec/:clusterId/namespaces/:ns/pods/:pod?container=&token=
|
||||
*
|
||||
* 支持：
|
||||
* - 容器选择下拉（默认第一个容器，可切换）
|
||||
* - 自定义 shell（默认 bash，可切 sh）
|
||||
* - Dialog/Modal 形式，全屏切换
|
||||
* - 终端 resize 透传（ResizeObserver + fit）
|
||||
*
|
||||
* @author Logan <admin@attacker.club>
|
||||
*/
|
||||
export interface PodExecTerminalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
/** 集群 ID（用于 ws 路由 :clusterId） */
|
||||
clusterId: number | string;
|
||||
namespace: string;
|
||||
podName: string;
|
||||
/** 可选：Pod 容器名列表，缺省时仅显示 shell 选择 */
|
||||
containers?: string[];
|
||||
/** 初始容器 */
|
||||
initialContainer?: string;
|
||||
}
|
||||
|
||||
type ConnState = 'idle' | 'connecting' | 'connected' | 'error' | 'closed';
|
||||
|
||||
const SHELLS = [
|
||||
{ value: 'bash', label: '/bin/bash' },
|
||||
{ value: 'sh', label: '/bin/sh' },
|
||||
{ value: 'bash', label: '/bin/bash' },
|
||||
];
|
||||
|
||||
export function PodExecTerminal({
|
||||
@@ -71,268 +54,287 @@ export function PodExecTerminal({
|
||||
const termRef = useRef<XTerm | null>(null);
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const fitRef = useRef<FitAddon | null>(null);
|
||||
const mountedRef = useRef(false);
|
||||
|
||||
const [connState, setConnState] = useState<ConnState>('idle');
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const [container, setContainer] = useState<string>(initialContainer || containers[0] || '');
|
||||
const [shell, setShell] = useState<string>('bash');
|
||||
const [shell, setShell] = useState<string>('sh');
|
||||
|
||||
// 重置全屏状态
|
||||
// ─── 重置 ───
|
||||
useEffect(() => {
|
||||
if (!open) setFullscreen(false);
|
||||
if (!open) {
|
||||
setFullscreen(false);
|
||||
mountedRef.current = false;
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// 容器列表变化时同步默认值
|
||||
useEffect(() => {
|
||||
if (open && !container && containers.length > 0) {
|
||||
setContainer(initialContainer || containers[0]);
|
||||
}
|
||||
}, [open, containers, initialContainer, container]);
|
||||
|
||||
// 创建 xterm 实例（仅在 open 时创建一次，容器/shell 变化时重连 ws）
|
||||
// ─── 连接 WebSocket ───
|
||||
const connect = useCallback(() => {
|
||||
if (!termRef.current) return;
|
||||
console.log('[PodExec:connect] START clusterId=', clusterId, 'namespace=', namespace, 'podName=', podName, 'container=', container, 'shell=', shell);
|
||||
|
||||
if (!termRef.current) {
|
||||
console.error('[PodExec:connect] ABORT: termRef.current is null');
|
||||
return;
|
||||
}
|
||||
const term = termRef.current;
|
||||
|
||||
// 关闭旧连接
|
||||
if (wsRef.current) {
|
||||
console.log('[PodExec:connect] closing previous WS');
|
||||
try { wsRef.current.close(); } catch { /* noop */ }
|
||||
wsRef.current = null;
|
||||
}
|
||||
|
||||
setConnState('connecting');
|
||||
term.clear();
|
||||
term.writeln(`\x1b[36m[正在连接 ${podName}${container ? '/' + container : ''} ...]\x1b[0m`);
|
||||
term.writeln(`\x1b[36m[正在连接 ${podName}${container ? '/' + container : ''} shell=${shell} ...]\x1b[0m`);
|
||||
|
||||
const wsUrl = kubernetesApi.buildPodExecWsUrl(clusterId, namespace, podName, container || undefined, shell);
|
||||
console.log('[PodExec:connect] WS URL:', wsUrl, '\n location.protocol=', window.location.protocol, '\n location.host=', window.location.host, '\n VITE_API_BASE_URL=', import.meta.env.VITE_API_BASE_URL);
|
||||
|
||||
const ws = new WebSocket(wsUrl);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log('[PodExec:connect] WS onopen — connected, readyState=', ws.readyState);
|
||||
setConnState('connected');
|
||||
term.reset();
|
||||
// 发送初始 resize（command/shell 已在 WS URL 参数中指定）
|
||||
try {
|
||||
const { cols, rows } = term;
|
||||
console.log('[PodExec:connect] sending resize:', cols, 'x', rows);
|
||||
ws.send(JSON.stringify({ status: 1, cols, rows }));
|
||||
} catch { /* noop */ }
|
||||
setTimeout(() => { try { term.focus(); } catch { /* noop */ } }, 100);
|
||||
} catch (e) { console.error('[PodExec:connect] resize error:', e); }
|
||||
const tryFocus = () => { try { term.focus(); } catch { /* noop */ } };
|
||||
tryFocus(); setTimeout(tryFocus, 100); setTimeout(tryFocus, 300);
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
if (msg.status === 0 && typeof msg.data === 'string') {
|
||||
console.debug('[PodExec:ws] RX stdout, len=', msg.data.length);
|
||||
term.write(msg.data);
|
||||
} else if (msg.status === 1) {
|
||||
// 服务端 resize 确认，忽略
|
||||
} else if (msg.status === 2 || msg.error) {
|
||||
const errMsg = msg.data || msg.message || msg.error || '执行错误';
|
||||
term.write(errMsg.includes('\\x1b') ? errMsg : `\\r\\n\\x1b[31m${errMsg}\\x1b[0m\\r\\n`);
|
||||
console.warn('[PodExec] error:', errMsg.substring(0, 200));
|
||||
if (errMsg.includes('not found') && shell === 'bash') {
|
||||
term.writeln('\r\n\x1b[33m⚠ bash 不可用，请切换 /bin/sh 后重连。\x1b[0m');
|
||||
return;
|
||||
}
|
||||
term.write(errMsg.includes('\x1b') ? errMsg : `\r\n\x1b[31m${errMsg}\x1b[0m\r\n`);
|
||||
}
|
||||
} catch {
|
||||
if (typeof event.data === 'string') term.write(event.data);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
ws.onclose = (ev) => {
|
||||
console.log('[PodExec:connect] WS closed: code=', ev.code, 'reason=', ev.reason, 'wasClean=', ev.wasClean);
|
||||
setConnState((s) => (s === 'error' ? s : 'closed'));
|
||||
term.write('\r\n\x1b[33m[连接已断开]\x1b[0m\r\n');
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
ws.onerror = (ev) => {
|
||||
console.error('[PodExec:connect] WS error event fired, readyState=', ws.readyState, 'type=', ev.type);
|
||||
setConnState('error');
|
||||
term.write('\r\n\x1b[31m[连接发生错误]\x1b[0m\r\n');
|
||||
};
|
||||
}, [clusterId, namespace, podName, container, shell]);
|
||||
|
||||
// 创建/销毁 xterm + 绑定 onData（生命周期跟随 open）
|
||||
// DEBUG: 组件入口
|
||||
console.log('[PodExec:render] open=', open, 'clusterId=', clusterId, 'podName=', podName, 'namespace=', namespace, 'containers=', containers.length, 'container=', container, 'shell=', shell, 'connState=', connState);
|
||||
|
||||
// ─── 创建 xterm + 连接（用 rAF 重试等 Dialog 渲染完）───
|
||||
useEffect(() => {
|
||||
if (!open || !clusterId || !podName) return;
|
||||
console.log('[PodExec:initEffect] TRIGGERED open=', open, 'clusterId=', clusterId, 'podName=', podName, 'namespace=', namespace);
|
||||
if (!open) { console.log('[PodExec:initEffect] ABORT: open=false'); return; }
|
||||
if (!clusterId) { console.error('[PodExec:initEffect] ABORT: clusterId is falsy:', clusterId); return; }
|
||||
if (!podName) { console.error('[PodExec:initEffect] ABORT: podName is falsy:', podName); return; }
|
||||
|
||||
const term = new XTerm({
|
||||
cursorBlink: true,
|
||||
fontSize: 14,
|
||||
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
|
||||
allowProposedApi: true,
|
||||
scrollback: 5000,
|
||||
theme: {
|
||||
background: '#0f172a',
|
||||
foreground: '#e2e8f0',
|
||||
cursor: '#38bdf8',
|
||||
selectionBackground: '#1e40af',
|
||||
black: '#1e293b', red: '#ef4444', green: '#10b981',
|
||||
yellow: '#f59e0b', blue: '#3b82f6', magenta: '#a855f7',
|
||||
cyan: '#06b6d4', white: '#e2e8f0',
|
||||
brightBlack: '#475569', brightRed: '#f87171', brightGreen: '#34d399',
|
||||
brightYellow: '#fbbf24', brightBlue: '#60a5fa', brightMagenta: '#c084fc',
|
||||
brightCyan: '#22d3ee', brightWhite: '#f8fafc',
|
||||
},
|
||||
});
|
||||
const fit = new FitAddon();
|
||||
term.loadAddon(fit);
|
||||
termRef.current = term;
|
||||
fitRef.current = fit;
|
||||
let disposed = false;
|
||||
let retryCount = 0;
|
||||
const startTime = performance.now();
|
||||
|
||||
const onData = (data: string) => {
|
||||
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(JSON.stringify({ status: 0, data }));
|
||||
const tryInit = () => {
|
||||
if (disposed) { console.log('[PodExec:tryInit] disposed, aborting'); return; }
|
||||
const el = containerRef.current;
|
||||
console.log('[PodExec:tryInit] retry=', retryCount, 'el=', el ? `DIV ${el.offsetWidth}x${el.offsetHeight}` : 'NULL', 'el.parentElement=', el?.parentElement ? 'YES' : 'NO');
|
||||
if (!el) {
|
||||
retryCount++;
|
||||
if (retryCount < 20) {
|
||||
requestAnimationFrame(tryInit);
|
||||
} else {
|
||||
console.error('[PodExec:tryInit] FAILED: containerRef still null after 20 retries (', Math.round(performance.now()-startTime), 'ms)');
|
||||
}
|
||||
return;
|
||||
}
|
||||
};
|
||||
term.onData(onData);
|
||||
|
||||
if (containerRef.current) {
|
||||
term.open(containerRef.current);
|
||||
requestAnimationFrame(() => {
|
||||
try { fit.fit(); } catch { /* noop */ }
|
||||
console.log('[PodExec:tryInit] SUCCESS: container ready after', retryCount, 'retries, size:', el.offsetWidth, 'x', el.offsetHeight, 'elapsed:', Math.round(performance.now()-startTime), 'ms');
|
||||
|
||||
const term = new XTerm({
|
||||
cursorBlink: true,
|
||||
fontSize: 14,
|
||||
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
|
||||
allowProposedApi: true,
|
||||
scrollback: 5000,
|
||||
theme: {
|
||||
background: '#0f172a', foreground: '#e2e8f0', cursor: '#38bdf8',
|
||||
selectionBackground: '#1e40af',
|
||||
black: '#1e293b', red: '#ef4444', green: '#10b981',
|
||||
yellow: '#f59e0b', blue: '#3b82f6', magenta: '#a855f7',
|
||||
cyan: '#06b6d4', white: '#e2e8f0',
|
||||
brightBlack: '#475569', brightRed: '#f87171', brightGreen: '#34d399',
|
||||
brightYellow: '#fbbf24', brightBlue: '#60a5fa', brightMagenta: '#c084fc',
|
||||
brightCyan: '#22d3ee', brightWhite: '#f8fafc',
|
||||
},
|
||||
});
|
||||
}
|
||||
const fit = new FitAddon();
|
||||
term.loadAddon(fit);
|
||||
termRef.current = term;
|
||||
fitRef.current = fit;
|
||||
|
||||
// 首次连接
|
||||
connect();
|
||||
term.onData((data: string) => {
|
||||
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
||||
console.debug('[PodExec:term] TX stdin, len=', data.length, 'bytes=', [...data].map(c => c.charCodeAt(0)).slice(0, 10));
|
||||
wsRef.current.send(JSON.stringify({ status: 0, data }));
|
||||
} else {
|
||||
console.warn('[PodExec:term] TX dropped — WS not open, readyState=', wsRef.current?.readyState);
|
||||
}
|
||||
});
|
||||
|
||||
term.open(el);
|
||||
console.log('[PodExec:tryInit] xterm.open() done, rows=', term.rows, 'cols=', term.cols);
|
||||
requestAnimationFrame(() => { try { fit.fit(); } catch { /* noop */ } });
|
||||
|
||||
mountedRef.current = true;
|
||||
connect();
|
||||
};
|
||||
|
||||
requestAnimationFrame(tryInit);
|
||||
|
||||
return () => {
|
||||
try {
|
||||
if (wsRef.current && (wsRef.current.readyState === WebSocket.OPEN || wsRef.current.readyState === WebSocket.CONNECTING)) {
|
||||
wsRef.current.close();
|
||||
}
|
||||
} catch { /* noop */ }
|
||||
try { term.dispose(); } catch { /* noop */ }
|
||||
termRef.current = null;
|
||||
wsRef.current = null;
|
||||
fitRef.current = null;
|
||||
setConnState('idle');
|
||||
disposed = true;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open, clusterId, podName]);
|
||||
|
||||
// 容器 / shell 变化时重连（需 term 已就绪）
|
||||
// ─── cleanup on close ───
|
||||
useEffect(() => {
|
||||
if (open && termRef.current) {
|
||||
if (!open) {
|
||||
console.log('[PodExec:cleanup] dialog closed, cleaning up WS + xterm');
|
||||
try { wsRef.current?.close(); } catch { /* noop */ }
|
||||
try { termRef.current?.dispose(); } catch { /* noop */ }
|
||||
termRef.current = null;
|
||||
wsRef.current = null;
|
||||
fitRef.current = null;
|
||||
mountedRef.current = false;
|
||||
setConnState('idle');
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// ─── 容器/shell 变化时重连 ───
|
||||
useEffect(() => {
|
||||
if (open && termRef.current && mountedRef.current) {
|
||||
console.log('[PodExec:reconnect] container=', container, 'shell=', shell, 'mounted=', mountedRef.current);
|
||||
connect();
|
||||
} else {
|
||||
console.log('[PodExec:reconnect] SKIP: open=', open, 'hasTerm=', !!termRef.current, 'mounted=', mountedRef.current);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [container, shell]);
|
||||
|
||||
// ResizeObserver 监听容器变化自动 fit + 透传 resize
|
||||
// ─── ResizeObserver ───
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const containerEl = containerRef.current;
|
||||
if (!containerEl) return;
|
||||
const el = containerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
let resizeTimer: ReturnType<typeof setTimeout>;
|
||||
let timer: ReturnType<typeof setTimeout>;
|
||||
const ro = new ResizeObserver(() => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(() => {
|
||||
if (fitRef.current && termRef.current && wsRef.current) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
if (fitRef.current && termRef.current) {
|
||||
try {
|
||||
fitRef.current.fit();
|
||||
termRef.current.focus();
|
||||
const { cols, rows } = termRef.current;
|
||||
if (wsRef.current.readyState === WebSocket.OPEN) {
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(JSON.stringify({ status: 1, cols, rows }));
|
||||
}
|
||||
} catch { /* noop */ }
|
||||
}
|
||||
}, 60);
|
||||
});
|
||||
|
||||
ro.observe(containerEl);
|
||||
return () => {
|
||||
clearTimeout(resizeTimer);
|
||||
ro.disconnect();
|
||||
};
|
||||
ro.observe(el);
|
||||
return () => { clearTimeout(timer); ro.disconnect(); };
|
||||
}, [open, fullscreen]);
|
||||
|
||||
// ─── UI ───
|
||||
const statusColor = connState === 'connected' ? 'bg-emerald-400'
|
||||
: connState === 'error' ? 'bg-red-400'
|
||||
: connState === 'closed' ? 'bg-slate-500'
|
||||
: 'bg-amber-400';
|
||||
: connState === 'closed' ? 'bg-slate-500' : 'bg-amber-400';
|
||||
const statusText = connState === 'connected' ? '已连接'
|
||||
: connState === 'connecting' ? '连接中'
|
||||
: connState === 'error' ? '连接错误'
|
||||
: connState === 'closed' ? '已断开'
|
||||
: '空闲';
|
||||
: connState === 'closed' ? '已断开' : '空闲';
|
||||
|
||||
const handleTerminalClick = useCallback(() => {
|
||||
try { termRef.current?.focus(); } catch { /* noop */ }
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
onOpenAutoFocus={(e) => e.preventDefault()}
|
||||
className={cn(
|
||||
'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] p-0 gap-0',
|
||||
'!duration-0 !transition-none',
|
||||
fullscreen
|
||||
? '!max-w-none !w-screen !h-screen !rounded-none !translate-x-0 !translate-y-0 !left-0 !top-0'
|
||||
: ''
|
||||
fullscreen ? '!max-w-none !w-screen !h-screen !rounded-none !translate-x-0 !translate-y-0 !left-0 !top-0' : ''
|
||||
)}
|
||||
style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '960px', width: '92vw' }}
|
||||
>
|
||||
<DialogTitle className="sr-only">exec — {podName}</DialogTitle>
|
||||
<DialogDescription className="sr-only">进入 Pod 容器执行命令</DialogDescription>
|
||||
|
||||
{/* 头部工具栏 */}
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap">
|
||||
<div className="flex items-center gap-2 text-sm min-w-0">
|
||||
<div className={cn('w-2 h-2 rounded-full shrink-0', statusColor)} title={statusText} />
|
||||
<Terminal className="h-4 w-4 text-blue-400 shrink-0" />
|
||||
<span className="text-[var(--dg-text-primary)] font-medium truncate">
|
||||
exec — {podName}
|
||||
</span>
|
||||
<span className="text-[var(--dg-text-primary)] font-medium truncate">exec — {podName}</span>
|
||||
{connState === 'connecting' && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{statusText}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 容器选择 */}
|
||||
{containers.length > 0 && (
|
||||
<Select value={container} onValueChange={setContainer}>
|
||||
<SelectTrigger className="h-8 w-[150px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]">
|
||||
<Box className="h-3 w-3 mr-1 text-[var(--dg-text-muted)]" />
|
||||
<SelectValue placeholder="容器" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{containers.map((c) => (
|
||||
<SelectItem key={c} value={c}>{c}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
<SelectContent>{containers.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{/* Shell 选择 — bash/sh 可选，默认 bash */}
|
||||
<Select value={shell} onValueChange={setShell}>
|
||||
<SelectTrigger className="h-8 w-[110px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SHELLS.map(s => (
|
||||
<SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
<SelectContent>{SHELLS.map(s => <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 重连 */}
|
||||
<Button
|
||||
variant="ghost" size="sm"
|
||||
className="h-8 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
|
||||
onClick={() => { connect(); toast({ title: '正在重连…' }); }}
|
||||
title="重连"
|
||||
>
|
||||
<Button variant="ghost" size="sm" className="h-8 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
|
||||
onClick={() => { connect(); toast({ title: '正在重连…' }); }} title="重连">
|
||||
<RotateCw className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
|
||||
<button
|
||||
onClick={() => setFullscreen(!fullscreen)}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
|
||||
title={fullscreen ? '退出全屏' : '全屏'}
|
||||
>
|
||||
<button onClick={() => setFullscreen(!fullscreen)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]" title={fullscreen ? '退出全屏' : '全屏'}>
|
||||
{fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
|
||||
title="关闭"
|
||||
>
|
||||
<button onClick={() => onOpenChange(false)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]" title="关闭">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -341,8 +343,9 @@ export function PodExecTerminal({
|
||||
{/* 终端容器 */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="bg-[#0f172a]"
|
||||
className="bg-[#0f172a] cursor-text"
|
||||
style={{ height: fullscreen ? 'calc(100vh - 49px)' : '480px' }}
|
||||
onClick={handleTerminalClick}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@@ -38,6 +38,7 @@ export function PodFileBrowser({
|
||||
const [preview, setPreview] = useState<{ file: string; content: string } | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const workdirDetected = useRef(false);
|
||||
|
||||
const loadFiles = useCallback(async (path: string) => {
|
||||
setLoading(true);
|
||||
@@ -64,8 +65,32 @@ export function PodFileBrowser({
|
||||
}, [clusterCode, namespace, podName, container]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) loadFiles('/');
|
||||
}, [open, loadFiles]);
|
||||
if (open) {
|
||||
// 检测容器 WORKDIR 作为初始路径（执行 pwd 命令）
|
||||
const detectWorkdir = async () => {
|
||||
if (workdirDetected.current) {
|
||||
loadFiles(currentPath);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const res: any = await kubernetesApi.execPod(clusterCode, namespace, podName, ['pwd'], container || undefined);
|
||||
const stdout = (res?.stdout || res?.data?.stdout || '').trim();
|
||||
const workdir = stdout && stdout.startsWith('/') ? stdout : '/';
|
||||
workdirDetected.current = true;
|
||||
setCurrentPath(workdir);
|
||||
loadFiles(workdir);
|
||||
} catch {
|
||||
// pwd 失败则默认 /
|
||||
workdirDetected.current = true;
|
||||
loadFiles('/');
|
||||
}
|
||||
};
|
||||
detectWorkdir();
|
||||
} else {
|
||||
workdirDetected.current = false;
|
||||
}
|
||||
}, [open, container]);
|
||||
|
||||
const handleClick = (entry: FileEntry) => {
|
||||
if (entry.isDir) {
|
||||
|
||||
@@ -0,0 +1,572 @@
|
||||
// WorkloadViewPage.tsx — StatefulSet / DaemonSet 详情页（对标 DeploymentWorkload）
|
||||
// 支持 view / yaml 双模式
|
||||
// 作者: Logan <admin@attacker.club>
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
ArrowLeft, RotateCcw, FileCode, Activity, Container, Terminal,
|
||||
HardDrive, Minus, Plus, Boxes, Tag, Settings, Database,
|
||||
} from 'lucide-react';
|
||||
import { kubernetesApi } from '@/services/api';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { YamlViewer } from './YamlViewer';
|
||||
import { PodExecTerminal } from './PodExecTerminal';
|
||||
import { PodFileBrowser } from './PodFileBrowser';
|
||||
import { formatK8sTime, statusColor, STATUS_COLORS } from './k8s-yaml-utils';
|
||||
|
||||
type WorkloadKind = 'StatefulSet' | 'DaemonSet';
|
||||
type ViewMode = 'view' | 'yaml';
|
||||
|
||||
function StatCard({ label, value, sub, color }: { label: string; value: React.ReactNode; sub?: string; color?: string }) {
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-3">
|
||||
<p className="text-xs text-slate-500">{label}</p>
|
||||
<p className="text-base font-bold mt-0.5" style={{ color: color || '#e2e8f0' }}>{value}</p>
|
||||
{sub && <p className="text-[10px] text-slate-600 mt-0.5">{sub}</p>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Helper: render key-value pairs as badges
|
||||
function LabelBadges({ labels }: { labels: Record<string, string> | undefined }) {
|
||||
const entries = Object.entries(labels || {});
|
||||
if (entries.length === 0) return <span className="text-xs text-slate-600">无</span>;
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{entries.map(([k, v]) => (
|
||||
<Badge key={k} variant="outline" className="border-slate-700 text-slate-400 text-[10px] font-mono">
|
||||
{k}={v}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function WorkloadViewPage() {
|
||||
const params = useParams<{ clusterCode: string; namespace: string; name: string; mode?: string }>();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { toast } = useToast();
|
||||
|
||||
const clusterCode = params.clusterCode || '';
|
||||
const namespace = params.namespace || '';
|
||||
const name = params.name || '';
|
||||
|
||||
// ⚠️ Fix: kind 是静态路径段（StatefulSet/DaemonSet），不是 :param
|
||||
// 用 useLocation().pathname 解析，而非 useParams
|
||||
const kind: WorkloadKind = location.pathname.includes('/DaemonSet/') ? 'DaemonSet' : 'StatefulSet';
|
||||
const mode: ViewMode = params.mode === 'yaml' ? 'yaml' : 'view';
|
||||
|
||||
const [manifest, setManifest] = useState<any>(null);
|
||||
const [pods, setPods] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [scaleModal, setScaleModal] = useState(false);
|
||||
const [scaleValue, setScaleValue] = useState(1);
|
||||
const [actionLoading, setActionLoading] = useState(false);
|
||||
const [terminalPod, setTerminalPod] = useState<any>(null);
|
||||
const [fileBrowserPod, setFileBrowserPod] = useState<any>(null);
|
||||
const [yamlModal, setYamlModal] = useState(false);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [yamlRes, podsRes] = await Promise.all([
|
||||
kubernetesApi.getResourceYaml(clusterCode, namespace, kind.toLowerCase() + 's', name).catch(() => ''),
|
||||
kubernetesApi.getPods(clusterCode).catch(() => []),
|
||||
]);
|
||||
// yamlRes is raw YAML text — try to parse as JSON (K8s API accepts JSON as YAML superset)
|
||||
let parsed: any = null;
|
||||
if (yamlRes && typeof yamlRes === 'string') {
|
||||
try { parsed = JSON.parse(yamlRes); } catch { parsed = { _raw: yamlRes }; }
|
||||
} else if (yamlRes && typeof yamlRes === 'object') {
|
||||
parsed = yamlRes;
|
||||
}
|
||||
setManifest(parsed);
|
||||
|
||||
// Filter pods by name prefix and namespace
|
||||
const podList = Array.isArray(podsRes) ? podsRes : (podsRes?.list || podsRes?.data || []);
|
||||
const filtered = podList.filter((p: any) => {
|
||||
const podName = p.name || p.metadata?.name || '';
|
||||
const podNs = p.namespace || p.namespace_name || '';
|
||||
return podName.startsWith(name) && (!podNs || podNs === namespace);
|
||||
});
|
||||
setPods(filtered);
|
||||
} catch (e) {
|
||||
console.error('load error', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [clusterCode, namespace, name, kind]);
|
||||
|
||||
useEffect(() => { loadData(); }, [loadData]);
|
||||
|
||||
const handleModeChange = (m: ViewMode) => {
|
||||
if (m === mode) return;
|
||||
navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/${m}/${kind}/${name}`, { replace: true });
|
||||
};
|
||||
|
||||
const handleRestart = async () => {
|
||||
if (!confirm(`确认重启 ${kind} ${name}？\n将触发滚动重启。`)) return;
|
||||
setActionLoading(true);
|
||||
try {
|
||||
if (kind === 'StatefulSet') {
|
||||
await kubernetesApi.restartStatefulSet(clusterCode, namespace, name);
|
||||
} else {
|
||||
await kubernetesApi.restartDaemonSet(clusterCode, namespace, name);
|
||||
}
|
||||
toast({ title: '重启指令已下发', description: `${kind} 滚动重启已触发` });
|
||||
setTimeout(loadData, 1000);
|
||||
} catch (e: any) {
|
||||
toast({ title: '重启失败', description: e?.message || String(e), variant: 'destructive' });
|
||||
} finally { setActionLoading(false); }
|
||||
};
|
||||
|
||||
const handleScale = async () => {
|
||||
setActionLoading(true);
|
||||
try {
|
||||
await kubernetesApi.scaleStatefulSet(clusterCode, namespace, name, scaleValue);
|
||||
toast({ title: '扩缩容成功', description: `StatefulSet 副本数已更新为 ${scaleValue}` });
|
||||
setScaleModal(false);
|
||||
setTimeout(loadData, 1000);
|
||||
} catch (e: any) {
|
||||
toast({ title: '扩缩容失败', description: e?.message || String(e), variant: 'destructive' });
|
||||
} finally { setActionLoading(false); }
|
||||
};
|
||||
|
||||
// Parse status from manifest
|
||||
const spec = manifest?.spec || {};
|
||||
const status = manifest?.status || {};
|
||||
const containers: any[] = spec?.template?.spec?.containers || [];
|
||||
const initContainers: any[] = spec?.template?.spec?.initContainers || [];
|
||||
|
||||
// For StatefulSet
|
||||
const replicas = spec.replicas ?? 1;
|
||||
const readyReplicas = status.readyReplicas ?? 0;
|
||||
const currentReplicas = status.currentReplicas ?? 0;
|
||||
const updatedReplicas = status.updatedReplicas ?? 0;
|
||||
|
||||
// For DaemonSet
|
||||
const desiredScheduled = status.desiredNumberScheduled ?? 0;
|
||||
const currentScheduled = status.currentNumberScheduled ?? 0;
|
||||
const numberReady = status.numberReady ?? 0;
|
||||
const numberAvailable = status.numberAvailable ?? 0;
|
||||
const numberUpdated = status.updatedNumberScheduled ?? 0;
|
||||
|
||||
const isSts = kind === 'StatefulSet';
|
||||
const isHealthy = isSts
|
||||
? (readyReplicas === replicas && replicas > 0)
|
||||
: (numberReady === desiredScheduled && desiredScheduled > 0);
|
||||
|
||||
// Update strategy
|
||||
const updateStrategy = spec.updateStrategy || {};
|
||||
const strategyType = updateStrategy.type || (isSts ? 'RollingUpdate' : 'RollingUpdate');
|
||||
|
||||
// VolumeClaimTemplates (StatefulSet only)
|
||||
const vcts: any[] = spec.volumeClaimTemplates || [];
|
||||
|
||||
// Selector
|
||||
const selectorLabels = spec.selector?.matchLabels || {};
|
||||
|
||||
// Labels & Annotations
|
||||
const labels = manifest?.metadata?.labels || {};
|
||||
const annotations = manifest?.metadata?.annotations || {};
|
||||
|
||||
return (
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-200" onClick={() => navigate(-1)}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Boxes className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-lg font-bold text-slate-100">{name}</h1>
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400">{kind}</Badge>
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400">{namespace}</Badge>
|
||||
{isHealthy
|
||||
? <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">健康</Badge>
|
||||
: <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30">更新中</Badge>}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-0.5">集群: {clusterCode}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Mode tabs */}
|
||||
<div className="flex items-center gap-1 bg-slate-900 border border-slate-800 rounded-lg p-0.5">
|
||||
<button
|
||||
className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'view' ? 'bg-blue-500/20 text-blue-400' : 'text-slate-400 hover:text-slate-200'}`}
|
||||
onClick={() => handleModeChange('view')}
|
||||
>查看</button>
|
||||
<button
|
||||
className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'yaml' ? 'bg-blue-500/20 text-blue-400' : 'text-slate-400 hover:text-slate-200'}`}
|
||||
onClick={() => handleModeChange('yaml')}
|
||||
>YAML</button>
|
||||
</div>
|
||||
{/* Actions */}
|
||||
{isSts && (
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 hover:text-slate-100"
|
||||
onClick={() => { setScaleValue(replicas); setScaleModal(true); }}>
|
||||
<Boxes className="h-3.5 w-3.5 mr-1" />伸缩
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 hover:text-slate-100"
|
||||
disabled={actionLoading} onClick={handleRestart}>
|
||||
<RotateCcw className="h-3.5 w-3.5 mr-1" />{actionLoading ? '重启中...' : '重启'}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 hover:text-slate-100"
|
||||
onClick={() => setYamlModal(true)}>
|
||||
<FileCode className="h-3.5 w-3.5 mr-1" />YAML
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center text-slate-500 py-20">加载中...</div>
|
||||
) : mode === 'yaml' ? (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<YamlViewer
|
||||
clusterCode={clusterCode}
|
||||
namespace={namespace}
|
||||
resource={kind.toLowerCase() + 's'}
|
||||
name={name}
|
||||
onClose={() => {}}
|
||||
inline
|
||||
autoEdit
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
{/* Status cards */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
||||
{isSts ? (
|
||||
<>
|
||||
<StatCard label="副本就绪" value={`${readyReplicas}/${replicas}`} color={isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange} sub={isHealthy ? '全部就绪' : '部分未就绪'} />
|
||||
<StatCard label="当前副本" value={currentReplicas} color={STATUS_COLORS.blue} />
|
||||
<StatCard label="已更新副本" value={updatedReplicas} color={STATUS_COLORS.green} />
|
||||
<StatCard label="服务名" value={spec.serviceName || '-'} color="#94a3b8" />
|
||||
<StatCard label="Pod 数量" value={pods.length} color="#94a3b8" />
|
||||
<StatCard label="创建时间" value={<span className="text-xs">{formatK8sTime(manifest?.metadata?.creationTimestamp)}</span>} color="#94a3b8" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<StatCard label="期望调度" value={desiredScheduled} color={STATUS_COLORS.blue} />
|
||||
<StatCard label="当前调度" value={currentScheduled} color="#94a3b8" />
|
||||
<StatCard label="就绪数量" value={numberReady} color={isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange} />
|
||||
<StatCard label="可用数量" value={numberAvailable} color={STATUS_COLORS.green} />
|
||||
<StatCard label="已更新" value={numberUpdated} color="#94a3b8" />
|
||||
<StatCard label="创建时间" value={<span className="text-xs">{formatK8sTime(manifest?.metadata?.creationTimestamp)}</span>} color="#94a3b8" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Update Strategy + Selector */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
|
||||
<Settings className="h-4 w-4 text-amber-400" />更新策略
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">策略类型</span>
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-300">{strategyType}</Badge>
|
||||
</div>
|
||||
{strategyType === 'RollingUpdate' && isSts && updateStrategy.rollingUpdate && (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">分区 (partition)</span>
|
||||
<span className="text-slate-300 font-mono">{updateStrategy.rollingUpdate.partition ?? 0}</span>
|
||||
</div>
|
||||
{updateStrategy.rollingUpdate.maxUnavailable && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">最大不可用</span>
|
||||
<span className="text-slate-300 font-mono">{typeof updateStrategy.rollingUpdate.maxUnavailable === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxUnavailable) : updateStrategy.rollingUpdate.maxUnavailable}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{strategyType === 'RollingUpdate' && !isSts && updateStrategy.rollingUpdate && (
|
||||
<>
|
||||
{updateStrategy.rollingUpdate.maxUnavailable && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">最大不可用</span>
|
||||
<span className="text-slate-300 font-mono">{typeof updateStrategy.rollingUpdate.maxUnavailable === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxUnavailable) : updateStrategy.rollingUpdate.maxUnavailable}</span>
|
||||
</div>
|
||||
)}
|
||||
{updateStrategy.rollingUpdate.maxSurge && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">最大 surge</span>
|
||||
<span className="text-slate-300 font-mono">{typeof updateStrategy.rollingUpdate.maxSurge === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxSurge) : updateStrategy.rollingUpdate.maxSurge}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isSts && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">Pod 管理策略</span>
|
||||
<span className="text-slate-300 font-mono">{spec.podManagementPolicy || 'OrderedReady'}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">修订历史限制</span>
|
||||
<span className="text-slate-300 font-mono">{spec.revisionHistoryLimit ?? 10}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
|
||||
<Tag className="h-4 w-4 text-purple-400" />选择器与标签
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-3 text-xs">
|
||||
<div>
|
||||
<p className="text-slate-500 mb-1.5">Selector (matchLabels)</p>
|
||||
<LabelBadges labels={selectorLabels} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 mb-1.5">Labels</p>
|
||||
<LabelBadges labels={labels} />
|
||||
</div>
|
||||
{Object.keys(annotations).length > 0 && (
|
||||
<div>
|
||||
<p className="text-slate-500 mb-1.5">Annotations</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{Object.entries(annotations).slice(0, 8).map(([k, v]) => (
|
||||
<Badge key={k} variant="outline" className="border-slate-700 text-slate-500 text-[10px] font-mono max-w-[300px] truncate">
|
||||
{k}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* VolumeClaimTemplates (StatefulSet only) */}
|
||||
{isSts && vcts.length > 0 && (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
|
||||
<Database className="h-4 w-4 text-cyan-400" />存储卷声明模板 (VolumeClaimTemplates)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-slate-800 hover:bg-transparent">
|
||||
<TableHead className="text-slate-400">名称</TableHead>
|
||||
<TableHead className="text-slate-400">访问模式</TableHead>
|
||||
<TableHead className="text-slate-400">存储类</TableHead>
|
||||
<TableHead className="text-slate-400">大小</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{vcts.map((vct: any, idx: number) => {
|
||||
const accessModes = (vct.spec?.accessModes || []).join(', ');
|
||||
const storageClass = vct.spec?.storageClassName || vct.spec?.storageClassName || '-';
|
||||
const size = vct.spec?.resources?.requests?.storage || '-';
|
||||
return (
|
||||
<TableRow key={idx} className="border-slate-800">
|
||||
<TableCell className="font-medium text-slate-200">{vct.metadata?.name || '-'}</TableCell>
|
||||
<TableCell className="text-sm text-slate-400">{accessModes || '-'}</TableCell>
|
||||
<TableCell className="text-sm text-slate-400">{storageClass}</TableCell>
|
||||
<TableCell className="text-sm text-slate-300 font-mono">{size}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Container template */}
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
|
||||
<Container className="h-4 w-4 text-blue-400" />容器模板（Pod Template）
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
{initContainers.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<p className="text-[11px] text-slate-500 mb-2 uppercase tracking-wide">Init Containers</p>
|
||||
<div className="space-y-2">
|
||||
{initContainers.map((c: any, idx: number) => (
|
||||
<ContainerInfo key={`init-${idx}`} c={c} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{containers.length === 0 ? (
|
||||
<p className="text-xs text-slate-500 py-3">暂无容器数据，请查看 YAML</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<p className="text-[11px] text-slate-500 mb-1 uppercase tracking-wide">Containers</p>
|
||||
{containers.map((c: any, idx: number) => (
|
||||
<ContainerInfo key={idx} c={c} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pod list */}
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
|
||||
<Activity className="h-4 w-4 text-emerald-400" />Pod 实例 ({pods.length})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-slate-800 hover:bg-transparent">
|
||||
<TableHead className="text-slate-400">Pod 名称</TableHead>
|
||||
<TableHead className="text-slate-400">状态</TableHead>
|
||||
<TableHead className="text-slate-400">所在节点</TableHead>
|
||||
<TableHead className="text-slate-400">Pod IP</TableHead>
|
||||
<TableHead className="text-slate-400">重启</TableHead>
|
||||
<TableHead className="text-slate-400">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pods.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={6} className="text-center text-slate-500 py-8">暂无 Pod</TableCell></TableRow>
|
||||
) : pods.map((pod: any) => (
|
||||
<TableRow key={pod.name} className="border-slate-800 hover:bg-slate-800/30">
|
||||
<TableCell className="font-medium text-slate-200">{pod.name}</TableCell>
|
||||
<TableCell>
|
||||
<Badge style={{ background: `${statusColor(pod.status)}22`, color: statusColor(pod.status), border: `1px solid ${statusColor(pod.status)}44` }}>
|
||||
{pod.status || 'Unknown'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-slate-400">{pod.node_name || pod.node || '-'}</TableCell>
|
||||
<TableCell className="text-sm text-slate-400 font-mono">{pod.ip || pod.pod_ip || '-'}</TableCell>
|
||||
<TableCell className={(pod.restart_count || 0) > 0 ? 'text-yellow-400' : 'text-slate-500'}>{pod.restart_count || 0}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10"
|
||||
onClick={() => setTerminalPod(pod)}>
|
||||
<Terminal className="h-3.5 w-3.5 mr-1" />终端
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-amber-400 hover:text-amber-300 hover:bg-amber-500/10"
|
||||
onClick={() => setFileBrowserPod(pod)}>
|
||||
<HardDrive className="h-3.5 w-3.5 mr-1" />文件浏览器
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Scale modal */}
|
||||
{scaleModal && (
|
||||
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center" onClick={() => setScaleModal(false)}>
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-lg p-6 w-80" onClick={e => e.stopPropagation()}>
|
||||
<h3 className="text-sm font-semibold text-slate-200 mb-4">伸缩 StatefulSet</h3>
|
||||
<div className="flex items-center justify-center gap-4 mb-4">
|
||||
<Button variant="outline" size="icon" className="h-9 w-9" onClick={() => setScaleValue(Math.max(0, scaleValue - 1))}>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-2xl font-bold text-slate-100 w-12 text-center">{scaleValue}</span>
|
||||
<Button variant="outline" size="icon" className="h-9 w-9" onClick={() => setScaleValue(scaleValue + 1)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" className="flex-1 border-slate-700 text-slate-400" onClick={() => setScaleModal(false)}>取消</Button>
|
||||
<Button size="sm" className="flex-1 bg-blue-600 hover:bg-blue-500" disabled={actionLoading} onClick={handleScale}>
|
||||
{actionLoading ? '执行中...' : '确认'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* YAML modal */}
|
||||
{yamlModal && (
|
||||
<YamlViewer
|
||||
clusterCode={clusterCode}
|
||||
namespace={namespace}
|
||||
resource={kind.toLowerCase() + 's'}
|
||||
name={name}
|
||||
onClose={() => setYamlModal(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Pod terminal */}
|
||||
{terminalPod && (
|
||||
<PodExecTerminal
|
||||
open={true}
|
||||
onOpenChange={(o) => { if (!o) setTerminalPod(null); }}
|
||||
clusterId={clusterCode}
|
||||
namespace={namespace}
|
||||
podName={terminalPod.name}
|
||||
containers={terminalPod.containers?.map((c: any) => c.name).filter(Boolean) || []}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Pod file browser */}
|
||||
{fileBrowserPod && (
|
||||
<PodFileBrowser
|
||||
open={true}
|
||||
onOpenChange={(o) => { if (!o) setFileBrowserPod(null); }}
|
||||
clusterCode={clusterCode}
|
||||
namespace={namespace}
|
||||
podName={fileBrowserPod.name}
|
||||
containers={fileBrowserPod.containers?.map((c: any) => c.name).filter(Boolean) || []}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Container info sub-component
|
||||
function ContainerInfo({ c }: { c: any }) {
|
||||
return (
|
||||
<div className="border border-slate-800 rounded-lg p-3 bg-slate-950/30">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Container className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-sm font-semibold text-slate-200">{c.name}</span>
|
||||
</div>
|
||||
<code className="text-[11px] text-slate-400 font-mono truncate max-w-[400px]">{c.image}</code>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs">
|
||||
<div className="text-slate-400">
|
||||
CPU: <span className="text-slate-200 font-mono">{c.resources?.requests?.cpu || '-'}/{c.resources?.limits?.cpu || '-'}</span>
|
||||
</div>
|
||||
<div className="text-slate-400">
|
||||
内存: <span className="text-slate-200 font-mono">{c.resources?.requests?.memory || '-'}/{c.resources?.limits?.memory || '-'}</span>
|
||||
</div>
|
||||
<div className="text-slate-400">
|
||||
端口: <span className="text-slate-200 font-mono">
|
||||
{(c.ports || []).map((p: any) => p.containerPort || p.port).join(', ') || '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user