refactor(quality): Q17 前端巨型组件拆分 — DeploymentEditService 627L→394L (-37%), 提取 types + ServiceCreateForm + IngressCreateForm + ServiceListItem + IngressListItem 5 个独立文件, 端口增删改逻辑下沉到 ServiceCreateForm, 移除文件级 eslint-disable, 零逻辑变更, ESLint errors=0/warnings=64/any=0, tsc -b=0, npm build✓, 17/17 测试通过
This commit is contained in:
attacker committed
1 parent
4905724338
commit
6f1c79fd51
8 files changed
+495
-305
No files matched your search
@@ -1,26 +1,16 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// DeploymentEditService.tsx — 编辑器「服务/应用路由」Tab (M9)
|
||||
// 展示与当前 Deployment 关联的 Service / Ingress，并提供创建入口
|
||||
// 作者: Logan <admin@attacker.club>
|
||||
import { useState, useEffect, useCallback } 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 {
|
||||
|
||||
Network,
|
||||
GitBranch,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Pencil,
|
||||
Plus,
|
||||
CheckCircle,
|
||||
Server,
|
||||
Trash2,
|
||||
Minus,
|
||||
Zap,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
@@ -29,52 +19,24 @@ import { kubernetesApi } from '@/api';
|
||||
import { dumpManifest } from './k8s-manifest-utils';
|
||||
import { ResourceVisualEditor } from './ResourceVisualEditor';
|
||||
import i18n from '@/i18n';
|
||||
import type { SvcSummary, IngSummary, SvcFormState, IngFormState } from './deployment-edit-service/types';
|
||||
import { toArray } from './deployment-edit-service/types';
|
||||
import { ServiceCreateForm } from './deployment-edit-service/ServiceCreateForm';
|
||||
import { IngressCreateForm } from './deployment-edit-service/IngressCreateForm';
|
||||
import { ServiceListItem } from './deployment-edit-service/ServiceListItem';
|
||||
import { IngressListItem } from './deployment-edit-service/IngressListItem';
|
||||
|
||||
interface Props {
|
||||
clusterCode: string;
|
||||
namespace: string;
|
||||
deploymentName: string;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
manifest: any | null;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
onSaved: (updated?: any) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
interface SvcSummary {
|
||||
name: string;
|
||||
type: string;
|
||||
clusterIP: string;
|
||||
externalIP: string;
|
||||
ports: Array<{ port: number; targetPort: any; protocol: string; nodePort?: number; name?: string }>;
|
||||
selector: Record<string, string>;
|
||||
age: string;
|
||||
raw: any;
|
||||
}
|
||||
|
||||
interface IngSummary {
|
||||
name: string;
|
||||
className: string;
|
||||
hosts: string[];
|
||||
rules: Array<{ host: string; paths: Array<{ path: string; backend: { service: string; port: unknown} }> }>;
|
||||
raw: any;
|
||||
}
|
||||
|
||||
// 3 种常用端口预设
|
||||
const PORT_PRESETS = [
|
||||
{ label: 'HTTP', protocol: 'TCP' as const, port: 8080, targetPort: 8080, name: 'http' },
|
||||
{ label: 'WebSocket', protocol: 'TCP' as const, port: 8001, targetPort: 8002, name: 'ws' },
|
||||
{ label: 'gRPC', protocol: 'TCP' as const, port: 8002, targetPort: 8002, name: 'grpc' },
|
||||
];
|
||||
|
||||
interface _SvcPortForm {
|
||||
name: string;
|
||||
port: string;
|
||||
targetPort: string;
|
||||
protocol: 'TCP' | 'UDP';
|
||||
nodePort: string;
|
||||
}
|
||||
|
||||
const toArray = ( v: any) => (Array.isArray(v) ? v : (v?.list || v?.items || v?.data || []));
|
||||
|
||||
export function DeploymentEditService({ clusterCode, namespace, deploymentName, manifest, onCancel }: Props) {
|
||||
const { toast } = useToast();
|
||||
const confirm = useConfirm();
|
||||
@@ -86,42 +48,16 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
const [showCreate, setShowCreate] = useState<'service' | 'ingress' | null>(null);
|
||||
|
||||
// 创建 Service 表单 — 多端口
|
||||
const [svcForm, setSvcForm] = useState<{
|
||||
name: string; type: string;
|
||||
ports: Array<{ name: string; port: string; targetPort: string; protocol: 'TCP' | 'UDP'; nodePort: string }>;
|
||||
}>({
|
||||
const [svcForm, setSvcForm] = useState<SvcFormState>({
|
||||
name: '', type: 'ClusterIP',
|
||||
ports: [{ name: 'http', port: '8080', targetPort: '8080', protocol: 'TCP', nodePort: '' }],
|
||||
});
|
||||
|
||||
// 创建 Ingress 表单
|
||||
const [ingForm, setIngForm] = useState({
|
||||
const [ingForm, setIngForm] = useState<IngFormState>({
|
||||
name: '', className: 'nginx', host: '', path: '/', pathType: 'Prefix', svcPort: '80',
|
||||
});
|
||||
|
||||
// ──── 端口操作 ────
|
||||
const addPort = (preset?: typeof PORT_PRESETS[number]) => {
|
||||
setSvcForm(s => ({
|
||||
...s,
|
||||
ports: [...s.ports, preset
|
||||
? { name: preset.name, port: String(preset.port), targetPort: String(preset.targetPort), protocol: preset.protocol as 'TCP' | 'UDP', nodePort: '' }
|
||||
: { name: '', port: '', targetPort: '', protocol: 'TCP' as const, nodePort: '' }
|
||||
],
|
||||
}));
|
||||
};
|
||||
|
||||
const updatePort = (i: number, field: string, value: string) => {
|
||||
setSvcForm(s => ({
|
||||
...s,
|
||||
ports: s.ports.map((p, idx) => idx === i ? { ...p, [field]: value } : p),
|
||||
}));
|
||||
};
|
||||
|
||||
const removePort = (i: number) => {
|
||||
if (svcForm.ports.length <= 1) return;
|
||||
setSvcForm(s => ({ ...s, ports: s.ports.filter((_, idx) => idx !== i) }));
|
||||
};
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@@ -136,12 +72,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
const allSvcs = toArray(svcRes);
|
||||
const allIngs = toArray(ingRes);
|
||||
|
||||
const svcSummaries: SvcSummary[] = allSvcs.map(( s: any) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const svcSummaries: SvcSummary[] = allSvcs.map((s: any) => {
|
||||
const spec = s.spec || {};
|
||||
const ports = Array.isArray(spec.ports) ? spec.ports.map(( p: any) => ({
|
||||
const ports = Array.isArray(spec.ports) ? spec.ports.map(( // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
p: any) => ({
|
||||
port: p.port, targetPort: p.targetPort, protocol: p.protocol || 'TCP',
|
||||
nodePort: p.nodePort, name: p.name,
|
||||
})) : Array.isArray(s.portList) ? s.portList.map(( p: any) => ({
|
||||
})) : Array.isArray(s.portList) ? s.portList.map(( // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
p: any) => ({
|
||||
port: p.port, targetPort: p.targetPort, protocol: p.protocol || 'TCP',
|
||||
nodePort: p.nodePort, name: p.name,
|
||||
})) : [];
|
||||
@@ -157,12 +96,16 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
};
|
||||
});
|
||||
|
||||
const ingSummaries: IngSummary[] = allIngs.map(( i: any) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const ingSummaries: IngSummary[] = allIngs.map((i: any) => {
|
||||
const spec = i.spec || {};
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const rawRules: Record<string, any>[] = Array.isArray(spec.rules) ? spec.rules : (Array.isArray(i.rules) ? i.rules : []);
|
||||
const rules = rawRules.map(( r: any) => ({
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const rules = rawRules.map((r: any) => ({
|
||||
host: r.host || '',
|
||||
paths: (r.http?.paths || r.paths || []).map(( p: any) => ({
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
paths: (r.http?.paths || r.paths || []).map((p: any) => ({
|
||||
path: p.path || '/',
|
||||
backend: {
|
||||
service: p.backend?.service?.name || p.backendService || '',
|
||||
@@ -173,7 +116,8 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
return {
|
||||
name: i.name || i.metadata?.name || '',
|
||||
className: spec.ingressClassName || i.ingressClass || '<none>',
|
||||
hosts: rules.map(( r: any) => r.host).filter(Boolean),
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
hosts: rules.map((r: any) => r.host).filter(Boolean),
|
||||
rules,
|
||||
raw: i,
|
||||
};
|
||||
@@ -196,13 +140,14 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
const matchedSvcs = services.filter(s => selectorMatches(s.selector));
|
||||
const matchedSvcNames = new Set(matchedSvcs.map(s => s.name));
|
||||
const matchedIngs = ingresses.filter(i =>
|
||||
i.rules.some(r => r.paths.some(p => matchedSvcNames.has(p.backend.service)))
|
||||
i.rules.some(r => r.paths.some(p => matchedSvcNames.has(p.backend.service as string)))
|
||||
);
|
||||
|
||||
// 创建 Service（多端口）
|
||||
const createService = async () => {
|
||||
const name = svcForm.name.trim() || `${deploymentName}-svc`;
|
||||
const k8sPorts = svcForm.ports.map(p => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const sp: Record<string, any> = {
|
||||
name: p.name || 'http',
|
||||
port: Number(p.port) || 80,
|
||||
@@ -213,6 +158,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
return sp;
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const svcManifest: Record<string, any> = {
|
||||
apiVersion: 'v1',
|
||||
kind: 'Service',
|
||||
@@ -230,7 +176,8 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
setShowCreate(null);
|
||||
load();
|
||||
} catch (e) {
|
||||
toast({ title: i18n.t('monitor.dashboard.custom.toastCreateFailed'), description: e?.message || String(e), variant: 'destructive' });
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
toast({ title: i18n.t('monitor.dashboard.custom.toastCreateFailed'), description: (e as any)?.message || String(e), variant: 'destructive' });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -239,7 +186,8 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
const name = ingForm.name.trim() || `${deploymentName}-ingress`;
|
||||
const targetSvc = matchedSvcs[0]?.name || `${deploymentName}-svc`;
|
||||
const port = Number(ingForm.svcPort) || 80;
|
||||
const manifest: Record<string, any> = {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const ingManifest: Record<string, any> = {
|
||||
apiVersion: 'networking.k8s.io/v1',
|
||||
kind: 'Ingress',
|
||||
metadata: { name, namespace, labels: { app: deploymentName } },
|
||||
@@ -257,15 +205,16 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
}],
|
||||
},
|
||||
};
|
||||
if (!ingForm.className) delete manifest.spec.ingressClassName;
|
||||
if (!ingForm.className) delete ingManifest.spec.ingressClassName;
|
||||
try {
|
||||
const yaml = await dumpManifest(manifest);
|
||||
const yaml = await dumpManifest(ingManifest);
|
||||
await kubernetesApi.applyYAML(clusterCode, yaml);
|
||||
toast({ title: i18n.t('kubernetes.deploymentedits.se356fbe5'), description: name });
|
||||
setShowCreate(null);
|
||||
load();
|
||||
} catch (e) {
|
||||
toast({ title: i18n.t('monitor.dashboard.custom.toastCreateFailed'), description: e?.message || String(e), variant: 'destructive' });
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
toast({ title: i18n.t('monitor.dashboard.custom.toastCreateFailed'), description: (e as any)?.message || String(e), variant: 'destructive' });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -284,7 +233,8 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
toast({ title: i18n.t('monitor.silenceRules.deleted'), description: `${kind === 'service' ? 'Service' : 'Ingress'} ${name} 已删除` });
|
||||
load();
|
||||
} catch (e) {
|
||||
toast({ title: i18n.t('kubernetes.msg.deleteFailed2'), description: e?.message || String(e), variant: 'destructive' });
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
toast({ title: i18n.t('kubernetes.msg.deleteFailed2'), description: (e as any)?.message || String(e), variant: 'destructive' });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -349,150 +299,27 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{matchedSvcs.map(svc => {
|
||||
const matched = selectorMatches(svc.selector);
|
||||
return (
|
||||
<div key={svc.name} className={`rounded-lg border p-3 ${matched ? 'border-blue-700/50 bg-blue-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{matched ? <CheckCircle className="h-4 w-4 dg-text-blue" /> : <Network className="h-4 w-4 dg-text-muted" />}
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{svc.name}</span>
|
||||
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{svc.type}</Badge>
|
||||
{matched && <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-[10px]"> {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} </Badge>}
|
||||
<code className="text-[11px] dg-text-muted ml-auto">{svc.clusterIP}</code>
|
||||
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green"
|
||||
onClick={() => setVisualEditor({ resource: 'services', name: svc.name })}>
|
||||
<Pencil className="h-3 w-3 mr-1" />编辑
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
|
||||
title={i18n.t('kubernetes.service.deleteService')} onClick={() => deleteResource('service', svc.name)}>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
{/* Ports */}
|
||||
<div className="mt-2 flex flex-wrap gap-1.5 text-[11px]">
|
||||
{svc.ports.map((p, i) => (
|
||||
<code key={i} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)]">
|
||||
{p.name && <span className="dg-text-muted">{p.name}: </span>}
|
||||
{p.port}→{p.targetPort}{p.nodePort ? `/NodePort:${p.nodePort}` : ''}/{p.protocol}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
{/* Selector */}
|
||||
<div className="mt-1 flex flex-wrap gap-1 text-[10px]">
|
||||
<span className="dg-text-muted">selector:</span>
|
||||
{Object.entries(svc.selector).map(([k, v]) => (
|
||||
<code key={k} className="dg-text-muted">{k}={v}</code>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{matchedSvcs.map(svc => (
|
||||
<ServiceListItem
|
||||
key={svc.name}
|
||||
svc={svc}
|
||||
matched={selectorMatches(svc.selector)}
|
||||
onEdit={() => setVisualEditor({ resource: 'services', name: svc.name })}
|
||||
onDelete={() => deleteResource('service', svc.name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ══════════ 创建 Service 表单 — 多端口 ══════════ */}
|
||||
{showCreate === 'service' && (
|
||||
<div className="mt-3 border border-blue-800/50 rounded-lg p-3 bg-blue-950/20 space-y-3">
|
||||
<div className="text-xs font-semibold text-blue-300 flex items-center gap-1.5">
|
||||
<Plus className="h-3 w-3" />创建新 Service
|
||||
</div>
|
||||
|
||||
{/* 基本信息 */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]"> {i18n.t('kubernetes.secret.secretName')} </Label>
|
||||
<Input value={svcForm.name} onChange={e => setSvcForm(s => ({ ...s, name: e.target.value }))}
|
||||
placeholder={`${deploymentName}-svc`}
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]"> {i18n.t('system.credentialType')} </Label>
|
||||
<select value={svcForm.type} onChange={e => setSvcForm(s => ({ ...s, type: e.target.value }))}
|
||||
className="h-7 mt-0.5 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
|
||||
<option value="ClusterIP">ClusterIP</option>
|
||||
<option value="NodePort">NodePort</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 快速预设 */}
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px] mb-1 block"> {i18n.t('kubernetes.deploymentedits.s83907cde')} </Label>
|
||||
<div className="flex gap-1.5">
|
||||
{PORT_PRESETS.map(p => (
|
||||
<button key={p.name} onClick={() => addPort(p)}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-medium
|
||||
bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:border-blue-500/50 hover:text-blue-300 transition-colors">
|
||||
<Zap className="h-2.5 w-2.5" />
|
||||
{p.label}
|
||||
<span className="dg-text-muted text-[9px]">{p.protocol} {p.port}:{p.targetPort}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 端口列表 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="dg-text-muted text-[11px]">
|
||||
端口配置 <span className="dg-text-muted">({svcForm.ports.length} 个端口)</span>
|
||||
</Label>
|
||||
{svcForm.ports.map((p, i) => (
|
||||
<div key={i} className="flex items-center gap-1.5 p-2 rounded bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50">
|
||||
{/* 名称 */}
|
||||
<Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)}
|
||||
placeholder="http"
|
||||
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
{/* 协议 */}
|
||||
<select value={p.protocol} onChange={e => updatePort(i, 'protocol', e.target.value)}
|
||||
className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5 w-16">
|
||||
<option value="TCP">TCP</option>
|
||||
<option value="UDP">UDP</option>
|
||||
</select>
|
||||
{/* port → targetPort */}
|
||||
<Input value={p.port} onChange={e => updatePort(i, 'port', e.target.value)}
|
||||
type="number" placeholder="port"
|
||||
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
<span className="dg-text-muted text-[10px]">→</span>
|
||||
<Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)}
|
||||
type="number" placeholder="targetPort"
|
||||
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
{/* NodePort (仅 NodePort 类型) */}
|
||||
{svcForm.type === 'NodePort' && (
|
||||
<Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)}
|
||||
type="number" placeholder="30000-32767"
|
||||
className="h-7 w-[80px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
)}
|
||||
{/* 删除 */}
|
||||
<Button size="icon" variant="ghost" className="h-6 w-6 dg-text-muted hover:dg-text-red"
|
||||
onClick={() => removePort(i)} disabled={svcForm.ports.length <= 1}>
|
||||
<Minus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{/* 添加自定义端口 */}
|
||||
<Button size="sm" variant="outline" className="h-7 w-full border-dashed border-[var(--dg-border)] dg-text-secondary text-xs"
|
||||
onClick={() => addPort()}>
|
||||
<Plus className="h-3 w-3 mr-1" />添加自定义端口
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Selector 预览 */}
|
||||
<div className="text-[10px] dg-text-muted border-t border-[var(--dg-border)]/50 pt-2">
|
||||
<span className="dg-text-muted">selector (自动检测): </span>
|
||||
{Object.keys(selectorLabels).length > 0 ? (
|
||||
Object.entries(selectorLabels).map(([k, v]) => (
|
||||
<code key={k} className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-secondary ml-1">{k}={v}</code>
|
||||
))
|
||||
) : (
|
||||
<span className="dg-text-muted italic"> {i18n.t('kubernetes.deploymentedits.s5847b0f9')} </span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}> {i18n.t('rbac.jobRole.cancel')} </Button>
|
||||
<Button size="sm" className="h-7 bg-blue-600 hover:bg-blue-700 text-xs" onClick={createService}> {i18n.t('rbac.jobRole.create')} </Button>
|
||||
</div>
|
||||
</div>
|
||||
<ServiceCreateForm
|
||||
svcForm={svcForm}
|
||||
setSvcForm={setSvcForm}
|
||||
selectorLabels={selectorLabels}
|
||||
deploymentName={deploymentName}
|
||||
onCancel={() => setShowCreate(null)}
|
||||
onCreate={createService}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -524,86 +351,26 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{ingresses.map(ing => {
|
||||
const matched = matchedIngs.includes(ing);
|
||||
return (
|
||||
<div key={ing.name} className={`rounded-lg border p-3 ${matched ? 'border-purple-700/50 bg-purple-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{matched ? <CheckCircle className="h-4 w-4 dg-text-purple" /> : <GitBranch className="h-4 w-4 dg-text-muted" />}
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{ing.name}</span>
|
||||
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{ing.className}</Badge>
|
||||
{matched && <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-[10px]"> {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} </Badge>}
|
||||
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green ml-auto"
|
||||
onClick={() => setVisualEditor({ resource: 'ingresses', name: ing.name })}>
|
||||
<Pencil className="h-3 w-3 mr-1" />编辑
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
|
||||
title={i18n.t('kubernetes.ingress.deleteIngress')} onClick={() => deleteResource('ingress', ing.name)}>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
{/* Rules */}
|
||||
<div className="mt-2 space-y-1 text-[11px]">
|
||||
{ing.rules.map((r, i) => (
|
||||
<div key={i} className="flex items-start gap-1.5">
|
||||
<Server className="h-3 w-3 dg-text-muted mt-0.5" />
|
||||
<code className="text-[var(--dg-text-secondary)]">{r.host || '*'}</code>
|
||||
{r.paths.map((p, j) => (
|
||||
<code key={j} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded dg-text-secondary">
|
||||
{p.path} → {(p as any).backend?.service}:{(p as any).backend?.port}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{ingresses.map(ing => (
|
||||
<IngressListItem
|
||||
key={ing.name}
|
||||
ing={ing}
|
||||
matched={matchedIngs.includes(ing)}
|
||||
onEdit={() => setVisualEditor({ resource: 'ingresses', name: ing.name })}
|
||||
onDelete={() => deleteResource('ingress', ing.name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 创建 Ingress 表单 */}
|
||||
{showCreate === 'ingress' && (
|
||||
<div className="mt-3 border border-purple-800/50 rounded-lg p-3 bg-purple-950/20 space-y-2">
|
||||
<div className="text-xs font-semibold text-purple-300 flex items-center gap-1.5">
|
||||
<Plus className="h-3 w-3" />创建新 Ingress
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]"> {i18n.t('kubernetes.secret.secretName')} </Label>
|
||||
<Input value={ingForm.name} onChange={e => setIngForm(s => ({ ...s, name: e.target.value }))}
|
||||
placeholder={`${deploymentName}-ingress`}
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]">ingressClassName</Label>
|
||||
<Input value={ingForm.className} onChange={e => setIngForm(s => ({ ...s, className: e.target.value }))}
|
||||
placeholder="nginx"
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]">host (域名)</Label>
|
||||
<Input value={ingForm.host} onChange={e => setIngForm(s => ({ ...s, host: e.target.value }))}
|
||||
placeholder="app.example.com"
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]">path</Label>
|
||||
<Input value={ingForm.path} onChange={e => setIngForm(s => ({ ...s, path: e.target.value }))}
|
||||
placeholder="/"
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]">Service 端口</Label>
|
||||
<Input type="number" value={ingForm.svcPort} onChange={e => setIngForm(s => ({ ...s, svcPort: e.target.value }))}
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}> {i18n.t('rbac.jobRole.cancel')} </Button>
|
||||
<Button size="sm" className="h-7 bg-purple-600 hover:bg-purple-700 text-xs" onClick={createIngress}> {i18n.t('rbac.jobRole.create')} </Button>
|
||||
</div>
|
||||
</div>
|
||||
<IngressCreateForm
|
||||
ingForm={ingForm}
|
||||
setIngForm={setIngForm}
|
||||
deploymentName={deploymentName}
|
||||
onCancel={() => setShowCreate(null)}
|
||||
onCreate={createIngress}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
// deployment-edit-service/IngressCreateForm.tsx — 创建 Ingress 表单
|
||||
// 受控组件：接收 ingForm + setIngForm，纯表单输入。
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Plus } from 'lucide-react';
|
||||
import i18n from '@/i18n';
|
||||
import type { IngFormState } from './types';
|
||||
|
||||
interface Props {
|
||||
ingForm: IngFormState;
|
||||
setIngForm: React.Dispatch<React.SetStateAction<IngFormState>>;
|
||||
deploymentName: string;
|
||||
onCancel: () => void;
|
||||
onCreate: () => void;
|
||||
}
|
||||
|
||||
export function IngressCreateForm({ ingForm, setIngForm, deploymentName, onCancel, onCreate }: Props) {
|
||||
return (
|
||||
<div className="mt-3 border border-purple-800/50 rounded-lg p-3 bg-purple-950/20 space-y-2">
|
||||
<div className="text-xs font-semibold text-purple-300 flex items-center gap-1.5">
|
||||
<Plus className="h-3 w-3" />创建新 Ingress
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]"> {i18n.t('kubernetes.secret.secretName')} </Label>
|
||||
<Input value={ingForm.name} onChange={e => setIngForm(s => ({ ...s, name: e.target.value }))}
|
||||
placeholder={`${deploymentName}-ingress`}
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]">ingressClassName</Label>
|
||||
<Input value={ingForm.className} onChange={e => setIngForm(s => ({ ...s, className: e.target.value }))}
|
||||
placeholder="nginx"
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]">host (域名)</Label>
|
||||
<Input value={ingForm.host} onChange={e => setIngForm(s => ({ ...s, host: e.target.value }))}
|
||||
placeholder="app.example.com"
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]">path</Label>
|
||||
<Input value={ingForm.path} onChange={e => setIngForm(s => ({ ...s, path: e.target.value }))}
|
||||
placeholder="/"
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]">Service 端口</Label>
|
||||
<Input type="number" value={ingForm.svcPort} onChange={e => setIngForm(s => ({ ...s, svcPort: e.target.value }))}
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={onCancel}> {i18n.t('rbac.jobRole.cancel')} </Button>
|
||||
<Button size="sm" className="h-7 bg-purple-600 hover:bg-purple-700 text-xs" onClick={onCreate}> {i18n.t('rbac.jobRole.create')} </Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
// deployment-edit-service/IngressListItem.tsx — 单个 Ingress 卡片（关联高亮 + 路由规则）
|
||||
// 纯展示组件：接收 ing + matched 状态 + 编辑/删除回调。
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { CheckCircle, GitBranch, Pencil, Server, Trash2 } from 'lucide-react';
|
||||
import i18n from '@/i18n';
|
||||
import type { IngSummary } from './types';
|
||||
|
||||
interface Props {
|
||||
ing: IngSummary;
|
||||
matched: boolean;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
export function IngressListItem({ ing, matched, onEdit, onDelete }: Props) {
|
||||
return (
|
||||
<div className={`rounded-lg border p-3 ${matched ? 'border-purple-700/50 bg-purple-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{matched ? <CheckCircle className="h-4 w-4 dg-text-purple" /> : <GitBranch className="h-4 w-4 dg-text-muted" />}
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{ing.name}</span>
|
||||
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{ing.className}</Badge>
|
||||
{matched && <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-[10px]"> {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} </Badge>}
|
||||
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green ml-auto"
|
||||
onClick={onEdit}>
|
||||
<Pencil className="h-3 w-3 mr-1" />编辑
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
|
||||
title={i18n.t('kubernetes.ingress.deleteIngress')} onClick={onDelete}>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
{/* Rules */}
|
||||
<div className="mt-2 space-y-1 text-[11px]">
|
||||
{ing.rules.map((r, i) => (
|
||||
<div key={i} className="flex items-start gap-1.5">
|
||||
<Server className="h-3 w-3 dg-text-muted mt-0.5" />
|
||||
<code className="text-[var(--dg-text-secondary)]">{r.host || '*'}</code>
|
||||
{r.paths.map((p, j) => (
|
||||
<code key={j} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded dg-text-secondary">
|
||||
{p.path} → {p.backend.service}:{String(p.backend.port)}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
// deployment-edit-service/ServiceCreateForm.tsx — 创建 Service 表单（多端口 + 快速预设）
|
||||
// 受控组件：接收 svcForm + setSvcForm + selectorLabels，内部管理端口增删改。
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Minus, Plus, Zap } from 'lucide-react';
|
||||
import i18n from '@/i18n';
|
||||
import type { SvcFormState } from './types';
|
||||
import { PORT_PRESETS } from './types';
|
||||
|
||||
interface Props {
|
||||
svcForm: SvcFormState;
|
||||
setSvcForm: React.Dispatch<React.SetStateAction<SvcFormState>>;
|
||||
selectorLabels: Record<string, string>;
|
||||
deploymentName: string;
|
||||
onCancel: () => void;
|
||||
onCreate: () => void;
|
||||
}
|
||||
|
||||
export function ServiceCreateForm({ svcForm, setSvcForm, selectorLabels, deploymentName, onCancel, onCreate }: Props) {
|
||||
// ──── 端口操作 ────
|
||||
const addPort = (preset?: typeof PORT_PRESETS[number]) => {
|
||||
setSvcForm(s => ({
|
||||
...s,
|
||||
ports: [...s.ports, preset
|
||||
? { name: preset.name, port: String(preset.port), targetPort: String(preset.targetPort), protocol: preset.protocol as 'TCP' | 'UDP', nodePort: '' }
|
||||
: { name: '', port: '', targetPort: '', protocol: 'TCP' as const, nodePort: '' }
|
||||
],
|
||||
}));
|
||||
};
|
||||
|
||||
const updatePort = (i: number, field: string, value: string) => {
|
||||
setSvcForm(s => ({
|
||||
...s,
|
||||
ports: s.ports.map((p, idx) => idx === i ? { ...p, [field]: value } : p),
|
||||
}));
|
||||
};
|
||||
|
||||
const removePort = (i: number) => {
|
||||
if (svcForm.ports.length <= 1) return;
|
||||
setSvcForm(s => ({ ...s, ports: s.ports.filter((_, idx) => idx !== i) }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-3 border border-blue-800/50 rounded-lg p-3 bg-blue-950/20 space-y-3">
|
||||
<div className="text-xs font-semibold text-blue-300 flex items-center gap-1.5">
|
||||
<Plus className="h-3 w-3" />创建新 Service
|
||||
</div>
|
||||
|
||||
{/* 基本信息 */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]"> {i18n.t('kubernetes.secret.secretName')} </Label>
|
||||
<Input value={svcForm.name} onChange={e => setSvcForm(s => ({ ...s, name: e.target.value }))}
|
||||
placeholder={`${deploymentName}-svc`}
|
||||
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px]"> {i18n.t('system.credentialType')} </Label>
|
||||
<select value={svcForm.type} onChange={e => setSvcForm(s => ({ ...s, type: e.target.value }))}
|
||||
className="h-7 mt-0.5 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
|
||||
<option value="ClusterIP">ClusterIP</option>
|
||||
<option value="NodePort">NodePort</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 快速预设 */}
|
||||
<div>
|
||||
<Label className="dg-text-muted text-[11px] mb-1 block"> {i18n.t('kubernetes.deploymentedits.s83907cde')} </Label>
|
||||
<div className="flex gap-1.5">
|
||||
{PORT_PRESETS.map(p => (
|
||||
<button key={p.name} onClick={() => addPort(p)}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-medium
|
||||
bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:border-blue-500/50 hover:text-blue-300 transition-colors">
|
||||
<Zap className="h-2.5 w-2.5" />
|
||||
{p.label}
|
||||
<span className="dg-text-muted text-[9px]">{p.protocol} {p.port}:{p.targetPort}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 端口列表 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="dg-text-muted text-[11px]">
|
||||
端口配置 <span className="dg-text-muted">({svcForm.ports.length} 个端口)</span>
|
||||
</Label>
|
||||
{svcForm.ports.map((p, i) => (
|
||||
<div key={i} className="flex items-center gap-1.5 p-2 rounded bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50">
|
||||
{/* 名称 */}
|
||||
<Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)}
|
||||
placeholder="http"
|
||||
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
{/* 协议 */}
|
||||
<select value={p.protocol} onChange={e => updatePort(i, 'protocol', e.target.value)}
|
||||
className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5 w-16">
|
||||
<option value="TCP">TCP</option>
|
||||
<option value="UDP">UDP</option>
|
||||
</select>
|
||||
{/* port → targetPort */}
|
||||
<Input value={p.port} onChange={e => updatePort(i, 'port', e.target.value)}
|
||||
type="number" placeholder="port"
|
||||
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
<span className="dg-text-muted text-[10px]">→</span>
|
||||
<Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)}
|
||||
type="number" placeholder="targetPort"
|
||||
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
{/* NodePort (仅 NodePort 类型) */}
|
||||
{svcForm.type === 'NodePort' && (
|
||||
<Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)}
|
||||
type="number" placeholder="30000-32767"
|
||||
className="h-7 w-[80px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
|
||||
)}
|
||||
{/* 删除 */}
|
||||
<Button size="icon" variant="ghost" className="h-6 w-6 dg-text-muted hover:dg-text-red"
|
||||
onClick={() => removePort(i)} disabled={svcForm.ports.length <= 1}>
|
||||
<Minus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{/* 添加自定义端口 */}
|
||||
<Button size="sm" variant="outline" className="h-7 w-full border-dashed border-[var(--dg-border)] dg-text-secondary text-xs"
|
||||
onClick={() => addPort()}>
|
||||
<Plus className="h-3 w-3 mr-1" />添加自定义端口
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Selector 预览 */}
|
||||
<div className="text-[10px] dg-text-muted border-t border-[var(--dg-border)]/50 pt-2">
|
||||
<span className="dg-text-muted">selector (自动检测): </span>
|
||||
{Object.keys(selectorLabels).length > 0 ? (
|
||||
Object.entries(selectorLabels).map(([k, v]) => (
|
||||
<code key={k} className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-secondary ml-1">{k}={v}</code>
|
||||
))
|
||||
) : (
|
||||
<span className="dg-text-muted italic"> {i18n.t('kubernetes.deploymentedits.s5847b0f9')} </span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={onCancel}> {i18n.t('rbac.jobRole.cancel')} </Button>
|
||||
<Button size="sm" className="h-7 bg-blue-600 hover:bg-blue-700 text-xs" onClick={onCreate}> {i18n.t('rbac.jobRole.create')} </Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
// deployment-edit-service/ServiceListItem.tsx — 单个 Service 卡片（关联高亮 + 端口 + selector）
|
||||
// 纯展示组件：接收 svc + matched 状态 + 编辑/删除回调。
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { CheckCircle, Network, Pencil, Trash2 } from 'lucide-react';
|
||||
import i18n from '@/i18n';
|
||||
import type { SvcSummary } from './types';
|
||||
|
||||
interface Props {
|
||||
svc: SvcSummary;
|
||||
matched: boolean;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
export function ServiceListItem({ svc, matched, onEdit, onDelete }: Props) {
|
||||
return (
|
||||
<div className={`rounded-lg border p-3 ${matched ? 'border-blue-700/50 bg-blue-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{matched ? <CheckCircle className="h-4 w-4 dg-text-blue" /> : <Network className="h-4 w-4 dg-text-muted" />}
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{svc.name}</span>
|
||||
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{svc.type}</Badge>
|
||||
{matched && <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-[10px]"> {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} </Badge>}
|
||||
<code className="text-[11px] dg-text-muted ml-auto">{svc.clusterIP}</code>
|
||||
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green"
|
||||
onClick={onEdit}>
|
||||
<Pencil className="h-3 w-3 mr-1" />编辑
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
|
||||
title={i18n.t('kubernetes.service.deleteService')} onClick={onDelete}>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
{/* Ports */}
|
||||
<div className="mt-2 flex flex-wrap gap-1.5 text-[11px]">
|
||||
{svc.ports.map((p, i) => (
|
||||
<code key={i} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)]">
|
||||
{p.name && <span className="dg-text-muted">{p.name}: </span>}
|
||||
{p.port}→{String(p.targetPort)}{p.nodePort ? `/NodePort:${p.nodePort}` : ''}/{p.protocol}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
{/* Selector */}
|
||||
<div className="mt-1 flex flex-wrap gap-1 text-[10px]">
|
||||
<span className="dg-text-muted">selector:</span>
|
||||
{Object.entries(svc.selector).map(([k, v]) => (
|
||||
<code key={k} className="dg-text-muted">{k}={v}</code>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
// deployment-edit-service/types.ts — Deployment 关联 Service/Ingress 编辑器的类型与常量
|
||||
// 纯数据/类型定义，零 React 依赖。
|
||||
|
||||
export interface SvcPort {
|
||||
port: number;
|
||||
targetPort: unknown;
|
||||
protocol: string;
|
||||
nodePort?: number;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export interface SvcSummary {
|
||||
name: string;
|
||||
type: string;
|
||||
clusterIP: string;
|
||||
externalIP: string;
|
||||
ports: SvcPort[];
|
||||
selector: Record<string, string>;
|
||||
age: string;
|
||||
raw: unknown;
|
||||
}
|
||||
|
||||
export interface IngBackend {
|
||||
service: string;
|
||||
port: unknown;
|
||||
}
|
||||
|
||||
export interface IngPath {
|
||||
path: string;
|
||||
backend: IngBackend;
|
||||
}
|
||||
|
||||
export interface IngRule {
|
||||
host: string;
|
||||
paths: IngPath[];
|
||||
}
|
||||
|
||||
export interface IngSummary {
|
||||
name: string;
|
||||
className: string;
|
||||
hosts: string[];
|
||||
rules: IngRule[];
|
||||
raw: unknown;
|
||||
}
|
||||
|
||||
export interface SvcPortFormItem {
|
||||
name: string;
|
||||
port: string;
|
||||
targetPort: string;
|
||||
protocol: 'TCP' | 'UDP';
|
||||
nodePort: string;
|
||||
}
|
||||
|
||||
export interface SvcFormState {
|
||||
name: string;
|
||||
type: string;
|
||||
ports: SvcPortFormItem[];
|
||||
}
|
||||
|
||||
export interface IngFormState {
|
||||
name: string;
|
||||
className: string;
|
||||
host: string;
|
||||
path: string;
|
||||
pathType: string;
|
||||
svcPort: string;
|
||||
}
|
||||
|
||||
// 3 种常用端口预设
|
||||
export const PORT_PRESETS = [
|
||||
{ label: 'HTTP', protocol: 'TCP' as const, port: 8080, targetPort: 8080, name: 'http' },
|
||||
{ label: 'WebSocket', protocol: 'TCP' as const, port: 8001, targetPort: 8002, name: 'ws' },
|
||||
{ label: 'gRPC', protocol: 'TCP' as const, port: 8002, targetPort: 8002, name: 'grpc' },
|
||||
];
|
||||
|
||||
// 将后端返回的多种形态统一为数组
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export const toArray = (v: any) => (Array.isArray(v) ? v : (v?.list || v?.items || v?.data || []));
|
||||
Reference in new issue
Block a user