调整

public/react/public/js/jupyter.js

@@ -0,0 +1,11 @@
+//用于嵌入到jupyter pod中的js
+//guange 2019.12.18
+
+window.onload=function(){
+  require(["base/js/namespace"],function(Jupyter) {
+    Jupyter.notebook.save_checkpoint();
+  });
+}
+
+
+ 

public/react/src/modules/page/VNC.css

@@ -15,3 +15,28 @@
     left: 13px;
     user-select: none;
 }
+
+.jupyter_float_button {
+    background-image: url(./images/float_switch.jpg);
+    height: 112px;
+    width: 38px;
+    position: absolute;
+    right: 0px;
+    top: 32%;
+    cursor: pointer;
+    left:auto;
+    z-index: 99999999;
+}
+
+.jupyter_float_button .text {
+    position: relative;
+    writing-mode: vertical-rl;
+    top: 36px;
+    color: #fff;
+    left: 13px;
+    user-select: none;
+}
+
+.newjupyter_float_button{
+    right: 257px;
+}

public/react/src/modules/page/component/FloatButton.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import '../VNC.css'
 const $ = window.$;
 class FloatButton extends Component {
 	componentDidMount() {

public/react/src/modules/tpm/TPMBanner.js

@@ -851,8 +851,6 @@ class TPMBanner extends Component {
 
                   </li>
                 </ul>
-								{
-									this.props.is_jupyter===true?"":
 
                       <Popover placement="right" content={
                         <div style={{"width": "530px"}} >
@@ -917,7 +915,7 @@ class TPMBanner extends Component {
                         </div>
                       </Popover>
 
-								}
+
 
 
                 {

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

@@ -9,10 +9,11 @@
 import './index.scss';
 import React, { useEffect, useState } from 'react';
 import SplitPane from 'react-split-pane';
-import { Button, Modal } from 'antd';
+import { Button, Modal,Drawer } from 'antd';
 import {
   connect
 } from 'react-redux';
+import FloatButton from '../../page/component/FloatButton';
 import UserInfo from '../../developer/components/userInfo';
 import actions from '../../../redux/actions';
 import LeftPane from './leftPane';
@@ -39,7 +40,9 @@ function JupyterTPI (props) {
     changeLoadingState,
     changeGetJupyterUrlState,
     jupyter_identifier,
-    changeCurrentPage
+    changeCurrentPage,
+    changeshowDrawer,
+    drawervisible,
   } = props;
 
   const {identifier} = params;  
@@ -107,6 +110,28 @@ function JupyterTPI (props) {
     })
   }
 
+
+  // 重置环境
+  const handleEnvironmentTpi = () => {
+    Modal.confirm({
+      title: '重置环境',
+      content: (
+        <p style={{ lineHeight: '24px' }}>
+          你在本文件中修改的内容将丢失,<br />
+          是否确定重置环境？
+        </p>
+      ),
+      okText: '确定',
+      cancelText: '取消',
+      onOk () {
+        // console.log('调用重置代码....', myIdentifier);
+        // if (myIdentifier) {
+        //   syncJupyterCode(myIdentifier, '重置成功');
+        // }
+      }
+    })
+  }
+
   // 退出实训
   const handleClickQuitTpi = () => {
     // console.log(jupyterInfo);
@@ -138,6 +163,13 @@ function JupyterTPI (props) {
     getJupyterTpiDataSet(jupyter_identifier);
   }
 
+  const swtichFirstDrawer = () => {
+    changeshowDrawer(!drawervisible)
+  }
+
+  const firstDrawerWidth = ()=>{
+    return 260
+  };
   return (
     <div className="jupyter_area">
       <div className="jupyter_header">
@@ -151,9 +183,17 @@ function JupyterTPI (props) {
           <Button 
             className="btn_common" 
             type="link" 
-            icon="sync"
+            icon="history"
             onClick={handleClickResetTpi}
           >重置实训</Button>
+
+          <Button
+            className="btn_common"
+            type="link"
+            icon="sync"
+            onClick={handleEnvironmentTpi}
+          >重置环境</Button>
+
           <Button 
             className="btn_common" 
             type="link" 
@@ -162,16 +202,17 @@ function JupyterTPI (props) {
           >退出实训</Button> 
         </p>
       </div>
+
       <div className="jupyter_ctx">
-        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%">
+        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="100%">
-          <div className={'split-pane-left'}>
+          {/*<div className={'split-pane-left'}>*/}
-            <LeftPane 
+          {/*  <LeftPane */}
-              dataSets={dataSets} 
+          {/*    dataSets={dataSets} */}
-              total={total}
+          {/*    total={total}*/}
-              pagination={pagination}
+          {/*    pagination={pagination}*/}
-              onPageChange={handlePageChange}
+          {/*    onPageChange={handlePageChange}*/}
-            />
+          {/*  />*/}
-          </div>
+          {/*</div>*/}
           <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
             <RightPane
               identifier={myIdentifier}
@@ -181,9 +222,21 @@ function JupyterTPI (props) {
               onReloadUrl={handleOnReloadUrl}
               onSave={handleOnSave}
             />
-            <div />
+            <FloatButton onClick={swtichFirstDrawer} className={drawervisible===false?"jupyter_float_button":"jupyter_float_button newjupyter_float_button"}>{"数据集"}</FloatButton>
           </SplitPane>
+
         </SplitPane>
+        <Drawer
+          placement={"right"}
+          closable={false}
+          mask={false}
+          // onClose={this.onClose}
+          visible={drawervisible}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Drawer>
       </div>
     </div>
   );
@@ -199,7 +252,7 @@ const mapStateToProps = (state) => {
     jupyter_pagination,
     jupyter_identifier
   } = state.jupyterReducer;
-  const { loading } = state.commonReducer;
+  const { loading ,drawervisible} = state.commonReducer;
   return {
     loading,
     jupyter_info,
@@ -208,7 +261,8 @@ const mapStateToProps = (state) => {
     jupyter_tpi_url_state,
     total: jupyter_data_set_count,
     pagination: jupyter_pagination,
-    jupyter_identifier
+    jupyter_identifier,
+    drawervisible,
   };
 }
 
@@ -221,7 +275,9 @@ const mapDispatchToProps = (dispatch) => ({
   getJupyterTpiUrl: (identifier) => dispatch(actions.getJupyterTpiUrl(identifier)),
   saveJupyterTpi: () => dispatch(actions.saveJupyterTpi()),
   changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)),
-  changeCurrentPage: (current) => dispatch(actions.changeCurrentPage(current))
+  changeCurrentPage: (current) => dispatch(actions.changeCurrentPage(current)),
+  //展开Drawer
+  changeshowDrawer: (type) => dispatch(actions.changeshowDrawer(type))
 });
 
 export default connect(

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

@@ -56,6 +56,7 @@
     line-height: 60px;
     background-color: #070F1A;
     padding-left: 30px;
+    z-index:999999;
     .jupyter_title{
       display: flex;
       flex-direction: column;

public/react/src/redux/actions/actionTypes.js

@@ -57,7 +57,8 @@ const types = {
   SAVE_JUPYTER_INFO: 'SAVE_JUPYTER_INFO', // 保存 jupyter 信息
   CHANGE_JUPYTER_URL_STATE: 'CHANGE_JUPYTER_URL_STATE', // 获取url返回的状态值
   SAVE_JUPYTER_TPI: 'SAVE_JUPYTER_TPI', // 保存 jupyter tpi
-  CHANGE_JUPYTER_CURRENT_PAGE: 'CHANGE_JUPYTER_CURRENT_PAGE'
+  CHANGE_JUPYTER_CURRENT_PAGE: 'CHANGE_JUPYTER_CURRENT_PAGE',
+  CHANGE_SHOW_DRAWER: 'CHANGE_SHOW_DRAWER',
 }
 
 export default types;

public/react/src/redux/actions/index.js

@@ -70,7 +70,8 @@ import {
   syncJupyterCode,
   changeGetJupyterUrlState,
   saveJupyterTpi,
-  changeCurrentPage
+  changeCurrentPage,
+  changeshowDrawer,
 } from './jupyter';
 
 export default {
@@ -123,6 +124,7 @@ export default {
   syncJupyterCode,
   changeGetJupyterUrlState,
   saveJupyterTpi,
-  changeCurrentPage
+  changeCurrentPage,
+  changeshowDrawer
   // isUpdateCodeCtx
 }

public/react/src/redux/actions/jupyter.js

@@ -155,3 +155,11 @@ export const changeCurrentPage = (current) => {
     payload: current
   }
 }
+
+// 改变当前页数
+export const changeshowDrawer = (type) => {
+  return {
+    type: types.CHANGE_SHOW_DRAWER,
+    payload: type
+  }
+}

public/react/src/redux/reducers/commonReducer.js

@@ -14,7 +14,8 @@ const initialState = {
   excuteState: '', // 代码执行状态
   submitLoading: false, // 提交按钮状态
   publishLoading: false, // 发布
-  isMySource: false
+  isMySource: false,
+  drawervisible:false
 }
 
 const commonReducer = (state = initialState, action) => {
@@ -50,6 +51,11 @@ const commonReducer = (state = initialState, action) => {
         ...state,
         isMySource: action.payload
       }
+    case types.CHANGE_SHOW_DRAWER:
+      return {
+        ...state,
+        drawervisible: action.payload
+      }
     default:
       return state;
   }