github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

A 新增终止任务执行功能

4.0
vapao 2022-10-08 15:34:23 +08:00
parent 9fc7571422
commit 8f037576f1
2 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
spug_web/src/pages/exec/task/Output.js
View File

@ -5,13 +5,14 @@
*/ */
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { PageHeader } from 'antd'; import { PageHeader, Tooltip } from 'antd';
import { import {
LoadingOutlined, LoadingOutlined,
CheckCircleOutlined, CheckCircleOutlined,
ExclamationCircleOutlined, ExclamationCircleOutlined,
CodeOutlined, CodeOutlined,
ClockCircleOutlined, ClockCircleOutlined,
StopOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { FitAddon } from 'xterm-addon-fit'; import { FitAddon } from 'xterm-addon-fit';
import { Terminal } from 'xterm'; import { Terminal } from 'xterm';
@ -26,7 +27,8 @@ function OutView(props) {
const el = useRef() const el = useRef()
const [term] = useState(new Terminal()); const [term] = useState(new Terminal());
const [fitPlugin] = useState(new FitAddon()); const [fitPlugin] = useState(new FitAddon());
const [current, setCurrent] = useState(Object.keys(store.outputs)[0]) const [current, setCurrent] = useState(Object.keys(store.outputs)[0]);
const [loading, setLoading] = useState(false);
useEffect(() => { useEffect(() => {
store.tag = '' store.tag = ''
@ -106,11 +108,18 @@ function OutView(props) {
term.write(store.outputs[key].data) term.write(store.outputs[key].data)
} }
function openTerminal(key) { function handleTerminate() {
window.open(`/ssh?id=${key}`) setLoading(true)
http.post('/api/exec/terminate/', {token: store.token, host_id: current})
.finally(() => setLoading(false))
}
function openTerminal() {
window.open(`/ssh?id=${current}`)
} }
const {tag, items, counter} = store const {tag, items, counter} = store
const cItem = store.outputs[current] || {}
return ( return (
<div className={style.output}> <div className={style.output}>
<div className={style.side}> <div className={style.side}>
@ -154,8 +163,21 @@ function OutView(props) {
</div> </div>
<div className={style.body}> <div className={style.body}>
<div className={style.header}> <div className={style.header}>
<div className={style.title}>{store.outputs[current].title}</div> <div className={style.title}>{cItem.title}</div>
<CodeOutlined className={style.icon} onClick={() => openTerminal(current)}/> {loading ? (
<LoadingOutlined className={style.icon} style={{color: '#faad14'}}/>
) : (
<Tooltip title="终止执行">
{cItem.status === -2 ? (
<StopOutlined className={style.icon} style={{color: '#faad14'}} onClick={handleTerminate}/>
) : (
<StopOutlined className={style.icon} style={{color: '#dfdfdf'}}/>
)}
</Tooltip>
)}
<Tooltip title="打开web终端">
<CodeOutlined className={style.icon} onClick={() => openTerminal(current)}/>
</Tooltip>
</div> </div>
<div className={style.termContainer}> <div className={style.termContainer}>
<div ref={el} className={style.term}/> <div ref={el} className={style.term}/>

2
spug_web/src/pages/exec/task/index.module.less
View File

@ -246,9 +246,11 @@
font-size: 18px; font-size: 18px;
color: #1890ff; color: #1890ff;
cursor: pointer; cursor: pointer;
margin-left: 12px;
} }
.title { .title {
flex: 1;
font-weight: 500; font-weight: 500;
} }
} }