|
|
|
|
@ -9,14 +9,34 @@
|
|
|
|
|
import './index.scss';
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import SplitPane from 'react-split-pane';
|
|
|
|
|
import { Button, Modal } from 'antd';
|
|
|
|
|
import { Button, Modal,Drawer ,Pagination,Empty,Tooltip,Icon,message} 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';
|
|
|
|
|
import RightPane from './rightPane';
|
|
|
|
|
import MyIcon from "../../../common/components/MyIcon";
|
|
|
|
|
function jsCopy(s) {
|
|
|
|
|
var copyEle = document.getElementById(s);
|
|
|
|
|
const range = document.createRange(); // 创造range
|
|
|
|
|
window.getSelection().removeAllRanges(); //清除页面中已有的selection
|
|
|
|
|
range.selectNode(copyEle); // 选中需要复制的节点
|
|
|
|
|
window.getSelection().addRange(range); // 执行选中元素
|
|
|
|
|
const copyStatus = document.execCommand("Copy"); // 执行copy操作
|
|
|
|
|
// 对成功与否定进行提示
|
|
|
|
|
copyStatuss(copyStatus)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function copyStatuss(copyStatus){
|
|
|
|
|
if (copyStatus) {
|
|
|
|
|
message.success('复制成功');
|
|
|
|
|
} else {
|
|
|
|
|
message.error('复制失败');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function JupyterTPI (props) {
|
|
|
|
|
|
|
|
|
|
// 获取 identifier 值
|
|
|
|
|
@ -39,19 +59,46 @@ function JupyterTPI (props) {
|
|
|
|
|
changeLoadingState,
|
|
|
|
|
changeGetJupyterUrlState,
|
|
|
|
|
jupyter_identifier,
|
|
|
|
|
changeCurrentPage
|
|
|
|
|
changeCurrentPage,
|
|
|
|
|
changeshowDrawer,
|
|
|
|
|
drawervisible,
|
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
|
|
const emptyCtx = (
|
|
|
|
|
<div className="jupyter_empty">
|
|
|
|
|
<Empty />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
const {identifier} = params;
|
|
|
|
|
const [userInfo, setUserInfo] = useState({});
|
|
|
|
|
const [jupyterInfo, setJupyterInfo] = useState({});
|
|
|
|
|
const [updateTip, setUpdateTip] = useState(true);
|
|
|
|
|
const [myIdentifier, setMyIdentifier] = useState('');
|
|
|
|
|
const [renderCtx, setRenderCtx] = useState(() => (emptyCtx));
|
|
|
|
|
|
|
|
|
|
// 保存代码
|
|
|
|
|
const addEventListeners = () => {
|
|
|
|
|
window.addEventListener('message', (e) => {
|
|
|
|
|
console.log("触发了jupytermessage");
|
|
|
|
|
if(e){
|
|
|
|
|
if(e.data){
|
|
|
|
|
if(e.data==="jupytermessage"){
|
|
|
|
|
saveJupyterTpi();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
/* 先调用 jupyter的 TPI 接口，
|
|
|
|
|
* 获取 用户信息,
|
|
|
|
|
* 实训的 identifier, 状态， 名称， 是否被修改等信息
|
|
|
|
|
*/
|
|
|
|
|
addEventListeners()
|
|
|
|
|
getJupyterInfo(identifier);
|
|
|
|
|
}, [identifier]);
|
|
|
|
|
|
|
|
|
|
@ -107,6 +154,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 +207,54 @@ function JupyterTPI (props) {
|
|
|
|
|
getJupyterTpiDataSet(jupyter_identifier);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const swtichFirstDrawer = () => {
|
|
|
|
|
changeshowDrawer(!drawervisible)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const firstDrawerWidth = ()=>{
|
|
|
|
|
return 260
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 分页处理
|
|
|
|
|
const handleChangePage = (page) => {
|
|
|
|
|
// console.log(page, pageSize);
|
|
|
|
|
handlePageChange(page);
|
|
|
|
|
}
|
|
|
|
|
// const listCtx = ;
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (dataSets.length > 0) {
|
|
|
|
|
console.log('数据集的个数: ', dataSets.length);
|
|
|
|
|
const oList = dataSets.map((item, i) => {
|
|
|
|
|
return (
|
|
|
|
|
<li className="jupyter_item" key={`key_${i}`}>
|
|
|
|
|
<Tooltip
|
|
|
|
|
placement="right"
|
|
|
|
|
// title={item.file_path}
|
|
|
|
|
mouseLeaveDelay={0.3}
|
|
|
|
|
>
|
|
|
|
|
<Icon type="file-text" className="jupyter_icon"/>
|
|
|
|
|
<span className="jupyter_name ml10">{item.title}</span>
|
|
|
|
|
<a className={"fr color-blue"}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
jsCopy("file_path"+i)
|
|
|
|
|
}}>复制地址</a>
|
|
|
|
|
<input id={"file_path"+i} className={"file_path_input"} value={item.file_path}/>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const oUl = (
|
|
|
|
|
<ul className="jupyter_data_list">
|
|
|
|
|
{ oList }
|
|
|
|
|
</ul>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
setRenderCtx(oUl);
|
|
|
|
|
}
|
|
|
|
|
}, [props]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="jupyter_area">
|
|
|
|
|
<div className="jupyter_header">
|
|
|
|
|
@ -151,9 +268,17 @@ function JupyterTPI (props) {
|
|
|
|
|
<Button
|
|
|
|
|
className="btn_common"
|
|
|
|
|
type="link"
|
|
|
|
|
icon="sync"
|
|
|
|
|
icon="history"
|
|
|
|
|
onClick={handleClickResetTpi}
|
|
|
|
|
>重置实训</Button>
|
|
|
|
|
>重置实训</Button>
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
className="btn_common"
|
|
|
|
|
type="link"
|
|
|
|
|
icon="sync"
|
|
|
|
|
onClick={handleEnvironmentTpi}
|
|
|
|
|
>重置环境</Button>
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
className="btn_common"
|
|
|
|
|
type="link"
|
|
|
|
|
@ -162,16 +287,17 @@ function JupyterTPI (props) {
|
|
|
|
|
>退出实训</Button>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="jupyter_ctx">
|
|
|
|
|
<SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%">
|
|
|
|
|
<div className={'split-pane-left'}>
|
|
|
|
|
<LeftPane
|
|
|
|
|
dataSets={dataSets}
|
|
|
|
|
total={total}
|
|
|
|
|
pagination={pagination}
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="100%">
|
|
|
|
|
{/*<div className={'split-pane-left'}>*/}
|
|
|
|
|
{/* <LeftPane*/}
|
|
|
|
|
{/* dataSets={dataSets}*/}
|
|
|
|
|
{/* total={total}*/}
|
|
|
|
|
{/* pagination={pagination}*/}
|
|
|
|
|
{/* onPageChange={handlePageChange}*/}
|
|
|
|
|
{/* />*/}
|
|
|
|
|
{/*</div>*/}
|
|
|
|
|
<SplitPane split="vertical" defaultSize="100%" allowResize={false}>
|
|
|
|
|
<RightPane
|
|
|
|
|
identifier={myIdentifier}
|
|
|
|
|
@ -181,9 +307,38 @@ 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}
|
|
|
|
|
className={"RightPaneDrawer"}
|
|
|
|
|
>
|
|
|
|
|
<p className={"RightPaneDrawertop"}></p>
|
|
|
|
|
<div className="jupyter_data_sets_area newjupyter_data_sets_area">
|
|
|
|
|
<h2 className="jupyter_h2_title">
|
|
|
|
|
{/*<MyIcon type="iconwenti" className="jupyter_data_icon"/>*/}
|
|
|
|
|
<i className={"iconfont icon-base"}></i>数据集
|
|
|
|
|
{/* <span className="iconfont icon-java jupyter_data_icon"></span>数据集 */}
|
|
|
|
|
</h2>
|
|
|
|
|
{ renderCtx }
|
|
|
|
|
<div className='jupyter_pagination'>
|
|
|
|
|
{total<20?"":<Pagination
|
|
|
|
|
simple
|
|
|
|
|
current={pagination.page}
|
|
|
|
|
pageSize={pagination.limit}
|
|
|
|
|
total={total}
|
|
|
|
|
onChange={handleChangePage}
|
|
|
|
|
/>}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</Drawer>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
@ -199,7 +354,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 +363,8 @@ const mapStateToProps = (state) => {
|
|
|
|
|
jupyter_tpi_url_state,
|
|
|
|
|
total: jupyter_data_set_count,
|
|
|
|
|
pagination: jupyter_pagination,
|
|
|
|
|
jupyter_identifier
|
|
|
|
|
jupyter_identifier,
|
|
|
|
|
drawervisible,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -221,7 +377,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(
|
|
|
|
|
|
