update tpi data set show

public/react/src/modules/tpm/jupyter/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-12-11 08:35:23
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-12 18:00:03
+ * @LastEditTime: 2019-12-12 20:19:48
  */
 import './index.scss';
 import React, { useEffect, useState } from 'react';
@@ -26,6 +26,7 @@ function JupyterTPI (props) {
     },
     url,
     loading, // 保存按钮状态
+    dataSets, // 数据集
     jupyter_info,
     getJupyterInfo,
     syncJupyterCode,
@@ -151,7 +152,7 @@ function JupyterTPI (props) {
       <div className="jupyter_ctx">
         <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%">
           <div className={'split-pane-left'}>
-            <LeftPane dataSets={[]} />
+            <LeftPane dataSets={dataSets} />
           </div>
           <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
             <RightPane

public/react/src/modules/tpm/jupyter/leftPane/index.js

@@ -4,10 +4,10 @@
  * @Github: 
  * @Date: 2019-12-12 10:34:03
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-12 11:22:11
+ * @LastEditTime: 2019-12-12 20:18:46
  */
 import './index.scss';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {Icon, Empty} from 'antd';
 import MyIcon from '../../../../common/components/MyIcon';
 
@@ -16,15 +16,18 @@ function LeftPane (props) {
   // 获取数据集
   const { dataSets = [] } = props;
 
-  // 渲染数据集
-  const renderList = () => {
-    // 空数据
-    if (dataSets.length === 0) {
-      return <div className="jupyter_empty">
-        <Empty />
-      </div>
-    } else {
-      // 渲染列表
+  const emptyCtx = (
+    <div className="jupyter_empty">
+      <Empty />
+    </div>
+  );
+
+  // const listCtx = ;
+  const [renderCtx, setRenderCtx] = useState(() => (emptyCtx));
+
+  useEffect(() => {
+    if (dataSets.length > 0) {
+      console.log('数据集的个数: ', dataSets.length);
       const oList = dataSets.map((item, i) => {
         return (
           <li className="jupyter_item" key={`key_${i}`}>
@@ -33,21 +36,47 @@ function LeftPane (props) {
           </li>
         );
       });
-      return (
+
+      const oUl = (
         <ul className="jupyter_data_list">
           { oList }
         </ul>
       );
-      
+
+      setRenderCtx(oUl);
     }
-  }
+  }, [props]);
+  // 渲染数据集
+  // const renderList = () => {
+  //   // 空数据
+  //   if (dataSets.length === 0) {
+  //     return <div className="jupyter_empty">
+  //       <Empty />
+  //     </div>
+  //   } else {
+  //     // 渲染列表
+  //     const oList = dataSets.map((item, i) => {
+  //       return (
+  //         <li className="jupyter_item" key={`key_${i}`}>
+  //           <Icon type="file-text" className="jupyter_icon"/>
+  //           <span className="jupyter_name">{item.title}</span>
+  //         </li>
+  //       );
+  //     });
+  //     return (
+  //       <ul className="jupyter_data_list">
+  //         { oList }
+  //       </ul>
+  //     );
+  //   }
+  // }
 
   return (
     <div className="jupyter_data_sets_area">
       <h2 className="jupyter_h2_title">
         <MyIcon type="iconwenti" className="jupyter_data_icon"/> 数据集
       </h2>
-      {renderList()}
+      { renderCtx }
     </div>
   )
 }

public/react/src/modules/tpm/jupyter/leftPane/index.scss

@@ -17,6 +17,7 @@
   .jupyter_data_list,
   .jupyter_empty{
     height: calc(100vh - 110px);
+    overflow-y: auto;
   }
 
   .jupyter_data_list{