feat(alert-center): 添加飞书Webhook通知渠道 + 告警引擎实时通知
- 后端: NotifyChannel 模型新增 feishu 类型, FeishuWebhookConfig - 后端: TestNotifyChannel 真实发送飞书测试消息(文本格式) - 后端: 告警引擎触发/恢复时自动发送飞书通知(sendFeishuAlert/sendFeishuRecovery) - 后端: AlertEngine 新增 tcp_time_wait/tcp_close_wait/service_process 指标检测 - 后端: NetworkStatModel 新增 TCPCloseWait 字段 - 后端: QuickSetupRules 一键创建6条告警规则(CPU/内存/磁盘/TIME_WAIT/CLOSE_WAIT/进程) - 后端: 注册 /alerts/quick-setup 路由 - 前端: AlertChannelDialog 新增飞书类型选项 - 前端: helpers 新增 getChannelIcon/getChannelTypeLabel 支持 feishu/dingtalk/wechat
This commit is contained in:
attacker committed
1 parent
7bc5169e8f
commit
5333f6f04a
30 files changed
+2406
-1001
No files matched your search
@@ -1,15 +1,15 @@
|
||||
// DeploymentEditStorage.tsx — 编辑器「存储挂载」Tab (M8)
|
||||
// 编辑内容：spec.template.spec.volumes[] — 数据卷定义
|
||||
// 支持 6 种常用 volume 类型：emptyDir / hostPath / configMap / secret / persistentVolumeClaim / nfs
|
||||
// 作者: Logan <admin@attacker.club>
|
||||
// DeploymentEditStorage.tsx — 编辑器「存储挂载」Tab
|
||||
// Kuboard 风格：左侧定义数据卷 / 右侧挂载到容器
|
||||
// 支持 6 种卷类型：PVC / EmptyDir / HostPath / NFS / ConfigMap / Secret
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import {
|
||||
Plus, Trash2, Save, Loader2, HardDrive, Database, Folder, Lock,
|
||||
Plus, Trash2, Save, Loader2, HardDrive, Database, Folder, Lock, File, Disc, Server,
|
||||
} from 'lucide-react';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { kubernetesApi } from '@/services/api';
|
||||
@@ -23,172 +23,130 @@ interface Props {
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
/** 单个 volume 的编辑态 */
|
||||
/** 数据卷定义 */
|
||||
interface VolumeForm {
|
||||
name: string;
|
||||
type: 'emptyDir' | 'hostPath' | 'configMap' | 'secret' | 'persistentVolumeClaim' | 'nfs';
|
||||
// 各类型字段（仅对应类型有效）
|
||||
medium?: string; // emptyDir.medium: "" | "Memory"
|
||||
sizeLimit?: string; // emptyDir.sizeLimit
|
||||
path?: string; // hostPath.path
|
||||
pathType?: string; // hostPath.pathType: Directory | File | Socket | ...
|
||||
configMapName?: string; // configMap.name
|
||||
secretName?: string; // secret.secretName
|
||||
pvcName?: string; // persistentVolumeClaim.claimName
|
||||
nfsServer?: string; // nfs.server
|
||||
nfsPath?: string; // nfs.path
|
||||
readOnly?: boolean; // pvc/nfs readOnly
|
||||
items?: string; // configMap/secret items (JSON 文本，高级用户)
|
||||
type: 'persistentVolumeClaim' | 'emptyDir' | 'hostPath' | 'nfs' | 'configMap' | 'secret';
|
||||
// PVC
|
||||
pvcName?: string; pvcReadOnly?: boolean;
|
||||
// EmptyDir
|
||||
medium?: string; sizeLimit?: string;
|
||||
// HostPath
|
||||
path?: string; pathType?: string;
|
||||
// NFS
|
||||
nfsServer?: string; nfsPath?: string; nfsReadOnly?: boolean;
|
||||
// ConfigMap
|
||||
configMapName?: string; cmItems?: string;
|
||||
// Secret
|
||||
secretName?: string; secItems?: string;
|
||||
}
|
||||
|
||||
/** 从 K8s volume 对象提取为 form */
|
||||
/** 容器挂载点 */
|
||||
interface MountForm {
|
||||
containerName: string;
|
||||
volumeName: string;
|
||||
mountPath: string;
|
||||
subPath: string;
|
||||
readOnly: boolean;
|
||||
}
|
||||
|
||||
const VOLUME_TYPES: { key: VolumeForm['type']; label: string; icon: typeof HardDrive; color: string; desc: string }[] = [
|
||||
{ key: 'persistentVolumeClaim', label: '存储卷声明', icon: Database, color: 'text-emerald-400', desc: 'PVC' },
|
||||
{ key: 'emptyDir', label: '临时目录', icon: Disc, color: 'text-slate-400', desc: 'EmptyDir' },
|
||||
{ key: 'hostPath', label: 'HostPath', icon: HardDrive, color: 'text-amber-400', desc: '主机路径' },
|
||||
{ key: 'nfs', label: 'NFS', icon: Server, color: 'text-purple-400', desc: '网络存储' },
|
||||
{ key: 'configMap', label: '配置字典', icon: File, color: 'text-blue-400', desc: 'ConfigMap' },
|
||||
{ key: 'secret', label: '密文', icon: Lock, color: 'text-rose-400', desc: 'Secret' },
|
||||
];
|
||||
|
||||
function volumeToForm(v: any): VolumeForm {
|
||||
if (!v || typeof v !== 'object') return { name: '', type: 'emptyDir' };
|
||||
const name = v.name || '';
|
||||
if (v.emptyDir) {
|
||||
return {
|
||||
name, type: 'emptyDir',
|
||||
medium: v.emptyDir.medium || '',
|
||||
sizeLimit: v.emptyDir.sizeLimit || '',
|
||||
};
|
||||
}
|
||||
if (v.hostPath) {
|
||||
return {
|
||||
name, type: 'hostPath',
|
||||
path: v.hostPath.path || '',
|
||||
pathType: v.hostPath.type || 'Directory',
|
||||
};
|
||||
}
|
||||
if (v.configMap) {
|
||||
return {
|
||||
name, type: 'configMap',
|
||||
configMapName: v.configMap.name || '',
|
||||
items: v.configMap.items ? JSON.stringify(v.configMap.items) : '',
|
||||
};
|
||||
}
|
||||
if (v.secret) {
|
||||
return {
|
||||
name, type: 'secret',
|
||||
secretName: v.secret.secretName || '',
|
||||
items: v.secret.items ? JSON.stringify(v.secret.items) : '',
|
||||
};
|
||||
}
|
||||
if (v.persistentVolumeClaim) {
|
||||
return {
|
||||
name, type: 'persistentVolumeClaim',
|
||||
pvcName: v.persistentVolumeClaim.claimName || '',
|
||||
readOnly: !!v.persistentVolumeClaim.readOnly,
|
||||
};
|
||||
}
|
||||
if (v.nfs) {
|
||||
return {
|
||||
name, type: 'nfs',
|
||||
nfsServer: v.nfs.server || '',
|
||||
nfsPath: v.nfs.path || '',
|
||||
readOnly: !!v.nfs.readOnly,
|
||||
};
|
||||
}
|
||||
// 未识别类型 — fallback 为 emptyDir 占位
|
||||
if (v.emptyDir) return { name, type: 'emptyDir', medium: v.emptyDir.medium || '', sizeLimit: v.emptyDir.sizeLimit || '' };
|
||||
if (v.hostPath) return { name, type: 'hostPath', path: v.hostPath.path || '', pathType: v.hostPath.type || 'Directory' };
|
||||
if (v.configMap) return { name, type: 'configMap', configMapName: v.configMap.name || '', cmItems: v.configMap.items ? JSON.stringify(v.configMap.items) : '' };
|
||||
if (v.secret) return { name, type: 'secret', secretName: v.secret.secretName || '', secItems: v.secret.items ? JSON.stringify(v.secret.items) : '' };
|
||||
if (v.persistentVolumeClaim) return { name, type: 'persistentVolumeClaim', pvcName: v.persistentVolumeClaim.claimName || '', pvcReadOnly: !!v.persistentVolumeClaim.readOnly };
|
||||
if (v.nfs) return { name, type: 'nfs', nfsServer: v.nfs.server || '', nfsPath: v.nfs.path || '', nfsReadOnly: !!v.nfs.readOnly };
|
||||
return { name, type: 'emptyDir' };
|
||||
}
|
||||
|
||||
/** 将 form 转回 K8s volume 对象 */
|
||||
function formToVolume(f: VolumeForm): any {
|
||||
const v: any = { name: f.name.trim() };
|
||||
if (!v.name) return null; // 无名 volume 跳过
|
||||
if (!v.name) return null;
|
||||
switch (f.type) {
|
||||
case 'emptyDir': {
|
||||
const ed: any = {};
|
||||
if (f.medium) ed.medium = f.medium;
|
||||
if (f.sizeLimit) ed.sizeLimit = f.sizeLimit;
|
||||
v.emptyDir = ed;
|
||||
break;
|
||||
}
|
||||
case 'hostPath': {
|
||||
v.hostPath = {
|
||||
path: f.path || '',
|
||||
type: f.pathType || 'Directory',
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'configMap': {
|
||||
v.configMap = { name: f.configMapName || '' };
|
||||
if (f.items) {
|
||||
try { v.configMap.items = JSON.parse(f.items); } catch {}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'secret': {
|
||||
v.secret = { secretName: f.secretName || '' };
|
||||
if (f.items) {
|
||||
try { v.secret.items = JSON.parse(f.items); } catch {}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'persistentVolumeClaim': {
|
||||
v.persistentVolumeClaim = {
|
||||
claimName: f.pvcName || '',
|
||||
...(f.readOnly ? { readOnly: true } : {}),
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'nfs': {
|
||||
v.nfs = {
|
||||
server: f.nfsServer || '',
|
||||
path: f.nfsPath || '',
|
||||
...(f.readOnly ? { readOnly: true } : {}),
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'emptyDir': { const ed: any = {}; if (f.medium) ed.medium = f.medium; if (f.sizeLimit) ed.sizeLimit = f.sizeLimit; v.emptyDir = ed; break; }
|
||||
case 'hostPath': v.hostPath = { path: f.path || '', type: f.pathType || 'Directory' }; break;
|
||||
case 'configMap': { v.configMap = { name: f.configMapName || '' }; if (f.cmItems) try { v.configMap.items = JSON.parse(f.cmItems); } catch {} break; }
|
||||
case 'secret': { v.secret = { secretName: f.secretName || '' }; if (f.secItems) try { v.secret.items = JSON.parse(f.secItems); } catch {} break; }
|
||||
case 'persistentVolumeClaim': v.persistentVolumeClaim = { claimName: f.pvcName || '', ...(f.pvcReadOnly ? { readOnly: true } : {}) }; break;
|
||||
case 'nfs': v.nfs = { server: f.nfsServer || '', path: f.nfsPath || '', ...(f.nfsReadOnly ? { readOnly: true } : {}) }; break;
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
const TYPE_META: Record<VolumeForm['type'], { label: string; icon: typeof HardDrive; color: string }> = {
|
||||
emptyDir: { label: 'emptyDir', icon: Folder, color: 'text-slate-300' },
|
||||
hostPath: { label: 'hostPath', icon: HardDrive, color: 'text-amber-400' },
|
||||
configMap: { label: 'configMap', icon: Folder, color: 'text-blue-400' },
|
||||
secret: { label: 'secret', icon: Lock, color: 'text-rose-400' },
|
||||
persistentVolumeClaim: { label: 'PVC', icon: Database, color: 'text-emerald-400' },
|
||||
nfs: { label: 'NFS', icon: HardDrive, color: 'text-purple-400' },
|
||||
};
|
||||
|
||||
export function DeploymentEditStorage({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel }: Props) {
|
||||
const { toast } = useToast();
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [loading, setLoading] = useState(!manifest);
|
||||
const [volumes, setVolumes] = useState<VolumeForm[]>([]);
|
||||
const [rawManifest, setRawManifest] = useState<any>(manifest || {});
|
||||
// 容器已声明的 volumeMounts（只读展示，便于用户对齐 volume name）
|
||||
const [mountSummary, setMountSummary] = useState<Array<{ container: string; mounts: string[] }>>([]);
|
||||
const [volumes, setVolumes] = useState<VolumeForm[]>([]);
|
||||
const [mounts, setMounts] = useState<MountForm[]>([]);
|
||||
const [containers, setContainers] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const m = manifest;
|
||||
if (!m) { setLoading(false); return; }
|
||||
setRawManifest(m);
|
||||
const podSpec = m?.spec?.template?.spec || {};
|
||||
|
||||
// 数据卷
|
||||
const vols: any[] = Array.isArray(podSpec.volumes) ? podSpec.volumes : [];
|
||||
setVolumes(vols.map(volumeToForm));
|
||||
|
||||
// 汇总容器 volumeMounts
|
||||
// 容器列表
|
||||
const allContainers = [
|
||||
...(podSpec.containers || []),
|
||||
...(podSpec.initContainers || []),
|
||||
];
|
||||
const summary = allContainers.map((c: any) => ({
|
||||
container: c.name || '(unnamed)',
|
||||
mounts: (Array.isArray(c.volumeMounts) ? c.volumeMounts : [])
|
||||
.map((vm: any) => `${vm.name}:${vm.mountPath}${vm.readOnly ? '(ro)' : ''}`),
|
||||
})).filter((s: any) => s.mounts.length > 0);
|
||||
setMountSummary(summary);
|
||||
const containerNames = allContainers.map((c: any) => c.name || '(unnamed)');
|
||||
setContainers(containerNames);
|
||||
|
||||
// 挂载点
|
||||
const allMounts: MountForm[] = [];
|
||||
for (const c of allContainers) {
|
||||
const cName = c.name || '(unnamed)';
|
||||
const vms: any[] = Array.isArray(c.volumeMounts) ? c.volumeMounts : [];
|
||||
for (const vm of vms) {
|
||||
allMounts.push({
|
||||
containerName: cName,
|
||||
volumeName: vm.name || '',
|
||||
mountPath: vm.mountPath || '',
|
||||
subPath: vm.subPath || '',
|
||||
readOnly: !!vm.readOnly,
|
||||
});
|
||||
}
|
||||
}
|
||||
setMounts(allMounts);
|
||||
setLoading(false);
|
||||
}, [manifest]);
|
||||
|
||||
// Volume operations
|
||||
const addVolume = () => setVolumes(prev => [...prev, { name: '', type: 'emptyDir' }]);
|
||||
const removeVolume = (i: number) => setVolumes(prev => prev.filter((_, idx) => idx !== i));
|
||||
const removeVolume = (i: number) => {
|
||||
const name = volumes[i]?.name;
|
||||
setVolumes(prev => prev.filter((_, idx) => idx !== i));
|
||||
if (name) setMounts(prev => prev.filter(m => m.volumeName !== name));
|
||||
};
|
||||
const updateVolume = (i: number, patch: Partial<VolumeForm>) =>
|
||||
setVolumes(prev => prev.map((v, idx) => (idx === i ? { ...v, ...patch } : v)));
|
||||
|
||||
// Mount operations
|
||||
const addMount = () => setMounts(prev => [...prev, { containerName: containers[0] || '', volumeName: '', mountPath: '', subPath: '', readOnly: false }]);
|
||||
const removeMount = (i: number) => setMounts(prev => prev.filter((_, idx) => idx !== i));
|
||||
const updateMount = (i: number, patch: Partial<MountForm>) =>
|
||||
setMounts(prev => prev.map((m, idx) => (idx === i ? { ...m, ...patch } : m)));
|
||||
|
||||
const save = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
@@ -196,17 +154,35 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
|
||||
base.spec = base.spec || {};
|
||||
base.spec.template = base.spec.template || {};
|
||||
base.spec.template.spec = base.spec.template.spec || {};
|
||||
const podSpec = base.spec.template.spec;
|
||||
|
||||
// Save volumes
|
||||
const k8sVols = volumes.map(formToVolume).filter(Boolean);
|
||||
if (k8sVols.length > 0) {
|
||||
base.spec.template.spec.volumes = k8sVols;
|
||||
} else {
|
||||
delete base.spec.template.spec.volumes;
|
||||
if (k8sVols.length > 0) podSpec.volumes = k8sVols;
|
||||
else delete podSpec.volumes;
|
||||
|
||||
// Save volumeMounts to each container
|
||||
const allContainers = [...(podSpec.containers || []), ...(podSpec.initContainers || [])];
|
||||
for (const c of allContainers) {
|
||||
const cName = c.name || '(unnamed)';
|
||||
const cMounts = mounts
|
||||
.filter(m => m.containerName === cName && m.volumeName && m.mountPath)
|
||||
.map(m => {
|
||||
const vm: any = { name: m.volumeName, mountPath: m.mountPath, readOnly: m.readOnly };
|
||||
if (m.subPath) vm.subPath = m.subPath;
|
||||
return vm;
|
||||
});
|
||||
if (cMounts.length > 0) c.volumeMounts = cMounts;
|
||||
else delete c.volumeMounts;
|
||||
}
|
||||
|
||||
// Rebuild containers arrays
|
||||
podSpec.containers = allContainers.filter((c: any) => !(podSpec.initContainers || []).includes(c));
|
||||
podSpec.initContainers = (podSpec.initContainers || []);
|
||||
|
||||
const json = JSON.stringify(base, null, 2);
|
||||
await kubernetesApi.updateResourceYaml(clusterCode, namespace, 'deployments', deploymentName, json);
|
||||
toast({ title: '存储配置已保存', description: `${deploymentName} volumes 更新已提交` });
|
||||
toast({ title: '存储配置已保存', description: `${deploymentName} 更新已提交` });
|
||||
onSaved();
|
||||
} catch (e: any) {
|
||||
toast({ title: '保存失败', description: e?.message || String(e), variant: 'destructive' });
|
||||
@@ -234,159 +210,138 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
|
||||
);
|
||||
}
|
||||
|
||||
const volumeNames = volumes.map(v => v.name).filter(Boolean);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 数据卷列表 */}
|
||||
{/* ══════════ 定义数据卷 ══════════ */}
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
|
||||
<Database className="h-4 w-4 text-emerald-400" />
|
||||
数据卷 (Volumes)
|
||||
<Database className="h-4 w-4 text-emerald-400" />定义数据卷
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400">{volumes.length}</Badge>
|
||||
</CardTitle>
|
||||
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addVolume}>
|
||||
<Plus className="h-3 w-3 mr-1" />添加数据卷
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
Pod 级别的卷定义，容器通过 <code className="text-slate-400">volumeMounts</code> 引用这些卷名。
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-3">
|
||||
{volumes.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-500 text-sm border border-dashed border-slate-800 rounded-lg">
|
||||
<Database className="h-8 w-8 mx-auto mb-2 text-slate-700" />
|
||||
未配置数据卷，点击右上角「添加数据卷」
|
||||
未配置数据卷
|
||||
</div>
|
||||
) : volumes.map((vol, i) => {
|
||||
const meta = TYPE_META[vol.type];
|
||||
const Icon = meta.icon;
|
||||
const vtype = VOLUME_TYPES.find(t => t.key === vol.type);
|
||||
const VIcon = vtype?.icon || Folder;
|
||||
return (
|
||||
<div key={i} className="bg-slate-950/50 border border-slate-800 rounded-lg p-3 space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className={`h-4 w-4 ${meta.color}`} />
|
||||
<Input
|
||||
value={vol.name}
|
||||
onChange={e => updateVolume(i, { name: e.target.value })}
|
||||
<div key={i} className="bg-slate-950/50 border border-slate-800 rounded-lg p-3 space-y-2.5">
|
||||
{/* 卷名 + 类型 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<VIcon className={`h-4 w-4 ${vtype?.color || 'text-slate-400'}`} />
|
||||
<span className="text-[10px] text-slate-500 w-16 shrink-0">数据卷名称</span>
|
||||
<Input value={vol.name} onChange={e => updateVolume(i, { name: e.target.value })}
|
||||
placeholder="volume-name"
|
||||
className="flex-1 h-8 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono"
|
||||
/>
|
||||
<select
|
||||
value={vol.type}
|
||||
onChange={e => updateVolume(i, { type: e.target.value as VolumeForm['type'] })}
|
||||
className="h-8 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2"
|
||||
>
|
||||
{Object.entries(TYPE_META).map(([t, m]) => (
|
||||
<option key={t} value={t}>{m.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7 text-red-400 hover:text-red-300"
|
||||
onClick={() => removeVolume(i)}>
|
||||
className="h-7 flex-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<Select value={vol.type} onValueChange={v => updateVolume(i, { type: v as VolumeForm['type'] })}>
|
||||
<SelectTrigger className="h-7 w-[120px] bg-slate-800 border-slate-700 text-xs text-slate-300">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<VIcon className="h-3 w-3" />{vtype?.label || vol.type}
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{VOLUME_TYPES.map(t => {
|
||||
const TI = t.icon;
|
||||
return (
|
||||
<SelectItem key={t.key} value={t.key}>
|
||||
<span className="flex items-center gap-1.5 text-xs">
|
||||
<TI className="h-3 w-3" />{t.label}
|
||||
</span>
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7 text-red-400" onClick={() => removeVolume(i)}>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 类型相关字段 */}
|
||||
{/* 类型指定字段 */}
|
||||
{vol.type === 'persistentVolumeClaim' && (
|
||||
<div className="flex items-center gap-2 pl-[88px]">
|
||||
<Input value={vol.pvcName || ''} onChange={e => updateVolume(i, { pvcName: e.target.value })}
|
||||
placeholder="PVC 名称" className="h-7 flex-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer whitespace-nowrap">
|
||||
<input type="checkbox" checked={!!vol.pvcReadOnly}
|
||||
onChange={e => updateVolume(i, { pvcReadOnly: e.target.checked })}
|
||||
className="accent-blue-500" />只读
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vol.type === 'emptyDir' && (
|
||||
<div className="grid grid-cols-2 gap-3 pl-7">
|
||||
<div>
|
||||
<Label className="text-slate-500 text-xs">medium (留空=磁盘, Memory=tmpfs)</Label>
|
||||
<Input value={vol.medium || ''} onChange={e => updateVolume(i, { medium: e.target.value })}
|
||||
placeholder="" className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-slate-500 text-xs">sizeLimit (例: 512Mi)</Label>
|
||||
<Input value={vol.sizeLimit || ''} onChange={e => updateVolume(i, { sizeLimit: e.target.value })}
|
||||
placeholder="512Mi" className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pl-[88px]">
|
||||
<Input value={vol.sizeLimit || ''} onChange={e => updateVolume(i, { sizeLimit: e.target.value })}
|
||||
placeholder="sizeLimit (如 512Mi, 可为空)"
|
||||
className="h-7 flex-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vol.type === 'hostPath' && (
|
||||
<div className="grid grid-cols-2 gap-3 pl-7">
|
||||
<div>
|
||||
<Label className="text-slate-500 text-xs">主机路径 path</Label>
|
||||
<Input value={vol.path || ''} onChange={e => updateVolume(i, { path: e.target.value })}
|
||||
placeholder="/data/app" className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-slate-500 text-xs">pathType</Label>
|
||||
<select value={vol.pathType || 'Directory'} onChange={e => updateVolume(i, { pathType: e.target.value })}
|
||||
className="h-7 mt-1 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2">
|
||||
<option value="Directory">Directory</option>
|
||||
<option value="File">File</option>
|
||||
<option value="Socket">Socket</option>
|
||||
<option value="CharDevice">CharDevice</option>
|
||||
<option value="BlockDevice">BlockDevice</option>
|
||||
<option value="">(空)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vol.type === 'configMap' && (
|
||||
<div className="pl-7">
|
||||
<Label className="text-slate-500 text-xs">ConfigMap 名称</Label>
|
||||
<Input value={vol.configMapName || ''} onChange={e => updateVolume(i, { configMapName: e.target.value })}
|
||||
placeholder="app-config" className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<Label className="text-slate-500 text-xs mt-2 block">items (JSON, 可选)</Label>
|
||||
<Input value={vol.items || ''} onChange={e => updateVolume(i, { items: e.target.value })}
|
||||
placeholder='[{"key":"app.conf","path":"app.conf"}]'
|
||||
className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vol.type === 'secret' && (
|
||||
<div className="pl-7">
|
||||
<Label className="text-slate-500 text-xs">Secret 名称</Label>
|
||||
<Input value={vol.secretName || ''} onChange={e => updateVolume(i, { secretName: e.target.value })}
|
||||
placeholder="app-tls" className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<Label className="text-slate-500 text-xs mt-2 block">items (JSON, 可选)</Label>
|
||||
<Input value={vol.items || ''} onChange={e => updateVolume(i, { items: e.target.value })}
|
||||
placeholder='[{"key":"tls.crt","path":"tls.crt"}]'
|
||||
className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vol.type === 'persistentVolumeClaim' && (
|
||||
<div className="grid grid-cols-2 gap-3 pl-7">
|
||||
<div>
|
||||
<Label className="text-slate-500 text-xs">PVC claimName</Label>
|
||||
<Input value={vol.pvcName || ''} onChange={e => updateVolume(i, { pvcName: e.target.value })}
|
||||
placeholder="data-pvc" className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
<div className="flex items-end pb-1">
|
||||
<label className="flex items-center gap-2 text-xs text-slate-400 cursor-pointer">
|
||||
<input type="checkbox" checked={!!vol.readOnly}
|
||||
onChange={e => updateVolume(i, { readOnly: e.target.checked })}
|
||||
className="accent-blue-500" />
|
||||
readOnly
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pl-[88px]">
|
||||
<Input value={vol.path || ''} onChange={e => updateVolume(i, { path: e.target.value })}
|
||||
placeholder="主机路径 /data/app"
|
||||
className="h-7 flex-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<select value={vol.pathType || 'Directory'} onChange={e => updateVolume(i, { pathType: e.target.value })}
|
||||
className="h-7 w-28 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5">
|
||||
<option value="Directory">Directory</option>
|
||||
<option value="File">File</option>
|
||||
<option value="">（默认）</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vol.type === 'nfs' && (
|
||||
<div className="grid grid-cols-3 gap-3 pl-7">
|
||||
<div>
|
||||
<Label className="text-slate-500 text-xs">server</Label>
|
||||
<Input value={vol.nfsServer || ''} onChange={e => updateVolume(i, { nfsServer: e.target.value })}
|
||||
placeholder="10.10.10.100" className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-slate-500 text-xs">path</Label>
|
||||
<Input value={vol.nfsPath || ''} onChange={e => updateVolume(i, { nfsPath: e.target.value })}
|
||||
placeholder="/export/data" className="h-7 mt-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
<div className="flex items-end pb-1">
|
||||
<label className="flex items-center gap-2 text-xs text-slate-400 cursor-pointer">
|
||||
<input type="checkbox" checked={!!vol.readOnly}
|
||||
onChange={e => updateVolume(i, { readOnly: e.target.checked })}
|
||||
className="accent-blue-500" />
|
||||
readOnly
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pl-[88px]">
|
||||
<Input value={vol.nfsServer || ''} onChange={e => updateVolume(i, { nfsServer: e.target.value })}
|
||||
placeholder="NFS Server IP"
|
||||
className="h-7 w-40 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<span className="text-slate-600 text-xs">:</span>
|
||||
<Input value={vol.nfsPath || ''} onChange={e => updateVolume(i, { nfsPath: e.target.value })}
|
||||
placeholder="/export/path"
|
||||
className="h-7 flex-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer whitespace-nowrap">
|
||||
<input type="checkbox" checked={!!vol.nfsReadOnly}
|
||||
onChange={e => updateVolume(i, { nfsReadOnly: e.target.checked })}
|
||||
className="accent-blue-500" />只读
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vol.type === 'configMap' && (
|
||||
<div className="flex items-center gap-2 pl-[88px]">
|
||||
<span className="text-[10px] text-slate-500 whitespace-nowrap">ConfigMap</span>
|
||||
<Input value={vol.configMapName || ''} onChange={e => updateVolume(i, { configMapName: e.target.value })}
|
||||
placeholder="ConfigMap 名称"
|
||||
className="h-7 flex-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<Input value={vol.cmItems || ''} onChange={e => updateVolume(i, { cmItems: e.target.value })}
|
||||
placeholder="KeyToPath (可为空)"
|
||||
className="h-7 w-40 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vol.type === 'secret' && (
|
||||
<div className="flex items-center gap-2 pl-[88px]">
|
||||
<span className="text-[10px] text-slate-500 whitespace-nowrap">密文</span>
|
||||
<Input value={vol.secretName || ''} onChange={e => updateVolume(i, { secretName: e.target.value })}
|
||||
placeholder="Secret 名称"
|
||||
className="h-7 flex-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
<Input value={vol.secItems || ''} onChange={e => updateVolume(i, { secItems: e.target.value })}
|
||||
placeholder="KeyToPath (可为空)"
|
||||
className="h-7 w-40 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -395,41 +350,69 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 容器 volumeMounts 汇总（只读） */}
|
||||
{mountSummary.length > 0 && (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-3">
|
||||
{/* ══════════ 挂载到容器 ══════════ */}
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
|
||||
<Folder className="h-4 w-4 text-blue-400" />
|
||||
容器挂载点 (volumeMounts)
|
||||
<Folder className="h-4 w-4 text-blue-400" />将数据卷挂载到容器
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400">{mounts.length}</Badge>
|
||||
</CardTitle>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
容器侧已声明的挂载，请在「容器信息」Tab 修改。
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2">
|
||||
{mountSummary.map((s, i) => (
|
||||
<div key={i} className="flex items-start gap-2 text-xs">
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400 font-mono shrink-0">
|
||||
{s.container}
|
||||
</Badge>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{s.mounts.map((m, j) => (
|
||||
<code key={j} className="bg-slate-800 px-1.5 py-0.5 rounded text-slate-300 text-[11px]">{m}</code>
|
||||
))}
|
||||
</div>
|
||||
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addMount}
|
||||
disabled={volumeNames.length === 0 || containers.length === 0}>
|
||||
<Plus className="h-3 w-3 mr-1" />添加挂载
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2">
|
||||
{mounts.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-500 text-sm border border-dashed border-slate-800 rounded-lg">
|
||||
<Folder className="h-8 w-8 mx-auto mb-2 text-slate-700" />
|
||||
{volumeNames.length === 0 ? '请先定义数据卷' : '未配置挂载点'}
|
||||
</div>
|
||||
) : mounts.map((m, i) => (
|
||||
<div key={i} className="flex items-center gap-2 bg-slate-950/50 border border-slate-800 rounded-lg p-2.5">
|
||||
{/* 容器选择 */}
|
||||
<span className="text-[10px] text-slate-500 whitespace-nowrap">容器:</span>
|
||||
<select value={m.containerName} onChange={e => updateMount(i, { containerName: e.target.value })}
|
||||
className="h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5 min-w-[120px]">
|
||||
{containers.length === 0 && <option value="">（无容器）</option>}
|
||||
{containers.map(cn => <option key={cn} value={cn}>{cn}</option>)}
|
||||
</select>
|
||||
{/* 数据卷选择 */}
|
||||
<select value={m.volumeName} onChange={e => updateMount(i, { volumeName: e.target.value })}
|
||||
className="h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5 min-w-[100px]">
|
||||
<option value="">选择数据卷</option>
|
||||
{volumeNames.map(vn => <option key={vn} value={vn}>{vn}</option>)}
|
||||
</select>
|
||||
{/* 挂载路径 */}
|
||||
<Input value={m.mountPath} onChange={e => updateMount(i, { mountPath: e.target.value })}
|
||||
placeholder="挂载路径 /app/data"
|
||||
className="h-7 flex-1 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
|
||||
{/* 只读/读写 */}
|
||||
<div className="flex items-center gap-1 bg-slate-800 rounded-lg p-0.5 border border-slate-700">
|
||||
<button onClick={() => updateMount(i, { readOnly: false })}
|
||||
className={`px-2 py-0.5 rounded text-[10px] font-medium transition-all ${!m.readOnly ? 'bg-blue-500/20 text-blue-300' : 'text-slate-500'}`}>
|
||||
读写
|
||||
</button>
|
||||
<button onClick={() => updateMount(i, { readOnly: true })}
|
||||
className={`px-2 py-0.5 rounded text-[10px] font-medium transition-all ${m.readOnly ? 'bg-amber-500/20 text-amber-300' : 'text-slate-500'}`}>
|
||||
只读
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<Button size="icon" variant="ghost" className="h-7 w-7 text-red-400" onClick={() => removeMount(i)}>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 操作栏 */}
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
|
||||
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
|
||||
保存
|
||||
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user