fix: K8s 集群添加缺少 code 必填字段
- KubernetesClusterDialog: 新增 code 表单字段 - 名称变更自动生成 code（小写+连字符） - handleSubmit 增加 code 校验 + toast 提示 - payload 增加 code 字段（后端 binding:required）
This commit is contained in:
attacker committed
1 parent
f24fe43ac0
commit
ce438c9f05
18 files changed
+3941
-144
No files matched your search
@@ -1,9 +1,9 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { X, Copy, Check, Save, RefreshCw, Loader2 } from 'lucide-react';
|
||||
import { X, Copy, Check, Save, RefreshCw, Loader2, Sparkles } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { kubernetesApi } from '@/services/api';
|
||||
import { useUserStore } from '@/store';
|
||||
import { cleanYAML } from './k8s-yaml-utils';
|
||||
|
||||
interface YamlViewerProps {
|
||||
clusterCode: string;
|
||||
@@ -12,11 +12,14 @@ interface YamlViewerProps {
|
||||
name: string;
|
||||
onClose: () => void;
|
||||
onSaved?: () => void;
|
||||
/** 进入编辑模式前是否清理只读/噪音字段（managedFields/uid/status 等） */
|
||||
cleanBeforeEdit?: boolean;
|
||||
}
|
||||
|
||||
export function YamlViewer({ clusterCode, namespace, resource, name, onClose, onSaved }: YamlViewerProps) {
|
||||
export function YamlViewer({ clusterCode, namespace, resource, name, onClose, onSaved, cleanBeforeEdit = false }: YamlViewerProps) {
|
||||
const { toast } = useToast();
|
||||
const [yaml, setYaml] = useState('');
|
||||
const [rawYaml, setRawYaml] = useState(''); // 原始（只读展示用）
|
||||
const [editYaml, setEditYaml] = useState(''); // 编辑态（可能被清理过）
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [editing, setEditing] = useState(false);
|
||||
@@ -25,95 +28,108 @@ export function YamlViewer({ clusterCode, namespace, resource, name, onClose, on
|
||||
const loadYaml = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const tk = useUserStore.getState().token || '';
|
||||
const baseUrl = import.meta.env.VITE_API_BASE_URL || '';
|
||||
const url = `${baseUrl}/api/v1/kubernetes/${clusterCode}/namespace/${namespace}/${resource}/${name}/yaml`;
|
||||
const resp = await fetch(url, { headers: { Authorization: `Bearer ${tk}` } });
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
||||
const text = await resp.text();
|
||||
setYaml(text);
|
||||
const text = await kubernetesApi.getResourceYaml(clusterCode, namespace, resource, name);
|
||||
setRawYaml(text);
|
||||
setEditYaml(text);
|
||||
} catch (e: any) {
|
||||
toast({ title: '获取YAML失败', description: e.message, variant: 'destructive' });
|
||||
setYaml(`# Error: ${e.message}`);
|
||||
const err = `# Error: ${e.message}`;
|
||||
setRawYaml(err);
|
||||
setEditYaml(err);
|
||||
} finally { setLoading(false); }
|
||||
};
|
||||
|
||||
const enterEdit = () => {
|
||||
// 进入编辑前可选清理
|
||||
const cleaned = cleanBeforeEdit ? cleanYAML(rawYaml) : rawYaml;
|
||||
setEditYaml(cleaned);
|
||||
setEditing(true);
|
||||
if (cleanBeforeEdit) {
|
||||
toast({ title: '已清理只读字段', description: '已剥离 status / managedFields / uid 等' });
|
||||
}
|
||||
};
|
||||
|
||||
const saveYaml = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const tk = useUserStore.getState().token || '';
|
||||
const baseUrl = import.meta.env.VITE_API_BASE_URL || '';
|
||||
const url = `${baseUrl}/api/v1/kubernetes/${clusterCode}/namespace/${namespace}/${resource}/${name}/yaml`;
|
||||
const resp = await fetch(url, {
|
||||
method: 'PUT',
|
||||
headers: { Authorization: `Bearer ${tk}`, 'Content-Type': 'application/yaml' },
|
||||
body: yaml,
|
||||
});
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
||||
toast({ title: 'YAML已应用', description: `${resource}/${name} 更新成功` });
|
||||
setEditing(false);
|
||||
onSaved?.();
|
||||
} catch (e: any) {
|
||||
toast({ title: '保存失败', description: e.message, variant: 'destructive' });
|
||||
} finally { setSaving(false); }
|
||||
};
|
||||
await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, editYaml);
|
||||
toast({ title: 'YAML已应用', description: `${resource}/${name} 更新成功` });
|
||||
setEditing(false);
|
||||
setRawYaml(editYaml);
|
||||
onSaved?.();
|
||||
} catch (e: any) {
|
||||
toast({ title: '保存失败', description: e.message, variant: 'destructive' });
|
||||
} finally { setSaving(false); }
|
||||
};
|
||||
|
||||
const copyYaml = async () => {
|
||||
await navigator.clipboard.writeText(yaml);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
const copyYaml = async () => {
|
||||
const content = editing ? editYaml : rawYaml;
|
||||
await navigator.clipboard.writeText(content);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
useEffect(() => { loadYaml(); }, []);
|
||||
useEffect(() => { loadYaml(); }, []);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
|
||||
<div className="bg-slate-900 border border-slate-700 rounded-xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-slate-700">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-slate-100">{resource}/{name}</h2>
|
||||
<p className="text-xs text-slate-500">{namespace} · {clusterCode}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={copyYaml}>
|
||||
{copied ? <Check className="h-3 w-3 mr-1 text-emerald-400" /> : <Copy className="h-3 w-3 mr-1" />}
|
||||
{copied ? '已复制' : '复制'}
|
||||
</Button>
|
||||
{!editing ? (
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={() => setEditing(true)}>
|
||||
编辑
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={() => { setEditing(false); loadYaml(); }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button size="sm" className="h-8 bg-blue-600 hover:bg-blue-700" onClick={saveYaml} disabled={saving}>
|
||||
{saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />}
|
||||
保存
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={onClose}><X className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin text-slate-500" /></div>
|
||||
) : editing ? (
|
||||
<textarea
|
||||
value={yaml}
|
||||
onChange={e => setYaml(e.target.value)}
|
||||
className="w-full h-full min-h-[500px] bg-slate-950 text-emerald-400 font-mono text-xs p-4 rounded border border-slate-700 focus:outline-none focus:border-blue-500 resize-none"
|
||||
spellCheck={false}
|
||||
/>
|
||||
) : (
|
||||
<pre className="text-emerald-400 font-mono text-xs whitespace-pre overflow-x-auto">{yaml}</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const display = editing ? editYaml : rawYaml;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
|
||||
<div className="bg-slate-900 border border-slate-700 rounded-xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-slate-700">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-slate-100">{resource}/{name}</h2>
|
||||
<p className="text-xs text-slate-500">{namespace} · {clusterCode}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={copyYaml}>
|
||||
{copied ? <Check className="h-3 w-3 mr-1 text-emerald-400" /> : <Copy className="h-3 w-3 mr-1" />}
|
||||
{copied ? '已复制' : '复制'}
|
||||
</Button>
|
||||
{!editing ? (
|
||||
<>
|
||||
{cleanBeforeEdit && (
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={enterEdit} title="清理 status / managedFields 等只读字段后编辑">
|
||||
<Sparkles className="h-3 w-3 mr-1 text-amber-400" />清理并编辑
|
||||
</Button>
|
||||
)}
|
||||
{!cleanBeforeEdit && (
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={() => setEditing(true)}>
|
||||
编辑
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={() => { setEditing(false); loadYaml(); }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button size="sm" className="h-8 bg-blue-600 hover:bg-blue-700" onClick={saveYaml} disabled={saving}>
|
||||
{saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />}
|
||||
保存
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={onClose}><X className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin text-slate-500" /></div>
|
||||
) : editing ? (
|
||||
<textarea
|
||||
value={editYaml}
|
||||
onChange={e => setEditYaml(e.target.value)}
|
||||
className="w-full h-full min-h-[500px] bg-slate-950 text-emerald-400 font-mono text-xs p-4 rounded border border-slate-700 focus:outline-none focus:border-blue-500 resize-none"
|
||||
spellCheck={false}
|
||||
/>
|
||||
) : (
|
||||
<pre className="text-emerald-400 font-mono text-xs whitespace-pre overflow-x-auto">{display}</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user