Merge branch 'jupyter' into dev_jupyter

merge jupyter

public/react/src/App.js

@@ -617,7 +617,11 @@ class App extends Component {
 
 								{/* jupyter */}
 								<Route path="/tasks/:identifier/jupyter/"
-									component={JupyterTPI}
+									render={
+										(props) => {
+											return (<JupyterTPI {...this.props} {...props} {...this.state}/>)
+										}
+									}
 								/>
 
 								<Route path="/tasks/:stageId" component={IndexWrapperComponent}/>

public/react/src/AppConfig.js

@@ -52,7 +52,7 @@ export function initAxiosInterceptors(props) {
 			//proxy="http://47.96.87.25:48080"
 			proxy="https://pre-newweb.educoder.net"
             proxy="https://test-newweb.educoder.net"
-            proxy="https://test-jupyterweb.educoder.net/"
+            proxy="https://test-jupyterweb.educoder.net"
 	     //proxy="http://192.168.2.63:3001"
 
     // 在这里使用requestMap控制，避免用户通过双击等操作发出重复的请求；

public/react/src/common/components/MyIcon.js

@@ -4,12 +4,12 @@
  * @Github: 
  * @Date: 2019-12-10 09:03:48
  * @LastEditors: tangjiang
- * @LastEditTime: 2019-12-10 09:05:41
+ * @LastEditTime: 2019-12-12 10:53:47
  */
 import { Icon } from 'antd';
 
 const MyIcon = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_1535266_ss6796i6f6j.js'
+  scriptUrl: '//at.alicdn.com/t/font_1535266_i4ilpm93kp.js'
 });
 
 export default MyIcon;

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 09:26:17
+ * @LastEditTime: 2019-12-12 11:26:33
  */
 import './index.scss';
 import React, { useEffect } from 'react';
@@ -15,14 +15,28 @@ import {
 } from 'react-redux';
 import UserInfo from '../../developer/components/userInfo';
 import actions from '../../../redux/actions';
+import LeftPane from './leftPane';
 
 function JupyterTPI (props) {
 
+  // 获取 identifier 值
+  const {
+    match: {
+      params = {}
+    },
+    getJupyterTpiDataSet,
+    getJupyterTpiUrl
+  } = props;
+
+  const {identifier} = params;
+  console.log('props: ====>>>>', identifier);
+  
   useEffect(() => {
     // 获取数据集
-
+    console.log('useEffect: ====>>>>', identifier);
+    getJupyterTpiDataSet(identifier);
     // 获取jupyter地址
-  }, []);
+  }, [identifier]);
   return (
     <div className="jupyter_area">
       <div className="jupyter_header">
@@ -40,7 +54,7 @@ function JupyterTPI (props) {
       <div className="jupyter_ctx">
         <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%">
           <div className={'split-pane-left'}>
-            左侧内容
+            <LeftPane dataSets={[]} />
           </div>
           <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
             <div>右侧内容</div>

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

@@ -0,0 +1,55 @@
+/*
+ * @Description: 
+ * @Author: tangjiang
+ * @Github: 
+ * @Date: 2019-12-12 10:34:03
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-12 11:22:11
+ */
+import './index.scss';
+import React from 'react';
+import {Icon, Empty} from 'antd';
+import MyIcon from '../../../../common/components/MyIcon';
+
+function LeftPane (props) {
+  
+  // 获取数据集
+  const { dataSets = [] } = 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()}
+    </div>
+  )
+}
+
+export default LeftPane;

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

@@ -0,0 +1,50 @@
+.jupyter_data_sets_area{
+  height: 100%;
+  .jupyter_h2_title{
+    height: 50px;
+    line-height: 50px;
+    background-color: #EEEEEE;
+    padding: 0 30px;
+    .jupyter_data_icon{
+      color: #7286ff;
+      font-size: 24px;
+      position: relative;
+      top: 2px;
+      transform: scale(1.5);
+    }
+  }
+
+  .jupyter_data_list,
+  .jupyter_empty{
+    height: calc(100vh - 110px);
+  }
+
+  .jupyter_data_list{
+    .jupyter_item{
+      line-height:45px;
+      border-bottom: 1px solid rgba(238,238,238, 1);
+      padding: 0 30px 0 60px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+      .jupyter_icon{
+        color: rgb(74, 188, 125);
+        font-size: 16px;
+        transform: scale(1.2);
+        margin-right: 5px;
+      }
+      .jupyter_name{
+        color: #000;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .jupyter_empty{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+}