feat: 中间数据详情页

Untitled.ipynb

@@ -0,0 +1,33 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b0a82dd5-bb62-4150-85fc-cb6997dafee5",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

Untitled1.ipynb

@@ -0,0 +1,6 @@
+{
+ "cells": [],
+ "metadata": {},
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

Untitled2.ipynb

@@ -0,0 +1,75 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "34c01668-262a-4d69-b01a-1a46dd94907b",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "1"
+      ]
+     },
+     "execution_count": 1,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "803992b6-e677-4da7-a56f-d931e17b4701",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "2"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "1+1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "8c8d2b16-c64e-4eae-9362-9364e89951eb",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

packages/yili-dag/src/MediateDataInfo.tsx

@@ -1,3 +1,4 @@
+import { message, Table } from "antd";
 import React from "react";
 import { getFileData } from "./request";
 
@@ -5,17 +6,97 @@ import { getFileData } from "./request";
 export default class ToolBar extends React.Component<any, any> {
   constructor(props: any) {
     super(props)
-    this.state = {}
+    this.state = {
+      columns: [],
+      tableData: []
+    }
   }
   
   async componentDidMount(){
     console.log(this.props.dataInfo);
     const uri = this.props.dataInfo.storage_path
-    const { data } = await getFileData({uri})
-    console.log(data);
+    const data = await getFileData({uri})
+    console.log('data:', data);
+    if (data.status === 200) {
+      const fields = data.data.split('\n')[0].split(',')
+      const dataList: any = []
+      data.data.split('\n').forEach((item: any, index: any) => {
+        if (index !== 0 && index !== data.data.split('\n').length - 1) {
+          dataList.push(item.split(','))
+        }
+      })
+      const columns = fields.map((item: any) => ({title: item, dataIndex: item, key: item}))
+      console.log('columns:', columns);
+      this.setState({columns})
+      const tableData: any = dataList.map((item: any, index: number) => {
+        const formatData = {} as Record<string, any>;
+        formatData['key'] = index;
+        columns.map((val: any, index: number) => {
+          formatData[val.title] = item[index];
+        });
+        return formatData;
+      });
+      console.log('tableData:', tableData);
+      this.setState({tableData})
+    } else {
+      message.error('获取数据失败')
+    }
   }
 
   render() {
-    return (<>123</>)
+    return (
+      <div className="dataview_wrapper">
+        <div className="dataview_info">
+          <div className="table_name">{this.props.dataInfo?.name}</div>
+          <div className="dataview_row">
+            <div className="dataview_item">
+              <span className="dataview_label">数据类型</span>
+              数据表
+            </div>
+            <div className="dataview_item">
+              <span className="dataview_label">完整性</span>
+              -
+            </div>
+            <div className="dataview_item">
+              <span className="dataview_label">数据条数</span>
+              {this.state.tableData.length}
+            </div>
+          </div>
+          <div className="dataview_row">
+            <div className="dataview_item">
+              <span className="dataview_label">存储位置</span>
+              HDFS
+            </div>
+            <div className="dataview_item">
+              <span className="dataview_label">创建人</span>
+              steven
+            </div>
+            <div className="dataview_item">
+              <span className="dataview_label">占用存储</span>
+              {this.props.dataInfo?.size}
+            </div>
+          </div>
+          <div className="dataview_row">
+            <div className="dataview_item">
+              <span className="dataview_label">创建时间</span>
+              {this.props.dataInfo?.create_time}
+            </div>
+          </div>
+        </div>
+        <div className="table_title">数据预览</div>
+        <div className="table_toolbar">
+          <span className="toolbar_label">总数</span>
+          <span>{this.state.tableData.length}</span>
+          <span className="toolbar_label">列数</span>
+          <span>{this.state.columns.length}</span>
+        </div>
+        <Table
+          columns={this.state.columns}
+          dataSource={this.state.tableData}
+          pagination={{ pageSize: 50 }}
+          scroll={{ y: 380 }}
+        />
+      </div>
+    );
   }
 }

packages/yili-dag/src/MediateDataTable.tsx

@@ -30,7 +30,7 @@ export default class ToolBar extends React.Component<any, any> {
     const widget = new MainAreaWidget({
       content: ReactWidget.create(<MediateDataInfo dataInfo={dataInfo}/>)
     });
-    widget.title.label = '中间数据表单信息';
+    widget.title.label = dataInfo.name;
     widget.title.icon = dagDataIcon;
     const app: JupyterFrontEnd = (window as any).jupyterlab;
     app.shell.add(widget, 'main');

untitled.md

@@ -0,0 +1,3 @@
+# hhhh
+
+## fngh

untitled2.dag

@@ -0,0 +1 @@
+{"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"}],"edges":[]}