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 2025-01-20 15:09:06 +08:00
parent ee70c571e8
commit 10d1e1f6c2
1 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,10 +56,13 @@ interface EnvVariable {
interface FormValues { interface FormValues {
applicationId?: number; applicationId?: number;
externalSystemId?: number; externalSystemId?: number;
viewId?: number; jenkinsViewId?: number;
jobId?: number; jenkinsJobId?: number;
envs: EnvVariable[];
script: string; script: string;
envs: {
key: string;
value: string;
}[];
} }
interface DeploymentConfigModalProps { interface DeploymentConfigModalProps {
@ -80,10 +83,10 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
defaultValues: { defaultValues: {
applicationId: undefined, applicationId: undefined,
externalSystemId: undefined, externalSystemId: undefined,
viewId: undefined, jenkinsViewId: undefined,
jobId: undefined, jenkinsJobId: undefined,
envs: [{key: '', value: ''}],
script: '', script: '',
envs: [],
} }
}); });
@ -108,8 +111,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
// 当选择外部系统时获取 View 列表 // 当选择外部系统时获取 View 列表
const handleExternalSystemChange = async (externalSystemId: number) => { const handleExternalSystemChange = async (externalSystemId: number) => {
form.setValue('externalSystemId', externalSystemId); form.setValue('externalSystemId', externalSystemId);
form.setValue('viewId', undefined); form.setValue('jenkinsViewId', undefined);
form.setValue('jobId', undefined); form.setValue('jenkinsJobId', undefined);
setJenkinsJobs([]); setJenkinsJobs([]);
if (externalSystemId) { if (externalSystemId) {
@ -122,8 +125,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
// 当选择 View 时获取 Job 列表 // 当选择 View 时获取 Job 列表
const handleViewChange = async (viewId: number) => { const handleViewChange = async (viewId: number) => {
form.setValue('viewId', viewId); form.setValue('jenkinsViewId', viewId);
form.setValue('jobId', undefined); form.setValue('jenkinsJobId', undefined);
const externalSystemId = form.getValues('externalSystemId'); const externalSystemId = form.getValues('externalSystemId');
if (externalSystemId && viewId) { if (externalSystemId && viewId) {
@ -144,39 +147,42 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
return ( return (
<> <>
<Dialog open={open} onOpenChange={(open) => !open && onCancel()}> <Dialog open={open} onOpenChange={(open) => !open && onCancel()}>
<DialogContent className="max-w-[800px] h-[90vh] flex flex-col"> <DialogContent className="max-w-[800px] h-[90vh]">
<DialogHeader className="flex-shrink-0"> <DialogHeader>
<DialogTitle>部署配置</DialogTitle> <DialogTitle>部署配置</DialogTitle>
</DialogHeader> </DialogHeader>
<Form {...form}> <Form {...form}>
<form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden"> <form onSubmit={form.handleSubmit(handleSubmit)}>
<ScrollArea className="flex-1 -mr-6 pr-6"> <ScrollArea className="h-[calc(90vh-8rem)]">
<div className="space-y-6"> <div className="space-y-6 pr-6">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<FormField <FormField
control={form.control} control={form.control}
name="applicationId" name="applicationId"
render={({field}) => ( render={({field}) => (
<FormItem> <FormItem>
<FormLabel>应用选择</FormLabel> <FormLabel>应用名称</FormLabel>
<Select <Select
onValueChange={(value) => field.onChange(Number(value))} onValueChange={(value) => {
field.onChange(Number(value));
// handleApplicationChange(Number(value));
}}
value={field.value?.toString()} value={field.value?.toString()}
> >
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="请选择应用" /> <SelectValue placeholder="选择应用"/>
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
{applications.map((app) => ( {applications.map((app) => (
<SelectItem key={app.id} value={String(app.id)}> <SelectItem key={app.id} value={app.id.toString()}>
{app.appName} {app.appName}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<FormMessage /> <FormMessage/>
</FormItem> </FormItem>
)} )}
/> />
@ -187,93 +193,94 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
<FormItem> <FormItem>
<FormLabel>三方系统</FormLabel> <FormLabel>三方系统</FormLabel>
<Select <Select
onValueChange={(value) => handleExternalSystemChange(Number(value))} onValueChange={(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) => ( {externalSystems.map((system) => (
<SelectItem key={system.id} value={String(system.id)}> <SelectItem key={system.id} value={system.id.toString()}>
{system.name} {system.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<FormMessage /> <FormMessage/>
</FormItem> </FormItem>
)} )}
/> />
</div> </div>
<Separator className="my-4" />
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<FormField <FormField
control={form.control} control={form.control}
name="viewId" name="jenkinsViewId"
render={({field}) => ( render={({field}) => (
<FormItem> <FormItem>
<FormLabel>Jenkins视图选择</FormLabel> <FormLabel>Jenkins视图配置</FormLabel>
<Select <Select
disabled={!form.getValues('externalSystemId')} onValueChange={(value) => {
onValueChange={(value) => handleViewChange(Number(value))} field.onChange(Number(value));
handleViewChange(Number(value));
}}
value={field.value?.toString()} value={field.value?.toString()}
> >
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="请选择 View" /> <SelectValue placeholder="选择视图"/>
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
{jenkinsViews.map((view) => ( {jenkinsViews.map((view) => (
<SelectItem key={view.id} value={String(view.id)}> <SelectItem key={view.id} value={view.id.toString()}>
{view.viewName} {view.viewName}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<FormMessage /> <FormMessage/>
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="jobId" name="jenkinsJobId"
render={({field}) => ( render={({field}) => (
<FormItem> <FormItem>
<FormLabel>Jenkins任务选择</FormLabel> <FormLabel>Jenkins任务配置</FormLabel>
<Select <Select
disabled={!form.getValues('viewId')}
onValueChange={(value) => field.onChange(Number(value))} onValueChange={(value) => field.onChange(Number(value))}
value={field.value?.toString()} value={field.value?.toString()}
> >
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="请选择 Job" /> <SelectValue placeholder="选择任务"/>
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
{jenkinsJobs.map((job) => ( {jenkinsJobs.map((job) => (
<SelectItem key={job.id} value={String(job.id)}> <SelectItem key={job.id} value={job.id.toString()}>
{job.jobName} {job.jobName}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<FormMessage /> <FormMessage/>
</FormItem> </FormItem>
)} )}
/> />
</div> </div>
<Separator className="my-4" /> <Separator className="my-4"/>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between bg-background z-10 py-2"> <div className="flex items-center justify-between">
<FormLabel>环境变量</FormLabel> <FormLabel>环境变量</FormLabel>
<Button <Button
type="button" type="button"
@ -281,7 +288,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
size="sm" size="sm"
onClick={() => append({key: '', value: ''})} onClick={() => append({key: '', value: ''})}
> >
<PlusCircle className="h-4 w-4 mr-2" /> <PlusCircle className="h-4 w-4 mr-2"/>
添加变量 添加变量
</Button> </Button>
</div> </div>
@ -297,7 +304,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
<FormControl> <FormControl>
<Input placeholder="变量名" {...field} /> <Input placeholder="变量名" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage/>
</FormItem> </FormItem>
)} )}
/> />
@ -309,7 +316,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
<FormControl> <FormControl>
<Input placeholder="变量值" {...field} /> <Input placeholder="变量值" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage/>
</FormItem> </FormItem>
)} )}
/> />
@ -320,7 +327,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
onClick={() => remove(index)} onClick={() => remove(index)}
className="mt-2" className="mt-2"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4"/>
</Button> </Button>
</div> </div>
))} ))}
@ -328,9 +335,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
</ScrollArea> </ScrollArea>
</div> </div>
<Separator className="my-4" /> <Separator className="my-4"/>
<div className="space-y-4"> <div>
<FormField <FormField
control={form.control} control={form.control}
name="script" name="script"
@ -380,15 +387,13 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
</div> </div>
</div> </div>
</ScrollArea> </ScrollArea>
<div className="flex-shrink-0 border-t bg-background mt-6"> <div className="flex justify-end gap-2 mt-6">
<DialogFooter className="pt-4"> <Button variant="outline" onClick={onCancel}>
<Button variant="outline" onClick={onCancel}> 取消
取消 </Button>
</Button> <Button type="submit">
<Button onClick={form.handleSubmit(handleSubmit)}> 确定
确定 </Button>
</Button>
</DialogFooter>
</div> </div>
</form> </form>
</Form> </Form>