507 lines
26 KiB
JavaScript
507 lines
26 KiB
JavaScript
import React, {useState} from 'react';
|
||
import {
|
||
Col,
|
||
Collapse,
|
||
Form,
|
||
Input,
|
||
InputNumber,
|
||
Modal,
|
||
Radio,
|
||
Row,
|
||
Select,
|
||
Switch,
|
||
Tooltip,
|
||
Typography
|
||
} from "antd/lib/index";
|
||
import {ExclamationCircleOutlined} from "@ant-design/icons";
|
||
|
||
const {TextArea} = Input;
|
||
const {Option} = Select;
|
||
const {Text, Title} = Typography;
|
||
const {Panel} = Collapse;
|
||
|
||
// 子级页面
|
||
// Ant form create 表单内置方法
|
||
|
||
const protocolMapping = {
|
||
'ssh': [
|
||
{text: '密码', value: 'custom'},
|
||
{text: '密钥', value: 'private-key'},
|
||
{text: '授权凭证', value: 'credential'},
|
||
],
|
||
'rdp': [{text: '密码', value: 'custom'}, {text: '授权凭证', value: 'credential'}],
|
||
'vnc': [{text: '密码', value: 'custom'}, {text: '授权凭证', value: 'credential'}],
|
||
'telnet': [{text: '密码', value: 'custom'}, {text: '授权凭证', value: 'credential'}]
|
||
}
|
||
|
||
const formLayout = {
|
||
labelCol: {span: 6},
|
||
wrapperCol: {span: 18},
|
||
};
|
||
const RDPFormItemLayout = {
|
||
labelCol: {span: 12},
|
||
wrapperCol: {span: 12},
|
||
};
|
||
const TELENETFormItemLayout = {
|
||
labelCol: {span: 8},
|
||
wrapperCol: {span: 16},
|
||
};
|
||
|
||
const AssetModal = function ({title, visible, handleOk, handleCancel, confirmLoading, credentials, tags, model}) {
|
||
|
||
const [form] = Form.useForm();
|
||
|
||
if (model.accountType === undefined) {
|
||
model.accountType = 'rdp';
|
||
}
|
||
|
||
let [accountType, setAccountType] = useState(model.accountType);
|
||
let [protocol, setProtocol] = useState(model.protocol);
|
||
|
||
let initAccountTypes = []
|
||
if (model.protocol) {
|
||
initAccountTypes = protocolMapping[model.protocol];
|
||
}
|
||
let [accountTypes, setAccountTypes] = useState(initAccountTypes);
|
||
|
||
for (let key in model) {
|
||
if (model.hasOwnProperty(key)) {
|
||
if (model[key] === '-') {
|
||
model[key] = '';
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleProtocolChange = e => {
|
||
setProtocol(e.target.value)
|
||
let port;
|
||
switch (e.target.value) {
|
||
case 'ssh':
|
||
port = 22;
|
||
setAccountTypes(protocolMapping['ssh']);
|
||
form.setFieldsValue({
|
||
accountType: 'custom',
|
||
});
|
||
handleAccountTypeChange('custom');
|
||
break;
|
||
case 'rdp':
|
||
port = 3389;
|
||
setAccountTypes(protocolMapping['rdp']);
|
||
form.setFieldsValue({
|
||
accountType: 'custom',
|
||
});
|
||
handleAccountTypeChange('custom');
|
||
break;
|
||
case 'vnc':
|
||
port = 5900;
|
||
setAccountTypes(protocolMapping['vnc']);
|
||
form.setFieldsValue({
|
||
accountType: 'custom',
|
||
});
|
||
handleAccountTypeChange('custom');
|
||
break;
|
||
case 'telnet':
|
||
port = 23;
|
||
setAccountTypes(protocolMapping['telnet']);
|
||
form.setFieldsValue({
|
||
accountType: 'custom',
|
||
});
|
||
handleAccountTypeChange('custom');
|
||
break;
|
||
default:
|
||
port = 65535;
|
||
}
|
||
|
||
form.setFieldsValue({
|
||
port: port,
|
||
});
|
||
};
|
||
|
||
const handleAccountTypeChange = v => {
|
||
setAccountType(v);
|
||
model.accountType = v;
|
||
}
|
||
|
||
return (
|
||
|
||
<Modal
|
||
title={title}
|
||
visible={visible}
|
||
maskClosable={false}
|
||
centered={true}
|
||
onOk={() => {
|
||
form
|
||
.validateFields()
|
||
.then(values => {
|
||
form.resetFields();
|
||
handleOk(values);
|
||
})
|
||
.catch(info => {
|
||
});
|
||
}}
|
||
width={1040}
|
||
onCancel={handleCancel}
|
||
confirmLoading={confirmLoading}
|
||
okText='确定'
|
||
cancelText='取消'
|
||
>
|
||
|
||
<Form form={form} {...formLayout} initialValues={model}>
|
||
<Row>
|
||
<Col span={12}>
|
||
<Form.Item name='id' noStyle>
|
||
<Input hidden={true}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="资产名称" name='name' rules={[{required: true, message: "请输入资产名称"}]}>
|
||
<Input placeholder="资产名称"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="主机" name='ip' rules={[{required: true, message: '请输入资产的主机名称或者IP地址'}]}>
|
||
<Input placeholder="资产的主机名称或者IP地址"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="接入协议" name='protocol' rules={[{required: true, message: '请选择接入协议'}]}>
|
||
<Radio.Group onChange={handleProtocolChange}>
|
||
<Radio value="rdp">rdp</Radio>
|
||
<Radio value="ssh">ssh</Radio>
|
||
<Radio value="vnc">vnc</Radio>
|
||
<Radio value="telnet">telnet</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="端口号" name='port' rules={[{required: true, message: '请输入资产端口'}]}>
|
||
<InputNumber min={1} max={65535} placeholder='TCP端口'/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="账户类型" name='accountType' rules={[{required: true, message: '请选择接账户类型'}]}>
|
||
<Select onChange={handleAccountTypeChange}>
|
||
{accountTypes.map(item => {
|
||
return (<Option key={item.value} value={item.value}>{item.text}</Option>)
|
||
})}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
{
|
||
accountType === 'credential' ?
|
||
<Form.Item label="授权凭证" name='credentialId'
|
||
rules={[{required: true, message: '请选择授权凭证'}]}>
|
||
<Select onChange={() => null}>
|
||
{credentials.map(item => {
|
||
return (
|
||
<Option key={item.id} value={item.id}>
|
||
<Tooltip placement="topLeft" title={item.name}>
|
||
{item.name}
|
||
</Tooltip>
|
||
</Option>
|
||
);
|
||
})}
|
||
</Select>
|
||
</Form.Item>
|
||
: null
|
||
}
|
||
|
||
{
|
||
accountType === 'custom' ?
|
||
<>
|
||
<Form.Item label="授权账户" name='username' noStyle={!(accountType === 'custom')}>
|
||
<Input placeholder="输入授权账户"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="授权密码" name='password' noStyle={!(accountType === 'custom')}>
|
||
<Input.Password placeholder="输入授权密码"/>
|
||
</Form.Item>
|
||
</>
|
||
: null
|
||
}
|
||
|
||
{
|
||
accountType === 'private-key' ?
|
||
<>
|
||
<Form.Item label="授权账户" name='username'>
|
||
<Input placeholder="输入授权账户"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="私钥" name='privateKey'
|
||
rules={[{required: true, message: '请输入私钥'}]}>
|
||
<TextArea rows={4}/>
|
||
</Form.Item>
|
||
<Form.Item label="私钥密码" name='passphrase'>
|
||
<TextArea rows={1}/>
|
||
</Form.Item>
|
||
</>
|
||
: null
|
||
}
|
||
|
||
<Form.Item label="标签" name='tags'>
|
||
<Select mode="tags" placeholder="标签可以更加方便的检索资产">
|
||
{tags.map(tag => {
|
||
if (tag === '-') {
|
||
return undefined;
|
||
}
|
||
return (<Option key={tag}>{tag}</Option>)
|
||
})}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="备注" name='description'>
|
||
<TextArea rows={4} placeholder='关于资产的一些信息您可以写在这里'/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Collapse defaultActiveKey={['remote-app', '认证', '显示设置', '控制终端行为', 'VNC中继']} ghost>
|
||
{
|
||
protocol === 'rdp' ?
|
||
<>
|
||
<Panel header={<Text strong>Remote App</Text>} key="remote-app">
|
||
<Form.Item
|
||
name="remote-app"
|
||
label={<Tooltip title="指定在远程桌面上启动的RemoteApp。
|
||
如果您的远程桌面服务器支持该应用程序，则该应用程序(且仅该应用程序)对用户可见。
|
||
|
||
Windows需要对远程应用程序的名称使用特殊的符号。
|
||
远程应用程序的名称必须以两个竖条作为前缀。
|
||
例如，如果您已经在您的服务器上为notepad.exe创建了一个远程应用程序，并将其命名为“notepad”，则您将该参数设置为:“||notepad”。">
|
||
程序 <ExclamationCircleOutlined/>
|
||
</Tooltip>}
|
||
>
|
||
<Input type='text' placeholder="remote app"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="remote-app-dir"
|
||
label={<Tooltip
|
||
title="remote app的工作目录，如果未配置remote app，此参数无效。">工作目录
|
||
<ExclamationCircleOutlined/></Tooltip>}
|
||
>
|
||
<Input type='text' placeholder="remote app的工作目录"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="remote-app-args"
|
||
label={<Tooltip title="remote app的命令行参数，如果未配置remote app，此参数无效。">参数
|
||
<ExclamationCircleOutlined/></Tooltip>}
|
||
>
|
||
<Input type='text' placeholder="remote app的命令行参数"/>
|
||
</Form.Item>
|
||
</Panel>
|
||
</> : undefined
|
||
}
|
||
|
||
{
|
||
protocol === 'ssh' ?
|
||
<>
|
||
<Panel header={<Text strong>显示设置</Text>} key="显示设置">
|
||
<Form.Item
|
||
name="color-scheme"
|
||
label="配色方案"
|
||
initialValue=""
|
||
>
|
||
<Select onChange={null}>
|
||
<Option value="">默认</Option>
|
||
<Option value="gray-black">黑底灰字</Option>
|
||
<Option value="green-black">黑底绿字</Option>
|
||
<Option value="white-black">黑底白字</Option>
|
||
<Option value="black-white">白底黑字</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="font-name"
|
||
label="字体名称"
|
||
>
|
||
<Input type='text' placeholder="为空时使用系统默认字体"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="font-size"
|
||
label="字体大小"
|
||
>
|
||
<Input type='number' placeholder="为空时使用系统默认字体大小" min={8} max={96}/>
|
||
</Form.Item>
|
||
</Panel>
|
||
<Panel header={<Text strong>控制终端行为</Text>} key="控制终端行为">
|
||
<Form.Item
|
||
name="backspace"
|
||
label="退格键映射"
|
||
initialValue=""
|
||
>
|
||
<Select onChange={null}>
|
||
<Option value="">默认</Option>
|
||
<Option value="127">删除键(Ctrl-?)</Option>
|
||
<Option value="8">退格键(Ctrl-H)</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="terminal-type"
|
||
label="终端类型"
|
||
initialValue=""
|
||
>
|
||
<Select onChange={null}>
|
||
<Option value="">默认</Option>
|
||
<Option value="ansi">ansi</Option>
|
||
<Option value="linux">linux</Option>
|
||
<Option value="vt100">vt100</Option>
|
||
<Option value="vt220">vt220</Option>
|
||
<Option value="xterm">xterm</Option>
|
||
<Option value="xterm-256color">xterm-256color</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Panel>
|
||
</> : undefined
|
||
}
|
||
|
||
{
|
||
protocol === 'vnc' ?
|
||
<>
|
||
<Panel header={<Text strong>显示设置</Text>} key="显示设置">
|
||
<Form.Item
|
||
name="color-depth"
|
||
label="色彩深度"
|
||
initialValue=""
|
||
>
|
||
<Select onChange={null}>
|
||
<Option value="">默认</Option>
|
||
<Option value="16">低色（16位）</Option>
|
||
<Option value="24">真彩（24位）</Option>
|
||
<Option value="32">真彩（32位）</Option>
|
||
<Option value="8">256色</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="cursor"
|
||
label="光标"
|
||
initialValue=""
|
||
>
|
||
<Select onChange={null}>
|
||
<Option value="">默认</Option>
|
||
<Option value="local">本地</Option>
|
||
<Option value="remote">远程</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Panel>
|
||
<Panel header={<Text strong>VNC中继</Text>} key="VNC中继">
|
||
<Form.Item label={<Tooltip
|
||
title="连接到VNC代理（例如UltraVNC Repeater）时要请求的目标主机。">目标主机
|
||
<ExclamationCircleOutlined/></Tooltip>}
|
||
name='dest-host'>
|
||
<Input placeholder="目标主机"/>
|
||
</Form.Item>
|
||
<Form.Item label={<Tooltip
|
||
title="连接到VNC代理（例如UltraVNC Repeater）时要请求的目标端口。">目标端口
|
||
<ExclamationCircleOutlined/></Tooltip>}
|
||
name='dest-port'>
|
||
<Input type='number' min={1} max={65535}
|
||
placeholder='目标端口'/>
|
||
</Form.Item>
|
||
</Panel>
|
||
</> : undefined
|
||
}
|
||
|
||
{
|
||
protocol === 'telnet' ?
|
||
<>
|
||
<Panel header={<Text strong>认证</Text>} key="认证">
|
||
<Form.Item
|
||
{...TELENETFormItemLayout}
|
||
name="username-regex"
|
||
label="用户名正则表达式"
|
||
>
|
||
<Input type='text' placeholder=""/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
{...TELENETFormItemLayout}
|
||
name="password-regex"
|
||
label="密码正则表达式"
|
||
>
|
||
<Input type='text' placeholder=""/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
{...TELENETFormItemLayout}
|
||
name="login-success-regex"
|
||
label="登录成功正则表达式"
|
||
>
|
||
<Input type='text' placeholder=""/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
{...TELENETFormItemLayout}
|
||
name="login-failure-regex"
|
||
label="登录失败正则表达式"
|
||
>
|
||
<Input type='text' placeholder=""/>
|
||
</Form.Item>
|
||
</Panel>
|
||
<Panel header={<Text strong>显示设置</Text>} key="显示设置">
|
||
<Form.Item
|
||
name="color-scheme"
|
||
label="配色方案"
|
||
initialValue=""
|
||
>
|
||
<Select onChange={null}>
|
||
<Option value="">默认</Option>
|
||
<Option value="gray-black">黑底灰字</Option>
|
||
<Option value="green-black">黑底绿字</Option>
|
||
<Option value="white-black">黑底白字</Option>
|
||
<Option value="black-white">白底黑字</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="font-name"
|
||
label="字体名称"
|
||
>
|
||
<Input type='text' placeholder="为空时使用系统默认字体"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="font-size"
|
||
label="字体大小"
|
||
>
|
||
<Input type='number' placeholder="为空时使用系统默认字体大小" min={8} max={96}/>
|
||
</Form.Item>
|
||
</Panel>
|
||
<Panel header={<Text strong>控制终端行为</Text>} key="控制终端行为">
|
||
<Form.Item
|
||
name="backspace"
|
||
label="退格键映射"
|
||
initialValue=""
|
||
>
|
||
<Select onChange={null}>
|
||
<Option value="">默认</Option>
|
||
<Option value="127">删除键(Ctrl-?)</Option>
|
||
<Option value="8">退格键(Ctrl-H)</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="terminal-type"
|
||
label="终端类型"
|
||
initialValue=""
|
||
>
|
||
<Select onChange={null}>
|
||
<Option value="">默认</Option>
|
||
<Option value="ansi">ansi</Option>
|
||
<Option value="linux">linux</Option>
|
||
<Option value="vt100">vt100</Option>
|
||
<Option value="vt220">vt220</Option>
|
||
<Option value="xterm">xterm</Option>
|
||
<Option value="xterm-256color">xterm-256color</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Panel>
|
||
</> : undefined
|
||
}
|
||
</Collapse>
|
||
</Col>
|
||
</Row>
|
||
|
||
|
||
</Form>
|
||
</Modal>
|
||
)
|
||
}
|
||
|
||
export default AssetModal;
|