feat: DAG可视化编排画布 - 图查询/依赖增删接口 + React Flow画布
This commit is contained in:
@@ -0,0 +1,338 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import {
|
||||||
|
ReactFlow,
|
||||||
|
Background,
|
||||||
|
Controls,
|
||||||
|
MiniMap,
|
||||||
|
addEdge,
|
||||||
|
useNodesState,
|
||||||
|
useEdgesState,
|
||||||
|
Handle,
|
||||||
|
Position,
|
||||||
|
MarkerType,
|
||||||
|
} from 'reactflow';
|
||||||
|
import type { Node, Edge, Connection, NodeProps } from 'reactflow';
|
||||||
|
import 'reactflow/dist/style.css';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
Select,
|
||||||
|
Button,
|
||||||
|
Space,
|
||||||
|
message,
|
||||||
|
Modal,
|
||||||
|
Typography,
|
||||||
|
Tag,
|
||||||
|
Tooltip,
|
||||||
|
Empty,
|
||||||
|
} from 'antd';
|
||||||
|
import {
|
||||||
|
ThunderboltOutlined,
|
||||||
|
ReloadOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { projectApi, dagApi } from '@/api';
|
||||||
|
import type { Project, TaskStatus, DagGraphNode, DagGraphEdge } from '@/types';
|
||||||
|
import { taskStatusConfig, priorityConfig } from '@/components/constants';
|
||||||
|
|
||||||
|
const { Text } = Typography;
|
||||||
|
|
||||||
|
// ---------- Custom task node ----------
|
||||||
|
function TaskNode({ data }: NodeProps) {
|
||||||
|
const status = data.status as TaskStatus;
|
||||||
|
const cfg = taskStatusConfig[status] || { label: status, color: '#8c8c8c' };
|
||||||
|
const pcfg = priorityConfig[data.priority as keyof typeof priorityConfig];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
minWidth: 180,
|
||||||
|
maxWidth: 240,
|
||||||
|
background: '#fff',
|
||||||
|
border: `2px solid ${cfg.color}`,
|
||||||
|
borderRadius: 8,
|
||||||
|
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Handle type="target" position={Position.Top} />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: cfg.color,
|
||||||
|
color: '#fff',
|
||||||
|
padding: '4px 10px',
|
||||||
|
fontSize: 12,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>#{data.taskId}</span>
|
||||||
|
<span>{cfg.label}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '8px 10px' }}>
|
||||||
|
<div style={{ fontWeight: 600, fontSize: 13, marginBottom: 4, wordBreak: 'break-all' }}>
|
||||||
|
{data.title}
|
||||||
|
</div>
|
||||||
|
<Space size={4}>
|
||||||
|
{pcfg && <Tag color={pcfg.color} style={{ marginRight: 0 }}>{pcfg.label}</Tag>}
|
||||||
|
{data.requires_review && <Tag color="purple" style={{ marginRight: 0 }}>需审核</Tag>}
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
<Handle type="source" position={Position.Bottom} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodeTypes = { taskNode: TaskNode };
|
||||||
|
|
||||||
|
// ---------- Layered auto-layout by topological depth ----------
|
||||||
|
function layoutNodes(graphNodes: DagGraphNode[], graphEdges: DagGraphEdge[]) {
|
||||||
|
const deps: Record<number, number[]> = {};
|
||||||
|
graphNodes.forEach((n) => (deps[n.id] = []));
|
||||||
|
graphEdges.forEach((e) => {
|
||||||
|
if (deps[e.target]) deps[e.target].push(e.source);
|
||||||
|
});
|
||||||
|
|
||||||
|
const depth: Record<number, number> = {};
|
||||||
|
const computeDepth = (id: number, visiting: Set<number>): number => {
|
||||||
|
if (depth[id] !== undefined) return depth[id];
|
||||||
|
if (visiting.has(id)) return 0; // cycle guard
|
||||||
|
visiting.add(id);
|
||||||
|
const parents = deps[id] || [];
|
||||||
|
const d = parents.length === 0 ? 0 : Math.max(...parents.map((p) => computeDepth(p, visiting))) + 1;
|
||||||
|
visiting.delete(id);
|
||||||
|
depth[id] = d;
|
||||||
|
return d;
|
||||||
|
};
|
||||||
|
graphNodes.forEach((n) => computeDepth(n.id, new Set()));
|
||||||
|
|
||||||
|
const byDepth: Record<number, number[]> = {};
|
||||||
|
graphNodes.forEach((n) => {
|
||||||
|
const d = depth[n.id] ?? 0;
|
||||||
|
if (!byDepth[d]) byDepth[d] = [];
|
||||||
|
byDepth[d].push(n.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
const positions: Record<number, { x: number; y: number }> = {};
|
||||||
|
Object.entries(byDepth).forEach(([d, ids]) => {
|
||||||
|
ids.forEach((id, idx) => {
|
||||||
|
positions[id] = { x: Number(d) * 300, y: idx * 140 };
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return positions;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DagCanvas() {
|
||||||
|
const [projects, setProjects] = useState<Project[]>([]);
|
||||||
|
const [projectId, setProjectId] = useState<number | undefined>();
|
||||||
|
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||||
|
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [executing, setExecuting] = useState(false);
|
||||||
|
const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
|
||||||
|
|
||||||
|
// Load projects
|
||||||
|
useEffect(() => {
|
||||||
|
projectApi.list().then((ps) => {
|
||||||
|
setProjects(ps);
|
||||||
|
if (ps.length > 0 && !projectId) setProjectId(ps[0].id);
|
||||||
|
});
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadGraph = useCallback(async (pid: number) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const graph = await dagApi.graph(pid);
|
||||||
|
const positions = layoutNodes(graph.nodes, graph.edges);
|
||||||
|
|
||||||
|
const rfNodes: Node[] = graph.nodes.map((n) => ({
|
||||||
|
id: String(n.id),
|
||||||
|
type: 'taskNode',
|
||||||
|
position: positions[n.id] || { x: 0, y: 0 },
|
||||||
|
data: {
|
||||||
|
taskId: n.id,
|
||||||
|
title: n.title,
|
||||||
|
status: n.status,
|
||||||
|
priority: n.priority,
|
||||||
|
requires_review: n.requires_review,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
const rfEdges: Edge[] = graph.edges.map((e) => ({
|
||||||
|
id: e.id,
|
||||||
|
source: String(e.source),
|
||||||
|
target: String(e.target),
|
||||||
|
markerEnd: { type: MarkerType.ArrowClosed },
|
||||||
|
style: { strokeWidth: 2 },
|
||||||
|
}));
|
||||||
|
|
||||||
|
setNodes(rfNodes);
|
||||||
|
setEdges(rfEdges);
|
||||||
|
} catch {
|
||||||
|
message.error('加载DAG图失败');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [setNodes, setEdges]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (projectId) loadGraph(projectId);
|
||||||
|
}, [projectId, loadGraph]);
|
||||||
|
|
||||||
|
// Connect: add dependency (drag from source(bottom) to target(top))
|
||||||
|
const onConnect = useCallback(
|
||||||
|
async (conn: Connection) => {
|
||||||
|
if (!conn.source || !conn.target || !projectId) return;
|
||||||
|
try {
|
||||||
|
await dagApi.addDependency({
|
||||||
|
task_id: Number(conn.target),
|
||||||
|
depends_on_id: Number(conn.source),
|
||||||
|
});
|
||||||
|
setEdges((eds) =>
|
||||||
|
addEdge(
|
||||||
|
{
|
||||||
|
...conn,
|
||||||
|
id: `e${conn.source}-${conn.target}`,
|
||||||
|
markerEnd: { type: MarkerType.ArrowClosed },
|
||||||
|
style: { strokeWidth: 2 },
|
||||||
|
},
|
||||||
|
eds
|
||||||
|
)
|
||||||
|
);
|
||||||
|
message.success('依赖已添加');
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const e = err as { response?: { data?: { detail?: string } } };
|
||||||
|
message.error(e.response?.data?.detail || '添加依赖失败');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[projectId, setEdges]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Delete selected edge
|
||||||
|
const removeSelectedEdge = useCallback(async () => {
|
||||||
|
if (!selectedEdge) return;
|
||||||
|
const source = Number(selectedEdge.source);
|
||||||
|
const target = Number(selectedEdge.target);
|
||||||
|
try {
|
||||||
|
await dagApi.removeDependency({ task_id: target, depends_on_id: source });
|
||||||
|
setEdges((eds) => eds.filter((e) => e.id !== selectedEdge.id));
|
||||||
|
message.success('依赖已移除');
|
||||||
|
setSelectedEdge(null);
|
||||||
|
} catch {
|
||||||
|
message.error('移除依赖失败');
|
||||||
|
}
|
||||||
|
}, [selectedEdge, setEdges]);
|
||||||
|
|
||||||
|
// Execute DAG
|
||||||
|
const executeAll = useCallback(() => {
|
||||||
|
if (!projectId || nodes.length === 0) return;
|
||||||
|
Modal.confirm({
|
||||||
|
title: '执行 DAG 编排',
|
||||||
|
content: `将按依赖顺序执行项目内全部 ${nodes.length} 个任务，确认执行？`,
|
||||||
|
okText: '开始执行',
|
||||||
|
cancelText: '取消',
|
||||||
|
onOk: async () => {
|
||||||
|
setExecuting(true);
|
||||||
|
try {
|
||||||
|
const taskIds = nodes.map((n) => Number(n.id));
|
||||||
|
const res = await dagApi.execute({ project_id: projectId, task_ids: taskIds });
|
||||||
|
const r = res.results as Record<string, number> | undefined;
|
||||||
|
Modal.success({
|
||||||
|
title: 'DAG 执行完成',
|
||||||
|
content: r
|
||||||
|
? `成功 ${r.success ?? 0} / 失败 ${r.failed ?? 0} / 阻塞 ${r.blocked ?? 0} / 跳过 ${r.skipped ?? 0}`
|
||||||
|
: '执行完成',
|
||||||
|
});
|
||||||
|
await loadGraph(projectId);
|
||||||
|
} catch {
|
||||||
|
message.error('DAG 执行失败');
|
||||||
|
} finally {
|
||||||
|
setExecuting(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, [projectId, nodes, loadGraph]);
|
||||||
|
|
||||||
|
const minimap = useMemo(
|
||||||
|
() => (
|
||||||
|
<MiniMap
|
||||||
|
nodeColor={(n) => {
|
||||||
|
const s = (n.data as { status?: TaskStatus }).status;
|
||||||
|
return s ? taskStatusConfig[s].color : '#8c8c8c';
|
||||||
|
}}
|
||||||
|
pannable
|
||||||
|
zoomable
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Card
|
||||||
|
title="DAG 编排画布"
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Select
|
||||||
|
style={{ width: 220 }}
|
||||||
|
placeholder="选择项目"
|
||||||
|
value={projectId}
|
||||||
|
onChange={setProjectId}
|
||||||
|
options={projects.map((p) => ({ label: p.name, value: p.id }))}
|
||||||
|
/>
|
||||||
|
<Tooltip title="刷新">
|
||||||
|
<Button icon={<ReloadOutlined />} onClick={() => projectId && loadGraph(projectId)} loading={loading} />
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title={selectedEdge ? '删除选中的依赖连线' : '先点击选中一条连线'}>
|
||||||
|
<Button
|
||||||
|
danger
|
||||||
|
icon={<DeleteOutlined />}
|
||||||
|
disabled={!selectedEdge}
|
||||||
|
onClick={removeSelectedEdge}
|
||||||
|
>
|
||||||
|
删除依赖
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<ThunderboltOutlined />}
|
||||||
|
onClick={executeAll}
|
||||||
|
loading={executing}
|
||||||
|
disabled={nodes.length === 0}
|
||||||
|
>
|
||||||
|
执行 DAG
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div style={{ marginBottom: 8 }}>
|
||||||
|
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||||
|
操作说明：从节点底部拖拽到另一节点顶部可建立依赖（上游 → 下游）；点击连线可选中并删除；支持拖拽移动节点、缩放画布。
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
<div style={{ height: 'calc(100vh - 260px)', minHeight: 480, border: '1px solid #f0f0f0', borderRadius: 8 }}>
|
||||||
|
{nodes.length === 0 && !loading ? (
|
||||||
|
<Empty description="该项目暂无任务，请先在任务管理中创建任务" style={{ marginTop: 120 }} />
|
||||||
|
) : (
|
||||||
|
<ReactFlow
|
||||||
|
nodes={nodes}
|
||||||
|
edges={edges}
|
||||||
|
onNodesChange={onNodesChange}
|
||||||
|
onEdgesChange={onEdgesChange}
|
||||||
|
onConnect={onConnect}
|
||||||
|
onEdgeClick={(_, edge) => setSelectedEdge(edge)}
|
||||||
|
onPaneClick={() => setSelectedEdge(null)}
|
||||||
|
nodeTypes={nodeTypes}
|
||||||
|
fitView
|
||||||
|
deleteKeyCode={[]}
|
||||||
|
>
|
||||||
|
<Background gap={16} />
|
||||||
|
<Controls />
|
||||||
|
{minimap}
|
||||||
|
</ReactFlow>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user