jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): new WorkflowElements using antd

Browse Source
This commit is contained in:
Fu Diwei
2025-01-03 20:29:34 +08:00
parent c6a8f923e4
commit 8a16893082
43 changed files with 805 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
ui/src/components/workflow/AddNode.tsx
View File

@@ -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;

69
ui/src/components/workflow/BranchNode.tsx
View File

@@ -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;

50
ui/src/components/workflow/ConditionNode.tsx
View File

@@ -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;

48
ui/src/components/workflow/DeployPanelBody.tsx
View File

@@ -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);

30
ui/src/components/workflow/DropdownMenuItemIcon.tsx
View File

@@ -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;

147
ui/src/components/workflow/Node.tsx
View File

@@ -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;

24
ui/src/components/workflow/NodeRender.tsx
View File

@@ -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);

15
ui/src/components/workflow/PanelBody.tsx
View File

@@ -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
View 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
View 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;

0
ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx → ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
View File

0
ui/src/components/workflow/run/WorkflowRuns.tsx → ui/src/components/workflow/WorkflowRuns.tsx
View File

72
ui/src/components/workflow/node/AddNode.tsx Normal file
View 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;

16
ui/src/components/workflow/node/ApplyNodeForm.tsx
View File

@@ -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
View 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
View 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;

224
ui/src/components/workflow/node/DeployNodeForm.tsx
View File

@@ -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>
);
};

10
ui/src/components/workflow/End.tsx → ui/src/components/workflow/node/EndNode.tsx
View File

@@ -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;

8
ui/src/components/workflow/node/NotifyNodeForm.tsx
View File

@@ -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;
})

16
ui/src/components/workflow/node/StartNodeForm.tsx
View File

@@ -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);

10
ui/src/components/workflow/types.ts
View File

@@ -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;
};