mirror of https://github.com/openspug/spug
105 lines
4.2 KiB
JavaScript
105 lines
4.2 KiB
JavaScript
import React from 'react';
|
||
import { observer } from 'mobx-react';
|
||
import { Form, Input, Button, message, Divider, Icon } from 'antd';
|
||
import Editor from 'react-ace';
|
||
import 'ace-builds/src-noconflict/mode-sh';
|
||
import 'ace-builds/src-noconflict/theme-tomorrow';
|
||
import styles from './index.module.css';
|
||
import http from 'libs/http';
|
||
import store from './store';
|
||
|
||
@observer
|
||
class Ext2Setup3 extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
loading: false,
|
||
}
|
||
}
|
||
|
||
handleSubmit = () => {
|
||
this.setState({loading: true});
|
||
const info = store.record;
|
||
info['extend'] = '2';
|
||
info['host_actions'] = info['host_actions'].filter(x => x.title && x.data);
|
||
info['server_actions'] = info['server_actions'].filter(x => x.title && x.data);
|
||
http.post('/api/app/', info)
|
||
.then(res => {
|
||
message.success('保存成功');
|
||
store.ext2Visible = false;
|
||
store.fetchRecords()
|
||
}, () => this.setState({loading: false}))
|
||
};
|
||
|
||
render() {
|
||
const server_actions = store.record['server_actions'];
|
||
const host_actions = store.record['host_actions'];
|
||
return (
|
||
<Form labelCol={{span: 6}} wrapperCol={{span: 14}} className={styles.ext2Form}>
|
||
{server_actions.map((item, index) => (
|
||
<div key={index} style={{marginBottom: 30, position: 'relative'}}>
|
||
<Form.Item required label={`本地动作${index + 1}`}>
|
||
<Input value={item['title']} onChange={e => item['title'] = e.target.value} placeholder="请输入"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item required label="执行内容">
|
||
<Editor
|
||
mode="sh"
|
||
theme="tomorrow"
|
||
width="100%"
|
||
height="100px"
|
||
value={item['data']}
|
||
onChange={v => item['data'] = v}
|
||
placeholder="请输入要执行的动作"/>
|
||
</Form.Item>
|
||
<div className={styles.delAction} onClick={() => server_actions.splice(index, 1)}>
|
||
<Icon type="minus-circle"/>移除
|
||
</div>
|
||
</div>
|
||
))}
|
||
<Form.Item wrapperCol={{span: 14, offset: 6}}>
|
||
<Button type="dashed" block onClick={() => server_actions.push({target: 'server'})}>
|
||
<Icon type="plus"/>添加本地执行动作（在服务端本地执行）
|
||
</Button>
|
||
</Form.Item>
|
||
<Divider/>
|
||
{host_actions.map((item, index) => (
|
||
<div key={index} style={{marginBottom: 30, position: 'relative'}}>
|
||
<Form.Item required label={`目标主机动作${index + 1}`}>
|
||
<Input value={item['title']} onChange={e => item['title'] = e.target.value} placeholder="请输入"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item required label="执行内容">
|
||
<Editor
|
||
mode="sh"
|
||
theme="tomorrow"
|
||
width="100%"
|
||
height="100px"
|
||
value={item['data']}
|
||
onChange={v => item['data'] = v}
|
||
placeholder="请输入要执行的动作"/>
|
||
</Form.Item>
|
||
<div className={styles.delAction} onClick={() => host_actions.splice(index, 1)}>
|
||
<Icon type="minus-circle"/>移除
|
||
</div>
|
||
</div>
|
||
))}
|
||
<Form.Item wrapperCol={{span: 14, offset: 6}}>
|
||
<Button type="dashed" block onClick={() => host_actions.push({target: 'server'})}>
|
||
<Icon type="plus"/>添加目标主机执行动作（在部署目标主机执行）
|
||
</Button>
|
||
</Form.Item>
|
||
<Form.Item wrapperCol={{span: 14, offset: 6}} help="Spug 将遵循先本地后目标主机的原则，按照顺序依次执行添加的动作，例如：本地动作1 -> 本地动作2 -> 目标主机动作1 -> 目标主机动作2 ...">
|
||
<Button
|
||
type="primary"
|
||
disabled={[...host_actions, ...server_actions].filter(x => x.title && x.data).length === 0}
|
||
loading={this.state.loading}
|
||
onClick={this.handleSubmit}>提交</Button>
|
||
<Button style={{marginLeft: 20}} onClick={() => store.page -= 1}>上一步</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default Ext2Setup3 |