1
This commit is contained in:
dengqichen
parent
24e5b9fcbd
commit
6b1e9c6b4c
@ -138,199 +138,201 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(open) => !open && onCancel()}>
|
||||
<DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogContent className="max-w-[800px] h-[75vh]">
|
||||
<DialogHeader className="pb-4">
|
||||
<DialogTitle>部署配置</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={handleSubmit} className="space-y-4 flex-1">
|
||||
<div className="space-y-4 px-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="applicationId"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>应用选择</FormLabel>
|
||||
<Select
|
||||
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"
|
||||
<form onSubmit={handleSubmit} className="space-y-4 flex flex-col h-full">
|
||||
<ScrollArea className="flex-1 -mx-6">
|
||||
<div className="px-6 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="applicationId"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>应用选择</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) => field.onChange(Number(value))}
|
||||
value={field.value?.toString()}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<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>
|
||||
<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>
|
||||
</ScrollArea>
|
||||
<DialogFooter className="flex-shrink-0">
|
||||
<Button variant="outline" onClick={onCancel}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={form.handleSubmit(handleSubmit)}>
|
||||
确定
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</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>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user