diff --git a/spug_web/src/pages/exec/task/Output.js b/spug_web/src/pages/exec/task/Output.js index 259f5a7..f9ab062 100644 --- a/spug_web/src/pages/exec/task/Output.js +++ b/spug_web/src/pages/exec/task/Output.js @@ -5,13 +5,14 @@ */ import React, { useEffect, useRef, useState } from 'react'; import { observer } from 'mobx-react'; -import { PageHeader } from 'antd'; +import { PageHeader, Tooltip } from 'antd'; import { LoadingOutlined, CheckCircleOutlined, ExclamationCircleOutlined, CodeOutlined, ClockCircleOutlined, + StopOutlined, } from '@ant-design/icons'; import { FitAddon } from 'xterm-addon-fit'; import { Terminal } from 'xterm'; @@ -26,7 +27,8 @@ function OutView(props) { const el = useRef() const [term] = useState(new Terminal()); 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(() => { store.tag = '' @@ -106,11 +108,18 @@ function OutView(props) { term.write(store.outputs[key].data) } - function openTerminal(key) { - window.open(`/ssh?id=${key}`) + function handleTerminate() { + 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 cItem = store.outputs[current] || {} return (
@@ -154,8 +163,21 @@ function OutView(props) {
-
{store.outputs[current].title}
- openTerminal(current)}/> +
{cItem.title}
+ {loading ? ( + + ) : ( + + {cItem.status === -2 ? ( + + ) : ( + + )} + + )} + + openTerminal(current)}/> +
diff --git a/spug_web/src/pages/exec/task/index.module.less b/spug_web/src/pages/exec/task/index.module.less index e6add70..ecf07ec 100644 --- a/spug_web/src/pages/exec/task/index.module.less +++ b/spug_web/src/pages/exec/task/index.module.less @@ -246,9 +246,11 @@ font-size: 18px; color: #1890ff; cursor: pointer; + margin-left: 12px; } .title { + flex: 1; font-weight: 500; } }