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

feat(componentEnv): 容器配置功能增强与网络模式支持

Browse Source
master
钟良源 2 months ago
parent 8db295e871
commit e8ed0425d1
4 changed files with 113 additions and 58 deletions
Show Stats Download Patch File Download Diff File

5
src/api/componentDeploy.ts
Unescape Escape View File

@ -17,3 +17,8 @@ export function componentOnSale(params) {
export function componentOffSale(params) {
return axios.get(`${urlPrefix}/componentDeploy/stop`, { params });
}
// 网络模式获取
export function getNetworkMode(type: string, deployEnvId: string) {
return axios.get(`${urlPrefix}/componentDeployEnv/network/${type}?deployEnvId=${deployEnvId}`);
}

5
src/api/userContainer.ts
Unescape Escape View File

@ -17,3 +17,8 @@ export function startContainer(deployEnvId) {
export function stopContainer(deployEnvId) {
return axios.get(`${urlPrefix}/userContainer/${deployEnvId}/stop`);
}
// 根据组件实例ID获取容器数据
export function getContainer(deployEnvId) {
return axios.get(`${urlPrefix}/userContainer/${deployEnvId}/get`);
}

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

@ -1,9 +1,8 @@
import React, { useEffect, useState } from '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';
import { getNetworkMode } from '@/api/componentDeploy';
const FormItem = Form.Item;
const Option = Select.Option;
@ -33,7 +32,6 @@ const netType = [
value: 'null'
}
];
const portColumns = [
{
title: '主机端口',
@ -120,17 +118,12 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
const [portMappingData, setPortMappingData] = useState([]); // 端口映射数据
const [directoryMountData, setDirectoryMountData] = useState([]); // 目录挂载数据
const [deviceMountData, setDeviceMountData] = useState([]); // 设备挂载数据
const [networkTypeList, setNetworkTypeList] = useState([]); // 网卡数据列表
const [selectedNetworkType, setSelectedNetworkType] = useState([]); // 选择的网卡数据
const [loading, setLoading] = useState(false);
const [hostOptions, setHostOptions] = useState([]); // 主机
const getHostOptions = async () => {
const res: any = await getHostList({
type: 'docker-env',
componentBaseId: addItem.componentBaseId
});
if (res.code === 200) setHostOptions(res.data);
};
const [currentNetworkCard, setCurrentNetworkCard] = useState(''); // 当前选择的网卡
const [currentIp, setCurrentIp] = useState(''); // 当前输入的IP
// 处理取消
const handleCancel = () => {
@ -139,9 +132,28 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
setPortMappingData([]);
setDirectoryMountData([]);
setDeviceMountData([]);
setNetworkTypeList([]);
setSelectedNetworkType([]);
setCurrentNetworkCard('');
setCurrentIp('');
setVisible(false);
};
const fetchNetworkMode = async (type: string, deployEnvId: string) => {
// 切换网络模式时清除网卡和IP数据
form.setFieldValue('networkType', undefined);
form.setFieldValue('ip', '');
setCurrentNetworkCard('');
setCurrentIp('');
setSelectedNetworkType([]);
setNetworkTypeList([]);
const res: any = await getNetworkMode(type, deployEnvId);
if (res.code === 200) {
setNetworkTypeList(res.data);
}
};
// 处理确认
const handleOk = async () => {
try {
@ -151,10 +163,10 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
// 组装提交数据
const submitData = {
...values,
deployEnvId: addItem.id,
portMapping: portMappingData, // 端口映射
directoryMount: directoryMountData, // 目录挂载
deviceMount: deviceMountData, // 设备挂载
componentBaseId: addItem?.componentBaseId,
// 下面是暂时写死的数据,
'restartPolicy': 'always',
'env': [
@ -166,16 +178,15 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
]
};
console.log('提交数据：', submitData);
// TODO: 调用接口提交数据
// const res = await containerRegister(submitData);
// if (res.code === 200) {
// Message.success('容器配置成功');
// handleCancel();
// onSuccess?.();
// } else {
// Message.error('容器配置失败: ' + res.message);
// }
const res: any = await containerRegister(submitData);
if (res.code === 200) {
Message.success('容器配置成功');
handleCancel();
onSuccess?.();
}
else {
Message.error('容器配置失败: ' + res.message);
}
} catch (error) {
console.error('表单校验失败：', error);
@ -192,17 +203,31 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
useEffect(() => {
if (visible) {
getHostOptions();
// 设置表单默认值
form.setFieldsValue({
cpuCount: 1,
memory: 2048,
useGpu: false
});
}
else {
// 关闭时重置表单和数据
form.resetFields();
setCurrentRunType('local');
setPortMappingData([]);
setDirectoryMountData([]);
setDeviceMountData([]);
setNetworkTypeList([]);
setSelectedNetworkType([]);
setCurrentNetworkCard('');
setCurrentIp('');
}
}, [visible]);
useEffect(() => {
console.log('selectedNetworkType:', selectedNetworkType);
}, [selectedNetworkType]);
return (
<Modal
title="容器配置"
@ -235,42 +260,43 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
</Select>
</FormItem>
</Grid.Col>
<Grid.Col span={12}>
<FormItem
label="主机："
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}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span>{option.name}</span>
<span style={{ color: '#999', fontSize: 12 }}>{option.ip}</span>
</div>
</Option>
))}
</Select>
</FormItem>
</Grid.Col>
{/*<Grid.Col span={12}>*/}
{/* <FormItem*/}
{/* label="主机："*/}
{/* field="deployEnvId"*/}
{/* rules={[{ required: true, message: '请选择主机' }]}*/}
{/* >*/}
{/* <Select*/}
{/* placeholder="请选择主机"*/}
{/* style={{ width: '90%' }}*/}
{/* onChange={(value) => {*/}
{/* // 选择主机后自动设置网络模式为第一个选项（桥接模式）*/}
{/* if (value && netType.length > 0) {*/}
{/* form.setFieldValue('networkMode', netType[0].value);*/}
{/* fetchNetworkMode(netType[0].value, value);*/}
{/* }*/}
{/* }}*/}
{/* >*/}
{/* {hostOptions.map((option, index) => (*/}
{/* <Option key={option.ip} value={option.id}>*/}
{/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>*/}
{/* <span>{option.name}</span>*/}
{/* <span style={{ color: '#999', fontSize: 12 }}>{option.ip}</span>*/}
{/* </div>*/}
{/* </Option>*/}
{/* ))}*/}
{/* </Select>*/}
{/* </FormItem>*/}
{/*</Grid.Col>*/}
</Grid.Row>
<Grid.Row gutter={8}>
<Grid.Col span={12}>
<FormItem
label="CPU核数："
field="cpuCount"
initialValue={1}
>
<Slider
defaultValue={1}
min={1}
max={4}
step={1}
@ -292,6 +318,8 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<FormItem
label="是否使用GPU："
field="useGpu"
initialValue={false}
triggerPropName="checked"
>
<Switch checkedText="ON" uncheckedText="OFF" />
</FormItem>
@ -300,9 +328,9 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<FormItem
label="最大内存："
field="memory"
initialValue={2048}
>
<Slider
defaultValue={2048}
min={64}
max={4069}
step={64}
@ -332,6 +360,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<Select
placeholder="请选择网络模式"
style={{ width: '90%' }}
onChange={(value) => fetchNetworkMode(value, addItem.id)}
>
{netType.map((option, index) => (
<Option key={option.value} value={option.value}>
@ -350,10 +379,17 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
<Select
placeholder="请选择网卡"
style={{ width: '90%' }}
value={currentNetworkCard}
onChange={value => {
setCurrentNetworkCard(value);
form.setFieldValue('networkType', value);
const selectedCard = networkTypeList.find(item => item.name === value);
setSelectedNetworkType(selectedCard ? [selectedCard] : []);
}}
>
{runTypes.map((option, index) => (
<Option key={option.value} value={option.value}>
{option.label}
{networkTypeList.map((option, index) => (
<Option key={option.type} value={option.name}>
{option.name}
</Option>
))}
</Select>
@ -368,6 +404,11 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
style={{ width: '90%' }}
allowClear
placeholder="请输入IP"
value={currentIp}
onChange={(value) => {
setCurrentIp(value);
form.setFieldValue('ip', value);
}}
onBlur={(e) => {
const value = e.target.value;
if (value) {
@ -379,7 +420,11 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
}
}}
/>
<div style={{ fontSize: 12, color: '#c0c4cc', marginTop: 10 }}>所属子网: -</div>
<div style={{
fontSize: 12,
color: '#c0c4cc',
marginTop: 10
}}>所属子网: {selectedNetworkType.length > 0 ? selectedNetworkType[0]?.subnet : '-'}</div>
</FormItem>
</Grid.Col>
</Grid.Row>

2
src/pages/componentDevelopment/componentEnv/index.tsx
Unescape Escape View File

@ -93,7 +93,7 @@ const ComponentEnv = () => {
render: (_, record: any) => (
<Space>
{record.isEnable === 'NOT_EXIST' && (
<Button type="text" onClick={(record) => {
<Button type="text" onClick={() => {
setAddItem(record);
setVisible1(true);
}}>容器配置</Button>

Write Preview
Loading…
Cancel
Save