mirror of
https://github.com/woodchen-ink/certimate.git
synced 2025-07-18 01:11:55 +08:00
feat(ui): new WorkflowElements using antd
This commit is contained in:
Fu Diwei
parent
c6a8f923e4
commit
8a16893082
@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Certimate - Your Trusted SSL Automation Partner</title>
|
||||
</head>
|
||||
<body class="bg-background" style="pointer-events: auto !important">
|
||||
<body style="pointer-events: auto !important">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
@ -54,8 +54,9 @@ const RootApp = () => {
|
||||
theme={{
|
||||
...antdTheme,
|
||||
token: {
|
||||
colorPrimary: "hsl(24.6 95% 53.1%)",
|
||||
colorLink: "hsl(24.6 95% 53.1%)",
|
||||
/* @see tailwind.config.js */
|
||||
colorPrimary: browserTheme === "dark" ? "hsl(20.5 90.2% 48.2%)" : "hsl(24.6 95% 53.1%)",
|
||||
colorLink: browserTheme === "dark" ? "hsl(20.5 90.2% 48.2%)" : "hsl(24.6 95% 53.1%)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@ -5,6 +5,7 @@ import { Form, type FormInstance, Input } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
|
||||
import { type AccessModel } from "@/domain/access";
|
||||
import { ACCESS_PROVIDERS } from "@/domain/provider";
|
||||
import { useAntdForm } from "@/hooks";
|
||||
@ -28,7 +29,6 @@ import AccessEditFormSSHConfig from "./AccessEditFormSSHConfig";
|
||||
import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig";
|
||||
import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
|
||||
import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
|
||||
import AccessProviderSelect from "./AccessProviderSelect";
|
||||
|
||||
type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
|
||||
type AccessEditFormPresets = "add" | "edit";
|
||||
|
||||
75
ui/src/components/provider/DeployProviderPicker.tsx
Normal file
75
ui/src/components/provider/DeployProviderPicker.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { memo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDebounceEffect } from "ahooks";
|
||||
import { Avatar, Card, Col, Empty, Flex, Input, Row, Typography } from "antd";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { deployProvidersMap } from "@/domain/provider";
|
||||
|
||||
export type DeployProviderPickerProps = {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
onSelect?: (value: string) => void;
|
||||
};
|
||||
|
||||
const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPickerProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const allProviders = Array.from(deployProvidersMap.values());
|
||||
const [providers, setProviders] = useState(allProviders);
|
||||
const [keyword, setKeyword] = useState<string>();
|
||||
useDebounceEffect(
|
||||
() => {
|
||||
if (keyword) {
|
||||
setProviders(
|
||||
allProviders.filter((provider) => {
|
||||
const value = keyword.toLowerCase();
|
||||
return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
|
||||
})
|
||||
);
|
||||
} else {
|
||||
setProviders(allProviders);
|
||||
}
|
||||
},
|
||||
[keyword],
|
||||
{ wait: 300 }
|
||||
);
|
||||
|
||||
const handleProviderTypeSelect = (value: string) => {
|
||||
onSelect?.(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
<Input.Search placeholder={t("workflow_node.deploy.search.provider_type.placeholder")} onChange={(e) => setKeyword(e.target.value.trim())} />
|
||||
|
||||
<div className="mt-4">
|
||||
<Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
|
||||
<Row gutter={[16, 16]}>
|
||||
{providers.map((provider, index) => {
|
||||
return (
|
||||
<Col key={index} span={12}>
|
||||
<Card
|
||||
className="w-full h-16 shadow-sm overflow-hidden"
|
||||
styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
|
||||
hoverable
|
||||
onClick={() => {
|
||||
handleProviderTypeSelect(provider.type);
|
||||
}}
|
||||
>
|
||||
<Flex className="size-full overflow-hidden" align="center" gap={8}>
|
||||
<Avatar src={provider.icon} size="small" />
|
||||
<Typography.Text className="line-clamp-2">{t(provider.name)}</Typography.Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(DeployProviderPicker);
|
||||
51
ui/src/components/provider/DeployProviderSelect.tsx
Normal file
51
ui/src/components/provider/DeployProviderSelect.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { memo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
|
||||
|
||||
import { deployProvidersMap } from "@/domain/provider";
|
||||
|
||||
export type DeployProviderSelectProps = Omit<
|
||||
SelectProps,
|
||||
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
|
||||
>;
|
||||
|
||||
const DeployProviderSelect = (props: DeployProviderSelectProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const options = Array.from(deployProvidersMap.values()).map((item) => ({
|
||||
key: item.type,
|
||||
value: item.type,
|
||||
label: t(item.name),
|
||||
}));
|
||||
|
||||
const renderOption = (key: string) => {
|
||||
const provider = deployProvidersMap.get(key);
|
||||
return (
|
||||
<Space className="flex-grow max-w-full truncate overflow-hidden" size={4}>
|
||||
<Avatar src={provider?.icon} size="small" />
|
||||
<Typography.Text className="leading-loose" ellipsis>
|
||||
{t(provider?.name ?? "")}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
{...props}
|
||||
labelRender={({ label, value }) => {
|
||||
if (label) {
|
||||
return renderOption(value as string);
|
||||
}
|
||||
|
||||
return <Typography.Text type="secondary">{props.placeholder}</Typography.Text>;
|
||||
}}
|
||||
options={options}
|
||||
optionFilterProp={undefined}
|
||||
optionLabelProp={undefined}
|
||||
optionRender={(option) => renderOption(option.data.value)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(DeployProviderSelect);
|
||||
@ -1,65 +0,0 @@
|
||||
import { PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
|
||||
import { Dropdown } from "antd";
|
||||
|
||||
import { type WorkflowNodeType, newNode, workflowNodeDropdownList } from "@/domain/workflow";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import DropdownMenuItemIcon from "./DropdownMenuItemIcon";
|
||||
import { type BrandNodeProps, type NodeProps } from "./types";
|
||||
|
||||
const AddNode = ({ data }: NodeProps | BrandNodeProps) => {
|
||||
const { addNode } = useWorkflowStore(useZustandShallowSelector(["addNode"]));
|
||||
|
||||
const handleTypeSelected = (type: WorkflowNodeType, provider?: string) => {
|
||||
const node = newNode(type, {
|
||||
providerType: provider,
|
||||
});
|
||||
|
||||
addNode(node, data.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="before:content-[''] before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0 py-6 relative">
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: workflowNodeDropdownList.map((item) => {
|
||||
if (item.leaf) {
|
||||
return {
|
||||
key: item.type,
|
||||
label: <div className="ml-2">{item.name}</div>,
|
||||
icon: <DropdownMenuItemIcon type={item.icon.type} name={item.icon.name} />,
|
||||
onClick: () => {
|
||||
handleTypeSelected(item.type);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
key: item.type,
|
||||
label: <div className="ml-2">{item.name}</div>,
|
||||
icon: <DropdownMenuItemIcon type={item.icon.type} name={item.icon.name} />,
|
||||
children: item.children?.map((subItem) => {
|
||||
return {
|
||||
key: subItem.providerType,
|
||||
label: <div className="ml-2">{subItem.name}</div>,
|
||||
icon: <DropdownMenuItemIcon type={subItem.icon.type} name={subItem.icon.name} />,
|
||||
onClick: () => {
|
||||
handleTypeSelected(item.type, subItem.providerType);
|
||||
},
|
||||
};
|
||||
}),
|
||||
};
|
||||
}),
|
||||
}}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<div className="bg-stone-400 hover:bg-stone-500 rounded-full size-5 z-[1] relative flex items-center justify-center cursor-pointer">
|
||||
<PlusOutlinedIcon className="text-white" />
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddNode;
|
||||
@ -1,69 +0,0 @@
|
||||
import { memo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "antd";
|
||||
|
||||
import { type WorkflowBranchNode, type WorkflowNode } from "@/domain/workflow";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import AddNode from "./AddNode";
|
||||
import NodeRender from "./NodeRender";
|
||||
import { type BrandNodeProps } from "./types";
|
||||
|
||||
const BranchNode = memo(({ data }: BrandNodeProps) => {
|
||||
const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const renderNodes = (node: WorkflowBranchNode | WorkflowNode | undefined, branchNodeId?: string, branchIndex?: number) => {
|
||||
const elements: JSX.Element[] = [];
|
||||
let current = node;
|
||||
while (current) {
|
||||
elements.push(<NodeRender data={current} branchId={branchNodeId} branchIndex={branchIndex} key={current.id} />);
|
||||
current = current.next;
|
||||
}
|
||||
return elements;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="border-t-[2px] border-b-[2px] relative flex gap-x-16 border-stone-200 bg-background">
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
addBranch(data.id);
|
||||
}}
|
||||
className="text-xs px-2 h-6 rounded-full absolute -top-3 left-[50%] -translate-x-1/2 z-[1] dark:text-stone-200"
|
||||
>
|
||||
{t("workflow.node.addBranch.label")}
|
||||
</Button>
|
||||
|
||||
{data.branches.map((branch, index) => (
|
||||
<div
|
||||
key={branch.id}
|
||||
className="relative flex flex-col items-center before:content-[''] before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0"
|
||||
>
|
||||
{index == 0 && (
|
||||
<>
|
||||
<div className="w-[50%] h-2 absolute -top-1 bg-background -left-[1px]"></div>
|
||||
<div className="w-[50%] h-2 absolute -bottom-1 bg-background -left-[1px]"></div>
|
||||
</>
|
||||
)}
|
||||
{index == data.branches.length - 1 && (
|
||||
<>
|
||||
<div className="w-[50%] h-2 absolute -top-1 bg-background -right-[1px]"></div>
|
||||
<div className="w-[50%] h-2 absolute -bottom-1 bg-background -right-[1px]"></div>
|
||||
</>
|
||||
)}
|
||||
{/* 条件 1 */}
|
||||
<div className="relative flex flex-col items-center">{renderNodes(branch, data.id, index)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<AddNode data={data} />
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export default BranchNode;
|
||||
@ -1,50 +0,0 @@
|
||||
import { DeleteOutlined as DeleteOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
|
||||
import { Dropdown } from "antd";
|
||||
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import AddNode from "./AddNode";
|
||||
import { type NodeProps } from "./types";
|
||||
|
||||
const ConditionNode = ({ data, branchId, branchIndex }: NodeProps) => {
|
||||
const { updateNode, removeBranch } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeBranch"]));
|
||||
const handleNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
updateNode({ ...data, name: e.target.innerText });
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-md shadow-md w-[261px] mt-10 relative z-[1]">
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "delete",
|
||||
label: "删除分支",
|
||||
icon: <DeleteOutlinedIcon />,
|
||||
danger: true,
|
||||
onClick: () => {
|
||||
removeBranch(branchId ?? "", branchIndex ?? 0);
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<div className="absolute right-2 top-1 cursor-pointer">
|
||||
<EllipsisOutlinedIcon size={17} className="text-stone-600" />
|
||||
</div>
|
||||
</Dropdown>
|
||||
|
||||
<div className="w-[261px] flex flex-col justify-center text-foreground rounded-md bg-white px-5 py-5">
|
||||
<div contentEditable suppressContentEditableWarning onBlur={handleNameBlur} className="text-center outline-slate-200 dark:text-stone-600">
|
||||
{data.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AddNode data={data} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConditionNode;
|
||||
@ -1,48 +0,0 @@
|
||||
import { memo, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { deployProvidersMap } from "@/domain/provider";
|
||||
import { type WorkflowNode } from "@/domain/workflow";
|
||||
|
||||
import DeployNodeForm from "./node/DeployNodeForm";
|
||||
|
||||
type DeployPanelBodyProps = {
|
||||
data: WorkflowNode;
|
||||
};
|
||||
|
||||
const DeployPanelBody = ({ data }: DeployPanelBodyProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [providerType, setProviderType] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (data.config?.providerType) {
|
||||
setProviderType(data.config.providerType as string);
|
||||
}
|
||||
}, [data]);
|
||||
return (
|
||||
<>
|
||||
{/* 默认展示服务商列表 */}
|
||||
<Show when={!providerType} fallback={<DeployNodeForm data={data} defaultProivderType={providerType} />}>
|
||||
<div className="text-lg font-semibold text-gray-700">选择服务商</div>
|
||||
{Array.from(deployProvidersMap.values()).map((provider, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex space-x-2 w-[47%] items-center cursor-pointer hover:bg-slate-100 p-2 rounded-sm"
|
||||
onClick={() => {
|
||||
setProviderType(provider.type);
|
||||
}}
|
||||
>
|
||||
<img src={provider.icon} alt={provider.type} className="w-8 h-8" />
|
||||
<div className="text-muted-foreground text-sm">{t(provider.name)}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(DeployPanelBody);
|
||||
@ -1,30 +0,0 @@
|
||||
import {
|
||||
CloudUploadOutlined as CloudUploadOutlinedIcon,
|
||||
SendOutlined as SendOutlinedIcon,
|
||||
SisternodeOutlined as SisternodeOutlinedIcon,
|
||||
SolutionOutlined as SolutionOutlinedIcon,
|
||||
} from "@ant-design/icons";
|
||||
import { Avatar } from "antd";
|
||||
|
||||
import { type WorkflowNodeDropdwonItemIcon, WorkflowNodeDropdwonItemIconType } from "@/domain/workflow";
|
||||
|
||||
const icons = new Map([
|
||||
["ApplyNodeIcon", <SolutionOutlinedIcon />],
|
||||
["DeployNodeIcon", <CloudUploadOutlinedIcon />],
|
||||
["BranchNodeIcon", <SisternodeOutlinedIcon />],
|
||||
["NotifyNodeIcon", <SendOutlinedIcon />],
|
||||
]);
|
||||
|
||||
const DropdownMenuItemIcon = ({ type, name }: WorkflowNodeDropdwonItemIcon) => {
|
||||
const getIcon = () => {
|
||||
if (type === WorkflowNodeDropdwonItemIconType.Icon) {
|
||||
return icons.get(name);
|
||||
} else {
|
||||
return <Avatar src={name} size="small" />;
|
||||
}
|
||||
};
|
||||
|
||||
return getIcon();
|
||||
};
|
||||
|
||||
export default DropdownMenuItemIcon;
|
||||
@ -1,147 +0,0 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DeleteOutlined as DeleteOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
|
||||
import { Button, Dropdown } from "antd";
|
||||
import { produce } from "immer";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { deployProvidersMap } from "@/domain/provider";
|
||||
import { notifyChannelsMap } from "@/domain/settings";
|
||||
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import AddNode from "./AddNode";
|
||||
import PanelBody from "./PanelBody";
|
||||
import { usePanel } from "./PanelProvider";
|
||||
|
||||
type NodeProps = {
|
||||
data: WorkflowNode;
|
||||
};
|
||||
|
||||
const i18nPrefix = "workflow.node";
|
||||
|
||||
const Node = ({ data }: NodeProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
|
||||
const { showPanel } = usePanel();
|
||||
|
||||
const handleNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
const oldName = data.name;
|
||||
const newName = e.target.innerText.trim();
|
||||
if (oldName === newName) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateNode(
|
||||
produce(data, (draft) => {
|
||||
draft.name = newName;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleNodeSettingClick = () => {
|
||||
showPanel({
|
||||
name: data.name,
|
||||
children: <PanelBody data={data} />,
|
||||
});
|
||||
};
|
||||
|
||||
const getSetting = () => {
|
||||
if (!data.validated) {
|
||||
return <>{t(`${i18nPrefix}.setting.label`)}</>;
|
||||
}
|
||||
|
||||
switch (data.type) {
|
||||
case WorkflowNodeType.Start:
|
||||
return (
|
||||
<div className="flex space-x-2 items-baseline">
|
||||
<div className="text-stone-700">
|
||||
<Show when={data.config?.executionMethod == "auto"} fallback={<>{t(`workflow.props.trigger.manual`)}</>}>
|
||||
{t(`workflow.props.trigger.auto`) + ":"}
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={data.config?.executionMethod == "auto"}>
|
||||
<div className="text-muted-foreground">{data.config?.crontab as string}</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
|
||||
case WorkflowNodeType.Apply:
|
||||
return <div className="text-muted-foreground truncate">{data.config?.domain as string}</div>;
|
||||
|
||||
case WorkflowNodeType.Deploy: {
|
||||
const provider = deployProvidersMap.get(data.config?.providerType as string);
|
||||
return (
|
||||
<div className="flex space-x-2 items-center text-muted-foreground">
|
||||
<img src={provider?.icon} className="w-6 h-6" />
|
||||
<div>{t(provider?.name ?? "")}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
case WorkflowNodeType.Notify: {
|
||||
const channelLabel = notifyChannelsMap.get(data.config?.channel as string);
|
||||
return (
|
||||
<div className="flex space-x-2 items-center justify-between">
|
||||
<div className="text-stone-700 truncate">{t(channelLabel?.name ?? "")}</div>
|
||||
<div className="text-muted-foreground truncate">{(data.config?.subject as string) ?? ""}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
default:
|
||||
return <>{t(`${i18nPrefix}.setting.label`)}</>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative w-[256px] rounded-md shadow-md overflow-hidden">
|
||||
<Show when={data.type != WorkflowNodeType.Start}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "delete",
|
||||
label: t(`${i18nPrefix}.delete.label`),
|
||||
icon: <DeleteOutlinedIcon />,
|
||||
danger: true,
|
||||
onClick: () => {
|
||||
removeNode(data.id);
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<div className="absolute right-2 top-1">
|
||||
<Button icon={<EllipsisOutlinedIcon style={{ color: "white" }} />} size="small" type="text" />
|
||||
</div>
|
||||
</Dropdown>
|
||||
</Show>
|
||||
|
||||
<div className="w-[256px] h-[48px] flex flex-col justify-center items-center bg-primary text-white rounded-t-md px-4 line-clamp-2">
|
||||
<div
|
||||
className="w-full text-center outline-none focus:bg-white focus:text-stone-600 focus:rounded-sm"
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
onBlur={handleNameBlur}
|
||||
>
|
||||
{data.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-2 text-sm text-primary flex flex-col justify-center bg-white">
|
||||
<div className="leading-7 text-primary cursor-pointer" onClick={handleNodeSettingClick}>
|
||||
{getSetting()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddNode data={data} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Node;
|
||||
@ -1,31 +1,31 @@
|
||||
import { memo } from "react";
|
||||
|
||||
import { type WorkflowBranchNode, type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
|
||||
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
|
||||
|
||||
import BranchNode from "./BranchNode";
|
||||
import ConditionNode from "./ConditionNode";
|
||||
import End from "./End";
|
||||
import Node from "./Node";
|
||||
import WorkflowElement from "./WorkflowElement";
|
||||
import BranchNode from "./node/BranchNode";
|
||||
import ConditionNode from "./node/ConditionNode";
|
||||
import EndNode from "./node/EndNode";
|
||||
import { type NodeProps } from "./types";
|
||||
|
||||
const NodeRender = memo(({ data, branchId, branchIndex }: NodeProps) => {
|
||||
const NodeRender = ({ node: data, branchId, branchIndex }: NodeProps) => {
|
||||
const render = () => {
|
||||
switch (data.type) {
|
||||
case WorkflowNodeType.Start:
|
||||
case WorkflowNodeType.Apply:
|
||||
case WorkflowNodeType.Deploy:
|
||||
case WorkflowNodeType.Notify:
|
||||
return <Node data={data} />;
|
||||
return <WorkflowElement node={data} />;
|
||||
case WorkflowNodeType.End:
|
||||
return <End />;
|
||||
return <EndNode />;
|
||||
case WorkflowNodeType.Branch:
|
||||
return <BranchNode data={data as WorkflowBranchNode} />;
|
||||
return <BranchNode node={data} />;
|
||||
case WorkflowNodeType.Condition:
|
||||
return <ConditionNode data={data as WorkflowNode} branchId={branchId} branchIndex={branchIndex} />;
|
||||
return <ConditionNode node={data as WorkflowNode} branchId={branchId} branchIndex={branchIndex} />;
|
||||
}
|
||||
};
|
||||
|
||||
return <>{render()}</>;
|
||||
});
|
||||
};
|
||||
|
||||
export default NodeRender;
|
||||
export default memo(NodeRender);
|
||||
|
||||
@ -1,28 +1,25 @@
|
||||
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
|
||||
|
||||
import DeployPanelBody from "./DeployPanelBody";
|
||||
import ApplyNodeForm from "./node/ApplyNodeForm";
|
||||
import DeployNodeForm from "./node/DeployNodeForm";
|
||||
import NotifyNodeForm from "./node/NotifyNodeForm";
|
||||
import StartNodeForm from "./node/StartNodeForm";
|
||||
|
||||
type PanelBodyProps = {
|
||||
data: WorkflowNode;
|
||||
};
|
||||
|
||||
const PanelBody = ({ data }: PanelBodyProps) => {
|
||||
const getBody = () => {
|
||||
switch (data.type) {
|
||||
case WorkflowNodeType.Start:
|
||||
return <StartNodeForm data={data} />;
|
||||
return <StartNodeForm node={data} />;
|
||||
case WorkflowNodeType.Apply:
|
||||
return <ApplyNodeForm data={data} />;
|
||||
return <ApplyNodeForm node={data} />;
|
||||
case WorkflowNodeType.Deploy:
|
||||
return <DeployPanelBody data={data} />;
|
||||
return <DeployNodeForm node={data} />;
|
||||
case WorkflowNodeType.Notify:
|
||||
return <NotifyNodeForm data={data} />;
|
||||
case WorkflowNodeType.Branch:
|
||||
return <div>分支节点</div>;
|
||||
case WorkflowNodeType.Condition:
|
||||
return <div>条件节点</div>;
|
||||
return <NotifyNodeForm node={data} />;
|
||||
default:
|
||||
return <> </>;
|
||||
}
|
||||
|
||||
158
ui/src/components/workflow/WorkflowElement.tsx
Normal file
158
ui/src/components/workflow/WorkflowElement.tsx
Normal file
@ -0,0 +1,158 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
|
||||
import { Avatar, Button, Card, Dropdown, Popover, Space, Typography } from "antd";
|
||||
import { produce } from "immer";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { deployProvidersMap } from "@/domain/provider";
|
||||
import { notifyChannelsMap } from "@/domain/settings";
|
||||
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import PanelBody from "./PanelBody";
|
||||
import { usePanel } from "./PanelProvider";
|
||||
import AddNode from "./node/AddNode";
|
||||
|
||||
export type NodeProps = {
|
||||
node: WorkflowNode;
|
||||
};
|
||||
|
||||
const WorkflowElement = ({ node }: NodeProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
|
||||
const { showPanel } = usePanel();
|
||||
|
||||
const renderNodeContent = () => {
|
||||
if (!node.validated) {
|
||||
return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
|
||||
}
|
||||
|
||||
switch (node.type) {
|
||||
case WorkflowNodeType.Start: {
|
||||
return (
|
||||
<div className="flex space-x-2 items-center justify-between">
|
||||
<Typography.Text className="truncate">
|
||||
{node.config?.executionMethod === "auto"
|
||||
? t("workflow.props.trigger.auto")
|
||||
: node.config?.executionMethod === "manual"
|
||||
? t("workflow.props.trigger.manual")
|
||||
: ""}
|
||||
</Typography.Text>
|
||||
<Typography.Text className="truncate" type="secondary">
|
||||
{node.config?.executionMethod === "auto" ? (node.config?.crontab as string) : ""}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
case WorkflowNodeType.Apply: {
|
||||
return <Typography.Text className="truncate">{node.config?.domain as string}</Typography.Text>;
|
||||
}
|
||||
|
||||
case WorkflowNodeType.Deploy: {
|
||||
const provider = deployProvidersMap.get(node.config?.providerType as string);
|
||||
return (
|
||||
<Space>
|
||||
<Avatar src={provider?.icon} size="small" />
|
||||
<Typography.Text className="truncate">{t(provider?.name ?? "")}</Typography.Text>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
case WorkflowNodeType.Notify: {
|
||||
const channel = notifyChannelsMap.get(node.config?.channel as string);
|
||||
return (
|
||||
<div className="flex space-x-2 items-center justify-between">
|
||||
<Typography.Text className="truncate">{t(channel?.name ?? "")}</Typography.Text>
|
||||
<Typography.Text className="truncate" type="secondary">
|
||||
{(node.config?.subject as string) ?? ""}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
default: {
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
const oldName = node.name;
|
||||
const newName = e.target.innerText.trim();
|
||||
if (oldName === newName) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateNode(
|
||||
produce(node, (draft) => {
|
||||
draft.name = newName;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleNodeClick = () => {
|
||||
showPanel({
|
||||
name: node.name,
|
||||
children: <PanelBody data={node} />,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popover
|
||||
arrow={false}
|
||||
content={
|
||||
<Show when={node.type !== WorkflowNodeType.Start}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "delete",
|
||||
label: t("workflow_node.action.delete_node"),
|
||||
icon: <CloseCircleOutlinedIcon />,
|
||||
danger: true,
|
||||
onClick: () => {
|
||||
removeNode(node.id);
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
|
||||
</Dropdown>
|
||||
</Show>
|
||||
}
|
||||
overlayClassName="shadow-md"
|
||||
overlayInnerStyle={{ padding: 0 }}
|
||||
placement="rightTop"
|
||||
>
|
||||
<Card className="relative w-[256px] shadow-md overflow-hidden" styles={{ body: { padding: 0 } }} hoverable>
|
||||
<div className="h-[48px] px-4 py-2 flex flex-col justify-center items-center bg-primary text-white truncate">
|
||||
<div
|
||||
className="w-full text-center outline-none overflow-hidden focus:bg-background focus:text-foreground focus:rounded-sm"
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
onBlur={handleNodeNameBlur}
|
||||
>
|
||||
{node.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-2 flex flex-col justify-center">
|
||||
<div className="text-sm cursor-pointer" onClick={handleNodeClick}>
|
||||
{renderNodeContent()}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Popover>
|
||||
|
||||
<AddNode node={node} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowElement;
|
||||
41
ui/src/components/workflow/WorkflowElements.tsx
Normal file
41
ui/src/components/workflow/WorkflowElements.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { useMemo } from "react";
|
||||
|
||||
import NodeRender from "@/components/workflow/NodeRender";
|
||||
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
|
||||
import EndNode from "@/components/workflow/node/EndNode";
|
||||
import { type WorkflowNode } from "@/domain/workflow";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
export type WorkflowElementsProps = {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
const WorkflowElements = ({ className, style }: WorkflowElementsProps) => {
|
||||
const { workflow } = useWorkflowStore(useZustandShallowSelector(["workflow"]));
|
||||
|
||||
const elements = useMemo(() => {
|
||||
const nodes: JSX.Element[] = [];
|
||||
|
||||
let current = workflow.draft as WorkflowNode;
|
||||
while (current) {
|
||||
nodes.push(<NodeRender node={current} key={current.id} />);
|
||||
current = current.next as WorkflowNode;
|
||||
}
|
||||
|
||||
nodes.push(<EndNode key="workflow-end" />);
|
||||
|
||||
return nodes;
|
||||
}, [workflow]);
|
||||
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
<div className="flex flex-col items-center overflow-auto">
|
||||
<WorkflowProvider>{elements}</WorkflowProvider>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowElements;
|
||||
72
ui/src/components/workflow/node/AddNode.tsx
Normal file
72
ui/src/components/workflow/node/AddNode.tsx
Normal file
@ -0,0 +1,72 @@
|
||||
import {
|
||||
CloudUploadOutlined as CloudUploadOutlinedIcon,
|
||||
PlusOutlined as PlusOutlinedIcon,
|
||||
SendOutlined as SendOutlinedIcon,
|
||||
SisternodeOutlined as SisternodeOutlinedIcon,
|
||||
SolutionOutlined as SolutionOutlinedIcon,
|
||||
} from "@ant-design/icons";
|
||||
import { Dropdown } from "antd";
|
||||
|
||||
import { WorkflowNodeType, newNode, workflowNodeTypeDefaultNames } from "@/domain/workflow";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import { type BrandNodeProps, type NodeProps } from "../types";
|
||||
|
||||
const dropdownMenus = [
|
||||
{
|
||||
type: WorkflowNodeType.Apply,
|
||||
label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Apply),
|
||||
icon: <SolutionOutlinedIcon />,
|
||||
},
|
||||
{
|
||||
type: WorkflowNodeType.Deploy,
|
||||
label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Deploy),
|
||||
icon: <CloudUploadOutlinedIcon />,
|
||||
},
|
||||
{
|
||||
type: WorkflowNodeType.Branch,
|
||||
label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Branch),
|
||||
icon: <SisternodeOutlinedIcon />,
|
||||
},
|
||||
{
|
||||
type: WorkflowNodeType.Notify,
|
||||
label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Notify),
|
||||
icon: <SendOutlinedIcon />,
|
||||
},
|
||||
];
|
||||
|
||||
const AddNode = ({ node: supnode }: NodeProps | BrandNodeProps) => {
|
||||
const { addNode } = useWorkflowStore(useZustandShallowSelector(["addNode"]));
|
||||
|
||||
const handleNodeTypeSelect = (type: WorkflowNodeType) => {
|
||||
const node = newNode(type);
|
||||
addNode(node, supnode.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative py-6 before:content-[''] before:absolute before:w-[2px] before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0 before:bg-stone-200">
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: dropdownMenus.map((item) => {
|
||||
return {
|
||||
key: item.type,
|
||||
label: item.label,
|
||||
icon: item.icon,
|
||||
onClick: () => {
|
||||
handleNodeTypeSelect(item.type);
|
||||
},
|
||||
};
|
||||
}),
|
||||
}}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<div className="bg-stone-400 hover:bg-stone-500 rounded-full size-5 z-[1] relative flex items-center justify-center cursor-pointer">
|
||||
<PlusOutlinedIcon className="text-white" />
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddNode;
|
||||
@ -7,10 +7,10 @@ import { createSchemaFieldRule } from "antd-zod";
|
||||
import { produce } from "immer";
|
||||
import { z } from "zod";
|
||||
|
||||
import ModalForm from "@/components/ModalForm";
|
||||
import MultipleInput from "@/components/MultipleInput";
|
||||
import AccessEditModal from "@/components/access/AccessEditModal";
|
||||
import AccessSelect from "@/components/access/AccessSelect";
|
||||
import ModalForm from "@/components/core/ModalForm";
|
||||
import MultipleInput from "@/components/core/MultipleInput";
|
||||
import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
|
||||
import { type WorkflowNode } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
@ -20,7 +20,7 @@ import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/val
|
||||
import { usePanel } from "../PanelProvider";
|
||||
|
||||
export type ApplyNodeFormProps = {
|
||||
data: WorkflowNode;
|
||||
node: WorkflowNode;
|
||||
};
|
||||
|
||||
const MULTIPLE_INPUT_DELIMITER = ";";
|
||||
@ -35,7 +35,7 @@ const initFormModel = () => {
|
||||
};
|
||||
};
|
||||
|
||||
const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
|
||||
const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail"));
|
||||
@ -74,12 +74,12 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: data?.config ?? initFormModel(),
|
||||
initialValues: node?.config ?? initFormModel(),
|
||||
onSubmit: async (values) => {
|
||||
await formInst.validateFields();
|
||||
await addEmail(values.email);
|
||||
await updateNode(
|
||||
produce(data, (draft) => {
|
||||
produce(node, (draft) => {
|
||||
draft.config = { ...values };
|
||||
draft.validated = true;
|
||||
})
|
||||
@ -88,8 +88,8 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
|
||||
},
|
||||
});
|
||||
|
||||
const [fieldDomains, setFieldDomains] = useState(data?.config?.domain as string);
|
||||
const [fieldNameservers, setFieldNameservers] = useState(data?.config?.nameservers as string);
|
||||
const [fieldDomains, setFieldDomains] = useState(node?.config?.domain as string);
|
||||
const [fieldNameservers, setFieldNameservers] = useState(node?.config?.nameservers as string);
|
||||
|
||||
const handleFieldDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
|
||||
63
ui/src/components/workflow/node/BranchNode.tsx
Normal file
63
ui/src/components/workflow/node/BranchNode.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import { memo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "antd";
|
||||
|
||||
import { type WorkflowNode } from "@/domain/workflow";
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import NodeRender from "../NodeRender";
|
||||
import AddNode from "./AddNode";
|
||||
|
||||
export type BrandNodeProps = {
|
||||
node: WorkflowNode;
|
||||
};
|
||||
|
||||
const BranchNode = ({ node }: BrandNodeProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
|
||||
|
||||
const renderNodes = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
|
||||
const elements: JSX.Element[] = [];
|
||||
|
||||
let current = node as WorkflowNode | undefined;
|
||||
while (current) {
|
||||
elements.push(<NodeRender key={current.id} node={current} branchId={branchNodeId} branchIndex={branchIndex} />);
|
||||
current = current.next;
|
||||
}
|
||||
|
||||
return elements;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative flex gap-x-16 before:content-[''] before:absolute before:h-[2px] before:left-[128px] before:right-[128px] before:top-0 before:bg-stone-200">
|
||||
<Button
|
||||
className="text-xs absolute left-[50%] -translate-x-1/2 -translate-y-1/2 z-[1]"
|
||||
size="small"
|
||||
shape="round"
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
addBranch(node.id);
|
||||
}}
|
||||
>
|
||||
{t("workflow_node.action.add_branch")}
|
||||
</Button>
|
||||
|
||||
{node.branches!.map((branch, index) => (
|
||||
<div
|
||||
key={branch.id}
|
||||
className="relative flex flex-col items-center before:content-[''] before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0"
|
||||
>
|
||||
<div className="relative flex flex-col items-center">{renderNodes(branch, node.id, index)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<AddNode node={node} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(BranchNode);
|
||||
78
ui/src/components/workflow/node/ConditionNode.tsx
Normal file
78
ui/src/components/workflow/node/ConditionNode.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
|
||||
import { Button, Card, Dropdown, Popover } from "antd";
|
||||
import { produce } from "immer";
|
||||
|
||||
import { useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
|
||||
import AddNode from "./AddNode";
|
||||
import { type NodeProps } from "../types";
|
||||
|
||||
const ConditionNode = ({ node, branchId, branchIndex }: NodeProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { updateNode, removeBranch } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeBranch"]));
|
||||
|
||||
const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
const oldName = node.name;
|
||||
const newName = e.target.innerText.trim();
|
||||
if (oldName === newName) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateNode(
|
||||
produce(node, (draft) => {
|
||||
draft.name = newName;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popover
|
||||
arrow={false}
|
||||
content={
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "delete",
|
||||
label: t("workflow_node.action.delete_branch"),
|
||||
icon: <CloseCircleOutlinedIcon />,
|
||||
danger: true,
|
||||
onClick: () => {
|
||||
removeBranch(branchId ?? "", branchIndex ?? 0);
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
|
||||
</Dropdown>
|
||||
}
|
||||
overlayClassName="shadow-md"
|
||||
overlayInnerStyle={{ padding: 0 }}
|
||||
placement="rightTop"
|
||||
>
|
||||
<Card className="relative w-[256px] shadow-md mt-10 z-[1]" styles={{ body: { padding: 0 } }} hoverable>
|
||||
<div className="h-[48px] px-4 py-2 flex flex-col justify-center items-center truncate">
|
||||
<div
|
||||
className="w-full text-center outline-slate-200 overflow-hidden focus:bg-background focus:text-foreground focus:rounded-sm"
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
onBlur={handleNodeNameBlur}
|
||||
>
|
||||
{node.name}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Popover>
|
||||
|
||||
<AddNode node={node} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConditionNode;
|
||||
@ -1,13 +1,16 @@
|
||||
import { memo, useEffect, useMemo, useState } from "react";
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
|
||||
import { Avatar, Button, Divider, Form, Select, Space, Tooltip, Typography } from "antd";
|
||||
import { Button, Divider, Form, Select, Tooltip, Typography } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { produce } from "immer";
|
||||
import { z } from "zod";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import AccessEditModal from "@/components/access/AccessEditModal";
|
||||
import AccessSelect from "@/components/access/AccessSelect";
|
||||
import DeployProviderPicker from "@/components/provider/DeployProviderPicker";
|
||||
import DeployProviderSelect from "@/components/provider/DeployProviderSelect";
|
||||
import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider";
|
||||
import { type WorkflowNode } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
@ -38,15 +41,14 @@ import DeployNodeFormVolcEngineLiveFields from "./DeployNodeFormVolcEngineLiveFi
|
||||
import DeployNodeFormWebhookFields from "./DeployNodeFormWebhookFields";
|
||||
|
||||
export type DeployFormProps = {
|
||||
data: WorkflowNode;
|
||||
defaultProivderType?: string;
|
||||
node: WorkflowNode;
|
||||
};
|
||||
|
||||
const initFormModel = () => {
|
||||
return {};
|
||||
};
|
||||
|
||||
const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
|
||||
const DeployNodeForm = ({ node }: DeployFormProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
|
||||
@ -67,11 +69,11 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: data?.config ?? initFormModel(),
|
||||
initialValues: node?.config ?? initFormModel(),
|
||||
onSubmit: async (values) => {
|
||||
await formInst.validateFields();
|
||||
await updateNode(
|
||||
produce(data, (draft) => {
|
||||
produce(node, (draft) => {
|
||||
draft.config = { ...values };
|
||||
draft.validated = true;
|
||||
})
|
||||
@ -82,12 +84,11 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
|
||||
|
||||
const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]);
|
||||
useEffect(() => {
|
||||
const rs = getWorkflowOuptutBeforeId(data.id, "certificate");
|
||||
const rs = getWorkflowOuptutBeforeId(node.id, "certificate");
|
||||
setPreviousOutput(rs);
|
||||
}, [data, getWorkflowOuptutBeforeId]);
|
||||
}, [node, getWorkflowOuptutBeforeId]);
|
||||
|
||||
const fieldProviderType = Form.useWatch("providerType", formInst);
|
||||
// const fieldAccess = Form.useWatch("access", formInst);
|
||||
const fieldProviderType = Form.useWatch("providerType", { form: formInst, preserve: true });
|
||||
|
||||
const formFieldsComponent = useMemo(() => {
|
||||
/*
|
||||
@ -144,11 +145,18 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
|
||||
}
|
||||
}, [fieldProviderType]);
|
||||
|
||||
const handleProviderTypePick = useCallback(
|
||||
(value: string) => {
|
||||
formInst.setFieldValue("providerType", value);
|
||||
},
|
||||
[formInst]
|
||||
);
|
||||
|
||||
const handleProviderTypeSelect = (value: string) => {
|
||||
if (fieldProviderType === value) return;
|
||||
|
||||
// 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标
|
||||
if (data.config?.providerType === value) {
|
||||
if (node.config?.providerType === value) {
|
||||
formInst.resetFields();
|
||||
} else {
|
||||
const oldValues = formInst.getFieldsValue();
|
||||
@ -161,119 +169,107 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
|
||||
}
|
||||
}
|
||||
formInst.setFieldsValue(newValues);
|
||||
|
||||
if (deployProvidersMap.get(fieldProviderType)?.provider !== deployProvidersMap.get(value)?.provider) {
|
||||
formInst.setFieldValue("access", undefined);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
|
||||
<Form.Item name="providerType" label={t("workflow_node.deploy.form.provider_type.label")} rules={[formRule]} initialValue={defaultProivderType}>
|
||||
<Select
|
||||
showSearch
|
||||
placeholder={t("workflow_node.deploy.form.provider_type.placeholder")}
|
||||
filterOption={(searchValue, option) => {
|
||||
const type = String(option?.value ?? "");
|
||||
const target = deployProvidersMap.get(type);
|
||||
const filter = (v?: string) => v?.toLowerCase()?.includes(searchValue.toLowerCase()) ?? false;
|
||||
return filter(type) || filter(t(target?.name ?? ""));
|
||||
}}
|
||||
onSelect={handleProviderTypeSelect}
|
||||
>
|
||||
{Array.from(deployProvidersMap.values()).map((item) => {
|
||||
return (
|
||||
<Select.Option key={item.type} label={t(item.name)} value={item.type} title={t(item.name)}>
|
||||
<Space className="flex-grow max-w-full truncate" size={4}>
|
||||
<Avatar src={item.icon} size="small" />
|
||||
<Typography.Text className="leading-loose" ellipsis>
|
||||
{t(item.name)}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
</Select.Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item className="mb-0">
|
||||
<label className="block mb-1">
|
||||
<div className="flex items-center justify-between gap-4 w-full">
|
||||
<div className="flex-grow max-w-full truncate">
|
||||
<span>{t("workflow_node.deploy.form.provider_access.label")}</span>
|
||||
<Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
|
||||
<Typography.Text className="ms-1" type="secondary">
|
||||
<QuestionCircleOutlinedIcon />
|
||||
</Typography.Text>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<AccessEditModal
|
||||
data={{ configType: deployProvidersMap.get(defaultProivderType!)?.provider }}
|
||||
preset="add"
|
||||
trigger={
|
||||
<Button size="small" type="link">
|
||||
<PlusOutlinedIcon />
|
||||
{t("workflow_node.deploy.form.provider_access.button")}
|
||||
</Button>
|
||||
}
|
||||
onSubmit={(record) => {
|
||||
const provider = accessProvidersMap.get(record.configType);
|
||||
if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
|
||||
formInst.setFieldValue("access", record.id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<Form.Item name="access" rules={[formRule]}>
|
||||
<AccessSelect
|
||||
placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
|
||||
filter={(record) => {
|
||||
if (defaultProivderType) {
|
||||
return deployProvidersMap.get(defaultProivderType)?.provider === record.configType;
|
||||
}
|
||||
|
||||
const provider = accessProvidersMap.get(record.configType);
|
||||
return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
|
||||
}}
|
||||
<Show when={!!fieldProviderType} fallback={<DeployProviderPicker onSelect={handleProviderTypePick} />}>
|
||||
<Form.Item name="providerType" label={t("workflow_node.deploy.form.provider_type.label")} rules={[formRule]}>
|
||||
<DeployProviderSelect
|
||||
allowClear
|
||||
placeholder={t("workflow_node.deploy.form.provider_type.placeholder")}
|
||||
showSearch
|
||||
onSelect={handleProviderTypeSelect}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="certificate"
|
||||
label={t("workflow_node.deploy.form.certificate.label")}
|
||||
rules={[formRule]}
|
||||
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
|
||||
>
|
||||
<Select
|
||||
options={previousOutput.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
options: item.output?.map((output) => {
|
||||
return {
|
||||
label: `${item.name} - ${output.label}`,
|
||||
value: `${item.id}#${output.name}`,
|
||||
};
|
||||
}),
|
||||
};
|
||||
})}
|
||||
placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item className="mb-0">
|
||||
<label className="block mb-1">
|
||||
<div className="flex items-center justify-between gap-4 w-full">
|
||||
<div className="flex-grow max-w-full truncate">
|
||||
<span>{t("workflow_node.deploy.form.provider_access.label")}</span>
|
||||
<Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
|
||||
<Typography.Text className="ms-1" type="secondary">
|
||||
<QuestionCircleOutlinedIcon />
|
||||
</Typography.Text>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<AccessEditModal
|
||||
data={{ configType: deployProvidersMap.get(fieldProviderType!)?.provider }}
|
||||
preset="add"
|
||||
trigger={
|
||||
<Button size="small" type="link">
|
||||
<PlusOutlinedIcon />
|
||||
{t("workflow_node.deploy.form.provider_access.button")}
|
||||
</Button>
|
||||
}
|
||||
onSubmit={(record) => {
|
||||
const provider = accessProvidersMap.get(record.configType);
|
||||
if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
|
||||
formInst.setFieldValue("access", record.id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<Form.Item name="access" rules={[formRule]}>
|
||||
<AccessSelect
|
||||
placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
|
||||
filter={(record) => {
|
||||
if (fieldProviderType) {
|
||||
return deployProvidersMap.get(fieldProviderType)?.provider === record.configType;
|
||||
}
|
||||
|
||||
<Divider className="my-1">
|
||||
<Typography.Text className="font-normal text-xs" type="secondary">
|
||||
{t("workflow_node.deploy.form.params_config.label")}
|
||||
</Typography.Text>
|
||||
</Divider>
|
||||
const provider = accessProvidersMap.get(record.configType);
|
||||
return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
|
||||
{formFieldsComponent}
|
||||
<Form.Item
|
||||
name="certificate"
|
||||
label={t("workflow_node.deploy.form.certificate.label")}
|
||||
rules={[formRule]}
|
||||
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
|
||||
>
|
||||
<Select
|
||||
options={previousOutput.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
options: item.output?.map((output) => {
|
||||
return {
|
||||
label: `${item.name} - ${output.label}`,
|
||||
value: `${item.id}#${output.name}`,
|
||||
};
|
||||
}),
|
||||
};
|
||||
})}
|
||||
placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Divider className="my-1">
|
||||
<Typography.Text className="font-normal text-xs" type="secondary">
|
||||
{t("workflow_node.deploy.form.params_config.label")}
|
||||
</Typography.Text>
|
||||
</Divider>
|
||||
|
||||
{formFieldsComponent}
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Show>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Typography } from "antd";
|
||||
|
||||
const End = () => {
|
||||
const EndNode = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="size-[20px] rounded-full bg-stone-400"></div>
|
||||
<div className="text-sm text-stone-400 mt-2">{t("workflow_node.end.label")}</div>
|
||||
<div className="text-sm mt-2">
|
||||
<Typography.Text type="secondary">{t("workflow_node.end.label")}</Typography.Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default End;
|
||||
export default EndNode;
|
||||
@ -15,7 +15,7 @@ import { useWorkflowStore } from "@/stores/workflow";
|
||||
import { usePanel } from "../PanelProvider";
|
||||
|
||||
export type NotifyNodeFormProps = {
|
||||
data: WorkflowNode;
|
||||
node: WorkflowNode;
|
||||
};
|
||||
|
||||
const initFormModel = () => {
|
||||
@ -25,7 +25,7 @@ const initFormModel = () => {
|
||||
};
|
||||
};
|
||||
|
||||
const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
|
||||
const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const {
|
||||
@ -57,11 +57,11 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: data?.config ?? initFormModel(),
|
||||
initialValues: node?.config ?? initFormModel(),
|
||||
onSubmit: async (values) => {
|
||||
await formInst.validateFields();
|
||||
await updateNode(
|
||||
produce(data, (draft) => {
|
||||
produce(node, (draft) => {
|
||||
draft.config = { ...values };
|
||||
draft.validated = true;
|
||||
})
|
||||
|
||||
@ -14,7 +14,7 @@ import { getNextCronExecutions, validCronExpression } from "@/utils/cron";
|
||||
import { usePanel } from "../PanelProvider";
|
||||
|
||||
export type StartNodeFormProps = {
|
||||
data: WorkflowNode;
|
||||
node: WorkflowNode;
|
||||
};
|
||||
|
||||
const initFormModel = () => {
|
||||
@ -24,7 +24,7 @@ const initFormModel = () => {
|
||||
};
|
||||
};
|
||||
|
||||
const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
||||
const StartNodeForm = ({ node }: StartNodeFormProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
|
||||
@ -54,11 +54,11 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: data?.config ?? initFormModel(),
|
||||
initialValues: node?.config ?? initFormModel(),
|
||||
onSubmit: async (values) => {
|
||||
await formInst.validateFields();
|
||||
await updateNode(
|
||||
produce(data, (draft) => {
|
||||
produce(node, (draft) => {
|
||||
draft.config = { ...values };
|
||||
draft.validated = true;
|
||||
})
|
||||
@ -67,12 +67,12 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
||||
},
|
||||
});
|
||||
|
||||
const [triggerType, setTriggerType] = useState(data?.config?.executionMethod);
|
||||
const [triggerType, setTriggerType] = useState(node?.config?.executionMethod);
|
||||
const [triggerCronLastExecutions, setTriggerCronExecutions] = useState<Date[]>([]);
|
||||
useEffect(() => {
|
||||
setTriggerType(data?.config?.executionMethod);
|
||||
setTriggerCronExecutions(getNextCronExecutions(data?.config?.crontab as string, 5));
|
||||
}, [data?.config?.executionMethod, data?.config?.crontab]);
|
||||
setTriggerType(node?.config?.executionMethod);
|
||||
setTriggerCronExecutions(getNextCronExecutions(node?.config?.crontab as string, 5));
|
||||
}, [node?.config?.executionMethod, node?.config?.crontab]);
|
||||
|
||||
const handleTriggerTypeChange = (value: string) => {
|
||||
setTriggerType(value);
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
import { type WorkflowBranchNode, type WorkflowNode } from "@/domain/workflow";
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export type NodeProps = {
|
||||
data: WorkflowNode | WorkflowBranchNode;
|
||||
node: WorkflowNode | WorkflowBranchNode;
|
||||
branchId?: string;
|
||||
branchIndex?: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export type BrandNodeProps = {
|
||||
data: WorkflowBranchNode;
|
||||
node: WorkflowBranchNode;
|
||||
};
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
export const SETTINGS_NAME_EMAILS = "emails" as const;
|
||||
export const SETTINGS_NAME_NOTIFYTEMPLATES = "notifyTemplates" as const;
|
||||
export const SETTINGS_NAME_NOTIFYCHANNELS = "notifyChannels" as const;
|
||||
export const SETTINGS_NAME_SSLPROVIDER = "sslProvider" as const;
|
||||
export const SETTINGS_NAMES = Object.freeze({
|
||||
EMAILS: SETTINGS_NAME_EMAILS,
|
||||
NOTIFY_TEMPLATES: SETTINGS_NAME_NOTIFYTEMPLATES,
|
||||
NOTIFY_CHANNELS: SETTINGS_NAME_NOTIFYCHANNELS,
|
||||
SSL_PROVIDER: SETTINGS_NAME_SSLPROVIDER,
|
||||
EMAILS: "emails",
|
||||
NOTIFY_TEMPLATES: "notifyTemplates",
|
||||
NOTIFY_CHANNELS: "notifyChannels",
|
||||
SSL_PROVIDER: "sslProvider",
|
||||
} as const);
|
||||
|
||||
export type SettingsNames = (typeof SETTINGS_NAMES)[keyof typeof SETTINGS_NAMES];
|
||||
|
||||
@ -28,7 +28,7 @@ export enum WorkflowNodeType {
|
||||
Custom = "custom",
|
||||
}
|
||||
|
||||
const workflowNodeTypeDefaultNames: Map<WorkflowNodeType, string> = new Map([
|
||||
export const workflowNodeTypeDefaultNames: Map<WorkflowNodeType, string> = new Map([
|
||||
[WorkflowNodeType.Start, i18n.t("workflow_node.start.label")],
|
||||
[WorkflowNodeType.End, i18n.t("workflow_node.end.label")],
|
||||
[WorkflowNodeType.Branch, i18n.t("workflow_node.branch.label")],
|
||||
@ -39,7 +39,7 @@ const workflowNodeTypeDefaultNames: Map<WorkflowNodeType, string> = new Map([
|
||||
[WorkflowNodeType.Custom, i18n.t("workflow_node.custom.title")],
|
||||
]);
|
||||
|
||||
const workflowNodeTypeDefaultInputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = new Map([
|
||||
export const workflowNodeTypeDefaultInputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = new Map([
|
||||
[WorkflowNodeType.Apply, []],
|
||||
[
|
||||
WorkflowNodeType.Deploy,
|
||||
@ -48,14 +48,14 @@ const workflowNodeTypeDefaultInputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = n
|
||||
name: "certificate",
|
||||
type: "certificate",
|
||||
required: true,
|
||||
label: i18n.t("workflow.common.certificate.label"),
|
||||
label: "证书",
|
||||
},
|
||||
],
|
||||
],
|
||||
[WorkflowNodeType.Notify, []],
|
||||
]);
|
||||
|
||||
const workflowNodeTypeDefaultOutputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = new Map([
|
||||
export const workflowNodeTypeDefaultOutputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = new Map([
|
||||
[
|
||||
WorkflowNodeType.Apply,
|
||||
[
|
||||
@ -63,7 +63,7 @@ const workflowNodeTypeDefaultOutputs: Map<WorkflowNodeType, WorkflowNodeIO[]> =
|
||||
name: "certificate",
|
||||
type: "certificate",
|
||||
required: true,
|
||||
label: i18n.t("workflow.common.certificate.label"),
|
||||
label: "证书",
|
||||
},
|
||||
],
|
||||
],
|
||||
@ -148,10 +148,9 @@ export const initWorkflow = (options: InitWorkflowOptions = {}): WorkflowModel =
|
||||
|
||||
type NewNodeOptions = {
|
||||
branchIndex?: number;
|
||||
providerType?: string;
|
||||
};
|
||||
|
||||
export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions): WorkflowNode | WorkflowBranchNode => {
|
||||
export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions = {}): WorkflowNode | WorkflowBranchNode => {
|
||||
const nodeTypeName = workflowNodeTypeDefaultNames.get(nodeType) || "";
|
||||
const nodeName = options.branchIndex != null ? `${nodeTypeName} ${options.branchIndex + 1}` : nodeTypeName;
|
||||
|
||||
@ -165,9 +164,7 @@ export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions): Wo
|
||||
case WorkflowNodeType.Apply:
|
||||
case WorkflowNodeType.Deploy:
|
||||
{
|
||||
node.config = {
|
||||
providerType: options.providerType,
|
||||
};
|
||||
node.config = {};
|
||||
node.input = workflowNodeTypeDefaultInputs.get(nodeType);
|
||||
node.output = workflowNodeTypeDefaultOutputs.get(nodeType);
|
||||
}
|
||||
@ -389,89 +386,3 @@ export const getExecuteMethod = (node: WorkflowNode): { type: string; crontab: s
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
type WorkflowNodeDropdwonItem = {
|
||||
type: WorkflowNodeType;
|
||||
providerType?: string;
|
||||
name: string;
|
||||
icon: WorkflowNodeDropdwonItemIcon;
|
||||
leaf?: boolean;
|
||||
children?: WorkflowNodeDropdwonItem[];
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export enum WorkflowNodeDropdwonItemIconType {
|
||||
Icon,
|
||||
Provider,
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export type WorkflowNodeDropdwonItemIcon = {
|
||||
type: WorkflowNodeDropdwonItemIconType;
|
||||
name: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
const workflowNodeDropdownDeployList: WorkflowNodeDropdwonItem[] = Array.from(deployProvidersMap.values()).map((item) => {
|
||||
return {
|
||||
type: WorkflowNodeType.Apply,
|
||||
providerType: item.type,
|
||||
name: i18n.t(item.name),
|
||||
leaf: true,
|
||||
icon: {
|
||||
type: WorkflowNodeDropdwonItemIconType.Provider,
|
||||
name: item.icon,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export const workflowNodeDropdownList: WorkflowNodeDropdwonItem[] = [
|
||||
{
|
||||
type: WorkflowNodeType.Apply,
|
||||
name: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Apply) ?? "",
|
||||
icon: {
|
||||
type: WorkflowNodeDropdwonItemIconType.Icon,
|
||||
name: "ApplyNodeIcon",
|
||||
},
|
||||
leaf: true,
|
||||
},
|
||||
{
|
||||
type: WorkflowNodeType.Deploy,
|
||||
name: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Deploy) ?? "",
|
||||
icon: {
|
||||
type: WorkflowNodeDropdwonItemIconType.Icon,
|
||||
name: "DeployNodeIcon",
|
||||
},
|
||||
children: workflowNodeDropdownDeployList,
|
||||
},
|
||||
{
|
||||
type: WorkflowNodeType.Branch,
|
||||
name: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Branch) ?? "",
|
||||
leaf: true,
|
||||
icon: {
|
||||
type: WorkflowNodeDropdwonItemIconType.Icon,
|
||||
name: "BranchNodeIcon",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: WorkflowNodeType.Notify,
|
||||
name: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Notify) ?? "",
|
||||
leaf: true,
|
||||
icon: {
|
||||
type: WorkflowNodeDropdwonItemIconType.Icon,
|
||||
name: "NotifyNodeIcon",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@ -5,41 +5,13 @@
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 20 14.3% 4.1%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 20 14.3% 4.1%;
|
||||
--foreground: 0, 0%, 8%;
|
||||
--primary: 24.6 95% 53.1%;
|
||||
--primary-foreground: 60 9.1% 97.8%;
|
||||
--secondary: 60 4.8% 95.9%;
|
||||
--secondary-foreground: 24 9.8% 10%;
|
||||
--muted: 60 4.8% 95.9%;
|
||||
--muted-foreground: 25 5.3% 44.7%;
|
||||
--accent: 60 4.8% 95.9%;
|
||||
--accent-foreground: 24 9.8% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 60 9.1% 97.8%;
|
||||
--border: 20 5.9% 90%;
|
||||
--input: 20 5.9% 90%;
|
||||
--ring: 24.6 95% 53.1%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 20 14.3% 4.1%;
|
||||
--background: 0, 0%, 8%;
|
||||
--foreground: 60 9.1% 97.8%;
|
||||
--popover: 20 14.3% 4.1%;
|
||||
--popover-foreground: 60 9.1% 97.8%;
|
||||
--primary: 20.5 90.2% 48.2%;
|
||||
--primary-foreground: 60 9.1% 97.8%;
|
||||
--secondary: 12 6.5% 15.1%;
|
||||
--secondary-foreground: 60 9.1% 97.8%;
|
||||
--muted: 12 6.5% 15.1%;
|
||||
--muted-foreground: 24 5.4% 63.9%;
|
||||
--accent: 12 6.5% 15.1%;
|
||||
--accent-foreground: 60 9.1% 97.8%;
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 60 9.1% 97.8%;
|
||||
--border: 12 6.5% 15.1%;
|
||||
--input: 12 6.5% 15.1%;
|
||||
--ring: 20.5 90.2% 48.2%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,10 +44,5 @@
|
||||
"workflow.detail.orchestration.action.release.failed.uncompleted": "Please complete the orchestration first",
|
||||
"workflow.detail.orchestration.action.run": "Run",
|
||||
"workflow.detail.orchestration.action.run.confirm": "There are unreleased changes, are you sure to run this workflow based on the latest released version?",
|
||||
"workflow.detail.runs.tab": "History runs",
|
||||
|
||||
"workflow.common.certificate.label": "Certificate",
|
||||
"workflow.node.setting.label": "Setting Node",
|
||||
"workflow.node.delete.label": "Delete Node",
|
||||
"workflow.node.addBranch.label": "Add Branch"
|
||||
"workflow.detail.runs.tab": "History runs"
|
||||
}
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
{
|
||||
"workflow_node.action.configure_node": "Configure",
|
||||
"workflow_node.action.add_node": "Add node",
|
||||
"workflow_node.action.delete_node": "Delete node",
|
||||
"workflow_node.action.add_branch": "Add branch",
|
||||
"workflow_node.action.delete_branch": "Delete branch",
|
||||
|
||||
"workflow_node.start.label": "Start",
|
||||
"workflow_node.start.form.trigger.label": "Trigger",
|
||||
"workflow_node.start.form.trigger.placeholder": "Please select trigger",
|
||||
@ -41,6 +47,7 @@
|
||||
"workflow_node.apply.form.disable_follow_cname.tooltip": "It determines whether to disable CNAME following during ACME DNS-01 authentication. If you don't understand this option, just keep it by default.<br><a href=\"https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname\" target=\"_blank\">Learn more</a>.",
|
||||
|
||||
"workflow_node.deploy.label": "Deployment",
|
||||
"workflow_node.deploy.search.provider_type.placeholder": "Search deploy target ...",
|
||||
"workflow_node.deploy.form.provider_type.label": "Deploy target",
|
||||
"workflow_node.deploy.form.provider_type.placeholder": "Please select deploy target",
|
||||
"workflow_node.deploy.form.provider_access.label": "Host provider authorization",
|
||||
|
||||
@ -41,13 +41,8 @@
|
||||
"workflow.detail.orchestration.action.discard.confirm": "确定要撤销更改并回退到最近一次发布的版本吗？",
|
||||
"workflow.detail.orchestration.action.release": "发布更改",
|
||||
"workflow.detail.orchestration.action.release.confirm": "确定要发布更改吗？",
|
||||
"workflow.detail.orchestration.action.release.failed.uncompleted": "流程编排未完成，请检查是否有节点未设置",
|
||||
"workflow.detail.orchestration.action.release.failed.uncompleted": "流程编排未完成，请检查是否有节点未配置",
|
||||
"workflow.detail.orchestration.action.run": "执行",
|
||||
"workflow.detail.orchestration.action.run.confirm": "此工作流存在未发布的更改，将以最近一次发布的版本为准，确定要继续执行吗？",
|
||||
"workflow.detail.runs.tab": "执行历史",
|
||||
|
||||
"workflow.common.certificate.label": "证书",
|
||||
"workflow.node.setting.label": "设置节点",
|
||||
"workflow.node.delete.label": "删除节点",
|
||||
"workflow.node.addBranch.label": "添加分支"
|
||||
"workflow.detail.runs.tab": "执行历史"
|
||||
}
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
{
|
||||
"workflow_node.action.configure_node": "配置节点",
|
||||
"workflow_node.branch.add_node": "添加节点",
|
||||
"workflow_node.action.delete_node": "删除节点",
|
||||
"workflow_node.action.add_branch": "添加分支",
|
||||
"workflow_node.action.delete_branch": "删除分支",
|
||||
|
||||
"workflow_node.start.label": "开始",
|
||||
"workflow_node.start.form.trigger.label": "触发方式",
|
||||
"workflow_node.start.form.trigger.placeholder": "请选择触发方式",
|
||||
@ -41,6 +47,7 @@
|
||||
"workflow_node.apply.form.disable_follow_cname.tooltip": "在 ACME DNS-01 认证时是否禁止 CNAME 跟随。如果你不了解该选项的用途，保持默认即可。<br><a href=\"https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname\" target=\"_blank\">点此了解更多</a>。",
|
||||
|
||||
"workflow_node.deploy.label": "部署",
|
||||
"workflow_node.deploy.search.provider_type.placeholder": "搜索部署目标……",
|
||||
"workflow_node.deploy.form.provider_type.label": "部署目标",
|
||||
"workflow_node.deploy.form.provider_type.placeholder": "请选择部署目标",
|
||||
"workflow_node.deploy.form.provider_access.label": "主机提供商授权",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Navigate, Outlet } from "react-router-dom";
|
||||
|
||||
import Version from "@/components/core/Version";
|
||||
import Version from "@/components/Version";
|
||||
import { getPocketBase } from "@/repository/pocketbase";
|
||||
|
||||
const AuthLayout = () => {
|
||||
|
||||
@ -15,7 +15,7 @@ import {
|
||||
} from "@ant-design/icons";
|
||||
import { Button, type ButtonProps, Drawer, Dropdown, Layout, Menu, type MenuProps, Tooltip, theme } from "antd";
|
||||
|
||||
import Version from "@/components/core/Version";
|
||||
import Version from "@/components/Version";
|
||||
import { useBrowserTheme } from "@/hooks";
|
||||
import { getPocketBase } from "@/repository/pocketbase";
|
||||
|
||||
@ -66,7 +66,7 @@ const ConsoleLayout = () => {
|
||||
<Layout className="pl-[256px] max-md:pl-0">
|
||||
<Layout.Header className="sticky top-0 left-0 right-0 p-0 z-[19] shadow-sm" style={{ background: themeToken.colorBgContainer }}>
|
||||
<div className="flex items-center justify-between size-full px-4 overflow-hidden">
|
||||
<div className="flex items-center gap-4 size-full">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" onClick={handleSiderOpen} />
|
||||
<Drawer
|
||||
closable={false}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
@ -19,13 +19,11 @@ import { isEqual } from "radash";
|
||||
import { z } from "zod";
|
||||
|
||||
import { run as runWorkflow } from "@/api/workflow";
|
||||
import ModalForm from "@/components/ModalForm";
|
||||
import Show from "@/components/Show";
|
||||
import ModalForm from "@/components/core/ModalForm";
|
||||
import End from "@/components/workflow/End";
|
||||
import NodeRender from "@/components/workflow/NodeRender";
|
||||
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
|
||||
import WorkflowRuns from "@/components/workflow/run/WorkflowRuns";
|
||||
import { type WorkflowModel, type WorkflowNode, isAllNodesValidated } from "@/domain/workflow";
|
||||
import WorkflowElements from "@/components/workflow/WorkflowElements";
|
||||
import WorkflowRuns from "@/components/workflow/WorkflowRuns";
|
||||
import { type WorkflowModel, isAllNodesValidated } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
import { remove as removeWorkflow } from "@/repository/workflow";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
@ -41,33 +39,21 @@ const WorkflowDetail = () => {
|
||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||
|
||||
const { id: workflowId } = useParams();
|
||||
const { workflow, init, save, setBaseInfo, switchEnable } = useWorkflowStore(
|
||||
useZustandShallowSelector(["workflow", "init", "save", "setBaseInfo", "switchEnable"])
|
||||
const { workflow, initialized, init, save, destroy, setBaseInfo, switchEnable } = useWorkflowStore(
|
||||
useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "save", "setBaseInfo", "switchEnable"])
|
||||
);
|
||||
useEffect(() => {
|
||||
// TODO: loading
|
||||
init(workflowId!);
|
||||
|
||||
return () => {
|
||||
destroy();
|
||||
};
|
||||
}, [workflowId]);
|
||||
|
||||
const [tabValue, setTabValue] = useState<"orchestration" | "runs">("orchestration");
|
||||
|
||||
const workflowNodes = useMemo(() => {
|
||||
let current = workflow.draft as WorkflowNode;
|
||||
|
||||
const elements: JSX.Element[] = [];
|
||||
|
||||
while (current) {
|
||||
// 处理普通节点
|
||||
elements.push(<NodeRender data={current} key={current.id} />);
|
||||
current = current.next as WorkflowNode;
|
||||
}
|
||||
|
||||
elements.push(<End key="workflow-end" />);
|
||||
|
||||
return elements;
|
||||
}, [workflow]);
|
||||
|
||||
const [workflowRunning, setWorkflowRunning] = useState(false);
|
||||
const [isRunning, setIsRunning] = useState(false);
|
||||
|
||||
const [allowDiscard, setAllowDiscard] = useState(false);
|
||||
const [allowRelease, setAllowRelease] = useState(false);
|
||||
@ -75,10 +61,10 @@ const WorkflowDetail = () => {
|
||||
useDeepCompareEffect(() => {
|
||||
const hasReleased = !!workflow.content;
|
||||
const hasChanges = workflow.hasDraft! || !isEqual(workflow.draft, workflow.content);
|
||||
setAllowDiscard(!workflowRunning && hasReleased && hasChanges);
|
||||
setAllowRelease(!workflowRunning && hasChanges);
|
||||
setAllowDiscard(!isRunning && hasReleased && hasChanges);
|
||||
setAllowRelease(!isRunning && hasChanges);
|
||||
setAllowRun(hasReleased);
|
||||
}, [workflow, workflowRunning]);
|
||||
}, [workflow, isRunning]);
|
||||
|
||||
const handleBaseInfoFormFinish = async (values: Pick<WorkflowModel, "name" | "description">) => {
|
||||
try {
|
||||
@ -174,7 +160,7 @@ const WorkflowDetail = () => {
|
||||
|
||||
// TODO: 异步执行
|
||||
promise.then(async () => {
|
||||
setWorkflowRunning(true);
|
||||
setIsRunning(true);
|
||||
|
||||
try {
|
||||
await runWorkflow(workflowId!);
|
||||
@ -188,7 +174,7 @@ const WorkflowDetail = () => {
|
||||
console.error(err);
|
||||
messageApi.warning(t("common.text.operation_failed"));
|
||||
} finally {
|
||||
setWorkflowRunning(false);
|
||||
setIsRunning(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -203,35 +189,44 @@ const WorkflowDetail = () => {
|
||||
<PageHeader
|
||||
style={{ paddingBottom: 0 }}
|
||||
title={workflow.name}
|
||||
extra={[
|
||||
<WorkflowBaseInfoModalForm key="edit" data={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />,
|
||||
extra={
|
||||
initialized
|
||||
? [
|
||||
<WorkflowBaseInfoModalForm
|
||||
key="edit"
|
||||
data={workflow}
|
||||
trigger={<Button>{t("common.button.edit")}</Button>}
|
||||
onFinish={handleBaseInfoFormFinish}
|
||||
/>,
|
||||
|
||||
<Button key="enable" onClick={handleEnableChange}>
|
||||
{workflow.enabled ? t("workflow.action.disable") : t("workflow.action.enable")}
|
||||
</Button>,
|
||||
<Button key="enable" onClick={handleEnableChange}>
|
||||
{workflow.enabled ? t("workflow.action.disable") : t("workflow.action.enable")}
|
||||
</Button>,
|
||||
|
||||
<Dropdown
|
||||
key="more"
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "delete",
|
||||
label: t("workflow.action.delete"),
|
||||
danger: true,
|
||||
icon: <DeleteOutlinedIcon />,
|
||||
onClick: () => {
|
||||
handleDeleteClick();
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<Button icon={<DownOutlinedIcon />} iconPosition="end">
|
||||
{t("common.button.more")}
|
||||
</Button>
|
||||
</Dropdown>,
|
||||
]}
|
||||
<Dropdown
|
||||
key="more"
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "delete",
|
||||
label: t("workflow.action.delete"),
|
||||
danger: true,
|
||||
icon: <DeleteOutlinedIcon />,
|
||||
onClick: () => {
|
||||
handleDeleteClick();
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<Button icon={<DownOutlinedIcon />} iconPosition="end">
|
||||
{t("common.button.more")}
|
||||
</Button>
|
||||
</Dropdown>,
|
||||
]
|
||||
: []
|
||||
}
|
||||
>
|
||||
<Typography.Paragraph type="secondary">{workflow.description}</Typography.Paragraph>
|
||||
<Tabs
|
||||
@ -249,15 +244,15 @@ const WorkflowDetail = () => {
|
||||
</Card>
|
||||
|
||||
<div className="p-4">
|
||||
<Card>
|
||||
<Card loading={!initialized}>
|
||||
<Show when={tabValue === "orchestration"}>
|
||||
<div className="relative">
|
||||
<div className="flex flex-col items-center py-12 pr-48">
|
||||
<WorkflowProvider>{workflowNodes}</WorkflowProvider>
|
||||
<div className="py-12 lg:pr-36 xl:pr-48">
|
||||
<WorkflowElements />
|
||||
</div>
|
||||
<div className="absolute top-0 right-0 z-[1]">
|
||||
<Space>
|
||||
<Button disabled={!allowRun} icon={<CaretRightOutlinedIcon />} loading={workflowRunning} type="primary" onClick={handleRunClick}>
|
||||
<Button disabled={!allowRun} icon={<CaretRightOutlinedIcon />} loading={isRunning} type="primary" onClick={handleRunClick}>
|
||||
{t("workflow.detail.orchestration.action.run")}
|
||||
</Button>
|
||||
|
||||
|
||||
@ -25,8 +25,9 @@ export type WorkflowState = {
|
||||
getWorkflowOuptutBeforeId: (id: string, type: string) => WorkflowNode[];
|
||||
switchEnable(): void;
|
||||
save(): void;
|
||||
init(id: string): void;
|
||||
setBaseInfo: (name: string, description: string) => void;
|
||||
init(id: string): void;
|
||||
destroy(): void;
|
||||
};
|
||||
|
||||
export const useWorkflowStore = create<WorkflowState>((set, get) => ({
|
||||
@ -214,4 +215,11 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
|
||||
getWorkflowOuptutBeforeId: (id: string, type: string) => {
|
||||
return getWorkflowOutputBeforeId(get().workflow.draft as WorkflowNode, id, type);
|
||||
},
|
||||
|
||||
destroy: () => {
|
||||
set({
|
||||
workflow: {} as WorkflowModel,
|
||||
initialized: false,
|
||||
});
|
||||
},
|
||||
}));
|
||||
|
||||
@ -14,34 +14,10 @@ module.exports = {
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user