From 6f1c79fd51aea792df3f2d7a1d4da2768e515629 Mon Sep 17 00:00:00 2001 From: attacker Date: Wed, 8 Jul 2026 05:15:39 +0800 Subject: [PATCH] =?UTF-8?q?refactor(quality):=20Q17=20=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E5=B7=A8=E5=9E=8B=E7=BB=84=E4=BB=B6=E6=8B=86=E5=88=86=20?= =?UTF-8?q?=E2=80=94=20DeploymentEditService=20627L=E2=86=92394L=20(-37%),?= =?UTF-8?q?=20=E6=8F=90=E5=8F=96=20types=20+=20ServiceCreateForm=20+=20Ing?= =?UTF-8?q?ressCreateForm=20+=20ServiceListItem=20+=20IngressListItem=205?= =?UTF-8?q?=20=E4=B8=AA=E7=8B=AC=E7=AB=8B=E6=96=87=E4=BB=B6,=20=E7=AB=AF?= =?UTF-8?q?=E5=8F=A3=E5=A2=9E=E5=88=A0=E6=94=B9=E9=80=BB=E8=BE=91=E4=B8=8B?= =?UTF-8?q?=E6=B2=89=E5=88=B0=20ServiceCreateForm,=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=BA=A7=20eslint-disable,=20=E9=9B=B6?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E5=8F=98=E6=9B=B4,=20ESLint=20errors=3D0/war?= =?UTF-8?q?nings=3D64/any=3D0,=20tsc=20-b=3D0,=20npm=20build=E2=9C=93,=201?= =?UTF-8?q?7/17=20=E6=B5=8B=E8=AF=95=E9=80=9A=E8=BF=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- PROJECT_EVALUATION.md | 2 +- ROADMAP.md | 36 ++ .../kubernetes/DeploymentEditService.tsx | 375 ++++-------------- .../IngressCreateForm.tsx | 61 +++ .../IngressListItem.tsx | 49 +++ .../ServiceCreateForm.tsx | 147 +++++++ .../ServiceListItem.tsx | 52 +++ .../deployment-edit-service/types.ts | 78 ++++ 8 files changed, 495 insertions(+), 305 deletions(-) create mode 100644 frontend/src/components/kubernetes/deployment-edit-service/IngressCreateForm.tsx create mode 100644 frontend/src/components/kubernetes/deployment-edit-service/IngressListItem.tsx create mode 100644 frontend/src/components/kubernetes/deployment-edit-service/ServiceCreateForm.tsx create mode 100644 frontend/src/components/kubernetes/deployment-edit-service/ServiceListItem.tsx create mode 100644 frontend/src/components/kubernetes/deployment-edit-service/types.ts diff --git a/PROJECT_EVALUATION.md b/PROJECT_EVALUATION.md index d84dbdf..c76f454 100644 --- a/PROJECT_EVALUATION.md +++ b/PROJECT_EVALUATION.md @@ -129,7 +129,7 @@ | ~~`api.ts` 1324 行/352 方法~~ → 已拆分为 12 个域文件 (api/kubernetes.ts, deploy.ts, monitor.ts 等) | ✅ 已解决 | 前端 | ~~P0~~ done | | 前端 **1026 处** `any` 类型 | 类型安全缺失，重构风险高 | 前端全局 | ~~P0~~ **done** (any 1076→40, unused 25→6, console 93→1, tsc --noEmit=0) | | ~~K8s 双路由体系（集群域+Kuboard 域）~~ → code 路由统一为主，ID 路由标记 deprecated 向后兼容 | ✅ 已解决 | 后端 | ~~P1~~ done | -| 25 个 ≥500 行巨型组件 | 拆分困难 | 前端 | P1 → **Q6-Q16 done: 最大组件 ResourceVisualEditor 882L→282L (-68%) + AgentCLI 814L→521L (-36%) + SystemSettingsTab 754L→173L (-77%) + NamespaceResourcePage 719L→300L (-58%) + ApprovalWorkflowPage 705L→167L (-76%) + PipelineRunDetail 678L→273L (-60%) + CloudServerImport 699L→404L (-42%，any[]→具体接口) + UnifiedQueryPanel 682L→529L (-22%) + ServerManager 652L→442L (-32%) + PipelineEditor 676L→406L (-40%) + **RdpDialog 642L→442L (-31%)**，累计提取 48 个独立组件文件** | +| 25 个 ≥500 行巨型组件 | 拆分困难 | 前端 | P1 → **Q6-Q17 done: 最大组件 ResourceVisualEditor 882L→282L (-68%) + AgentCLI 814L→521L (-36%) + SystemSettingsTab 754L→173L (-77%) + NamespaceResourcePage 719L→300L (-58%) + ApprovalWorkflowPage 705L→167L (-76%) + PipelineRunDetail 678L→273L (-60%) + CloudServerImport 699L→404L (-42%，any[]→具体接口) + UnifiedQueryPanel 682L→529L (-22%) + ServerManager 652L→442L (-32%) + PipelineEditor 676L→406L (-40%) + RdpDialog 642L→442L (-31%) + **DeploymentEditService 627L→394L (-37%)**，累计提取 53 个独立组件文件** | ### 3.2 🟡 中优先级 diff --git a/ROADMAP.md b/ROADMAP.md index 99c3932..b49c55a 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -488,6 +488,42 @@ services/api.ts (1324L) | Q14 | 前端巨型组件拆分（ServerManager 652L→442L，提取 ServerTableSection + server-export-utils） | P0 | **done** | | Q15 | 前端巨型组件拆分（PipelineEditor 676L→406L，提取 types + TaskCard + TaskEditorPanel + PipelineLogDialog + RunsHistoryTab + PipelineMembersTab） | P0 | **done** | | Q16 | 前端巨型组件拆分（RdpDialog 642L→442L，提取 types + rdpp-utils + RdpDialogHeader） | P0 | **done** | +| Q17 | 前端巨型组件拆分（DeploymentEditService 627L→394L，提取 types + ServiceCreateForm + IngressCreateForm + ServiceListItem + IngressListItem） | P0 | **done** | + +--- + +## Q17: 前端巨型组件拆分 — DeploymentEditService [done] + +**问题**: `DeploymentEditService.tsx`（627 行）是 Q16 拆分后项目最大的核心业务组件之一（排除 UI 库 sidebar/data-table），包含 Deployment 编辑器「服务/应用路由」Tab 的全部逻辑：类型定义 + 端口预设常量、多端口 Service 创建表单（端口增删改 + 快速预设 + NodePort/ClusterIP 类型切换 + selector 预览）、Ingress 创建表单、Service/Ingress 列表卡片渲染（selector 关联高亮 + 端口/路由规则展示）、数据加载（Promise.all 拉取关联 Service/Ingress 并解析为摘要）、manifest 构建（createService/createIngress）、删除确认、以及可视化编辑器挂载。单文件过大导致维护困难。 + +**已完成 (2026-07-08)**: + +将类型/常量、创建表单、列表卡片提取为 `deployment-edit-service/` 子目录下的独立文件: + +| 新文件 | 行数 | 职责 | +|--------|------|------| +| `types.ts` | 78 | SvcPort/SvcSummary/IngBackend/IngPath/IngRule/IngSummary 接口 + SvcPortFormItem/SvcFormState/IngFormState 表单状态类型 + PORT_PRESETS 端口预设常量 + toArray 后端响应归一化辅助 | +| `ServiceCreateForm.tsx` | 147 | 创建 Service 表单（基本信息 + 快速预设按钮 + 多端口配置行 + selector 预览），受控组件接收 svcForm/setSvcForm，内部管理 addPort/updatePort/removePort 端口操作 | +| `IngressCreateForm.tsx` | 61 | 创建 Ingress 表单（名称/ingressClass/host/path/svcPort），受控组件接收 ingForm/setIngForm | +| `ServiceListItem.tsx` | 52 | 单个 Service 卡片（关联高亮 + ClusterIP + 端口标签 + selector），纯展示组件接收 svc + matched + onEdit/onDelete | +| `IngressListItem.tsx` | 49 | 单个 Ingress 卡片（关联高亮 + 路由规则 host→path→backend），纯展示组件接收 ing + matched + onEdit/onDelete | + +主文件 `DeploymentEditService.tsx` 从 **627 行降至 394 行**（-37%），仅保留：状态管理（loading/services/ingresses/selectorLabels/visualEditor/showCreate/svcForm/ingForm）、数据加载（load + Promise.all + 摘要解析）、selectorMatches 关联判定、派生数据（matchedSvcs/matchedSvcNames/matchedIngs）、manifest 构建与 API 调用（createService/createIngress/deleteResource）、loading 骨架、Selector 提示卡片、Services/Ingresses 卡片外壳（header + 空状态 + 列表编排 + 表单挂载）、ResourceVisualEditor 挂载、取消按钮。 + +**提取原则**: types 为纯数据/类型（零 React 依赖）；ServiceCreateForm 为受控表单组件（接收 svcForm + setSvcForm，内部封装端口增删改逻辑）；IngressCreateForm 为受控表单组件；ServiceListItem/IngressListItem 为纯展示组件（接收数据 + matched 状态 + 回调）。零逻辑变更。类型安全方面，SvcPort.targetPort 和 IngBackend.port 保持 `unknown` 类型（与后端动态值一致），列表渲染处用 `String()` 包裹（与原 `any` 渲染结果一致），移除了原文件顶部的文件级 `eslint-disable @typescript-eslint/no-explicit-any`。 + +**验收标准**: +- [x] DeploymentEditService.tsx 从 627 行降至 **394 行**（-37%） +- [x] 5 个提取的文件全部 < 150 行（最大 ServiceCreateForm 147 行） +- [x] `tsc -b` 零错误 +- [x] `npm run build` 零错误（✓ built in 16.86s） +- [x] ESLint errors 保持 **0**（拆分目录零 errors/warnings，清理 1 个冗余 disable 指令） +- [x] ESLint warnings 保持 **64**（无新增） +- [x] 全局 ESLint any 保持 **0** +- [x] `go build` 零错误 +- [x] 17/17 集成回归测试通过（零回归） +- [x] Docker 部署 healthy +- [x] Deployment 服务/路由编辑 Tab 功能不变（Service/Ingress 列表关联高亮、创建表单多端口配置、编辑/删除、可视化编辑器全部正常） --- diff --git a/frontend/src/components/kubernetes/DeploymentEditService.tsx b/frontend/src/components/kubernetes/DeploymentEditService.tsx index aa2f64b..7dc5146 100644 --- a/frontend/src/components/kubernetes/DeploymentEditService.tsx +++ b/frontend/src/components/kubernetes/DeploymentEditService.tsx @@ -1,26 +1,16 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ // DeploymentEditService.tsx — 编辑器「服务/应用路由」Tab (M9) // 展示与当前 Deployment 关联的 Service / Ingress，并提供创建入口 // 作者: Logan 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; - 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({ name: '', type: 'ClusterIP', ports: [{ name: 'http', port: '8080', targetPort: '8080', protocol: 'TCP', nodePort: '' }], }); // 创建 Ingress 表单 - const [ingForm, setIngForm] = useState({ + const [ingForm, setIngForm] = useState({ 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[] = 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 || '', - 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 = { 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 = { 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 = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const ingManifest: Record = { 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, ) : (
- {matchedSvcs.map(svc => { - const matched = selectorMatches(svc.selector); - return ( -
-
- {matched ? : } - {svc.name} - {svc.type} - {matched && {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} } - {svc.clusterIP} - - -
- {/* Ports */} -
- {svc.ports.map((p, i) => ( - - {p.name && {p.name}: } - {p.port}→{p.targetPort}{p.nodePort ? `/NodePort:${p.nodePort}` : ''}/{p.protocol} - - ))} -
- {/* Selector */} -
- selector: - {Object.entries(svc.selector).map(([k, v]) => ( - {k}={v} - ))} -
-
- ); - })} + {matchedSvcs.map(svc => ( + setVisualEditor({ resource: 'services', name: svc.name })} + onDelete={() => deleteResource('service', svc.name)} + /> + ))}
)} - {/* ══════════ 创建 Service 表单 — 多端口 ══════════ */} {showCreate === 'service' && ( -
-
- 创建新 Service -
- - {/* 基本信息 */} -
-
- - 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" /> -
-
- - -
-
- - {/* 快速预设 */} -
- -
- {PORT_PRESETS.map(p => ( - - ))} -
-
- - {/* 端口列表 */} -
- - {svcForm.ports.map((p, i) => ( -
- {/* 名称 */} - updatePort(i, 'name', e.target.value)} - placeholder="http" - className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> - {/* 协议 */} - - {/* port → targetPort */} - 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" /> - → - 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' && ( - 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" /> - )} - {/* 删除 */} - -
- ))} - {/* 添加自定义端口 */} - -
- - {/* Selector 预览 */} -
- selector (自动检测): - {Object.keys(selectorLabels).length > 0 ? ( - Object.entries(selectorLabels).map(([k, v]) => ( - {k}={v} - )) - ) : ( - {i18n.t('kubernetes.deploymentedits.s5847b0f9')} - )} -
- -
- - -
-
+ setShowCreate(null)} + onCreate={createService} + /> )} @@ -524,86 +351,26 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName, ) : (
- {ingresses.map(ing => { - const matched = matchedIngs.includes(ing); - return ( -
-
- {matched ? : } - {ing.name} - {ing.className} - {matched && {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} } - - -
- {/* Rules */} -
- {ing.rules.map((r, i) => ( -
- - {r.host || '*'} - {r.paths.map((p, j) => ( - - {p.path} → {(p as any).backend?.service}:{(p as any).backend?.port} - - ))} -
- ))} -
-
- ); - })} + {ingresses.map(ing => ( + setVisualEditor({ resource: 'ingresses', name: ing.name })} + onDelete={() => deleteResource('ingress', ing.name)} + /> + ))}
)} - {/* 创建 Ingress 表单 */} {showCreate === 'ingress' && ( -
-
- 创建新 Ingress -
-
-
- - 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" /> -
-
- - 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" /> -
-
- - 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" /> -
-
- - 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" /> -
-
- - setIngForm(s => ({ ...s, svcPort: e.target.value }))} - className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> -
-
-
- - -
-
+ setShowCreate(null)} + onCreate={createIngress} + /> )} diff --git a/frontend/src/components/kubernetes/deployment-edit-service/IngressCreateForm.tsx b/frontend/src/components/kubernetes/deployment-edit-service/IngressCreateForm.tsx new file mode 100644 index 0000000..6795ddb --- /dev/null +++ b/frontend/src/components/kubernetes/deployment-edit-service/IngressCreateForm.tsx @@ -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>; + deploymentName: string; + onCancel: () => void; + onCreate: () => void; +} + +export function IngressCreateForm({ ingForm, setIngForm, deploymentName, onCancel, onCreate }: Props) { + return ( +
+
+ 创建新 Ingress +
+
+
+ + 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" /> +
+
+ + 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" /> +
+
+ + 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" /> +
+
+ + 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" /> +
+
+ + setIngForm(s => ({ ...s, svcPort: e.target.value }))} + className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> +
+
+
+ + +
+
+ ); +} diff --git a/frontend/src/components/kubernetes/deployment-edit-service/IngressListItem.tsx b/frontend/src/components/kubernetes/deployment-edit-service/IngressListItem.tsx new file mode 100644 index 0000000..137382f --- /dev/null +++ b/frontend/src/components/kubernetes/deployment-edit-service/IngressListItem.tsx @@ -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 ( +
+
+ {matched ? : } + {ing.name} + {ing.className} + {matched && {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} } + + +
+ {/* Rules */} +
+ {ing.rules.map((r, i) => ( +
+ + {r.host || '*'} + {r.paths.map((p, j) => ( + + {p.path} → {p.backend.service}:{String(p.backend.port)} + + ))} +
+ ))} +
+
+ ); +} diff --git a/frontend/src/components/kubernetes/deployment-edit-service/ServiceCreateForm.tsx b/frontend/src/components/kubernetes/deployment-edit-service/ServiceCreateForm.tsx new file mode 100644 index 0000000..5a62df7 --- /dev/null +++ b/frontend/src/components/kubernetes/deployment-edit-service/ServiceCreateForm.tsx @@ -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>; + selectorLabels: Record; + 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 ( +
+
+ 创建新 Service +
+ + {/* 基本信息 */} +
+
+ + 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" /> +
+
+ + +
+
+ + {/* 快速预设 */} +
+ +
+ {PORT_PRESETS.map(p => ( + + ))} +
+
+ + {/* 端口列表 */} +
+ + {svcForm.ports.map((p, i) => ( +
+ {/* 名称 */} + updatePort(i, 'name', e.target.value)} + placeholder="http" + className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> + {/* 协议 */} + + {/* port → targetPort */} + 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" /> + → + 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' && ( + 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" /> + )} + {/* 删除 */} + +
+ ))} + {/* 添加自定义端口 */} + +
+ + {/* Selector 预览 */} +
+ selector (自动检测): + {Object.keys(selectorLabels).length > 0 ? ( + Object.entries(selectorLabels).map(([k, v]) => ( + {k}={v} + )) + ) : ( + {i18n.t('kubernetes.deploymentedits.s5847b0f9')} + )} +
+ +
+ + +
+
+ ); +} diff --git a/frontend/src/components/kubernetes/deployment-edit-service/ServiceListItem.tsx b/frontend/src/components/kubernetes/deployment-edit-service/ServiceListItem.tsx new file mode 100644 index 0000000..20e57f6 --- /dev/null +++ b/frontend/src/components/kubernetes/deployment-edit-service/ServiceListItem.tsx @@ -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 ( +
+
+ {matched ? : } + {svc.name} + {svc.type} + {matched && {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} } + {svc.clusterIP} + + +
+ {/* Ports */} +
+ {svc.ports.map((p, i) => ( + + {p.name && {p.name}: } + {p.port}→{String(p.targetPort)}{p.nodePort ? `/NodePort:${p.nodePort}` : ''}/{p.protocol} + + ))} +
+ {/* Selector */} +
+ selector: + {Object.entries(svc.selector).map(([k, v]) => ( + {k}={v} + ))} +
+
+ ); +} diff --git a/frontend/src/components/kubernetes/deployment-edit-service/types.ts b/frontend/src/components/kubernetes/deployment-edit-service/types.ts new file mode 100644 index 0000000..37fd878 --- /dev/null +++ b/frontend/src/components/kubernetes/deployment-edit-service/types.ts @@ -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; + 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 || []));