feat:对接接口

packages/yili-dag/src/Dag.tsx

@@ -489,7 +489,7 @@ export default class Dag extends React.Component<any, any> {
             closable={false}
             destroyOnClose={true}
             onClose={this.hideNodeInfo}
-            visible={this.state.nodeInfoVisible}
+            open={this.state.nodeInfoVisible}
             getContainer={false}
             style={{ position: 'absolute' }}
           >

packages/yili-dag/src/MediateDataInfo.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { getFileData } from "./request";
 
 
 export default class ToolBar extends React.Component<any, any> {
@@ -6,6 +7,13 @@ export default class ToolBar extends React.Component<any, any> {
     super(props)
     this.state = {}
   }
+  
+  async componentDidMount(){
+    console.log(this.props.dataInfo);
+    const uri = this.props.dataInfo.storage_path
+    const { data } = await getFileData({uri})
+    console.log(data);
+  }
 
   render() {
     return (<>123</>)

packages/yili-dag/src/MediateDataTable.tsx

@@ -1,147 +1,94 @@
 import React from "react";
-import { Space, Table, Modal, message } from 'antd';
-import { ExclamationCircleOutlined } from '@ant-design/icons'
+import { Table, message } from 'antd';
 import { MainAreaWidget, ReactWidget } from '@jupyterlab/apputils';
 import type { ColumnsType } from 'antd/es/table';
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { dagDataIcon } from './icons';
 import MediateDataInfo from './MediateDataInfo'
-
-const { confirm } = Modal
+import { getIntermediate } from "./request";
 
 
 interface DataType {
   key: string;
   name: string;
-  node: string;
-  createTime: string,
-  memory: number;
+  node_uuid: string;
+  create_time: string,
+  size: string;
 }
 
-const columns: ColumnsType<DataType> = [
-  {
-    title: '名称',
-    dataIndex: 'name',
-    key: 'name',
-    render: text => <a>{text}</a>,
-  },
-  {
-    title: '所属节点',
-    dataIndex: 'node',
-    key: 'node',
-  },
-  {
-    title: '占用内存',
-    dataIndex: 'memory',
-    key: 'memory',
-    render: (_, { memory }) => {
-      return (<>{memory}MB</>)
-    }
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    key: 'createTime',
-    render: (_, { createTime }: any) => {
-      return (<>{formatTime(createTime)}</>)
+export default class ToolBar extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      tableData: []
     }
-  },
-  {
-    title: '操作',
-    key: 'action',
-    render: (_, record) => (
-      <Space size="middle">
-        <a style={{color: '#147BD1', textDecorationLine: 'underline'}} onClick={() => {CheckDataInfo(record.key)}}>查看</a>
-        <a style={{color: '#147BD1', textDecorationLine: 'underline'}} onClick={() => {DeleteConfirm(record.key)}}>删除</a>
-      </Space>
-    ),
-  },
-];
-
-const data: DataType[] = [
-  {
-    key: '1',
-    name: 'data_slice-query-47267',
-    node: 'node1/12312412',
-    createTime: '1662531854',
-    memory: 64.33,
-  },
-  {
-    key: '2',
-    name: 'data_slice-query-47262',
-    node: 'node2/12312413',
-    createTime: '1662531854',
-    memory: 74.55,
-  },
-  {
-    key: '3',
-    name: 'data_slice-query-47263',
-    node: 'node3/12312414',
-    createTime: '1662531854',
-    memory: 37.55,
-  },
-];
+  }
 
-// 格式化时间
-const formatTime = (time: any) => {
-  const date = new Date(Number(time) * 1000)
-  const YY = date.getFullYear()
-  const MM =
-    date.getMonth() + 1 < 10
-      ? '0' + (date.getMonth() + 1)
-      : date.getMonth() + 1
-  const DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
-  const hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
-  const mm =
-    date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
-  const ss =
-    date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
-  return YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss
-}
+  // 查看中间表数据
+  CheckDataInfo(key: any){
+    const dataInfo = this.state.tableData[key]
+    const widget = new MainAreaWidget({
+      content: ReactWidget.create(<MediateDataInfo dataInfo={dataInfo}/>)
+    });
+    widget.title.label = '中间数据表单信息';
+    widget.title.icon = dagDataIcon;
+    const app: JupyterFrontEnd = (window as any).jupyterlab;
+    app.shell.add(widget, 'main');
+  }
 
-// 删除确认
-const DeleteConfirm = (key: any) => {
-  confirm({
-    title: '是否要删除该中间数据?',
-    icon: <ExclamationCircleOutlined />,
-    okText: '确认删除',
-    okType: 'danger',
-    cancelText: '取消',
-    onOk: async () => {
-      console.log(key);
-      message.success('删除成功')
+  columns: ColumnsType<DataType> = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
     },
-    onCancel() {
-      message.info('取消删除')
+    {
+      title: '所属节点',
+      dataIndex: 'node_uuid',
+      key: 'node_uuid',
     },
-  })
-}
-
-// 查看中间表数据
-const CheckDataInfo = (key: any) => {
-  const widget = new MainAreaWidget({
-    content: ReactWidget.create(<MediateDataInfo/>)
-  });
-  widget.title.label = '中间数据表单信息';
-  widget.title.icon = dagDataIcon;
-  const app: JupyterFrontEnd = (window as any).jupyterlab;
-  app.shell.add(widget, 'main');
-}
-
-export default class ToolBar extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props)
-    this.state = {}
-  }
+    {
+      title: '占用内存',
+      dataIndex: 'size',
+      key: 'size',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'create_time',
+      key: 'create_time',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <a style={{color: '#147BD1', textDecorationLine: 'underline'}} onClick={() => {this.CheckDataInfo(record.key)}}>查看</a>
+      ),
+    },
+  ];
 
-  componentDidMount(): void {
+  async componentDidMount(){
     console.log('componentDidMount')
+    const { data } = await getIntermediate({
+      project_id: 'test',
+      user_id: 'test',
+      dag_uuid: 'test'
+    })
+    if (data.code === 200) {
+      this.setState({tableData: data.data})
+    } else {
+      message.error('加载数据失败')
+    }
   }
 
   render() {
     return (
       <div className="mediate-table">
-        <Table bordered columns={columns} dataSource={data} />
+        <Table bordered columns={this.columns} dataSource={this.state.tableData.map((item: any, index: any) => {
+          return {
+            key: index,
+            ...item,
+          }
+        })} />
       </div>
     )
   }

packages/yili-dag/src/ScriptNodeInfo.tsx

@@ -247,7 +247,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           {/* 脚本编辑弹窗 */}
           <Modal
             title="编辑脚本"
-            visible={this.state.scriptModalVisible}
+            open={this.state.scriptModalVisible}
             onOk={this.submitScriptEdit}
             okText="确认修改"
             className='script-modal'

packages/yili-dag/src/ToolBar.tsx

@@ -134,7 +134,7 @@ export default class ToolBar extends React.Component<any, any> {
         {/* 脚本编辑弹窗 */}
         <Modal
           title="依赖编辑"
-          visible={this.state.modalVisible}
+          open={this.state.modalVisible}
           onOk={this.submitEdit}
           okText="确定"
           destroyOnClose={true}

packages/yili-dag/src/request.ts

@@ -14,3 +14,17 @@ export const getDebugTable = (params: any) => request({
   url: `/jpt/datamanagement/${params.user_id}/${params.project_id}`,
   method: 'get',
 })
+
+// 获取中间数据列表
+export const getIntermediate = (params: any) => request({
+  url: `/jpt/intermediate/get_intermediate`,
+  method: 'get',
+  params
+})
+
+// 获取文件信息
+export const getFileData = (params: any) => request({
+  url: `/jpt/files`,
+  method: 'get',
+  params
+})