1
This commit is contained in:
asp_ly
parent
b7d77c8033
commit
dbbabdcca4
@ -1,4 +1,4 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import React, {useEffect, useState, useCallback} from 'react';
|
||||
import {Modal, Form, Select, message, Switch, InputNumber} from 'antd';
|
||||
import type {DeploymentConfig, DeployConfigTemplate} from '../types';
|
||||
import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service';
|
||||
@ -8,11 +8,12 @@ import {BetaSchemaForm} from '@ant-design/pro-form';
|
||||
import {convertJsonSchemaToColumns} from '@/utils/jsonSchemaUtils';
|
||||
import './styles.less';
|
||||
import {Editor} from '@/components/Editor';
|
||||
import type {JsonNode} from '@/types/common';
|
||||
|
||||
const {Option} = Select;
|
||||
|
||||
interface DeploymentConfigModalProps {
|
||||
visible: boolean;
|
||||
open: boolean;
|
||||
onCancel: () => void;
|
||||
onSuccess: () => void;
|
||||
initialValues?: DeploymentConfig;
|
||||
@ -20,7 +21,7 @@ interface DeploymentConfigModalProps {
|
||||
}
|
||||
|
||||
const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
visible,
|
||||
open,
|
||||
onCancel,
|
||||
onSuccess,
|
||||
initialValues,
|
||||
@ -31,39 +32,40 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
const [templates, setTemplates] = useState<DeployConfigTemplate[]>([]);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<DeployConfigTemplate>();
|
||||
const [buildVariables, setBuildVariables] = useState<Record<string, any>>({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const isEdit = !!initialValues?.id;
|
||||
|
||||
// 获取应用列表
|
||||
const fetchApplications = async () => {
|
||||
const fetchApplications = useCallback(async () => {
|
||||
try {
|
||||
const data = await getApplicationList();
|
||||
setApplications(data);
|
||||
} catch (error) {
|
||||
message.error('获取应用列表失败');
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 获取配置模板
|
||||
const fetchTemplates = async () => {
|
||||
const fetchTemplates = useCallback(async () => {
|
||||
try {
|
||||
const data = await getDeployConfigTemplates();
|
||||
setTemplates(data);
|
||||
} catch (error) {
|
||||
message.error('获取配置模板失败');
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 在模态框显示时获取数据
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
if (open) {
|
||||
fetchApplications();
|
||||
fetchTemplates();
|
||||
}
|
||||
}, [visible]);
|
||||
}, [open, fetchApplications, fetchTemplates]);
|
||||
|
||||
// 初始化表单数据
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
if (!open) return;
|
||||
|
||||
if (initialValues) {
|
||||
form.setFieldsValue(initialValues);
|
||||
@ -82,9 +84,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
setSelectedTemplate(undefined);
|
||||
setBuildVariables({});
|
||||
}
|
||||
}, [visible, initialValues, envId, form, templates]);
|
||||
}, [open, initialValues, envId, form, templates]);
|
||||
|
||||
const handleAppChange = (appId: number) => {
|
||||
const handleAppChange = useCallback((appId: number) => {
|
||||
const app = applications.find(a => a.id === appId);
|
||||
if (app) {
|
||||
const template = templates.find(t => t.languageType === app.language);
|
||||
@ -94,10 +96,11 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
form.setFieldValue('templateCode', template.code);
|
||||
}
|
||||
}
|
||||
};
|
||||
}, [applications, templates, form]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const values = await form.validateFields();
|
||||
const submitData = {
|
||||
...values,
|
||||
@ -116,13 +119,19 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
form.resetFields();
|
||||
onSuccess();
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
message.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`);
|
||||
} else {
|
||||
message.error(`${isEdit ? '更新' : '创建'}失败`);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染表单项
|
||||
const renderFormItems = () => {
|
||||
if (!selectedTemplate?.buildVariablesSchema) return null;
|
||||
if (!selectedTemplate?.buildVariablesSchema?.properties) return null;
|
||||
|
||||
const { properties } = selectedTemplate.buildVariablesSchema;
|
||||
|
||||
@ -142,10 +151,10 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
defaultLanguage={property.editorConfig.language || 'shell'}
|
||||
theme={property.editorConfig.theme || 'vs-dark'}
|
||||
value={buildVariables[key] || property.default || ''}
|
||||
onChange={(value) => setBuildVariables({
|
||||
...buildVariables,
|
||||
onChange={(value: string) => setBuildVariables(prev => ({
|
||||
...prev,
|
||||
[key]: value || ''
|
||||
})}
|
||||
}))}
|
||||
options={{
|
||||
minimap: { enabled: property.editorConfig.minimap ?? false },
|
||||
fontSize: property.editorConfig.fontSize || 14,
|
||||
@ -186,15 +195,15 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
columns={convertJsonSchemaToColumns({
|
||||
type: 'object',
|
||||
properties: Object.fromEntries(
|
||||
Object.entries(properties).filter(([_, prop]) => !prop.editorConfig)
|
||||
Object.entries(properties || {}).filter(([_, prop]) => !prop.editorConfig)
|
||||
),
|
||||
required: selectedTemplate.buildVariablesSchema.required || []
|
||||
})}
|
||||
initialValues={buildVariables}
|
||||
onValuesChange={(_, values) => setBuildVariables({
|
||||
...buildVariables,
|
||||
onValuesChange={(_, values) => setBuildVariables(prev => ({
|
||||
...prev,
|
||||
...values
|
||||
})}
|
||||
}))}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@ -203,7 +212,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
return (
|
||||
<Modal
|
||||
title={`${isEdit ? '编辑' : '新建'}部署配置`}
|
||||
open={visible}
|
||||
open={open}
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
onCancel();
|
||||
@ -212,6 +221,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
width={800}
|
||||
className="deployment-config-modal"
|
||||
maskClosable={false}
|
||||
confirmLoading={loading}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
@ -251,6 +262,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
name="enabled"
|
||||
label="状态"
|
||||
valuePropName="checked"
|
||||
tooltip="是否启用该配置"
|
||||
>
|
||||
<Switch checkedChildren="启用" unCheckedChildren="禁用" />
|
||||
</Form.Item>
|
||||
@ -258,15 +270,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
<Form.Item
|
||||
name="sort"
|
||||
label="排序"
|
||||
required
|
||||
tooltip="数字越小越靠前"
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
max={999}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="请输入排序号"
|
||||
/>
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, {useState, useEffect} from 'react';
|
||||
import {PageContainer} from '@ant-design/pro-layout';
|
||||
import {Button, message, Popconfirm, Select} from 'antd';
|
||||
import {Button, message, Popconfirm, Select, Space} from 'antd';
|
||||
import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';
|
||||
import {getDeploymentConfigPage, deleteDeploymentConfig} from './service';
|
||||
import {getEnvironmentList} from '../../Environment/List/service';
|
||||
@ -65,12 +65,15 @@ const DeploymentConfigList: React.FC = () => {
|
||||
actionRef.current?.reload();
|
||||
};
|
||||
|
||||
const renderResourceInfo = (resources?: { cpu?: string; memory?: string }) => {
|
||||
if (!resources?.cpu && !resources?.memory) return '-';
|
||||
const items = [];
|
||||
if (resources.cpu) items.push(`CPU: ${resources.cpu}`);
|
||||
if (resources.memory) items.push(`内存: ${resources.memory}`);
|
||||
return items.join(' / ');
|
||||
const handleModalClose = () => {
|
||||
setModalVisible(false);
|
||||
setCurrentConfig(undefined);
|
||||
};
|
||||
|
||||
const handleSuccess = () => {
|
||||
setModalVisible(false);
|
||||
setCurrentConfig(undefined);
|
||||
actionRef.current?.reload();
|
||||
};
|
||||
|
||||
const columns: ProColumns<DeploymentConfig>[] = [
|
||||
@ -105,56 +108,31 @@ const DeploymentConfigList: React.FC = () => {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '部署配置',
|
||||
children: [
|
||||
{
|
||||
title: '副本数',
|
||||
dataIndex: ['deployConfig', 'replicas'],
|
||||
width: 100,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '容器端口',
|
||||
dataIndex: ['deployConfig', 'containerPort'],
|
||||
width: 100,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabled',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
valueEnum: {
|
||||
true: {text: '启用', status: 'Success'},
|
||||
false: {text: '禁用', status: 'Default'},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 180,
|
||||
key: 'action',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
const buttons = [
|
||||
render: (_, record) => [
|
||||
<Button
|
||||
key="edit"
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => handleEdit(record)}
|
||||
>
|
||||
<EditOutlined/> 编辑
|
||||
<Space>
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</Space>
|
||||
</Button>,
|
||||
<Popconfirm
|
||||
key="delete"
|
||||
@ -164,15 +142,15 @@ const DeploymentConfigList: React.FC = () => {
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
>
|
||||
<DeleteOutlined/> 删除
|
||||
<Space>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</Space>
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
];
|
||||
return <div style={{display: 'flex', gap: '8px', justifyContent: 'center'}}>{buttons}</div>;
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -202,6 +180,31 @@ const DeploymentConfigList: React.FC = () => {
|
||||
actionRef={actionRef}
|
||||
scroll={{x: 'max-content'}}
|
||||
cardBordered
|
||||
rowKey="id"
|
||||
search={false}
|
||||
options={{
|
||||
setting: false,
|
||||
density: false,
|
||||
fullScreen: false,
|
||||
reload: false,
|
||||
}}
|
||||
toolbar={{
|
||||
actions: [
|
||||
<Button
|
||||
key="add"
|
||||
type="primary"
|
||||
onClick={handleAdd}
|
||||
icon={<PlusOutlined/>}
|
||||
disabled={!selectedEnvId}
|
||||
>
|
||||
新建部署配置
|
||||
</Button>
|
||||
],
|
||||
}}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showQuickJumper: true,
|
||||
}}
|
||||
request={async (params) => {
|
||||
if (!selectedEnvId) {
|
||||
return {
|
||||
@ -223,39 +226,13 @@ const DeploymentConfigList: React.FC = () => {
|
||||
total: data.totalElements || 0,
|
||||
};
|
||||
}}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
options={{
|
||||
setting: {
|
||||
listsHeight: 400,
|
||||
},
|
||||
}}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showQuickJumper: true,
|
||||
}}
|
||||
dateFormatter="string"
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="add"
|
||||
type="primary"
|
||||
onClick={handleAdd}
|
||||
icon={<PlusOutlined/>}
|
||||
disabled={!selectedEnvId}
|
||||
>
|
||||
新建部署配置
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
|
||||
{selectedEnvId && (
|
||||
{modalVisible && selectedEnvId && (
|
||||
<DeploymentConfigModal
|
||||
visible={modalVisible}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
onSuccess={() => {
|
||||
setModalVisible(false);
|
||||
actionRef.current?.reload();
|
||||
}}
|
||||
open={modalVisible}
|
||||
onCancel={handleModalClose}
|
||||
onSuccess={handleSuccess}
|
||||
initialValues={currentConfig}
|
||||
envId={selectedEnvId}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user