1
This commit is contained in:
dengqichen
parent
24e5b9fcbd
commit
6b1e9c6b4c
@ -138,199 +138,201 @@ 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="sm:max-w-[600px] max-h-[80vh] overflow-hidden flex flex-col">
|
<DialogContent className="max-w-[800px] h-[75vh]">
|
||||||
<DialogHeader>
|
<DialogHeader className="pb-4">
|
||||||
<DialogTitle>部署配置</DialogTitle>
|
<DialogTitle>部署配置</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<Form {...form}>
|
<Form {...form}>
|
||||||
<form onSubmit={handleSubmit} className="space-y-4 flex-1">
|
<form onSubmit={handleSubmit} className="space-y-4 flex flex-col h-full">
|
||||||
<div className="space-y-4 px-6">
|
<ScrollArea className="flex-1 -mx-6">
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="px-6 space-y-4">
|
||||||
<FormField
|
<div className="grid grid-cols-2 gap-4">
|
||||||
control={form.control}
|
<FormField
|
||||||
name="applicationId"
|
control={form.control}
|
||||||
render={({field}) => (
|
name="applicationId"
|
||||||
<FormItem>
|
render={({field}) => (
|
||||||
<FormLabel>应用选择</FormLabel>
|
<FormItem>
|
||||||
<Select
|
<FormLabel>应用选择</FormLabel>
|
||||||
onValueChange={(value) => field.onChange(Number(value))}
|
<Select
|
||||||
value={field.value?.toString()}
|
onValueChange={(value) => field.onChange(Number(value))}
|
||||||
>
|
value={field.value?.toString()}
|
||||||
<FormControl>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="请选择应用" />
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
|
||||||
<SelectContent>
|
|
||||||
{applications.map((app) => (
|
|
||||||
<SelectItem key={app.id} value={String(app.id)}>
|
|
||||||
{app.appName}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="externalSystemId"
|
|
||||||
render={({field}) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>三方系统</FormLabel>
|
|
||||||
<Select
|
|
||||||
onValueChange={(value) => handleExternalSystemChange(Number(value))}
|
|
||||||
value={field.value?.toString()}
|
|
||||||
>
|
|
||||||
<FormControl>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="请选择三方系统" />
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
|
||||||
<SelectContent>
|
|
||||||
{externalSystems.map((system) => (
|
|
||||||
<SelectItem key={system.id} value={String(system.id)}>
|
|
||||||
{system.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator className="my-4" />
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="viewId"
|
|
||||||
render={({field}) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Jenkins视图选择</FormLabel>
|
|
||||||
<Select
|
|
||||||
disabled={!form.getValues('externalSystemId')}
|
|
||||||
onValueChange={(value) => handleViewChange(Number(value))}
|
|
||||||
value={field.value?.toString()}
|
|
||||||
>
|
|
||||||
<FormControl>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="请选择 View" />
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
|
||||||
<SelectContent>
|
|
||||||
{jenkinsViews.map((view) => (
|
|
||||||
<SelectItem key={view.id} value={String(view.id)}>
|
|
||||||
{view.viewName}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="jobId"
|
|
||||||
render={({field}) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Jenkins任务选择</FormLabel>
|
|
||||||
<Select
|
|
||||||
disabled={!form.getValues('viewId')}
|
|
||||||
onValueChange={(value) => field.onChange(Number(value))}
|
|
||||||
value={field.value?.toString()}
|
|
||||||
>
|
|
||||||
<FormControl>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="请选择 Job" />
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
|
||||||
<SelectContent>
|
|
||||||
{jenkinsJobs.map((job) => (
|
|
||||||
<SelectItem key={job.id} value={String(job.id)}>
|
|
||||||
{job.jobName}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator className="my-4" />
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between bg-background z-10 py-2">
|
|
||||||
<FormLabel>环境变量</FormLabel>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => append({key: '', value: ''})}
|
|
||||||
>
|
|
||||||
<PlusCircle className="h-4 w-4 mr-2" />
|
|
||||||
添加变量
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<ScrollArea className="h-[200px] rounded-md border">
|
|
||||||
<div className="space-y-4 p-4">
|
|
||||||
{fields.map((field, index) => (
|
|
||||||
<div key={field.id} className="flex gap-4 items-start">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name={`envs.${index}.key`}
|
|
||||||
render={({field}) => (
|
|
||||||
<FormItem className="flex-1">
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="变量名" {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name={`envs.${index}.value`}
|
|
||||||
render={({field}) => (
|
|
||||||
<FormItem className="flex-1">
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="变量值" {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => remove(index)}
|
|
||||||
className="mt-2"
|
|
||||||
>
|
>
|
||||||
<X className="h-4 w-4" />
|
<FormControl>
|
||||||
</Button>
|
<SelectTrigger>
|
||||||
</div>
|
<SelectValue placeholder="请选择应用" />
|
||||||
))}
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{applications.map((app) => (
|
||||||
|
<SelectItem key={app.id} value={String(app.id)}>
|
||||||
|
{app.appName}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="externalSystemId"
|
||||||
|
render={({field}) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>三方系统</FormLabel>
|
||||||
|
<Select
|
||||||
|
onValueChange={(value) => handleExternalSystemChange(Number(value))}
|
||||||
|
value={field.value?.toString()}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="请选择三方系统" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{externalSystems.map((system) => (
|
||||||
|
<SelectItem key={system.id} value={String(system.id)}>
|
||||||
|
{system.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator className="my-4" />
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="viewId"
|
||||||
|
render={({field}) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Jenkins视图选择</FormLabel>
|
||||||
|
<Select
|
||||||
|
disabled={!form.getValues('externalSystemId')}
|
||||||
|
onValueChange={(value) => handleViewChange(Number(value))}
|
||||||
|
value={field.value?.toString()}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="请选择 View" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{jenkinsViews.map((view) => (
|
||||||
|
<SelectItem key={view.id} value={String(view.id)}>
|
||||||
|
{view.viewName}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="jobId"
|
||||||
|
render={({field}) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Jenkins任务选择</FormLabel>
|
||||||
|
<Select
|
||||||
|
disabled={!form.getValues('viewId')}
|
||||||
|
onValueChange={(value) => field.onChange(Number(value))}
|
||||||
|
value={field.value?.toString()}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="请选择 Job" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{jenkinsJobs.map((job) => (
|
||||||
|
<SelectItem key={job.id} value={String(job.id)}>
|
||||||
|
{job.jobName}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator className="my-4" />
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between bg-background z-10 py-2">
|
||||||
|
<FormLabel>环境变量</FormLabel>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => append({key: '', value: ''})}
|
||||||
|
>
|
||||||
|
<PlusCircle className="h-4 w-4 mr-2" />
|
||||||
|
添加变量
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</ScrollArea>
|
<ScrollArea className="h-[200px] rounded-md border">
|
||||||
|
<div className="space-y-4 p-4">
|
||||||
|
{fields.map((field, index) => (
|
||||||
|
<div key={field.id} className="flex gap-4 items-start">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`envs.${index}.key`}
|
||||||
|
render={({field}) => (
|
||||||
|
<FormItem className="flex-1">
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="变量名" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`envs.${index}.value`}
|
||||||
|
render={({field}) => (
|
||||||
|
<FormItem className="flex-1">
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="变量值" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => remove(index)}
|
||||||
|
className="mt-2"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ScrollArea>
|
||||||
|
<DialogFooter className="flex-shrink-0">
|
||||||
|
<Button variant="outline" onClick={onCancel}>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button onClick={form.handleSubmit(handleSubmit)}>
|
||||||
|
确定
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
<DialogFooter className="flex-shrink-0 px-6 py-4">
|
|
||||||
<Button variant="outline" onClick={onCancel}>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
<Button onClick={form.handleSubmit(handleSubmit)}>
|
|
||||||
确定
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user