依赖编辑

packages/yili-dag/src/Dag.tsx

@@ -269,6 +269,16 @@ export default class Dag extends React.Component<any, any> {
     this.setState({ scriptInputNodes: input_nodes });
   };
 
+  saveData = () => {
+    const text = this.props.context.current;
+    text.ready.then(() => {
+      const dagJson: any = text.model.toJSON();
+      this.props.saveGraph(
+        DagToData(this.state.dagGraph, this.state.dagId, dagJson.requirements)
+      );
+    });
+  };
+
   executeDagData = async (script_nodes: any, script_edges: any) => {
     const dag_script = JSON.stringify({
       sub_nodes: script_nodes,
@@ -280,7 +290,7 @@ export default class Dag extends React.Component<any, any> {
     };
     // 执行时间长，先变更状态再处理
     this.formatNodeStatus(script_nodes);
-    this.props.saveGraph(DagToData(this.state.dagGraph, this.state.dagId));
+    this.saveData();
     const { data } = await executeDag(params);
     if (data.code === 200) {
       setTimeout(() => {
@@ -295,7 +305,7 @@ export default class Dag extends React.Component<any, any> {
           item.setData({ ...data, status: 'undone' });
         }
       });
-      this.props.saveGraph(DagToData(this.state.dagGraph, this.state.dagId));
+      this.saveData();
     }
   };
 
@@ -811,7 +821,7 @@ export default class Dag extends React.Component<any, any> {
         }
       }
     }
-    this.props.saveGraph(DagToData(this.state.dagGraph, this.state.dagId));
+    this.saveData();
   };
 
   // 容器

packages/yili-dag/src/ToolBar.tsx

@@ -15,7 +15,7 @@ import {
 } from '@ant-design/icons';
 import { DagToData } from './utils';
 // import MediateDataTable from './MediateDataTable';
-import { uploadFile } from './request';
+import { uploadFile, postRequirements, getRequirementsStatus } from './request';
 
 const Item = Toolbar.Item; // eslint-disable-line
 const Group = Toolbar.Group; // eslint-disable-line
@@ -25,7 +25,8 @@ export default class ToolBar extends React.Component<any, any> {
     super(props);
     this.state = {
       modalVisible: false,
-      packageData: ''
+      packageData: '',
+      status: ''
     };
   }
 
@@ -33,18 +34,33 @@ export default class ToolBar extends React.Component<any, any> {
     this.setState({ modalVisible: true });
   };
 
-  submitEdit = () => {
-    const node = this.props.graph.getSelectedCells()[0];
-    node.data.packageData = this.state.packageData;
-    this.setState({ modalVisible: false });
+  submitEdit = async () => {
+    const { data } = await postRequirements({
+      requirements: this.state.packageData,
+      dag_uuid: this.props.dagId
+    });
+    if (data.code === 200) {
+      this.props.saveGraph(
+        DagToData(this.props.graph, this.props.dagId, this.state.packageData)
+      );
+      this.setState({ modalVisible: false });
+      message.success('添加成功');
+    } else {
+      message.success(data.msg);
+    }
   };
 
   onClick = (name: string) => {
-    // const zoomNumber = this.props.graph.zoom()
     switch (name) {
       case 'save':
-        this.props.saveGraph(DagToData(this.props.graph, this.props.dagId));
-        message.success('保存成功！');
+        const text = this.props.context.current;
+        text.ready.then(() => {
+          const dagJson: any = text.model.toJSON();
+          this.props.saveGraph(
+            DagToData(this.props.graph, this.props.dagId, dagJson.requirements)
+          );
+          message.success('保存成功！');
+        });
         break;
       case 'zoomOut':
         this.props.graph.zoom(-0.1, {
@@ -60,26 +76,46 @@ export default class ToolBar extends React.Component<any, any> {
     }
   };
 
-  async uploadDagFile() {
+  uploadDagFile() {
     const text = this.props.context.current;
     const filename = text.path.split('/').pop();
-    const content = JSON.stringify(
-      DagToData(this.props.graph, this.props.dagId)
-    );
-    let blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
-    let file = new File([blob], filename, {
-      lastModified: Date.now()
+    text.ready.then(async () => {
+      const dagJson: any = text.model.toJSON();
+      const content = JSON.stringify(
+        DagToData(this.props.graph, this.props.dagId, dagJson.requirements)
+      );
+      let blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+      let file = new File([blob], filename, {
+        lastModified: Date.now()
+      });
+      const dagfile = new FormData();
+      dagfile.append('file', file);
+      dagfile.append('project_id', 'test');
+      dagfile.append('file_type', 'dag');
+      const { data } = await uploadFile(dagfile);
+      if (data.code === 200) {
+        message.success('上传成功');
+      } else {
+        message.error(data.msg);
+      }
+    });
+  }
+
+  openRequirements() {
+    const text = this.props.context.current;
+    text.ready.then(async () => {
+      const dagJson: any = text.model.toJSON();
+      const { data } = await getRequirementsStatus(this.props.dagId);
+      if (data.code === 200) {
+        this.setState({
+          modalVisible: true,
+          packageData: dagJson.requirements,
+          status: data.data
+        });
+      } else {
+        message.success(data.msg);
+      }
     });
-    const dagfile = new FormData();
-    dagfile.append('file', file);
-    dagfile.append('project_id', 'test');
-    dagfile.append('file_type', 'dag');
-    const { data } = await uploadFile(dagfile);
-    if (data.code === 200) {
-      message.success('上传成功');
-    } else {
-      message.error(data.msg);
-    }
   }
 
   DropDown(toolType: string) {
@@ -113,19 +149,7 @@ export default class ToolBar extends React.Component<any, any> {
             <MenuItem
               name="packageEdit"
               onClick={() => {
-                const selected = this.props.graph.getSelectedCells();
-                if (
-                  selected.length === 1 &&
-                  selected[0].data &&
-                  selected[0].data.type === 'script'
-                ) {
-                  this.setState({
-                    modalVisible: true,
-                    packageData: selected[0].data.packageData
-                  });
-                } else {
-                  message.warning('请选择单个脚本节点');
-                }
+                this.openRequirements();
               }}
             >
               依赖编辑
@@ -188,6 +212,8 @@ export default class ToolBar extends React.Component<any, any> {
           }}
         >
           <Form
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 18 }}
             initialValues={{
               packageData: this.state.packageData
             }}
@@ -201,6 +227,9 @@ export default class ToolBar extends React.Component<any, any> {
                 }}
               />
             </Form.Item>
+            <Form.Item label="状态" name="status">
+              <span>{this.state.status}</span>
+            </Form.Item>
           </Form>
         </Modal>
       </div>

packages/yili-dag/src/index.ts

@@ -122,23 +122,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
             const dagJson = {
               id: 'uuid1',
               requirements: '',
-              user_name: 'xxx',
-              user_id: 1,
-              project_name: 'dfs',
-              project_id: 123,
-              nodes: [
-                {
-                  id: 'node-uuid',
-                  op: 'python/sql/spark/datasource',
-                  data: {
-                    input: ['input1', 'input2'],
-                    output: ['output1', 'o2'],
-                    itermidate_data: ['hdfs://host:port/uri'],
-                    script: ''
-                  },
-                  datasource_table: 'uri'
-                }
-              ],
+              nodes: [],
               edges: []
             };
             const newWidget = await app.commands.execute(

packages/yili-dag/src/request.ts

@@ -120,3 +120,16 @@ export const getSqlDsTable = (table_name: string) =>
     url: `/jpt/datamanagement/table_content?table_name=${table_name}&page=${1}&size=${100}`,
     method: 'get'
   });
+
+export const postRequirements = (params: any) =>
+  request({
+    url: `/jpt/dag/install_requirements`,
+    method: 'post',
+    data: params
+  });
+
+export const getRequirementsStatus = (id: string) =>
+  request({
+    url: `/jpt/dag/requirements_status?dag_uuid=${id}`,
+    method: 'get'
+  });

packages/yili-dag/src/utils.ts

@@ -1,10 +1,11 @@
 // 数据转化
-export const DagToData = (graph: any, dagId: any) => {
+export const DagToData = (graph: any, dagId: any, requirements: any) => {
   const dagData = graph.toJSON();
   const { edges, nodes } = getEdgesAndNodes(graph);
   // const { script_nodes, script_edges } = getScriptEdgesAndNodes(graph);
   return {
     dag_id: dagId,
+    requirements,
     user_name: 'XXX',
     user_id: 1,
     nodes_task_name: 'dfs',

untitled1.dag

@@ -0,0 +1 @@
+{"dag_id":"b4IOpUcybv9s7z3T2T7pX","requirements":"132131212313","user_name":"XXX","user_id":1,"nodes_task_name":"dfs","nodes_task_id":123,"itermidate_data":["hdfs://host:port/uri"],"nodes":[],"edges":[],"graph":{"cells":[]}}