|
|
/*
|
|
|
* @Description: jupyter tpi
|
|
|
* @Author: tangjiang
|
|
|
* @Github:
|
|
|
* @Date: 2019-12-11 08:35:23
|
|
|
* @LastEditors: tangjiang
|
|
|
* @LastEditTime: 2019-12-13 15:25:50
|
|
|
*/
|
|
|
import './index.scss';
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
import SplitPane from 'react-split-pane';
|
|
|
import { Button, Modal,Drawer ,Pagination,Empty,Tooltip,Icon,message,Statistic,Spin} 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 RightPane from './rightPane';
|
|
|
|
|
|
import MyIcon from "../../../common/components/MyIcon";
|
|
|
function clearSlct() {
|
|
|
if("getSelection" in window){
|
|
|
window.getSelection().removeAllRanges();
|
|
|
}else{
|
|
|
document.selection.empty();
|
|
|
};
|
|
|
}
|
|
|
function jsCopy(s) {
|
|
|
clearSlct();
|
|
|
const copyEle = document.getElementById(s);
|
|
|
copyEle.select();
|
|
|
const copyStatus=document.execCommand("Copy");
|
|
|
// 对成功与否定进行提示
|
|
|
copyStatuss(copyStatus)
|
|
|
}
|
|
|
|
|
|
function copyStatuss(copyStatus){
|
|
|
if (copyStatus) {
|
|
|
message.success('复制成功');
|
|
|
} else {
|
|
|
message.error('复制失败');
|
|
|
}
|
|
|
}
|
|
|
function JupyterTPI (props) {
|
|
|
|
|
|
// 获取 identifier 值
|
|
|
const {
|
|
|
match: {
|
|
|
params = {}
|
|
|
},
|
|
|
url,
|
|
|
loading, // 保存按钮状态
|
|
|
total,
|
|
|
pagination,
|
|
|
dataSets, // 数据集
|
|
|
jupyter_info,
|
|
|
getJupyterInfo,
|
|
|
syncJupyterCode,
|
|
|
jupyter_tpi_url_state,
|
|
|
getJupyterTpiDataSet,
|
|
|
getJupyterTpiUrl,
|
|
|
saveJupyterTpi,
|
|
|
changeLoadingState,
|
|
|
changeGetJupyterUrlState,
|
|
|
jupyter_identifier,
|
|
|
changeCurrentPage,
|
|
|
changeshowDrawer,
|
|
|
drawervisible,
|
|
|
reset_with_tpi,
|
|
|
jupytertime,
|
|
|
endjupytertime,
|
|
|
active_with_tpi,
|
|
|
spinning,
|
|
|
updataspinning,
|
|
|
jupyter_folder_name
|
|
|
} = props;
|
|
|
|
|
|
const emptyCtx = (
|
|
|
<div className="jupyter_empty">
|
|
|
<style>
|
|
|
{ `
|
|
|
.ant-empty{
|
|
|
margin-top:80px;
|
|
|
color:#fff;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
<Empty />
|
|
|
</div>
|
|
|
);
|
|
|
const { Countdown } = Statistic;
|
|
|
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));
|
|
|
|
|
|
let newHandletype=false
|
|
|
const newHandle = function (event) {
|
|
|
if(newHandletype===false){
|
|
|
newHandletype=true
|
|
|
saveJupyterTpi(event);
|
|
|
setTimeout(()=>{newHandletype=false},500)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 保存代码
|
|
|
const addEventListeners = () => {
|
|
|
window.addEventListener('message', (e) => {
|
|
|
// console.log("触发了jupytermessage");
|
|
|
if(e){
|
|
|
if(e.data){
|
|
|
if(e.data==="jupytermessage"){
|
|
|
newHandle()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const stopposttpip=(sum)=>{
|
|
|
var _iframe = document.getElementById("rightPaneframe");
|
|
|
if(_iframe == null || _iframe == undefined || _iframe == ""){
|
|
|
return;
|
|
|
}
|
|
|
if(sum===1){
|
|
|
_iframe.contentWindow.postMessage("stopParent", "*");
|
|
|
}else{
|
|
|
_iframe.contentWindow.postMessage("clonsParent", "*");
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
addEventListeners()
|
|
|
}, []);
|
|
|
|
|
|
useEffect(() => {
|
|
|
/* 先调用 jupyter的 TPI 接口，
|
|
|
* 获取 用户信息,
|
|
|
* 实训的 identifier, 状态， 名称， 是否被修改等信息
|
|
|
*/
|
|
|
getJupyterInfo(identifier);
|
|
|
}, [identifier]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
// 设置jupyter信息
|
|
|
setJupyterInfo(jupyter_info || {});
|
|
|
const {user, tpm_modified, myshixun_identifier} = jupyter_info;
|
|
|
if (user) {
|
|
|
setUserInfo(user);
|
|
|
}
|
|
|
|
|
|
if (myshixun_identifier) {
|
|
|
setMyIdentifier(myshixun_identifier);
|
|
|
}
|
|
|
|
|
|
// 同步代码
|
|
|
if (tpm_modified && updateTip && myshixun_identifier) {
|
|
|
|
|
|
setUpdateTip(false);
|
|
|
updataspinning(true)
|
|
|
Modal.confirm({
|
|
|
title: '更新通知',
|
|
|
content: (<div className="update_notice">
|
|
|
{stopposttpip(1)}
|
|
|
<p className="update_txt">该实训已更新，您选择更新后之前编写的实训代码将会丢失，如有需要请先使用【jupyter中-文件-下载】保存代码，再进行更新</p>
|
|
|
{/*<p className="update_txt">还未完成评测的任务代码，请自行保存</p>*/}
|
|
|
</div>),
|
|
|
okText: '立即更新',
|
|
|
cancelText: '稍后再说',
|
|
|
onOk () {
|
|
|
syncJupyterCode(myshixun_identifier, '同步成功');
|
|
|
},onCancel() {
|
|
|
updataspinning(false)
|
|
|
stopposttpip(2)
|
|
|
},
|
|
|
})
|
|
|
}
|
|
|
}, [props]);
|
|
|
|
|
|
|
|
|
// 重置实训
|
|
|
const handleClickResetTpi = () => {
|
|
|
stopposttpip(1)
|
|
|
updataspinning(true)
|
|
|
Modal.confirm({
|
|
|
title: '重置实训',
|
|
|
content: (
|
|
|
<p style={{ lineHeight: '24px' }}>
|
|
|
你在本文件中修改的内容将丢失,<br />
|
|
|
是否确定重新加载初始代码？
|
|
|
</p>
|
|
|
),
|
|
|
okText: '确定',
|
|
|
cancelText: '取消',
|
|
|
onOk () {
|
|
|
console.log('调用重置代码....', myIdentifier);
|
|
|
if (myIdentifier) {
|
|
|
syncJupyterCode(myIdentifier, '重置成功');
|
|
|
}
|
|
|
},
|
|
|
onCancel() {
|
|
|
stopposttpip(2)
|
|
|
updataspinning(false)
|
|
|
},
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
// 重置环境
|
|
|
const handleEnvironmentTpi = () => {
|
|
|
stopposttpip(1)
|
|
|
updataspinning(true)
|
|
|
Modal.confirm({
|
|
|
title: '重置环境',
|
|
|
content: (
|
|
|
<p style={{ lineHeight: '24px' }}>
|
|
|
是否确定重置环境？
|
|
|
</p>
|
|
|
),
|
|
|
okText: '确定',
|
|
|
cancelText: '取消',
|
|
|
onOk () {
|
|
|
console.log('调用重置代码....', myIdentifier);
|
|
|
// if (myIdentifier) {
|
|
|
//
|
|
|
// }
|
|
|
reset_with_tpi(myIdentifier, '重置成功');
|
|
|
},
|
|
|
onCancel() {
|
|
|
updataspinning(false)
|
|
|
stopposttpip(2)
|
|
|
},
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 退出实训
|
|
|
const handleClickQuitTpi = () => {
|
|
|
// console.log(jupyterInfo);
|
|
|
const { identifier } = jupyterInfo;
|
|
|
if (!identifier) return;
|
|
|
props.history.push(`/shixuns/${identifier}/challenges`);
|
|
|
}
|
|
|
|
|
|
// 重新获取 jupyter url
|
|
|
const handleOnReloadUrl = (id) => {
|
|
|
// console.log('jupyter 信息: ', jupyterInfo);
|
|
|
// 改变加载状态值
|
|
|
changeGetJupyterUrlState(-1);
|
|
|
getJupyterTpiUrl({identifier: myIdentifier});
|
|
|
}
|
|
|
|
|
|
// 保存代码
|
|
|
const handleOnSave = () => {
|
|
|
// 改变按钮状态
|
|
|
changeLoadingState(true);
|
|
|
saveJupyterTpi();
|
|
|
}
|
|
|
|
|
|
// 分页信息改变时
|
|
|
const handlePageChange = (current) => {
|
|
|
// 改变当前页
|
|
|
changeCurrentPage(current);
|
|
|
// 分页查找数据
|
|
|
getJupyterTpiDataSet(jupyter_identifier);
|
|
|
}
|
|
|
|
|
|
const swtichFirstDrawer = () => {
|
|
|
changeshowDrawer(!drawervisible)
|
|
|
}
|
|
|
|
|
|
const firstDrawerWidth = ()=>{
|
|
|
return 260
|
|
|
};
|
|
|
let newPage=false
|
|
|
// 分页处理
|
|
|
const handleChangePage = (e,page) => {
|
|
|
//滑动到底判断
|
|
|
let newscrollTop=parseInt(e.currentTarget.scrollTop);
|
|
|
let allclientHeight=e.currentTarget.clientHeight+newscrollTop;
|
|
|
if(dataSets.length<total){
|
|
|
if(e.currentTarget.scrollHeight-allclientHeight===0||e.currentTarget.scrollHeight-allclientHeight===1||e.currentTarget.scrollHeight-allclientHeight===-1){
|
|
|
handlePageChange(page+1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 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}
|
|
|
>
|
|
|
<div className="sortinxdirection">
|
|
|
<Icon type="file-text" className="jupyter_icon fl lineheighttaj filestyles" />
|
|
|
<a className="jupyter_name ml10 maxnamewidth152 lineheighttaj colorlineheighttaj" title={item.title}>{item.title}</a>
|
|
|
<a className={"fr color-blue lineheighttaj"}
|
|
|
onClick={() => {
|
|
|
jsCopy("file_path"+i)
|
|
|
}}>复制地址</a>
|
|
|
</div>
|
|
|
<input id={"file_path"+i} className={"file_path_input"} value={item.file_path}/>
|
|
|
</Tooltip>
|
|
|
</li>
|
|
|
);
|
|
|
});
|
|
|
|
|
|
const oUl = (
|
|
|
<ul className="jupyter_data_list" onScroll={(event)=>handleChangePage(event,pagination.page)} >
|
|
|
{ oList }
|
|
|
</ul>
|
|
|
);
|
|
|
|
|
|
setRenderCtx(oUl);
|
|
|
}
|
|
|
}, [props]);
|
|
|
|
|
|
const onFinish= () =>{
|
|
|
Modal.destroyAll();
|
|
|
Modal.confirm({
|
|
|
title: '倒计时截止',
|
|
|
content: (
|
|
|
<p style={{ lineHeight: '24px' }}>
|
|
|
服务已中断，是否确认重置实验环境？
|
|
|
</p>
|
|
|
),
|
|
|
okText: '确定',
|
|
|
cancelText: '取消',
|
|
|
onOk () {
|
|
|
reset_with_tpi(myIdentifier, '重置成功');
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
const endonFinish= () =>{
|
|
|
Modal.confirm({
|
|
|
title: '服务中断提醒',
|
|
|
content: (
|
|
|
<p style={{ lineHeight: '24px' }}>
|
|
|
jupyter将于<span className={"Countdownfonttpi"}><Countdown value={jupytertime} format="HH:mm:ss"/></span>时间后服务中断，是否需要延长使用时间？
|
|
|
</p>
|
|
|
),
|
|
|
okText: '立即延长',
|
|
|
cancelText: '不需要',
|
|
|
onOk () {
|
|
|
active_with_tpi(myIdentifier, '延长成功');
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
return (
|
|
|
<Spin tip="加载中..." spinning={spinning}>
|
|
|
<div className="jupyter_area">
|
|
|
<div className="jupyter_header">
|
|
|
<UserInfo userInfo={userInfo} />
|
|
|
<p className="jupyter_title">
|
|
|
<span className="title_desc" style={{ marginTop: '10px' }}>{jupyterInfo.name}</span>
|
|
|
<span className="title_time jupytertitle_time">
|
|
|
<Countdown value={jupytertime} format="HH:mm:ss" onFinish={onFinish}/>
|
|
|
<span className={"Countdowntypes"}>
|
|
|
{endjupytertime===false?"":<Countdown value={endjupytertime} format="HH:mm:ss" onFinish={endonFinish}/>}
|
|
|
</span>
|
|
|
</span>
|
|
|
</p>
|
|
|
<p className="jupyter_btn">
|
|
|
{/*sync | poweroff */}
|
|
|
<Button
|
|
|
className="btn_common"
|
|
|
type="link"
|
|
|
icon="history"
|
|
|
onClick={handleClickResetTpi}
|
|
|
>重置实训</Button>
|
|
|
|
|
|
<Button
|
|
|
className="btn_common"
|
|
|
type="link"
|
|
|
icon="sync"
|
|
|
onClick={handleEnvironmentTpi}
|
|
|
>重置环境</Button>
|
|
|
|
|
|
<Button
|
|
|
className="btn_common"
|
|
|
type="link"
|
|
|
icon="poweroff"
|
|
|
onClick={handleClickQuitTpi}
|
|
|
>退出实训</Button>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<div className="jupyter_ctx">
|
|
|
<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}
|
|
|
status={jupyter_tpi_url_state}
|
|
|
url={url}
|
|
|
loading={loading}
|
|
|
onReloadUrl={handleOnReloadUrl}
|
|
|
onSave={handleOnSave}
|
|
|
/>
|
|
|
<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 bortop17212F">
|
|
|
{/*<MyIcon type="iconwenti" className="jupyter_data_icon"/>*/}
|
|
|
<i className={"iconfont icon-base"}></i>数据集
|
|
|
{/* <span className="iconfont icon-java jupyter_data_icon"></span>数据集 */}
|
|
|
</h2>
|
|
|
{dataSets&&dataSets.length===0?"":<h2 className="borbottom17212F jupyterfilepaths bortop17212F pt5">
|
|
|
<span className={"ml50"}>文件路径</span>
|
|
|
<div className="sortinxdirection">
|
|
|
<a className="jupyter_name ml50 maxnamewidth186JUPYTER colorlineheightta height45lineheight45">{jupyter_folder_name}</a>
|
|
|
<a className={"fr color-blue font-14 height45lineheight45"}
|
|
|
onClick={() => {
|
|
|
jsCopy("jupyter_folder_name")
|
|
|
}}>复制地址</a>
|
|
|
</div>
|
|
|
<input id="jupyter_folder_name" className={"file_path_input"} value={jupyter_folder_name}/>
|
|
|
</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>
|
|
|
</Spin>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
const mapStateToProps = (state) => {
|
|
|
const {
|
|
|
jupyter_info,
|
|
|
jupyter_tpi_url,
|
|
|
jupyter_data_set,
|
|
|
jupyter_tpi_url_state,
|
|
|
jupyter_data_set_count,
|
|
|
jupyter_folder_name,
|
|
|
jupyter_pagination,
|
|
|
jupyter_identifier
|
|
|
} = state.jupyterReducer;
|
|
|
const { loading ,drawervisible,jupytertime,spinning,endjupytertime} = state.commonReducer;
|
|
|
return {
|
|
|
loading,
|
|
|
jupyter_info,
|
|
|
url: jupyter_tpi_url,
|
|
|
dataSets: jupyter_data_set,
|
|
|
jupyter_tpi_url_state,
|
|
|
total: jupyter_data_set_count,
|
|
|
pagination: jupyter_pagination,
|
|
|
jupyter_folder_name:jupyter_folder_name,
|
|
|
jupyter_identifier,
|
|
|
drawervisible,
|
|
|
jupytertime,
|
|
|
endjupytertime,
|
|
|
spinning
|
|
|
};
|
|
|
}
|
|
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
|
changeGetJupyterUrlState: (status) => dispatch(actions.changeGetJupyterUrlState(status)),
|
|
|
getJupyterInfo: (identifier) => dispatch(actions.getJupyterInfo(identifier)),
|
|
|
// 重置代码
|
|
|
syncJupyterCode: (identifier, msg) => dispatch(actions.syncJupyterCode(identifier, msg)),
|
|
|
// 重置代码
|
|
|
reset_with_tpi: (identifier, msg) => dispatch(actions.reset_with_tpi(identifier, msg)),
|
|
|
getJupyterTpiDataSet: (identifier, current) => dispatch(actions.getJupyterTpiDataSet(identifier, current)),
|
|
|
getJupyterTpiUrl: (identifier) => dispatch(actions.getJupyterTpiUrl(identifier)),
|
|
|
saveJupyterTpi: () => dispatch(actions.saveJupyterTpi()),
|
|
|
changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)),
|
|
|
changeCurrentPage: (current) => dispatch(actions.changeCurrentPage(current)),
|
|
|
//展开Drawer
|
|
|
changeshowDrawer: (type) => dispatch(actions.changeshowDrawer(type)),
|
|
|
//倒计时增加
|
|
|
addjypertime: (type) => dispatch(actions.addjypertime(type)),
|
|
|
//延时
|
|
|
active_with_tpi:(identifier, msg) => dispatch(actions.active_with_tpi(identifier, msg)),
|
|
|
updataspinning:(identifier, msg) => dispatch(actions.updataspinning(identifier, msg)),
|
|
|
});
|
|
|
|
|
|
export default connect(
|
|
|
mapStateToProps,
|
|
|
mapDispatchToProps
|
|
|
)(JupyterTPI);
|
