Skip to content

Commit

Permalink
feature: update seatunnel dag
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalencaya
kalencaya committed Jan 4, 2024
1 parent de08d02 commit 5afe64f
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 168 deletions.
1 change: 1 addition & 0 deletions ...ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/shape/connector-shape.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type {Node} from '@antv/xflow';
import {Graph, Path, register, XFlow} from '@antv/xflow';
import {Dropdown, Menu} from '@antv/x6-react-components';
import './node.less';
import '@antv/x6-react-components/dist/index.css';

const {Item: MenuItem, Divider} = Menu;

Expand Down
263 changes: 96 additions & 167 deletions scaleph-ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/shape/node.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,177 +1,106 @@
import { useCallback, useEffect } from 'react';
import { useGraphStore } from '@antv/xflow';
import React, {useEffect, useState} from 'react';
import {useIntl} from '@umijs/max';
import {useGraphStore} from '@antv/xflow';
import {EdgeOptions, NodeOptions} from "@antv/xflow/src/types";
import {Props} from "@/typings";
import {WsDiJob} from "@/services/project/typings";
import {WsDiJobService} from "@/services/project/WsDiJobService";

import { DAG_EDGE, DAG_NODE } from './connector-shape';
import {DAG_EDGE, DAG_NODE} from './connector-shape';

const InitShape = () => {
const addNodes = useGraphStore((state) => state.addNodes);
const addEdges = useGraphStore((state) => state.addEdges);
const updateNode = useGraphStore((state) => state.updateNode);
const updateEdge = useGraphStore((state) => state.updateEdge);
const InitShape: React.FC<Props<WsDiJob>> = ({data}) => {
const intl = useIntl()
const addNodes = useGraphStore((state) => state.addNodes);
const addEdges = useGraphStore((state) => state.addEdges);
const updateNode = useGraphStore((state) => state.updateNode);
const updateEdge = useGraphStore((state) => state.updateEdge);

const initEdge = useCallback(() => {
addEdges([
{
id: 'initEdge1',
shape: DAG_EDGE,
source: {
cell: 'initNode1',
port: 'initNode1-1',
},
target: {
cell: 'initNode2',
port: 'initNode2-1',
},
animated: true,
},
{
id: 'initEdge2',
shape: DAG_EDGE,
source: {
cell: 'initNode2',
port: 'initNode2-2',
},
target: {
cell: 'initNode3',
port: 'initNode3-1',
},
animated: true,
},
{
id: 'initEdge3',
shape: DAG_EDGE,
source: {
cell: 'initNode2',
port: 'initNode2-3',
},
target: {
cell: 'initNode4',
port: 'initNode4-1',
},
animated: true,
},
]);
}, [addEdges]);
const [wsDiJob, setWsDiJob] = useState<WsDiJob>()

const addNodeInit = useCallback(() => {
addNodes([
{
id: 'initNode1',
shape: DAG_NODE,
x: 490,
y: 200,
data: {
label: '读数据',
status: 'success',
},
ports: [
{
id: 'initNode1-1',
group: 'bottom',
},
],
},
{
id: 'initNode2',
shape: DAG_NODE,
x: 490,
y: 350,
data: {
label: '逻辑回归',
status: 'running',
},
ports: [
{
id: 'initNode2-1',
group: 'top',
},
{
id: 'initNode2-2',
group: 'bottom',
},
{
id: 'initNode2-3',
group: 'bottom',
},
],
},
{
id: 'initNode3',
shape: DAG_NODE,
x: 320,
y: 500,
data: {
label: '模型预测',
status: 'running',
},
ports: [
{
id: 'initNode3-1',
group: 'top',
},
{
id: 'initNode3-2',
group: 'bottom',
},
],
},
{
id: 'initNode4',
shape: DAG_NODE,
x: 670,
y: 500,
data: {
label: '读取参数',
status: 'running',
},
ports: [
useEffect(() => {
WsDiJobService.selectJobById(data.id).then((response) => {
let jobInfo = response;
let nodes: NodeOptions[] = [];
let edges: EdgeOptions[] = [];
jobInfo.jobStepList?.map((step) => {
nodes.push({
id: step.stepCode,
shape: DAG_NODE,
x: step.positionX,
y: step.positionY,
label: step.stepTitle,
ports: createPorts(step.stepType.value as string, step.stepName.value as string),
data: {
meta: {
jobId: step.jobId,
name: step.stepName.value,
type: step.stepType.value,
displayName: titleCase(step.stepName.label + ' ' + step.stepType.value),
createTime: step.createTime,
updateTime: step.updateTime
},
attrs: step.stepAttrs
},
});
});
addNodes(nodes)

jobInfo.jobLinkList?.map((link) => {
edges.push({
id: link.linkCode,
shape: DAG_EDGE,
source: {
cell: link.fromStepCode,
},
target: {
cell: link.toStepCode
},
data: {
foo: 'bar'
}
});
});
addEdges(edges)
});
}, []);

const createPorts = (type: string, name: string) => {
if (type === 'source') {
return [{
id: name + '-bottom',
group: 'bottom'
}]
} else if (type === 'sink') {
return [{
id: name + '-top',
group: 'top'
}]
} else if (type === 'transform') {
[
{
id: 'initNode4-1',
group: 'top',
id: name + '-top',
group: 'top'
},
{
id: 'initNode4-2',
group: 'bottom',
},
],
},
]);
setTimeout(() => {
updateNode('initNode2', {
data: {
status: 'success',
},
});
updateEdge('initEdge1', {
animated: false,
});
}, 1000);
setTimeout(() => {
updateNode('initNode4', {
data: {
status: 'success',
},
});
updateNode('initNode3', {
data: {
status: 'failed',
},
});
updateEdge('initEdge2', {
animated: false,
});
updateEdge('initEdge3', {
animated: false,
});
}, 2000);
}, [addNodes, updateNode, updateEdge]);
id: name + '-bottom',
group: 'bottom'
}
]
} else {
return []
}
}

useEffect(() => {
addNodeInit();
initEdge();
}, [addNodeInit, initEdge]);
const titleCase = (title: string) => {
let tmpStrArr: string[] = title.split(' ');
for (let i = 0; i < tmpStrArr.length; i++) {
tmpStrArr[i] = tmpStrArr[i].slice(0, 1).toUpperCase() + tmpStrArr[i].slice(1).toLowerCase();
}
return tmpStrArr.join(' ');
}

return null;
};
return null;
}
;

export { InitShape };
export {InitShape};
2 changes: 1 addition & 1 deletion scaleph-ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const DiJobFlow: React.FC = () => {
zIndex: -1,
}}
/>
<InitShape/>
<InitShape data={props.data}/>

<Grid type="mesh" options={{color: '#ccc', thickness: 1}}/>
<Snapline/>
Expand Down

0 comments on commit 5afe64f

Please sign in to comment.