ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2024-12-27 09:54:04 +08:00
parent 959ff9cc3b
commit 578e375f10
8 changed files with 102 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@ -1,15 +1,13 @@
import React from 'react'; import React from 'react';
import { RouterProvider } from 'react-router-dom'; import { RouterProvider } from 'react-router-dom';
import { ConfigProvider, App as AntdApp } from 'antd'; import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN'; import zhCN from 'antd/locale/zh_CN';
import router from './router'; import router from './router';
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
<ConfigProvider locale={zhCN}> <ConfigProvider locale={zhCN}>
<AntdApp>
<RouterProvider router={router} /> <RouterProvider router={router} />
</AntdApp>
</ConfigProvider> </ConfigProvider>
); );
}; };

9
frontend/src/pages/Deploy/Application/List/components/ApplicationModal.tsx
View File

@ -1,5 +1,5 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import {Modal, Form, Input, Select, Switch, InputNumber, App} from 'antd'; import {Modal, Form, Input, Select, Switch, InputNumber, message} from 'antd';
import type {Application} from '../types'; import type {Application} from '../types';
import {DevelopmentLanguageTypeEnum} from '../types'; import {DevelopmentLanguageTypeEnum} from '../types';
import {createApplication, updateApplication} from '../service'; import {createApplication, updateApplication} from '../service';
@ -21,7 +21,6 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const {message: messageApi} = App.useApp();
const isEdit = !!initialValues?.id; const isEdit = !!initialValues?.id;
const handleSubmit = async () => { const handleSubmit = async () => {
@ -39,14 +38,14 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
projectGroupId, projectGroupId,
}); });
} }
messageApi.success(`${isEdit ? '更新' : '创建'}成功`); message.success(`${isEdit ? '更新' : '创建'}成功`);
form.resetFields(); form.resetFields();
onSuccess(); onSuccess();
} catch (error) { } catch (error) {
if (error instanceof Error) { if (error instanceof Error) {
messageApi.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); message.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`);
} else { } else {
messageApi.error(`${isEdit ? '更新' : '创建'}失败`); message.error(`${isEdit ? '更新' : '创建'}失败`);
} }
} finally { } finally {
setLoading(false); setLoading(false);

108
frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
View File

@ -1,5 +1,5 @@
import React, {useEffect, useState, useCallback} from 'react'; import React, {useEffect, useState, useCallback} from 'react';
import {Modal, Form, Select, message, Switch, InputNumber, App} from 'antd'; import {Modal, Form, Select, message, Switch, InputNumber, Input} from 'antd';
import type {DeploymentConfig, DeployConfigTemplate} from '../types'; import type {DeploymentConfig, DeployConfigTemplate} from '../types';
import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service'; import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service';
import {getApplicationList} from '../../../Application/List/service'; import {getApplicationList} from '../../../Application/List/service';
@ -31,9 +31,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
const [applications, setApplications] = useState<Application[]>([]); const [applications, setApplications] = useState<Application[]>([]);
const [templates, setTemplates] = useState<DeployConfigTemplate[]>([]); const [templates, setTemplates] = useState<DeployConfigTemplate[]>([]);
const [selectedTemplate, setSelectedTemplate] = useState<DeployConfigTemplate>(); const [selectedTemplate, setSelectedTemplate] = useState<DeployConfigTemplate>();
const [buildVariables, setBuildVariables] = useState<Record<string, any>>({}); const [buildVariables, setBuildVariables] = useState<JsonNode>({});
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const {message: messageApi} = App.useApp();
const isEdit = !!initialValues?.id; const isEdit = !!initialValues?.id;
// 获取应用列表 // 获取应用列表
@ -42,9 +41,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
const data = await getApplicationList(); const data = await getApplicationList();
setApplications(data); setApplications(data);
} catch (error) { } catch (error) {
messageApi.error('获取应用列表失败'); message.error('获取应用列表失败');
} }
}, [messageApi]); }, []);
// 获取配置模板 // 获取配置模板
const fetchTemplates = useCallback(async () => { const fetchTemplates = useCallback(async () => {
@ -52,9 +51,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
const data = await getDeployConfigTemplates(); const data = await getDeployConfigTemplates();
setTemplates(data); setTemplates(data);
} catch (error) { } catch (error) {
messageApi.error('获取配置模板失败'); message.error('获取配置模板失败');
} }
}, [messageApi]); }, []);
// 在模态框显示时获取数据 // 在模态框显示时获取数据
useEffect(() => { useEffect(() => {
@ -69,8 +68,13 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
if (!open) return; if (!open) return;
if (initialValues) { if (initialValues) {
form.setFieldsValue(initialValues); // 设置基础字段
const template = templates.find(t => t.code === initialValues.templateCode); form.setFieldsValue({
applicationId: initialValues.applicationId,
enabled: initialValues.enabled
});
const template = templates.find(t => t.buildType === initialValues.buildType && t.languageType === initialValues.languageType);
if (template) { if (template) {
setSelectedTemplate(template); setSelectedTemplate(template);
setBuildVariables(initialValues.buildVariables || {}); setBuildVariables(initialValues.buildVariables || {});
@ -78,34 +82,49 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
} else { } else {
form.resetFields(); form.resetFields();
form.setFieldsValue({ form.setFieldsValue({
envId, enabled: true
enabled: true,
sort: 0,
}); });
setSelectedTemplate(undefined); setSelectedTemplate(undefined);
setBuildVariables({}); setBuildVariables({});
} }
}, [open, initialValues, envId, form, templates]); }, [open, initialValues, form, templates]);
const handleAppChange = useCallback((appId: number) => { const handleAppChange = useCallback((applicationId: number) => {
const app = applications.find(a => a.id === appId); const app = applications.find(a => a.id === applicationId);
if (app) { if (app) {
const template = templates.find(t => t.languageType === app.language); const template = templates.find(t => t.languageType === app.language);
if (template) { if (template) {
setSelectedTemplate(template); setSelectedTemplate(template);
setBuildVariables({}); setBuildVariables({});
form.setFieldValue('templateCode', template.code);
} }
} }
}, [applications, templates, form]); }, [applications, templates]);
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
setLoading(true); setLoading(true);
const values = await form.validateFields(); const values = await form.validateFields();
// 获取选中的应用信息
const selectedApp = applications.find(app => app.id === values.applicationId);
if (!selectedApp) {
throw new Error('请选择应用');
}
// 获取对应的模板
const template = templates.find(t => t.languageType === selectedApp.language);
if (!template) {
throw new Error('未找到匹配的配置模板');
}
// 构建提交数据
const submitData = { const submitData = {
...values, environmentId: envId,
buildVariables, applicationId: values.applicationId,
buildType: template.buildType,
languageType: selectedApp.language,
buildVariables, // 动态表单的值都在这里
enabled: values.enabled
}; };
if (isEdit) { if (isEdit) {
@ -116,14 +135,14 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
} else { } else {
await createDeploymentConfig(submitData); await createDeploymentConfig(submitData);
} }
messageApi.success(`${isEdit ? '更新' : '创建'}成功`); message.success(`${isEdit ? '更新' : '创建'}成功`);
form.resetFields(); form.resetFields();
onSuccess(); onSuccess();
} catch (error) { } catch (error) {
if (error instanceof Error) { if (error instanceof Error) {
messageApi.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); message.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`);
} else { } else {
messageApi.error(`${isEdit ? '更新' : '创建'}失败`); message.error(`${isEdit ? '更新' : '创建'}失败`);
} }
} finally { } finally {
setLoading(false); setLoading(false);
@ -152,9 +171,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
defaultLanguage={property.editorConfig.language || 'shell'} defaultLanguage={property.editorConfig.language || 'shell'}
theme={property.editorConfig.theme || 'vs-dark'} theme={property.editorConfig.theme || 'vs-dark'}
value={buildVariables[key] || property.default || ''} value={buildVariables[key] || property.default || ''}
onChange={(value: string) => setBuildVariables(prev => ({ onChange={(value) => setBuildVariables(prev => ({
...prev, ...prev,
[key]: value || '' [key]: value
}))} }))}
options={{ options={{
minimap: { enabled: property.editorConfig.minimap ?? false }, minimap: { enabled: property.editorConfig.minimap ?? false },
@ -187,25 +206,24 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
} }
/> />
</Form.Item> </Form.Item>
) : null ) : (
))} <Form.Item
key={key}
{/* 其他配置项 */} label={property.title || key}
<BetaSchemaForm required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
layoutType="Embed" tooltip={property.description}
columns={convertJsonSchemaToColumns({ >
type: 'object', <Input
properties: Object.fromEntries( value={buildVariables[key] || property.default || ''}
Object.entries(properties || {}).filter(([_, prop]) => !prop.editorConfig) onChange={(e: React.ChangeEvent<HTMLInputElement>) => setBuildVariables(prev => ({
),
required: selectedTemplate.buildVariablesSchema.required || []
})}
initialValues={buildVariables}
onValuesChange={(_, values) => setBuildVariables(prev => ({
...prev, ...prev,
...values [key]: e.target.value
}))} }))}
placeholder={`请输入${property.title || key}`}
/> />
</Form.Item>
)
))}
</> </>
); );
}; };
@ -235,7 +253,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
> >
{/* 应用选择 */} {/* 应用选择 */}
<Form.Item <Form.Item
name="appId" name="applicationId"
label="应用" label="应用"
required required
tooltip="选择要部署的应用" tooltip="选择要部署的应用"
@ -267,14 +285,6 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
> >
<Switch checkedChildren="启用" unCheckedChildren="禁用" /> <Switch checkedChildren="启用" unCheckedChildren="禁用" />
</Form.Item> </Form.Item>
<Form.Item
name="sort"
label="排序"
tooltip="数字越小越靠前"
>
<InputNumber min={0} style={{ width: '100%' }} />
</Form.Item>
</Form> </Form>
</Modal> </Modal>
); );

13
frontend/src/pages/Deploy/Deployment/List/index.tsx
View File

@ -1,6 +1,6 @@
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-layout'; import {PageContainer} from '@ant-design/pro-layout';
import {Button, message, Popconfirm, Select, Space, App} from 'antd'; import {Button, message, Popconfirm, Select, Space} from 'antd';
import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons'; import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';
import {getDeploymentConfigPage, deleteDeploymentConfig} from './service'; import {getDeploymentConfigPage, deleteDeploymentConfig} from './service';
import {getEnvironmentList} from '../../Environment/List/service'; import {getEnvironmentList} from '../../Environment/List/service';
@ -18,7 +18,6 @@ const DeploymentConfigList: React.FC = () => {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [currentConfig, setCurrentConfig] = useState<DeploymentConfig>(); const [currentConfig, setCurrentConfig] = useState<DeploymentConfig>();
const actionRef = React.useRef<ActionType>(); const actionRef = React.useRef<ActionType>();
const {message: messageApi} = App.useApp();
// 获取环境列表 // 获取环境列表
const fetchEnvironments = async () => { const fetchEnvironments = async () => {
@ -29,7 +28,7 @@ const DeploymentConfigList: React.FC = () => {
setSelectedEnvId(data[0].id); setSelectedEnvId(data[0].id);
} }
} catch (error) { } catch (error) {
messageApi.error('获取环境列表失败'); message.error('获取环境列表失败');
} }
}; };
@ -40,16 +39,16 @@ const DeploymentConfigList: React.FC = () => {
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
try { try {
await deleteDeploymentConfig(id); await deleteDeploymentConfig(id);
messageApi.success('删除成功'); message.success('删除成功');
actionRef.current?.reload(); actionRef.current?.reload();
} catch (error) { } catch (error) {
messageApi.error('删除失败'); message.error('删除失败');
} }
}; };
const handleAdd = () => { const handleAdd = () => {
if (!selectedEnvId) { if (!selectedEnvId) {
messageApi.warning('请先选择环境'); message.warning('请先选择环境');
return; return;
} }
setCurrentConfig(undefined); setCurrentConfig(undefined);
@ -228,7 +227,7 @@ const DeploymentConfigList: React.FC = () => {
total: data.totalElements || 0, total: data.totalElements || 0,
}; };
} catch (error) { } catch (error) {
messageApi.error('获取部署配置列表失败'); message.error('获取部署配置列表失败');
return { return {
data: [], data: [],
success: false, success: false,

9
frontend/src/pages/Deploy/Deployment/List/service.ts
View File

@ -2,8 +2,7 @@ import request from '@/utils/request';
import type {DeploymentConfig, CreateDeploymentConfigRequest, UpdateDeploymentConfigRequest, DeploymentConfigQueryParams, DeployConfigTemplate} from './types'; import type {DeploymentConfig, CreateDeploymentConfigRequest, UpdateDeploymentConfigRequest, DeploymentConfigQueryParams, DeployConfigTemplate} from './types';
import type {Page} from '@/types/base'; import type {Page} from '@/types/base';
const BASE_URL = '/api/v1/deployment-configs'; const BASE_URL = '/api/v1/deploy-app-config';
const TEMPLATE_URL = '/api/v1/deploy-app-config';
// 获取部署配置分页列表 // 获取部署配置分页列表
export const getDeploymentConfigPage = (params: DeploymentConfigQueryParams) => export const getDeploymentConfigPage = (params: DeploymentConfigQueryParams) =>
@ -26,9 +25,9 @@ export const getDeploymentConfig = (id: number) =>
request.get<DeploymentConfig>(`${BASE_URL}/${id}`); request.get<DeploymentConfig>(`${BASE_URL}/${id}`);
// 获取环境下的所有部署配置 // 获取环境下的所有部署配置
export const getDeploymentConfigsByEnv = (envId: number) => export const getDeploymentConfigsByEnv = (environmentId: number) =>
request.get<DeploymentConfig[]>(`${BASE_URL}/env/${envId}`); request.get<DeploymentConfig[]>(`${BASE_URL}/env/${environmentId}`);
// 获取部署配置模板列表 // 获取部署配置模板列表
export const getDeployConfigTemplates = () => export const getDeployConfigTemplates = () =>
request.get<DeployConfigTemplate[]>(`${TEMPLATE_URL}/defined`); request.get<DeployConfigTemplate[]>(`${BASE_URL}/defined`);

26
frontend/src/pages/Deploy/Deployment/List/types.ts
View File

@ -16,26 +16,24 @@ export interface DeployConfigTemplate {
// 部署配置基础信息 // 部署配置基础信息
export interface DeploymentConfig extends BaseResponse { export interface DeploymentConfig extends BaseResponse {
tenantCode: string; environmentId: number;
envId: number;
environment: Environment; environment: Environment;
appId: number; applicationId: number;
application: Application; application: Application;
templateCode: string; buildType: BuildTypeEnum;
buildVariables: Record<string, any>; languageType: DevelopmentLanguageTypeEnum;
buildVariables: JsonNode;
enabled: boolean; enabled: boolean;
sort: number;
} }
// 创建部署配置请求参数 // 创建部署配置请求参数
export interface CreateDeploymentConfigRequest extends BaseRequest { export interface CreateDeploymentConfigRequest extends BaseRequest {
tenantCode: string; environmentId: number;
envId: number; applicationId: number;
appId: number; buildType: BuildTypeEnum;
templateCode: string; languageType: DevelopmentLanguageTypeEnum;
buildVariables: Record<string, any>; buildVariables: JsonNode;
enabled: boolean; enabled: boolean;
sort: number;
} }
// 更新部署配置请求参数 // 更新部署配置请求参数
@ -45,7 +43,7 @@ export interface UpdateDeploymentConfigRequest extends CreateDeploymentConfigReq
// 分页查询参数 // 分页查询参数
export interface DeploymentConfigQueryParams extends BaseQuery { export interface DeploymentConfigQueryParams extends BaseQuery {
envId?: number; environmentId?: number;
appId?: number; applicationId?: number;
enabled?: boolean; enabled?: boolean;
} }

17
frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx
View File

@ -1,5 +1,5 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import {Modal, Form, Input, Select, Switch, InputNumber, App} from 'antd'; import {Modal, Form, Input, Select, Switch, InputNumber, message} from 'antd';
import type {Environment} from '../types'; import type {Environment} from '../types';
import {BuildTypeEnum, DeployTypeEnum} from '../types'; import {BuildTypeEnum, DeployTypeEnum} from '../types';
import {createEnvironment, updateEnvironment} from '../service'; import {createEnvironment, updateEnvironment} from '../service';
@ -19,7 +19,6 @@ const EnvironmentModal: React.FC<EnvironmentModalProps> = ({
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const {message: messageApi} = App.useApp();
const isEdit = !!initialValues?.id; const isEdit = !!initialValues?.id;
const handleSubmit = async () => { const handleSubmit = async () => {
@ -34,14 +33,14 @@ const EnvironmentModal: React.FC<EnvironmentModalProps> = ({
} else { } else {
await createEnvironment(values); await createEnvironment(values);
} }
messageApi.success(`${isEdit ? '更新' : '创建'}成功`); message.success(`${isEdit ? '更新' : '创建'}成功`);
form.resetFields(); form.resetFields();
onSuccess(); onSuccess();
} catch (error) { } catch (error) {
if (error instanceof Error) { if (error instanceof Error) {
messageApi.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); message.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`);
} else { } else {
messageApi.error(`${isEdit ? '更新' : '创建'}失败`); message.error(`${isEdit ? '更新' : '创建'}失败`);
} }
} finally { } finally {
setLoading(false); setLoading(false);
@ -111,8 +110,9 @@ const EnvironmentModal: React.FC<EnvironmentModalProps> = ({
placeholder="请选择构建类型" placeholder="请选择构建类型"
disabled={isEdit} disabled={isEdit}
> >
<Select.Option value={BuildTypeEnum.LOCAL}>本地构建</Select.Option> <Select.Option value={BuildTypeEnum.JENKINS}>Jenkins</Select.Option>
<Select.Option value={BuildTypeEnum.REMOTE}>远程构建</Select.Option> <Select.Option value={BuildTypeEnum.GITLAB_RUNNER}>GitLab Runner</Select.Option>
<Select.Option value={BuildTypeEnum.GITHUB_ACTION}>GitHub Action</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
@ -126,8 +126,9 @@ const EnvironmentModal: React.FC<EnvironmentModalProps> = ({
placeholder="请选择部署类型" placeholder="请选择部署类型"
disabled={isEdit} disabled={isEdit}
> >
<Select.Option value={DeployTypeEnum.KUBERNETES}>Kubernetes</Select.Option> <Select.Option value={DeployTypeEnum.K8S}>Kubernetes</Select.Option>
<Select.Option value={DeployTypeEnum.DOCKER}>Docker</Select.Option> <Select.Option value={DeployTypeEnum.DOCKER}>Docker</Select.Option>
<Select.Option value={DeployTypeEnum.VM}>虚拟机</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>

9
frontend/src/pages/Deploy/ProjectGroup/List/components/ProjectGroupModal.tsx
View File

@ -1,5 +1,5 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import {Modal, Form, Input, Select, Switch, InputNumber, App} from 'antd'; import {Modal, Form, Input, Select, Switch, InputNumber, message} from 'antd';
import type {ProjectGroup} from '../types'; import type {ProjectGroup} from '../types';
import {ProjectGroupTypeEnum} from '../types'; import {ProjectGroupTypeEnum} from '../types';
import {createProjectGroup, updateProjectGroup} from '../service'; import {createProjectGroup, updateProjectGroup} from '../service';
@ -19,7 +19,6 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const {message: messageApi} = App.useApp();
const isEdit = !!initialValues?.id; const isEdit = !!initialValues?.id;
const handleSubmit = async () => { const handleSubmit = async () => {
@ -34,14 +33,14 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
} else { } else {
await createProjectGroup(values); await createProjectGroup(values);
} }
messageApi.success(`${isEdit ? '更新' : '创建'}成功`); message.success(`${isEdit ? '更新' : '创建'}成功`);
form.resetFields(); form.resetFields();
onSuccess(); onSuccess();
} catch (error) { } catch (error) {
if (error instanceof Error) { if (error instanceof Error) {
messageApi.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); message.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`);
} else { } else {
messageApi.error(`${isEdit ? '更新' : '创建'}失败`); message.error(`${isEdit ? '更新' : '创建'}失败`);
} }
} finally { } finally {
setLoading(false); setLoading(false);