Files
aiops/frontend/src/components/kubernetes/DeploymentDetailPage.tsx
T
attacker 68a954c1c5 feat(k8s): M6 编辑器基础设施 + 基本信息 Tab + YAML编辑器
- DeploymentWorkload: 三模式切换(查看/编辑/YAML编辑)+ EditModeContainer Tab 导航系统
- DeploymentEditBasic: 新增基本信息 Tab — replicas/labels/annotations/selector 编辑
- YamlViewer: 升级为 CodeMirror 6(语法高亮+行号+折叠+括号匹配),新增 inline 内联模式
- DeploymentDetailPage: mode 类型扩展为 view|edit|yaml
- 路由 :mode 参数自动支持 yaml 值
- M7-M9 Tab 预留占位(容器信息/存储/高级/服务)
2026-06-23 05:15:42 +08:00

48 lines
1.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// DeploymentDetailPage.tsx — 路由包装:解析 cluster/namespace/mode/name
// 支持 Kuboard 风格三模式路由:
// view: /kubernetes/:c/namespace/:n/workload/view/Deployment/:name
// edit: /kubernetes/:c/namespace/:n/workload/edit/Deployment/:name
// yaml: /kubernetes/:c/namespace/:n/workload/yaml/Deployment/:name
// 兼容旧路由: /kubernetes/:c/namespace/:n/deployments/:name(默认 view)
// 作者: Logan <admin@attacker.club>
import { useParams, useNavigate } from 'react-router-dom';
import { DeploymentWorkload } from './DeploymentWorkload';
export type WorkloadMode = 'view' | 'edit' | 'yaml';
export default function DeploymentDetailPage() {
const params = useParams<{
clusterCode: string;
namespace: string;
name: string;
mode?: string; // 'view' | 'edit' | 'yaml'(新路由)
workloadKind?: string; // 'Deployment'(新路由,预留扩展)
}>();
const navigate = useNavigate();
const clusterCode = params.clusterCode || '';
const namespace = params.namespace || '';
const deploymentName = params.name || '';
const currentMode: WorkloadMode = (params.mode === 'edit' || params.mode === 'yaml') ? params.mode : 'view';
// 模式切换:在 view/edit/yaml 路由间跳转
const handleModeChange = (m: WorkloadMode) => {
if (m === currentMode) return;
navigate(
`/kubernetes/${clusterCode}/namespace/${namespace}/workload/${m}/Deployment/${deploymentName}`,
{ replace: true }
);
};
return (
<DeploymentWorkload
clusterCode={clusterCode}
namespace={namespace}
deploymentName={deploymentName}
mode={currentMode}
onBack={() => navigate(-1)}
onModeChange={handleModeChange}
/>
);
}