|
|
import React, { useEffect, useState } from 'react' ;
|
|
|
import { Modal, Form, Select, Grid, Slider, Switch, Input, Message } from '@arco-design/web-react';
|
|
|
import EditableTable from '@/components/EditableTable';
|
|
|
import { getComponentClassify } from '@/api/componentClassify';
|
|
|
import { getHostList } from '@/api/componentDeployEnv';
|
|
|
import { createInstance, localStart } from '@/api/componentInstance';
|
|
|
|
|
|
const FormItem = Form.Item;
|
|
|
const Option = Select.Option;
|
|
|
|
|
|
const runTypes = [
|
|
|
{
|
|
|
label: '本地运行',
|
|
|
value: 'local'
|
|
|
},
|
|
|
{
|
|
|
label: '线上运行',
|
|
|
value: 'online'
|
|
|
}
|
|
|
];
|
|
|
|
|
|
const portColumns = [
|
|
|
{
|
|
|
title: '主机端口',
|
|
|
dataIndex: 'name',
|
|
|
editable: true
|
|
|
},
|
|
|
{
|
|
|
title: '容器端口',
|
|
|
dataIndex: 'salary',
|
|
|
editable: true
|
|
|
},
|
|
|
{
|
|
|
title: '备注',
|
|
|
dataIndex: 'email',
|
|
|
editable: true
|
|
|
|
|
|
}
|
|
|
];
|
|
|
const directoryColumns = [
|
|
|
{
|
|
|
title: '主机路径',
|
|
|
dataIndex: 'name',
|
|
|
editable: true
|
|
|
},
|
|
|
{
|
|
|
title: '容器路径',
|
|
|
dataIndex: 'salary',
|
|
|
editable: true
|
|
|
},
|
|
|
{
|
|
|
title: '备注',
|
|
|
dataIndex: 'email',
|
|
|
editable: true
|
|
|
}
|
|
|
];
|
|
|
const deviceColumns = [
|
|
|
{
|
|
|
title: '主机路径',
|
|
|
dataIndex: 'name',
|
|
|
editable: true
|
|
|
},
|
|
|
{
|
|
|
title: '容器路径',
|
|
|
dataIndex: 'salary',
|
|
|
editable: true
|
|
|
},
|
|
|
{
|
|
|
title: '权限',
|
|
|
dataIndex: 'email',
|
|
|
editable: true
|
|
|
},
|
|
|
{
|
|
|
title: '备注',
|
|
|
dataIndex: 'email',
|
|
|
editable: true
|
|
|
}
|
|
|
];
|
|
|
|
|
|
const AddModal = ({ addItem, visible, setVisible, onSuccess }) => {
|
|
|
const [form] = Form.useForm();
|
|
|
const [currentRunType, setCurrentRunType] = useState('local');
|
|
|
const [envType, setEnvType] = useState([]); // 环境类型
|
|
|
const [hostOptions, setHostOptions] = useState([]); // 主机
|
|
|
const [tableData, setTableData] = useState([]);
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
|
|
const getEnvOptions = async () => {
|
|
|
const res: any = await getComponentClassify('docker-env');
|
|
|
if (res.code === 200) setEnvType(res.data);
|
|
|
};
|
|
|
|
|
|
const getHostOptions = async () => {
|
|
|
const res: any = await getHostList({
|
|
|
// type: 'docker-env',
|
|
|
componentBaseId: addItem.componentBaseId
|
|
|
});
|
|
|
if (res.code === 200) setHostOptions(res.data);
|
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (visible) {
|
|
|
getHostOptions();
|
|
|
getEnvOptions();
|
|
|
}
|
|
|
else {
|
|
|
// 关闭时重置表单
|
|
|
form.resetFields();
|
|
|
setCurrentRunType('local');
|
|
|
setTableData([]);
|
|
|
}
|
|
|
}, [visible]);
|
|
|
|
|
|
// 处理取消
|
|
|
const handleCancel = () => {
|
|
|
form.resetFields();
|
|
|
setCurrentRunType('local');
|
|
|
setTableData([]);
|
|
|
setVisible(false);
|
|
|
};
|
|
|
|
|
|
// 处理确认
|
|
|
const handleOk = async () => {
|
|
|
try {
|
|
|
setLoading(true);
|
|
|
const values = await form.validate();
|
|
|
|
|
|
// 整理参数
|
|
|
const params = {
|
|
|
deployEnvId: values.deployEnvId,
|
|
|
componentBaseId: addItem.componentBaseId
|
|
|
};
|
|
|
|
|
|
const apiMap = {
|
|
|
'local': localStart, // 本地运行
|
|
|
'online': createInstance // 线上运行
|
|
|
};
|
|
|
|
|
|
const res: any = await apiMap[currentRunType](params);
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
Message.success('新增实例成功');
|
|
|
handleCancel(); // 关闭弹窗并重置表单
|
|
|
// 调用成功回调刷新数据
|
|
|
if (onSuccess) {
|
|
|
onSuccess();
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
Message.error(res.msg || '新增实例失败');
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('表单校验失败：', error);
|
|
|
} finally {
|
|
|
setLoading(false);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<Modal
|
|
|
title="新增实例"
|
|
|
visible={visible}
|
|
|
onOk={handleOk}
|
|
|
onCancel={handleCancel}
|
|
|
confirmLoading={loading}
|
|
|
autoFocus={false}
|
|
|
focusLock={true}
|
|
|
style={{ width: '40%' }}
|
|
|
>
|
|
|
<Form form={form} autoComplete="off">
|
|
|
<Grid.Row gutter={8}>
|
|
|
<Grid.Col span={24}>
|
|
|
<FormItem label="部署方式：">
|
|
|
<Select
|
|
|
placeholder="请选择"
|
|
|
style={{ width: '60%' }}
|
|
|
value={currentRunType}
|
|
|
onChange={(value) => setCurrentRunType(value)}
|
|
|
>
|
|
|
{runTypes.map((option, index) => (
|
|
|
<Option key={option.value} value={option.value}>
|
|
|
{option.label}
|
|
|
</Option>
|
|
|
))}
|
|
|
</Select>
|
|
|
</FormItem>
|
|
|
</Grid.Col>
|
|
|
</Grid.Row>
|
|
|
{
|
|
|
currentRunType === 'online' && (
|
|
|
<>
|
|
|
<Grid.Row gutter={8}>
|
|
|
{/*<Grid.Col span={12}>*/}
|
|
|
{/* <FormItem label="部署环境：" field="tags">*/}
|
|
|
{/* <Select*/}
|
|
|
{/* placeholder="请选择部署环境"*/}
|
|
|
{/* style={{ width: '90%' }}*/}
|
|
|
{/* >*/}
|
|
|
{/* {envType.map((option, index) => (*/}
|
|
|
{/* <Option key={option.id} value={option.id}>*/}
|
|
|
{/* {option.classifyName}*/}
|
|
|
{/* </Option>*/}
|
|
|
{/* ))}*/}
|
|
|
{/* </Select>*/}
|
|
|
{/* </FormItem>*/}
|
|
|
{/*</Grid.Col>*/}
|
|
|
<Grid.Col span={24}>
|
|
|
<FormItem
|
|
|
label="主机："
|
|
|
field="deployEnvId"
|
|
|
required
|
|
|
rules={[
|
|
|
{
|
|
|
validator: (value, cb) => {
|
|
|
if (!value) {
|
|
|
return cb('请选择主机');
|
|
|
}
|
|
|
return cb(null);
|
|
|
}
|
|
|
}
|
|
|
]}
|
|
|
>
|
|
|
<Select
|
|
|
placeholder="请选择主机"
|
|
|
style={{ width: '60%' }}
|
|
|
allowClear={true}
|
|
|
>
|
|
|
{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="a">*/}
|
|
|
{/* <Slider*/}
|
|
|
{/* defaultValue={1}*/}
|
|
|
{/* min={1}*/}
|
|
|
{/* max={4}*/}
|
|
|
{/* step={1}*/}
|
|
|
{/* showTicks={true}*/}
|
|
|
{/* marks={{*/}
|
|
|
{/* 1: '1核',*/}
|
|
|
{/* 2: '',*/}
|
|
|
{/* 3: '',*/}
|
|
|
{/* 4: '4核'*/}
|
|
|
{/* }}*/}
|
|
|
{/* style={{*/}
|
|
|
{/* width: '90%',*/}
|
|
|
{/* whiteSpace: 'nowrap'*/}
|
|
|
{/* }}*/}
|
|
|
{/* />*/}
|
|
|
{/* </FormItem>*/}
|
|
|
{/* </Grid.Col>*/}
|
|
|
{/* <Grid.Col span={12}>*/}
|
|
|
{/* <FormItem label="是否使用GPU：" field="b">*/}
|
|
|
{/* <Switch checkedText="ON" uncheckedText="OFF" />*/}
|
|
|
{/* </FormItem>*/}
|
|
|
{/* </Grid.Col>*/}
|
|
|
{/*</Grid.Row>*/}
|
|
|
{/*<FormItem label="最大内存：">*/}
|
|
|
{/* <Slider*/}
|
|
|
{/* defaultValue={2048}*/}
|
|
|
{/* min={64}*/}
|
|
|
{/* max={4069}*/}
|
|
|
{/* step={64}*/}
|
|
|
{/* marks={{*/}
|
|
|
{/* 64: '64MB',*/}
|
|
|
{/* 1024: '1GB',*/}
|
|
|
{/* 2048: '2GB',*/}
|
|
|
{/* 4069: '4GB'*/}
|
|
|
{/* }}*/}
|
|
|
{/* showInput={{*/}
|
|
|
{/* hideControl: false,*/}
|
|
|
{/* suffix: 'MB',*/}
|
|
|
{/* style: {*/}
|
|
|
{/* width: 100*/}
|
|
|
{/* }*/}
|
|
|
{/* }}*/}
|
|
|
{/* style={{ width: '100%' }}*/}
|
|
|
{/* />*/}
|
|
|
{/*</FormItem>*/}
|
|
|
{/*<Grid.Row gutter={8}>*/}
|
|
|
{/* <Grid.Col span={8}>*/}
|
|
|
{/* <FormItem label="网络模式：" field="tags">*/}
|
|
|
{/* <Select*/}
|
|
|
{/* placeholder="请选择网络模式"*/}
|
|
|
{/* style={{ width: '90%' }}*/}
|
|
|
{/* >*/}
|
|
|
{/* {runTypes.map((option, index) => (*/}
|
|
|
{/* <Option key={option.value} value={option.value}>*/}
|
|
|
{/* {option.label}*/}
|
|
|
{/* </Option>*/}
|
|
|
{/* ))}*/}
|
|
|
{/* </Select>*/}
|
|
|
{/* </FormItem>*/}
|
|
|
{/* </Grid.Col>*/}
|
|
|
{/* <Grid.Col span={8}>*/}
|
|
|
{/* <FormItem label="网卡：" field="type">*/}
|
|
|
{/* <Select*/}
|
|
|
{/* placeholder="请选择网卡"*/}
|
|
|
{/* style={{ width: '90%' }}*/}
|
|
|
{/* >*/}
|
|
|
{/* {runTypes.map((option, index) => (*/}
|
|
|
{/* <Option key={option.value} value={option.value}>*/}
|
|
|
{/* {option.label}*/}
|
|
|
{/* </Option>*/}
|
|
|
{/* ))}*/}
|
|
|
{/* </Select>*/}
|
|
|
{/* </FormItem>*/}
|
|
|
{/* </Grid.Col>*/}
|
|
|
{/* <Grid.Col span={8}>*/}
|
|
|
{/* <FormItem label="IP：" field="type">*/}
|
|
|
{/* <Input style={{ width: '90%' }} allowClear placeholder="请输入IP" />*/}
|
|
|
{/* </FormItem>*/}
|
|
|
{/* </Grid.Col>*/}
|
|
|
{/*</Grid.Row>*/}
|
|
|
{/*<FormItem label="端口映射：">*/}
|
|
|
{/* <EditableTable*/}
|
|
|
{/* columns={portColumns}*/}
|
|
|
{/* data={tableData}*/}
|
|
|
{/* onDataChange={(newData) => setTableData(newData)}*/}
|
|
|
{/* showAddButton={true}*/}
|
|
|
{/* addButtonText="添加行"*/}
|
|
|
{/* showDeleteButton={true}*/}
|
|
|
{/* deleteButtonText="删除"*/}
|
|
|
{/* tableProps={{*/}
|
|
|
{/* pagination: { pageSize: 5 },*/}
|
|
|
{/* scroll: { y: 400 }*/}
|
|
|
{/* }}*/}
|
|
|
{/* />*/}
|
|
|
{/*</FormItem>*/}
|
|
|
{/*<FormItem label="目录挂载：">*/}
|
|
|
{/* <EditableTable*/}
|
|
|
{/* columns={directoryColumns}*/}
|
|
|
{/* data={tableData}*/}
|
|
|
{/* onDataChange={(newData) => setTableData(newData)}*/}
|
|
|
{/* showAddButton={true}*/}
|
|
|
{/* addButtonText="添加行"*/}
|
|
|
{/* showDeleteButton={true}*/}
|
|
|
{/* deleteButtonText="删除"*/}
|
|
|
{/* tableProps={{*/}
|
|
|
{/* pagination: { pageSize: 5 },*/}
|
|
|
{/* scroll: { y: 400 }*/}
|
|
|
{/* }}*/}
|
|
|
{/* />*/}
|
|
|
{/*</FormItem>*/}
|
|
|
{/*<FormItem label="设备挂载：">*/}
|
|
|
{/* <EditableTable*/}
|
|
|
{/* columns={deviceColumns}*/}
|
|
|
{/* data={tableData}*/}
|
|
|
{/* onDataChange={(newData) => setTableData(newData)}*/}
|
|
|
{/* showAddButton={true}*/}
|
|
|
{/* addButtonText="添加行"*/}
|
|
|
{/* showDeleteButton={true}*/}
|
|
|
{/* deleteButtonText="删除"*/}
|
|
|
{/* tableProps={{*/}
|
|
|
{/* pagination: { pageSize: 5 },*/}
|
|
|
{/* scroll: { y: 400 }*/}
|
|
|
{/* }}*/}
|
|
|
{/* />*/}
|
|
|
{/*</FormItem>*/}
|
|
|
</>
|
|
|
)
|
|
|
}
|
|
|
</Form>
|
|
|
|
|
|
</Modal>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default AddModal; |