mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-09 14:09:52 +00:00
worklfow
This commit is contained in:
parent
8809eef2ce
commit
b06ffc0eef
@ -43,13 +43,13 @@ const Mail = () => {
|
|||||||
id: config.id ?? "",
|
id: config.id ?? "",
|
||||||
name: "notifyChannels",
|
name: "notifyChannels",
|
||||||
data: {
|
data: {
|
||||||
senderAddress: "",
|
senderAddress: "",
|
||||||
receiverAddresses: "",
|
receiverAddresses: "",
|
||||||
smtpHostAddr: "",
|
smtpHostAddr: "",
|
||||||
smtpHostPort: "25",
|
smtpHostPort: "25",
|
||||||
username: "",
|
username: "",
|
||||||
password: "",
|
password: "",
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -79,13 +79,13 @@ const Mail = () => {
|
|||||||
|
|
||||||
const getDetailMail = () => {
|
const getDetailMail = () => {
|
||||||
const df: NotifyChannelMail = {
|
const df: NotifyChannelMail = {
|
||||||
senderAddress: "",
|
senderAddress: "",
|
||||||
receiverAddresses: "",
|
receiverAddresses: "",
|
||||||
smtpHostAddr: "",
|
smtpHostAddr: "",
|
||||||
smtpHostPort: "25",
|
smtpHostPort: "25",
|
||||||
username: "",
|
username: "",
|
||||||
password: "",
|
password: "",
|
||||||
enabled: false,
|
enabled: false,
|
||||||
};
|
};
|
||||||
if (!config.content) {
|
if (!config.content) {
|
||||||
return df;
|
return df;
|
||||||
@ -99,7 +99,14 @@ const Mail = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const checkChanged = (data: NotifyChannelMail) => {
|
const checkChanged = (data: NotifyChannelMail) => {
|
||||||
if (data.senderAddress !== originMail.data.senderAddress || data.receiverAddresses !== originMail.data.receiverAddresses || data.smtpHostAddr !== originMail.data.smtpHostAddr || data.smtpHostPort !== originMail.data.smtpHostPort || data.username !== originMail.data.username || data.password !== originMail.data.password) {
|
if (
|
||||||
|
data.senderAddress !== originMail.data.senderAddress ||
|
||||||
|
data.receiverAddresses !== originMail.data.receiverAddresses ||
|
||||||
|
data.smtpHostAddr !== originMail.data.smtpHostAddr ||
|
||||||
|
data.smtpHostPort !== originMail.data.smtpHostPort ||
|
||||||
|
data.username !== originMail.data.username ||
|
||||||
|
data.password !== originMail.data.password
|
||||||
|
) {
|
||||||
setChanged(true);
|
setChanged(true);
|
||||||
} else {
|
} else {
|
||||||
setChanged(false);
|
setChanged(false);
|
||||||
@ -236,55 +243,55 @@ const Mail = () => {
|
|||||||
checkChanged(newData.data);
|
checkChanged(newData.data);
|
||||||
setmail(newData);
|
setmail(newData);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
placeholder={t("settings.notification.mail.smtp_port.placeholder")}
|
placeholder={t("settings.notification.mail.smtp_port.placeholder")}
|
||||||
className="mt-2"
|
className="mt-2"
|
||||||
value={mail.data.smtpHostPort}
|
value={mail.data.smtpHostPort}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const newData = {
|
const newData = {
|
||||||
...mail,
|
...mail,
|
||||||
data: {
|
data: {
|
||||||
...mail.data,
|
...mail.data,
|
||||||
smtpHostPort: e.target.value,
|
smtpHostPort: e.target.value,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
checkChanged(newData.data);
|
checkChanged(newData.data);
|
||||||
setmail(newData);
|
setmail(newData);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
placeholder={t("settings.notification.mail.username.placeholder")}
|
placeholder={t("settings.notification.mail.username.placeholder")}
|
||||||
className="mt-2"
|
className="mt-2"
|
||||||
value={mail.data.username}
|
value={mail.data.username}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const newData = {
|
const newData = {
|
||||||
...mail,
|
...mail,
|
||||||
data: {
|
data: {
|
||||||
...mail.data,
|
...mail.data,
|
||||||
username: e.target.value,
|
username: e.target.value,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
checkChanged(newData.data);
|
checkChanged(newData.data);
|
||||||
setmail(newData);
|
setmail(newData);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
placeholder={t("settings.notification.mail.password.placeholder")}
|
placeholder={t("settings.notification.mail.password.placeholder")}
|
||||||
className="mt-2"
|
className="mt-2"
|
||||||
value={mail.data.password}
|
value={mail.data.password}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const newData = {
|
const newData = {
|
||||||
...mail,
|
...mail,
|
||||||
data: {
|
data: {
|
||||||
...mail.data,
|
...mail.data,
|
||||||
password: e.target.value,
|
password: e.target.value,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
checkChanged(newData.data);
|
checkChanged(newData.data);
|
||||||
setmail(newData);
|
setmail(newData);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center space-x-1 mt-2">
|
<div className="flex items-center space-x-1 mt-2">
|
||||||
<Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
|
<Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
|
||||||
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
|
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
|
||||||
|
@ -4,15 +4,17 @@ import DeployToAliyunOSS from "./DeployToAliyunOss";
|
|||||||
|
|
||||||
export type DeployFormProps = {
|
export type DeployFormProps = {
|
||||||
data: WorkflowNode;
|
data: WorkflowNode;
|
||||||
|
defaultProivder?: string;
|
||||||
};
|
};
|
||||||
const DeployForm = ({ data }: DeployFormProps) => {
|
const DeployForm = ({ data, defaultProivder }: DeployFormProps) => {
|
||||||
return getForm(data);
|
return getForm(data, defaultProivder);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default memo(DeployForm);
|
export default memo(DeployForm);
|
||||||
|
|
||||||
const getForm = (data: WorkflowNode) => {
|
const getForm = (data: WorkflowNode, defaultProivder?: string) => {
|
||||||
switch (data.config?.providerType) {
|
const provider = defaultProivder || data.config?.providerType;
|
||||||
|
switch (provider) {
|
||||||
case "aliyun-oss":
|
case "aliyun-oss":
|
||||||
return <DeployToAliyunOSS data={data} />;
|
return <DeployToAliyunOSS data={data} />;
|
||||||
case "tencent":
|
case "tencent":
|
||||||
|
@ -22,7 +22,7 @@ const DeployPanelBody = ({ data }: DeployPanelBodyProps) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* 默认展示服务商列表 */}
|
{/* 默认展示服务商列表 */}
|
||||||
<Show when={!providerType} fallback={<DeployForm data={data} />}>
|
<Show when={!providerType} fallback={<DeployForm data={data} defaultProivder={providerType} />}>
|
||||||
<div className="text-lg font-semibold text-gray-700">选择服务商</div>
|
<div className="text-lg font-semibold text-gray-700">选择服务商</div>
|
||||||
{deployTargets
|
{deployTargets
|
||||||
.reduce((acc: DeployTarget[][], provider, index) => {
|
.reduce((acc: DeployTarget[][], provider, index) => {
|
||||||
|
@ -105,7 +105,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
|
|||||||
<SelectGroup key={item.id}>
|
<SelectGroup key={item.id}>
|
||||||
<SelectLabel>{item.name}</SelectLabel>
|
<SelectLabel>{item.name}</SelectLabel>
|
||||||
{item.output?.map((output) => (
|
{item.output?.map((output) => (
|
||||||
<SelectItem key={output.name} value={`${item.id}-${output.name}`}>
|
<SelectItem key={output.name} value={`${item.id}#${output.name}`}>
|
||||||
<div>
|
<div>
|
||||||
{item.name}-{output.label}
|
{item.name}-{output.label}
|
||||||
</div>
|
</div>
|
||||||
|
181
ui/src/components/workflow/NotifyForm.tsx
Normal file
181
ui/src/components/workflow/NotifyForm.tsx
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
|
||||||
|
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "../ui/select";
|
||||||
|
import { Input } from "../ui/input";
|
||||||
|
import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
|
||||||
|
import { useShallow } from "zustand/shallow";
|
||||||
|
import { usePanel } from "./PanelProvider";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import { useNotifyContext } from "@/providers/notify";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { NotifyChannels, channels as supportedChannels } from "@/domain/settings";
|
||||||
|
import { SelectValue } from "@radix-ui/react-select";
|
||||||
|
import { Textarea } from "../ui/textarea";
|
||||||
|
import { RefreshCw, Settings } from "lucide-react";
|
||||||
|
|
||||||
|
type NotifyFormProps = {
|
||||||
|
data: WorkflowNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectState = (state: WorkflowState) => ({
|
||||||
|
updateNode: state.updateNode,
|
||||||
|
});
|
||||||
|
type ChannelName = {
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
const NotifyForm = ({ data }: NotifyFormProps) => {
|
||||||
|
const { updateNode } = useWorkflowStore(useShallow(selectState));
|
||||||
|
const { hidePanel } = usePanel();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { config: notifyConfig, initChannels } = useNotifyContext();
|
||||||
|
|
||||||
|
const [chanels, setChanels] = useState<ChannelName[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setChanels(getChannels());
|
||||||
|
}, [notifyConfig]);
|
||||||
|
|
||||||
|
const getChannels = () => {
|
||||||
|
const rs: ChannelName[] = [];
|
||||||
|
if (!notifyConfig.content) {
|
||||||
|
return rs;
|
||||||
|
}
|
||||||
|
|
||||||
|
const chanels = notifyConfig.content as NotifyChannels;
|
||||||
|
for (const channel of supportedChannels) {
|
||||||
|
if (chanels[channel.name] && chanels[channel.name].enabled) {
|
||||||
|
rs.push(channel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return rs;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
channel: z.string(),
|
||||||
|
title: z.string().min(1),
|
||||||
|
content: z.string().min(1),
|
||||||
|
});
|
||||||
|
|
||||||
|
let config: WorkflowNodeConfig = {
|
||||||
|
channel: "",
|
||||||
|
title: "",
|
||||||
|
content: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data) config = data.config ?? config;
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof formSchema>>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
channel: config.channel as string,
|
||||||
|
title: config.title as string,
|
||||||
|
content: config.content as string,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = (config: z.infer<typeof formSchema>) => {
|
||||||
|
updateNode({ ...data, config });
|
||||||
|
hidePanel();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
form.handleSubmit(onSubmit)(e);
|
||||||
|
}}
|
||||||
|
className="space-y-8"
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="channel"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="flex justify-between items-center">
|
||||||
|
<div className="flex space-x-2 items-center">
|
||||||
|
<div>推送渠道</div>
|
||||||
|
<RefreshCw size={16} className="cursor-pointer" onClick={() => initChannels()} />
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#/setting/notify"
|
||||||
|
target="_blank"
|
||||||
|
className="flex justify-between items-center space-x-1 font-normal text-primary hover:underline cursor-pointer"
|
||||||
|
>
|
||||||
|
<Settings size={16} /> <div>设置推送渠道</div>
|
||||||
|
</a>
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Select
|
||||||
|
{...field}
|
||||||
|
value={field.value}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
form.setValue("channel", value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="选择推送渠道" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
{chanels.map((item) => (
|
||||||
|
<SelectItem key={item.name} value={item.name}>
|
||||||
|
<div>{t(item.label)}</div>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>标题</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="请输入消息标题" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="content"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>内容</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea placeholder="请输入消息内容" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button type="submit">{t("common.save")}</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NotifyForm;
|
||||||
|
|
@ -2,6 +2,7 @@ import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
|
|||||||
import StartForm from "./StartForm";
|
import StartForm from "./StartForm";
|
||||||
import DeployPanelBody from "./DeployPanelBody";
|
import DeployPanelBody from "./DeployPanelBody";
|
||||||
import ApplyForm from "./ApplyForm";
|
import ApplyForm from "./ApplyForm";
|
||||||
|
import NotifyForm from "./NotifyForm";
|
||||||
|
|
||||||
type PanelBodyProps = {
|
type PanelBodyProps = {
|
||||||
data: WorkflowNode;
|
data: WorkflowNode;
|
||||||
@ -16,7 +17,7 @@ const PanelBody = ({ data }: PanelBodyProps) => {
|
|||||||
case WorkflowNodeType.Deploy:
|
case WorkflowNodeType.Deploy:
|
||||||
return <DeployPanelBody data={data} />;
|
return <DeployPanelBody data={data} />;
|
||||||
case WorkflowNodeType.Notify:
|
case WorkflowNodeType.Notify:
|
||||||
return <DeployPanelBody data={data} />;
|
return <NotifyForm data={data} />;
|
||||||
case WorkflowNodeType.Branch:
|
case WorkflowNodeType.Branch:
|
||||||
return <div>分支节点</div>;
|
return <div>分支节点</div>;
|
||||||
case WorkflowNodeType.Condition:
|
case WorkflowNodeType.Condition:
|
||||||
|
@ -1,11 +1,14 @@
|
|||||||
import { ConfigProvider } from "@/providers/config";
|
import { ConfigProvider } from "@/providers/config";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { PanelProvider } from "./PanelProvider";
|
import { PanelProvider } from "./PanelProvider";
|
||||||
|
import { NotifyProvider } from "@/providers/notify";
|
||||||
|
|
||||||
const WorkflowProvider = ({ children }: { children: React.ReactNode }) => {
|
const WorkflowProvider = ({ children }: { children: React.ReactNode }) => {
|
||||||
return (
|
return (
|
||||||
<ConfigProvider>
|
<ConfigProvider>
|
||||||
<PanelProvider>{children}</PanelProvider>
|
<NotifyProvider>
|
||||||
|
<PanelProvider>{children}</PanelProvider>
|
||||||
|
</NotifyProvider>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -18,13 +18,7 @@ export type NotifyTemplate = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export type NotifyChannels = {
|
export type NotifyChannels = {
|
||||||
dingtalk?: NotifyChannel;
|
[key: string]: NotifyChannel;
|
||||||
lark?: NotifyChannel;
|
|
||||||
telegram?: NotifyChannel;
|
|
||||||
webhook?: NotifyChannel;
|
|
||||||
serverchan?: NotifyChannel;
|
|
||||||
mail?: NotifyChannelMail;
|
|
||||||
bark?: NotifyChannelBark;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type NotifyChannel =
|
export type NotifyChannel =
|
||||||
@ -36,6 +30,37 @@ export type NotifyChannel =
|
|||||||
| NotifyChannelMail
|
| NotifyChannelMail
|
||||||
| NotifyChannelBark;
|
| NotifyChannelBark;
|
||||||
|
|
||||||
|
export const channels = [
|
||||||
|
{
|
||||||
|
name: "dingtalk",
|
||||||
|
label: "common.provider.dingtalk",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "lark",
|
||||||
|
label: "common.provider.lark",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "telegram",
|
||||||
|
label: "common.provider.telegram",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "webhook",
|
||||||
|
label: "common.provider.webhook",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "serverchan",
|
||||||
|
label: "common.provider.serverchan",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "mail",
|
||||||
|
label: "common.provider.mail",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bark",
|
||||||
|
label: "common.provider.bark",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export type NotifyChannelDingTalk = {
|
export type NotifyChannelDingTalk = {
|
||||||
accessToken: string;
|
accessToken: string;
|
||||||
secret: string;
|
secret: string;
|
||||||
@ -94,3 +119,4 @@ export type SSLProviderSetting = {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -8,6 +8,7 @@ export type NotifyContext = {
|
|||||||
config: Setting<NotifyChannels>;
|
config: Setting<NotifyChannels>;
|
||||||
setChannel: (data: { channel: string; data: NotifyChannel }) => void;
|
setChannel: (data: { channel: string; data: NotifyChannel }) => void;
|
||||||
setChannels: (data: Setting<NotifyChannels>) => void;
|
setChannels: (data: Setting<NotifyChannels>) => void;
|
||||||
|
initChannels: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Context = createContext({} as NotifyContext);
|
const Context = createContext({} as NotifyContext);
|
||||||
@ -22,13 +23,18 @@ export const NotifyProvider = ({ children }: NotifyProviderProps) => {
|
|||||||
const [notify, dispatchNotify] = useReducer(notifyReducer, {});
|
const [notify, dispatchNotify] = useReducer(notifyReducer, {});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const featchData = async () => {
|
featchData();
|
||||||
const chanels = await getSetting<NotifyChannels>("notifyChannels");
|
}, []);
|
||||||
dispatchNotify({
|
|
||||||
type: "SET_CHANNELS",
|
const featchData = async () => {
|
||||||
payload: chanels,
|
const chanels = await getSetting<NotifyChannels>("notifyChannels");
|
||||||
});
|
dispatchNotify({
|
||||||
};
|
type: "SET_CHANNELS",
|
||||||
|
payload: chanels,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initChannels = useCallback(() => {
|
||||||
featchData();
|
featchData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@ -52,6 +58,7 @@ export const NotifyProvider = ({ children }: NotifyProviderProps) => {
|
|||||||
config: notify,
|
config: notify,
|
||||||
setChannel,
|
setChannel,
|
||||||
setChannels,
|
setChannels,
|
||||||
|
initChannels,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user