850 lines
48 KiB
JavaScript
850 lines
48 KiB
JavaScript
import React, {useEffect, useState} from 'react';
|
||
import {
|
||
Alert,
|
||
Col,
|
||
Collapse,
|
||
Form,
|
||
Input,
|
||
InputNumber,
|
||
Modal,
|
||
Radio,
|
||
Row,
|
||
Select,
|
||
Switch,
|
||
Tooltip,
|
||
Typography
|
||
} from "antd/lib/index";
|
||
import {isEmpty} from "../../utils/utils";
|
||
import request from "../../common/request";
|
||
|
||
const {TextArea} = Input;
|
||
const {Option} = Select;
|
||
const {Text} = 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 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 [sshMode, setSshMode] = useState(model['ssh-mode']);
|
||
|
||
let initAccountTypes = []
|
||
if (model.protocol) {
|
||
initAccountTypes = protocolMapping[model.protocol];
|
||
}
|
||
let [accountTypes, setAccountTypes] = useState(initAccountTypes);
|
||
let [useSSL, setUseSSL] = useState(model['use-ssl']);
|
||
|
||
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;
|
||
case 'kubernetes':
|
||
port = 6443;
|
||
break
|
||
default:
|
||
port = 65535;
|
||
}
|
||
|
||
form.setFieldsValue({
|
||
port: port,
|
||
});
|
||
};
|
||
|
||
const handleAccountTypeChange = v => {
|
||
setAccountType(v);
|
||
model.accountType = v;
|
||
}
|
||
|
||
let [enableDrive, setEnableDrive] = useState(model['enable-drive']);
|
||
let [socksProxyEnable, setSocksProxyEnable] = useState(model['socks-proxy-enable']);
|
||
|
||
let [storages, setStorages] = useState([]);
|
||
useEffect(() => {
|
||
const getStorages = async () => {
|
||
const result = await request.get('/storages/shares');
|
||
if (result.code === 1) {
|
||
setStorages(result['data']);
|
||
}
|
||
}
|
||
getStorages();
|
||
}, []);
|
||
|
||
let [accessGateways, setAccessGateways] = useState([]);
|
||
useEffect(() => {
|
||
const getAccessGateways = async () => {
|
||
const result = await request.get('/access-gateways');
|
||
if (result.code === 1) {
|
||
setAccessGateways(result['data']);
|
||
}
|
||
}
|
||
getAccessGateways();
|
||
}, []);
|
||
|
||
return (
|
||
|
||
<Modal
|
||
title={title}
|
||
visible={visible}
|
||
maskClosable={false}
|
||
onOk={() => {
|
||
form
|
||
.validateFields()
|
||
.then(values => {
|
||
form.resetFields();
|
||
handleOk(values);
|
||
})
|
||
.catch(info => {
|
||
});
|
||
}}
|
||
centered={true}
|
||
width={1040}
|
||
onCancel={handleCancel}
|
||
confirmLoading={confirmLoading}
|
||
okText='确定'
|
||
cancelText='取消'
|
||
>
|
||
|
||
<Form form={form} {...formLayout} initialValues={model}>
|
||
<Row>
|
||
<Col span={13}>
|
||
<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 value="kubernetes">Kubernetes</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="端口号" name='port' rules={[{required: true, message: '请输入资产端口'}]}>
|
||
<InputNumber min={1} max={65535} placeholder='TCP端口'/>
|
||
</Form.Item>
|
||
|
||
{
|
||
protocol === 'kubernetes' ? <>
|
||
<Form.Item
|
||
name="namespace"
|
||
label="命名空间"
|
||
>
|
||
<Input type='text' placeholder="为空时默认使用default命名空间"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="pod"
|
||
label="pod"
|
||
rules={[{required: true, message: '请输入Pod名称'}]}
|
||
>
|
||
<Input type='text' placeholder="Kubernetes Pod的名称，其中包含与之相连的容器。"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="container"
|
||
label="容器"
|
||
>
|
||
<Input type='text' placeholder="为空时默认使用第一个容器"/>
|
||
</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' ?
|
||
<>
|
||
{protocol === 'ssh' ?
|
||
<Form.Item wrapperCol={{offset: 6}}>
|
||
<Alert
|
||
message="GUACD 对ED25519、RSA等密钥类型支持不完善，请选择原生模式进行连接。"
|
||
type="info"
|
||
/>
|
||
</Form.Item> : null}
|
||
<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' ?
|
||
<>
|
||
<input type='password' hidden={true} autoComplete='new-password'/>
|
||
<Form.Item label="授权账户" name='username'>
|
||
<Input autoComplete="off" placeholder="输入授权账户"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="授权密码" name='password'>
|
||
<Input.Password autoComplete="off" placeholder="输入授权密码"/>
|
||
</Form.Item>
|
||
</>
|
||
: null
|
||
}
|
||
|
||
{
|
||
accountType === 'private-key' ?
|
||
<>
|
||
<Form.Item wrapperCol={{offset: 6}}>
|
||
<Alert
|
||
message="GUACD 对ED25519、RSA等密钥类型支持不完善，请选择原生模式进行连接。"
|
||
type="info"
|
||
/>
|
||
</Form.Item>
|
||
|
||
<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='accessGatewayId' tooltip={'需要从接入网关才能访问的目标机器必选'}>
|
||
<Select onChange={() => null} allowClear={true}>
|
||
{accessGateways.map(item => {
|
||
return (
|
||
<Option key={item.id} value={item.id} placeholder={'需要从接入网关才能访问的目标机器必选'}>
|
||
<Tooltip placement="topLeft" title={item.name}>
|
||
{item.name}
|
||
</Tooltip>
|
||
</Option>
|
||
);
|
||
})}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<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={11}>
|
||
<Collapse
|
||
defaultActiveKey={['VNC中继', 'storage', '模式设置', '显示设置', '控制终端行为', 'socks']}
|
||
ghost>
|
||
{
|
||
protocol === 'rdp' ?
|
||
<>
|
||
<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="force-lossless"
|
||
label="无损压缩"
|
||
valuePropName="checked"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
},
|
||
]}
|
||
>
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||
</Form.Item>
|
||
</Panel>
|
||
<Panel header={<Text strong>认证</Text>} key="认证">
|
||
<Form.Item
|
||
name="domain"
|
||
label='域'
|
||
>
|
||
<Input type='text' placeholder="身份验证时使用的域"/>
|
||
</Form.Item>
|
||
</Panel>
|
||
<Panel header={<Text strong>预连接 PDU (Hyper-V / VMConnect)</Text>} key="PDU">
|
||
<Form.Item
|
||
name="preconnection-id"
|
||
label='预连接ID'
|
||
>
|
||
<Input type='text' placeholder="RDP 源的数字 ID"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="preconnection-blob"
|
||
label='预连接字符'
|
||
>
|
||
<Input type='text' placeholder="标识 RDP 源的任意字符串"/>
|
||
</Form.Item>
|
||
</Panel>
|
||
<Panel header={<Text strong>Remote App</Text>} key="remote-app">
|
||
<Form.Item
|
||
name="remote-app"
|
||
label='程序'
|
||
tooltip="指定在远程桌面上启动的RemoteApp。
|
||
如果您的远程桌面服务器支持该应用程序，则该应用程序(且仅该应用程序)对用户可见。
|
||
|
||
Windows需要对远程应用程序的名称使用特殊的符号。
|
||
远程应用程序的名称必须以两个竖条作为前缀。
|
||
例如，如果您已经在您的服务器上为notepad.exe创建了一个远程应用程序，并将其命名为“notepad”，则您将该参数设置为:“||notepad”。"
|
||
>
|
||
<Input type='text' placeholder="remote app"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="remote-app-dir"
|
||
label='工作目录'
|
||
tooltip='remote app的工作目录，如果未配置remote app，此参数无效。'
|
||
>
|
||
<Input type='text' placeholder="remote app的工作目录"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="remote-app-args"
|
||
label='参数'
|
||
tooltip='remote app的命令行参数，如果未配置remote app，此参数无效。'
|
||
>
|
||
<Input type='text' placeholder="remote app的命令行参数"/>
|
||
</Form.Item>
|
||
</Panel>
|
||
<Panel header={<Text strong>映射网络驱动器</Text>} key="storage">
|
||
<Form.Item
|
||
name="enable-drive"
|
||
label="启用"
|
||
valuePropName="checked"
|
||
>
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭"
|
||
onChange={(checked, event) => {
|
||
setEnableDrive(checked);
|
||
}}/>
|
||
</Form.Item>
|
||
{
|
||
enableDrive ?
|
||
<Form.Item
|
||
name="drive-path"
|
||
label="映射空间"
|
||
tooltip='用于文件传输的映射网络驱动器，为空时使用操作人的默认空间'
|
||
>
|
||
<Select onChange={null} allowClear placeholder='为空时使用操作人的默认空间'>
|
||
{
|
||
storages.map(item => {
|
||
return <Option
|
||
value={item['id']}>{item['name']}</Option>
|
||
})
|
||
}
|
||
</Select>
|
||
</Form.Item> : undefined
|
||
}
|
||
|
||
</Panel>
|
||
</> : undefined
|
||
}
|
||
|
||
{
|
||
protocol === 'ssh' ?
|
||
<>
|
||
<Panel header={<Text strong>模式设置</Text>} key="模式设置">
|
||
<Form.Item
|
||
name="ssh-mode"
|
||
label='连接模式'
|
||
initialValue=""
|
||
tooltip='guacd对部分SSH密钥支持不完善，当密钥类型为ED25519时请选择原生模式。'
|
||
>
|
||
<Select onChange={(value) => {
|
||
setSshMode(value)
|
||
}}>
|
||
<Option value="">guacd</Option>
|
||
<Option value="native">原生</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Panel>
|
||
{
|
||
isEmpty(sshMode) || sshMode === 'guacd' ?
|
||
<>
|
||
<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>
|
||
</> : <>
|
||
<Panel header={<Text strong>Socks 代理</Text>} key="socks">
|
||
<Form.Item
|
||
name="socks-proxy-enable"
|
||
label="使用Socks代理"
|
||
valuePropName="checked"
|
||
>
|
||
<Switch checkedChildren="是" unCheckedChildren="否"
|
||
onChange={(checked, event) => {
|
||
setSocksProxyEnable(checked);
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
{
|
||
socksProxyEnable ? <>
|
||
<Form.Item label="代理地址" name='socks-proxy-host'
|
||
rules={[{required: true}]}>
|
||
<Input placeholder="Socks 代理的主机地址"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="代理端口" name='socks-proxy-port'
|
||
rules={[{required: true}]}>
|
||
<InputNumber min={1} max={65535}
|
||
placeholder='Socks 代理的主机端口'/>
|
||
</Form.Item>
|
||
|
||
<input type='password' hidden={true}
|
||
autoComplete='new-password'/>
|
||
<Form.Item label="代理账号" name='socks-proxy-username'>
|
||
<Input autoComplete="off" placeholder="代理账号，没有可以不填"/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="代理密码" name='socks-proxy-password'>
|
||
<Input.Password autoComplete="off"
|
||
placeholder="代理密码，没有可以不填"/>
|
||
</Form.Item>
|
||
</> : undefined
|
||
}
|
||
</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='连接到VNC代理（例如UltraVNC Repeater）时要请求的目标主机。'
|
||
name='dest-host'>
|
||
<Input placeholder="目标主机"/>
|
||
</Form.Item>
|
||
<Form.Item label='目标端口'
|
||
tooltip='连接到VNC代理（例如UltraVNC Repeater）时要请求的目标端口。'
|
||
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
|
||
}
|
||
|
||
{
|
||
protocol === 'kubernetes' ?
|
||
<>
|
||
<Panel header={<Text strong>认证</Text>} key="认证">
|
||
<Form.Item
|
||
name="use-ssl"
|
||
label="使用SSL"
|
||
valuePropName="checked"
|
||
>
|
||
<Switch checkedChildren="是" unCheckedChildren="否"
|
||
onChange={(checked, event) => {
|
||
setUseSSL(checked);
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
{
|
||
useSSL ?
|
||
<>
|
||
<Form.Item
|
||
name="client-cert"
|
||
label="client-cert"
|
||
>
|
||
<Input type='text' placeholder=""/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="client-key"
|
||
label="client-key"
|
||
>
|
||
<Input type='text' placeholder=""/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="ca-cert"
|
||
label="ca-cert"
|
||
>
|
||
<Input type='text' placeholder=""/>
|
||
</Form.Item>
|
||
</> : undefined
|
||
}
|
||
|
||
|
||
<Form.Item
|
||
name="ignore-cert"
|
||
label="忽略证书"
|
||
valuePropName="checked"
|
||
>
|
||
<Switch checkedChildren="是" unCheckedChildren="否"
|
||
onChange={(checked, event) => {
|
||
|
||
}}/>
|
||
</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;
|