1
This commit is contained in:
parent
066be11a90
commit
6a8aa4e55b
@ -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>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@ -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) =>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user