mirror of https://github.com/openspug/spug
# 批量执行窗口增加直接打开web终端功能
parent
a7b17f09f3
commit
9c7e77f506
|
@ -6,7 +6,7 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { observer, useLocalStore } from 'mobx-react';
|
||||
import { Card, Progress, Modal, Collapse, Steps, Skeleton } from 'antd';
|
||||
import { ShrinkOutlined, CaretRightOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons';
|
||||
import { ShrinkOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons';
|
||||
import OutView from './OutView';
|
||||
import { http, X_TOKEN } from 'libs';
|
||||
import styles from './index.module.less';
|
||||
|
@ -161,10 +161,7 @@ function Ext1Console(props) {
|
|||
</Collapse>
|
||||
)}
|
||||
|
||||
<Collapse
|
||||
defaultActiveKey="0"
|
||||
className={styles.collapse}
|
||||
expandIcon={({isActive}) => <CaretRightOutlined style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
|
||||
<Collapse defaultActiveKey="0" className={styles.collapse}>
|
||||
{Object.entries(hosts).map(([key, item], index) => (
|
||||
<Collapse.Panel
|
||||
key={index}
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { observer, useLocalStore } from 'mobx-react';
|
||||
import { Card, Progress, Modal, Collapse, Steps, Skeleton } from 'antd';
|
||||
import { ShrinkOutlined, CaretRightOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons';
|
||||
import { ShrinkOutlined, LoadingOutlined, CloseOutlined, CodeOutlined } from '@ant-design/icons';
|
||||
import OutView from './OutView';
|
||||
import { http, X_TOKEN } from 'libs';
|
||||
import styles from './index.module.less';
|
||||
|
@ -171,8 +171,7 @@ function Ext2Console(props) {
|
|||
accordion
|
||||
defaultActiveKey="0"
|
||||
className={styles.collapse}
|
||||
style={{marginTop: sActions.length > 0 ? 24 : 0}}
|
||||
expandIcon={({isActive}) => <CaretRightOutlined style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
|
||||
style={{marginTop: sActions.length > 0 ? 24 : 0}}>
|
||||
{hostOutputs.map((item, index) => (
|
||||
<Collapse.Panel
|
||||
key={index}
|
||||
|
|
|
@ -6,12 +6,12 @@
|
|||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import {
|
||||
CaretRightOutlined,
|
||||
CheckCircleTwoTone,
|
||||
LoadingOutlined,
|
||||
WarningTwoTone,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined
|
||||
FullscreenExitOutlined,
|
||||
CodeOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Modal, Collapse, Tooltip } from 'antd';
|
||||
import OutView from './OutView';
|
||||
|
@ -82,27 +82,26 @@ class ExecConsole extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
genExtra = (status, key) => {
|
||||
if (status === -2) {
|
||||
return <LoadingOutlined style={{fontSize: 20, color: '#108ee9'}}/>;
|
||||
} else if (status === 0) {
|
||||
return (
|
||||
<div style={{display: 'flex', alignItems: 'center'}}>
|
||||
<pre className={styles.header2}>{this.lastOutputs[key]}</pre>
|
||||
<CheckCircleTwoTone style={{fontSize: 20}} twoToneColor="#52c41a"/>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div style={{display: 'flex', alignItems: 'center'}}>
|
||||
<pre className={styles.header2}>{this.lastOutputs[key]}</pre>
|
||||
<Tooltip title={`退出状态码:${status}`}>
|
||||
<WarningTwoTone style={{fontSize: 20}} twoToneColor="red"/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
};
|
||||
StatusExtra = (props) => (
|
||||
<div style={{display: 'flex', alignItems: 'center'}}>
|
||||
{props.status === -2 ? (
|
||||
<LoadingOutlined style={{fontSize: 22, color: '#108ee9'}}/>
|
||||
) : (
|
||||
<>
|
||||
<pre className={styles.header2}>{this.lastOutputs[props.id]}</pre>
|
||||
{props.status === 0 ? (
|
||||
<CheckCircleTwoTone style={{fontSize: 22}} twoToneColor="#52c41a"/>
|
||||
) : (
|
||||
<Tooltip title={`退出状态码:${props.status}`}>
|
||||
<WarningTwoTone style={{fontSize: 22}} twoToneColor="red"/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<CodeOutlined style={{fontSize: 22, color: '#1890ff', marginLeft: 16}}
|
||||
onClick={e => this.openTerminal(e, props.id)}/>
|
||||
</div>
|
||||
)
|
||||
|
||||
handleUpdate = (data) => {
|
||||
this.setState(data, () => {
|
||||
|
@ -111,6 +110,11 @@ class ExecConsole extends React.Component {
|
|||
})
|
||||
}
|
||||
|
||||
openTerminal = (e, key) => {
|
||||
e.stopPropagation()
|
||||
window.open(`/ssh?id=${key}`)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {isFullscreen, activeKey} = this.state;
|
||||
return (
|
||||
|
@ -131,13 +135,12 @@ class ExecConsole extends React.Component {
|
|||
accordion
|
||||
className={styles.collapse}
|
||||
activeKey={activeKey}
|
||||
onChange={key => this.handleUpdate({activeKey: key})}
|
||||
expandIcon={({isActive}) => <CaretRightOutlined style={{fontSize: 16}} rotate={isActive ? 90 : 0}/>}>
|
||||
onChange={key => this.handleUpdate({activeKey: key})}>
|
||||
{Object.entries(store.outputs).map(([key, item], index) => (
|
||||
<Collapse.Panel
|
||||
key={key}
|
||||
header={<div className={styles.header1}>{item['title']}</div>}
|
||||
extra={this.genExtra(item.status, key)}>
|
||||
header={<div className={styles.header1}>{item.title}</div>}
|
||||
extra={<this.StatusExtra status={item.status} id={key}/>}>
|
||||
<OutView
|
||||
isFullscreen={isFullscreen}
|
||||
getOutput={() => this.outputs[key]}
|
||||
|
|
Loading…
Reference in New Issue