This commit is contained in:
dengqichen 2025-01-20 15:55:50 +08:00
parent 066be11a90
commit 6a8aa4e55b
2 changed files with 92 additions and 28 deletions

View File

@ -31,7 +31,8 @@ import {
import {PlusCircle, X, Maximize2} from 'lucide-react'; import {PlusCircle, X, Maximize2} from 'lucide-react';
import {useForm, useFieldArray} from "react-hook-form"; import {useForm, useFieldArray} from "react-hook-form";
import {getApplicationList} from '../../../Application/List/service'; import {getApplicationList} from '../../../Application/List/service';
import {getExternalSystemList, getJenkinsViewList, getJenkinsJobList} from '../service'; import {getExternalSystemList, getJenkinsViewList, getJenkinsJobList, createDeploymentConfig} from '../service';
import {getPublishedDefinitions} from '@/pages/Workflow/Definition/service';
import type {ExternalSystem} from '@/pages/Deploy/External/types'; import type {ExternalSystem} from '@/pages/Deploy/External/types';
import { Editor } from "@/components/Editor"; import { Editor } from "@/components/Editor";
@ -76,6 +77,7 @@ const formSchema = z.object({
externalSystemId: z.number().optional(), externalSystemId: z.number().optional(),
jenkinsViewId: z.number().optional(), jenkinsViewId: z.number().optional(),
jenkinsJobId: z.number().optional(), jenkinsJobId: z.number().optional(),
workflowId: z.number().optional(),
script: z.string(), script: z.string(),
envs: z.array(z.object({ envs: z.array(z.object({
key: envKeySchema, key: envKeySchema,
@ -96,6 +98,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
const [externalSystems, setExternalSystems] = useState<ExternalSystem[]>([]); const [externalSystems, setExternalSystems] = useState<ExternalSystem[]>([]);
const [jenkinsViews, setJenkinsViews] = useState<JenkinsView[]>([]); const [jenkinsViews, setJenkinsViews] = useState<JenkinsView[]>([]);
const [jenkinsJobs, setJenkinsJobs] = useState<JenkinsJob[]>([]); const [jenkinsJobs, setJenkinsJobs] = useState<JenkinsJob[]>([]);
const [workflows, setWorkflows] = useState<any[]>([]);
const [fullscreenEditor, setFullscreenEditor] = useState(false); const [fullscreenEditor, setFullscreenEditor] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);
@ -106,8 +109,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
externalSystemId: undefined, externalSystemId: undefined,
jenkinsViewId: undefined, jenkinsViewId: undefined,
jenkinsJobId: undefined, jenkinsJobId: undefined,
workflowId: undefined,
script: '', script: '',
envs: [] envs: [{key: '', value: ''}]
} }
}); });
@ -129,6 +133,20 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
} }
}, [open]); }, [open]);
// 获取工作流列表
const fetchWorkflows = async () => {
try {
const data = await getPublishedDefinitions();
setWorkflows(data);
} catch (error) {
console.error('Failed to fetch workflows:', error);
}
};
useEffect(() => {
fetchWorkflows();
}, []);
// 当选择外部系统时获取 View 列表 // 当选择外部系统时获取 View 列表
const handleExternalSystemChange = async (externalSystemId: number) => { const handleExternalSystemChange = async (externalSystemId: number) => {
form.setValue('externalSystemId', externalSystemId); form.setValue('externalSystemId', externalSystemId);
@ -158,12 +176,28 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
} }
}; };
const handleSubmit = form.handleSubmit((values) => { const handleSubmit = async (values: FormValues) => {
// 过滤掉空的环境变量 try {
values.envs = values.envs.filter(env => env.key || env.value); // 将环境变量数组转换为Map格式
console.log('表单提交的值:', values); const envMap = values.envs.reduce((acc, {key, value}) => {
onSuccess?.(); // 只有当key和value都不为空时才添加到map中
}); if (key && value) {
acc[key] = value;
}
return acc;
}, {} as Record<string, string>);
const params = {
...values,
envs: envMap
};
await createDeploymentConfig(params);
onSuccess?.();
} catch (error) {
console.error('Failed to create deployment config:', error);
}
};
return ( return (
<> <>
@ -184,10 +218,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
<FormItem> <FormItem>
<FormLabel></FormLabel> <FormLabel></FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => field.onChange(Number(value))}
field.onChange(Number(value));
// handleApplicationChange(Number(value));
}}
value={field.value?.toString()} value={field.value?.toString()}
> >
<FormControl> <FormControl>
@ -209,26 +240,23 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
/> />
<FormField <FormField
control={form.control} control={form.control}
name="externalSystemId" name="workflowId"
render={({field}) => ( render={({field}) => (
<FormItem> <FormItem>
<FormLabel></FormLabel> <FormLabel></FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => field.onChange(Number(value))}
field.onChange(Number(value));
handleExternalSystemChange(Number(value));
}}
value={field.value?.toString()} value={field.value?.toString()}
> >
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="选择三方系统"/> <SelectValue placeholder="选择工作流"/>
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
{externalSystems.map((system) => ( {workflows.map((workflow) => (
<SelectItem key={system.id} value={system.id.toString()}> <SelectItem key={workflow.id} value={workflow.id.toString()}>
{system.name} {workflow.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
@ -238,7 +266,40 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
)} )}
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-3 gap-4">
<FormField
control={form.control}
name="externalSystemId"
render={({field}) => (
<FormItem>
<FormLabel></FormLabel>
<Select
onValueChange={(value) => {
const numValue = Number(value);
handleExternalSystemChange(numValue);
}}
value={field.value?.toString()}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="选择系统"/>
</SelectTrigger>
</FormControl>
<SelectContent>
{externalSystems.map((system) => (
<SelectItem key={system.id}
value={system.id.toString()}>
{system.name}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage/>
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="jenkinsViewId" name="jenkinsViewId"
@ -247,8 +308,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
<FormLabel>Jenkins视图配置</FormLabel> <FormLabel>Jenkins视图配置</FormLabel>
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
field.onChange(Number(value)); const numValue = Number(value);
handleViewChange(Number(value)); handleViewChange(numValue);
}} }}
value={field.value?.toString()} value={field.value?.toString()}
> >
@ -259,7 +320,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
</FormControl> </FormControl>
<SelectContent> <SelectContent>
{jenkinsViews.map((view) => ( {jenkinsViews.map((view) => (
<SelectItem key={view.id} value={view.id.toString()}> <SelectItem key={view.id}
value={view.id.toString()}>
{view.viewName} {view.viewName}
</SelectItem> </SelectItem>
))} ))}
@ -269,6 +331,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="jenkinsJobId" name="jenkinsJobId"
@ -286,7 +349,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
</FormControl> </FormControl>
<SelectContent> <SelectContent>
{jenkinsJobs.map((job) => ( {jenkinsJobs.map((job) => (
<SelectItem key={job.id} value={job.id.toString()}> <SelectItem key={job.id}
value={job.id.toString()}>
{job.jobName} {job.jobName}
</SelectItem> </SelectItem>
))} ))}

View File

@ -12,7 +12,7 @@ export const getDefinitions = (params?: WorkflowDefinitionQuery) =>
export const getDefinitionDetail = (id: number) => export const getDefinitionDetail = (id: number) =>
request.get<WorkflowDefinition>(`${DEFINITION_URL}/${id}`); request.get<WorkflowDefinition>(`${DEFINITION_URL}/${id}`);
export const getPublishedDefinitions = (id: number) => export const getPublishedDefinitions = () =>
request.get<WorkflowDefinition[]>(`${DEFINITION_URL}/published`); request.get<WorkflowDefinition[]>(`${DEFINITION_URL}/published`);
export const deployDefinition = (id: number) => export const deployDefinition = (id: number) =>