ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(container): 完善容器配置表单功能

Browse Source
master
钟良源 2 months ago
parent 808f596885
commit 940c3f0682
1 changed files with 81 additions and 17 deletions
Show Stats Download Patch File Download Diff File

98
src/pages/componentDevelopment/componentEnv/containerModal.tsx
Unescape Escape View File

@ -1,8 +1,9 @@
import React, { useEffect, useState } from 'react' ;
import { Modal, Form, Select, Grid, Slider, Switch, Input, Message } from '@arco-design/web-react';
import { Modal, Form, Select, Grid, Slider, Switch, Input, InputNumber, Message } from '@arco-design/web-react';
import EditableTable from '@/components/EditableTable';
import { createInstance, localStart } from '@/api/componentInstance';
import { getHostList } from '@/api/componentDeployEnv';
import { containerRegister } from '@/api/userContainer';
const FormItem = Form.Item;
const Option = Select.Option;
@ -18,16 +19,53 @@ const runTypes = [
}
];
const netType = [
{
label: '桥接模式',
value: 'bridge'
},
{
label: '主机模式',
value: 'host'
},
{
label: '禁用网络',
value: 'null'
}
];
const portColumns = [
{
title: '主机端口',
dataIndex: 'hostPort',
editable: true
editable: true,
renderEdit: ({ value, onChange }) => (
<InputNumber
value={value}
onChange={onChange}
min={1}
max={65535}
precision={0}
placeholder="请输入端口号"
style={{ width: '100%' }}
/>
)
},
{
title: '容器端口',
dataIndex: 'containerPort',
editable: true
editable: true,
renderEdit: ({ value, onChange }) => (
<InputNumber
value={value}
onChange={onChange}
min={1}
max={65535}
precision={0}
placeholder="请输入端口号"
style={{ width: '100%' }}
/>
)
},
{
title: '备注',
@ -83,6 +121,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
const [directoryMountData, setDirectoryMountData] = useState([]); // 目录挂载数据
const [deviceMountData, setDeviceMountData] = useState([]); // 设备挂载数据
const [loading, setLoading] = useState(false);
const [hostOptions, setHostOptions] = useState([]); // 主机
const getHostOptions = async () => {
@ -115,13 +154,21 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
portMapping: portMappingData, // 端口映射
directoryMount: directoryMountData, // 目录挂载
deviceMount: deviceMountData, // 设备挂载
componentBaseId: addItem?.componentBaseId
componentBaseId: addItem?.componentBaseId,
// 下面是暂时写死的数据,
'restartPolicy': 'always',
'env': [
'GIT_USER_NAME=component',
'GIT_USER_EMAIL=componentl@component.com',
'GIT_USERNAME=component',
'GIT_PASSWORD=component',
'GIT_URL=192.168.5.119:30000'
]
};
console.log('提交数据：', submitData);
// TODO: 调用接口提交数据
// const res = await createContainerConfig(submitData);
// const res = await containerRegister(submitData);
// if (res.code === 200) {
// Message.success('容器配置成功');
// handleCancel();
@ -173,7 +220,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<Grid.Col span={12}>
<FormItem
label="部署环境："
field="tags"
field="environment"
rules={[{ required: true, message: '请选择部署环境' }]}
>
<Select
@ -191,12 +238,18 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<Grid.Col span={12}>
<FormItem
label="主机："
field="type"
field="deployEnvId"
rules={[{ required: true, message: '请选择主机' }]}
>
<Select
placeholder="请选择主机"
style={{ width: '90%' }}
onChange={(value) => {
// 选择主机后自动设置网络模式为第一个选项（桥接模式）
if (value && netType.length > 0) {
form.setFieldValue('networkMode', netType[0].value);
}
}}
>
{hostOptions.map((option, index) => (
<Option key={option.ip} value={option.id}>
@ -214,8 +267,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<Grid.Col span={12}>
<FormItem
label="CPU核数："
field="cpuCores"
rules={[{ required: true, message: '请选择CPU核数' }]}
field="cpuCount"
>
<Slider
defaultValue={1}
@ -240,7 +292,6 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<FormItem
label="是否使用GPU："
field="useGpu"
rules={[{ required: true, message: '请选择是否使用GPU' }]}
>
<Switch checkedText="ON" uncheckedText="OFF" />
</FormItem>
@ -248,8 +299,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
</Grid.Row>
<FormItem
label="最大内存："
field="maxMemory"
rules={[{ required: true, message: '请设置最大内存' }]}
field="memory"
>
<Slider
defaultValue={2048}
@ -283,7 +333,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
placeholder="请选择网络模式"
style={{ width: '90%' }}
>
{runTypes.map((option, index) => (
{netType.map((option, index) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
@ -294,7 +344,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<Grid.Col span={8}>
<FormItem
label="网卡："
field="networkCard"
field="networkType"
rules={[{ required: true, message: '请选择网卡' }]}
>
<Select
@ -313,9 +363,23 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<FormItem
label="IP："
field="ip"
rules={[{ required: true, message: '请输入IP' }]}
>
<Input style={{ width: '90%' }} allowClear placeholder="请输入IP" />
<Input
style={{ width: '90%' }}
allowClear
placeholder="请输入IP"
onBlur={(e) => {
const value = e.target.value;
if (value) {
// IP地址正则表达式
const ipRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
if (!ipRegex.test(value)) {
Message.warning('请输入有效的IP地址');
}
}
}}
/>
<div style={{ fontSize: 12, color: '#c0c4cc', marginTop: 10 }}>所属子网: -</div>
</FormItem>
</Grid.Col>
</Grid.Row>

Write Preview
Loading…
Cancel
Save