feat: 调整Dag文件数据格式

packages/yili-dag/src/Dag.tsx

@@ -9,6 +9,7 @@ import ScriptNodeInfo from './ScriptNodeInfo';
 import OutputNodeInfo from './OutputNodeInfo';
 import ContextMenuView from './ContextMenu';
 import ReactDOM from 'react-dom';
+import { nanoid } from 'nanoid'
 
 // 侧边栏UI组件
 const { Stencil } = Addon;
@@ -245,6 +246,7 @@ export default class Dag extends React.Component<any, any> {
     this.state = {
       nodeInfoVisible: false,
       dagGraph: null,
+      dagId: '',
       selectedNodeData: {},
       contextMenu: null,
       contextMenuNode: null,
@@ -472,6 +474,9 @@ export default class Dag extends React.Component<any, any> {
       const dagJson: any = text.model.toJSON();
       if (dagJson?.graph) {
         graph.fromJSON(dagJson.graph);
+        this.setState({ dagId: dagJson?.dag_id || nanoid().replace('-', 'a').replace('_', 'b')})
+      } else {
+        this.setState({ dagId: nanoid().replace('-', 'a').replace('_', 'b')})
       }
     });
 
@@ -638,6 +643,7 @@ export default class Dag extends React.Component<any, any> {
             className="app-tool"
             graph={this.state.dagGraph}
             saveGraph={this.props.saveGraph}
+            dagId={this.state.dagId}
           />
         </div>
       </div>
@@ -649,10 +655,12 @@ export default class Dag extends React.Component<any, any> {
 function initNodeData(newNode: Node<Node.Properties>) {
   // 节点id
   newNode.data.id = newNode.id;
+  newNode.data.nodeId = nanoid().replace('-', 'a').replace('_', 'b')
   switch (newNode.data.type) {
     case 'datasource':
       newNode.data.inputSource = undefined;
-      newNode.data.dataTable = undefined;
+      newNode.data.dataTableId = undefined;
+      newNode.data.dataTableName = undefined;
       newNode.data.nodeName = undefined;
       break;
     case 'script':

packages/yili-dag/src/DatasourceNodeInfo.tsx

@@ -37,7 +37,7 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
           layout='vertical'
           initialValues={{
             inputDatasource: this.props.nodeInfo.inputSource,
-            dataTable: this.props.nodeInfo.dataTable,
+            dataTable: this.props.nodeInfo.dataTableId,
             nodeName: this.props.nodeInfo.nodeName,
           }}
         >
@@ -51,8 +51,9 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
             <Select options={this.state.debugTable.map((item: any) => {
               return {label: item.name, value: item.id}
             })} placeholder='选择调试数据表'
-            onSelect={(val: any) => {
-              this.props.nodeInfo.dataTable = val
+            onSelect={(val: any, option: any) => {
+              this.props.nodeInfo.dataTableId = val
+              this.props.nodeInfo.dataTableName = option.label
               switch(val) {
                 case 4:
                   this.props.nodeInfo.inputSource = [

packages/yili-dag/src/ScriptNodeInfo.tsx

@@ -222,7 +222,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           autoComplete="off"
           layout='vertical'
           initialValues={{
-            nodeId: this.props.nodeInfo.id,
+            nodeId: this.props.nodeInfo.nodeId,
             paramText: this.props.nodeInfo.paramText,
             nodeName: this.props.nodeInfo.nodeName,
             outputData: this.props.nodeInfo.outputData

packages/yili-dag/src/ToolBar.tsx

@@ -43,7 +43,7 @@ export default class ToolBar extends React.Component<any, any> {
     // const zoomNumber = this.props.graph.zoom()
     switch(name) {
       case 'save':
-        this.props.saveGraph(DagToData(this.props.graph.toJSON()))
+        this.props.saveGraph(DagToData(this.props.graph, this.props.dagId))
         message.success('保存成功！')
         break
       case 'zoomOut':

packages/yili-dag/src/utils.ts

@@ -1,8 +1,60 @@
-export const DagToData = (Dag: any) => {
-  console.log('Dag:', Dag);
-  const nodes: any = []
+export const DagToData = (graph: any, dagId: any) => {
+  const dagData = graph.toJSON()
   const edges: any = []
-  Dag.cells.forEach((item: any) => {
+  const nodes: any = []
+  dagData.cells.forEach((item: any) => {
+    if (item?.shape === 'dag-edge') {
+      const sourceNodeId = graph.getCellById(item.source.cell).data.nodeId
+      const targetNodeId = graph.getCellById(item.target.cell).data.nodeId
+      edges.push([sourceNodeId, targetNodeId])
+    } else {
+      switch (item.data?.type) {
+        case "datasource":
+          nodes.push({
+            id: item.data.nodeId,
+            name: item.data.nodeName,
+            type: 'datasource',
+            op: "sql",
+            script: datasourceToSql(item.data),
+            dataTableId: item.data.dataTableId,
+            fields: datasourceFields(item.data)
+          })
+          break;
+        case "outputsource":
+          /* nodes.push({
+            id: item.id,
+            name: item.data.nodeName,
+            op: "datasource",
+            data: {
+              output_source: item.data.outputSource,
+            }
+          }) */
+          break;
+        default:
+          nodes.push({
+            id: item.data.nodeId,
+            type: 'script',
+            name: item.data.nodeName,
+            op: item.data.label,
+            inputs: generateInputs(graph, item.id),
+            script: item.data.scriptText
+          })
+          break;
+      }
+    }
+  })
+  return {
+    dag_id: dagId,
+    user_name: "XXX",
+    user_id: 1,
+    nodes_task_name: "dfs",
+    nodes_task_id: 123,
+    itermidate_data: ["hdfs://host:port/uri"],
+    nodes,
+    edges,
+    graph: dagData
+  }
+  /* dagData.cells.forEach((item: any) => {
     if (item?.shape === 'dag-edge') {
       edges.push({
         id: item.id,
@@ -48,19 +100,40 @@ export const DagToData = (Dag: any) => {
           break;
       }
     }
-  });
-  return {
-    user_name: "XXX",
-    user_id: 1,
-    nodes_task_name: "dfs",
-    nodes_task_id: 123,
-    itermidate_data: ["hdfs://host:port/uri"],
-    nodes,
-    edges,
-    graph: Dag
+  }); */
+}
+
+const datasourceToSql = (nodeData: any) => {
+  const { inputSource, dataTableName } = nodeData
+  if (inputSource?.length > 0 && dataTableName) {
+    const params = inputSource.reduce((pre: any, item: any) => {
+      return item.dataSelect ? pre.concat(item.dataField) : pre
+    }, []).join(', ')
+    return params ?  `select ${params} from ${dataTableName}` : ''
+  }
+  return ''
+}
+
+const datasourceFields = (nodeData: any) => {
+  const { inputSource, dataTableName } = nodeData
+  if (inputSource?.length > 0 && dataTableName) {
+    return inputSource.filter((item: any) => item.dataSelect)
   }
+  return []
 }
 
-export const DataToDag = (Data: any) => {
-  console.log('Data:', Data);
+const generateInputs = (graph: any, id: any) => {
+  const inputsResult: any = {}
+  const edges = graph.getIncomingEdges(id)
+  if (edges?.length > 0) {
+    edges.forEach((item: any, index: any) => {
+      const sourceNode = item.getSourceNode()
+      const sourcePortID = item.getSourcePortId()
+      const sourcePorts = sourceNode.getPortsByGroup('bottom')
+      const sourceId = sourceNode.data.nodeId
+      const portNumber = sourceNode.data?.type === 'datasource' ? 0 : sourcePorts.indexOf(sourcePorts.find((item: any) => item.id === sourcePortID))
+      inputsResult[`input${index}`] = [sourceId, portNumber]
+    })
+  }
+  return inputsResult
 }