workflow

ui/src/components/workflow/DeployForm.tsx

@@ -0,0 +1,26 @@
+import { WorkflowNode } from "@/domain/workflow";
+import { memo } from "react";
+import DeployToAliyunOSS from "./DeployToAliyunOss";
+
+export type DeployFormProps = {
+  data: WorkflowNode;
+};
+const DeployForm = ({ data }: DeployFormProps) => {
+  return getForm(data);
+};
+
+export default memo(DeployForm);
+
+const getForm = (data: WorkflowNode) => {
+  switch (data.config?.providerType) {
+    case "aliyun-oss":
+      return <DeployToAliyunOSS data={data} />;
+    case "tencent":
+      return <TencentForm data={data} />;
+    case "aws":
+      return <AwsForm data={data} />;
+    default:
+      return <></>;
+  }
+};
+

ui/src/components/workflow/DeployPanelBody.tsx

@@ -1,39 +1,58 @@
 import { accessProviders } from "@/domain/access";
 import { WorkflowNode } from "@/domain/workflow";
-import { memo } from "react";
+import { memo, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import Show from "../Show";
+import DeployForm from "./DeployForm";
+import { DeployTarget, deployTargets } from "@/domain/domain";
 
 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 (
     <>
       {/* 默认展示服务商列表 */}
-      <div className="text-lg font-semibold text-gray-700">选择服务商</div>
+      <Show when={!providerType} fallback={<DeployForm data={data} />}>
-      {accessProviders
+        <div className="text-lg font-semibold text-gray-700">选择服务商</div>
-        .filter((provider) => provider[3] === "apply" || provider[3] === "all")
+        {deployTargets
-        .reduce((acc: string[][][], provider, index) => {
+          .reduce((acc: DeployTarget[][], provider, index) => {
-          if (index % 2 === 0) {
+            if (index % 2 === 0) {
-            acc.push([provider]);
+              acc.push([provider]);
-          } else {
+            } else {
-            acc[acc.length - 1].push(provider);
+              acc[acc.length - 1].push(provider);
-          }
+            }
-          return acc;
+            return acc;
-        }, [])
+          }, [])
-        .map((providerRow, rowIndex) => (
+          .map((providerRow, rowIndex) => (
-          <div key={rowIndex} className="flex space-x-5">
+            <div key={rowIndex} className="flex space-x-5">
-            {providerRow.map((provider, index) => (
+              {providerRow.map((provider, index) => (
-              <div key={index} className="flex space-x-2 w-1/3 items-center cursor-pointer hover:bg-slate-100 p-2 rounded-sm">
+                <div
-                <img src={provider[2]} alt={provider[1]} className="w-8 h-8" />
+                  key={index}
-                <div className="text-muted-foreground">{t(provider[1])}</div>
+                  className="flex space-x-2 w-[47%] items-center cursor-pointer hover:bg-slate-100 p-2 rounded-sm"
-              </div>
+                  onClick={() => {
-            ))}
+                    setProviderType(provider.type);
-          </div>
+                  }}
-        ))}
+                >
+                  <img src={provider.icon} alt={provider.type} className="w-8 h-8" />
+                  <div className="text-muted-foreground text-sm">{t(provider.name)}</div>
+                </div>
+              ))}
+            </div>
+          ))}
+      </Show>
     </>
   );
 };
 
 export default memo(DeployPanelBody);
+

ui/src/components/workflow/DeployToAliyunOss.tsx

@@ -0,0 +1,180 @@
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+
+import { Input } from "@/components/ui/input";
+import { DeployFormProps } from "./DeployForm";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
+import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
+import { useShallow } from "zustand/shallow";
+import { usePanel } from "./PanelProvider";
+import { Button } from "../ui/button";
+
+import { useEffect, useState } from "react";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { SelectLabel } from "@radix-ui/react-select";
+
+const selectState = (state: WorkflowState) => ({
+  updateNode: state.updateNode,
+  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
+});
+const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { hidePanel } = usePanel();
+  const { t } = useTranslation();
+
+  const [beforeOutput, setBeforeOutput] = useState<WorkflowNode[]>([]);
+
+  useEffect(() => {
+    const rs = getWorkflowOuptutBeforeId(data.id, "certificate");
+    console.log(rs);
+    setBeforeOutput(rs);
+  }, [data]);
+
+  const formSchema = z.object({
+    providerType: z.string(),
+    certificate: z.string().min(1),
+    endpoint: z.string().min(1, {
+      message: t("domain.deployment.form.aliyun_oss_endpoint.placeholder"),
+    }),
+    bucket: z.string().min(1, {
+      message: t("domain.deployment.form.aliyun_oss_bucket.placeholder"),
+    }),
+    domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
+      message: t("common.errmsg.domain_invalid"),
+    }),
+  });
+
+  let config: WorkflowNodeConfig = {
+    certificate: "",
+    providerType: "aliyun-oss",
+    endpoint: "",
+    bucket: "",
+    domain: "",
+  };
+  if (data) config = data.config ?? config;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      providerType: config.providerType as string,
+      certificate: config.certificate as string,
+      endpoint: config.endpoint as string,
+      bucket: config.bucket as string,
+      domain: config.domain as string,
+    },
+  });
+
+  const onSubmit = async (config: z.infer<typeof formSchema>) => {
+    updateNode({ ...data, config: { ...config } });
+    hidePanel();
+  };
+
+  return (
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={(e) => {
+            e.stopPropagation();
+            form.handleSubmit(onSubmit)(e);
+          }}
+          className="space-y-8"
+        >
+          <FormField
+            control={form.control}
+            name="certificate"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>证书</FormLabel>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("certificate", value);
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="选择证书来源" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {beforeOutput.map((item) => (
+                        <>
+                          <SelectGroup key={item.id}>
+                            <SelectLabel>{item.name}</SelectLabel>
+                            {item.output?.map((output) => (
+                              <SelectItem key={output.name} value={`${item.id}-${output.name}`}>
+                                <div>
+                                  {item.name}-{output.label}
+                                </div>
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="endpoint"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("domain.deployment.form.aliyun_oss_endpoint.label")}</FormLabel>
+                <FormControl>
+                  <Input placeholder={t("domain.deployment.form.aliyun_oss_endpoint.placeholder")} {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="bucket"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("domain.deployment.form.aliyun_oss_bucket.label")}</FormLabel>
+                <FormControl>
+                  <Input placeholder={t("domain.deployment.form.aliyun_oss_bucket.placeholder")} {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="domain"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("domain.deployment.form.domain.label")}</FormLabel>
+                <FormControl>
+                  <Input placeholder={t("domain.deployment.form.domain.label")} {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex justify-end">
+            <Button type="submit">{t("common.save")}</Button>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+};
+
+export default DeployToAliyunOSS;
+

ui/src/components/workflow/PanelBody.tsx

@@ -13,6 +13,8 @@ const PanelBody = ({ data }: PanelBodyProps) => {
         return <StartForm data={data} />;
       case WorkflowNodeType.Apply:
         return <ApplyForm data={data} />;
+      case WorkflowNodeType.Deploy:
+        return <DeployPanelBody data={data} />;
       case WorkflowNodeType.Notify:
         return <DeployPanelBody data={data} />;
       case WorkflowNodeType.Branch:
@@ -28,3 +30,4 @@ const PanelBody = ({ data }: PanelBodyProps) => {
 };
 
 export default PanelBody;
+

ui/src/domain/domain.ts

@@ -63,34 +63,39 @@ export type Statistic = {
   disabled: number;
 };
 
-type DeployTarget = {
+export type DeployTarget = {
   type: string;
   provider: string;
   name: string;
   icon: string;
 };
 
+export const deployTargetList: string[][] = [
+  ["aliyun-oss", "common.provider.aliyun.oss", "/imgs/providers/aliyun.svg"],
+  ["aliyun-cdn", "common.provider.aliyun.cdn", "/imgs/providers/aliyun.svg"],
+  ["aliyun-dcdn", "common.provider.aliyun.dcdn", "/imgs/providers/aliyun.svg"],
+  ["aliyun-clb", "common.provider.aliyun.clb", "/imgs/providers/aliyun.svg"],
+  ["aliyun-alb", "common.provider.aliyun.alb", "/imgs/providers/aliyun.svg"],
+  ["aliyun-nlb", "common.provider.aliyun.nlb", "/imgs/providers/aliyun.svg"],
+  ["tencent-cdn", "common.provider.tencent.cdn", "/imgs/providers/tencent.svg"],
+  ["tencent-ecdn", "common.provider.tencent.ecdn", "/imgs/providers/tencent.svg"],
+  ["tencent-clb", "common.provider.tencent.clb", "/imgs/providers/tencent.svg"],
+  ["tencent-cos", "common.provider.tencent.cos", "/imgs/providers/tencent.svg"],
+  ["tencent-teo", "common.provider.tencent.teo", "/imgs/providers/tencent.svg"],
+  ["huaweicloud-cdn", "common.provider.huaweicloud.cdn", "/imgs/providers/huaweicloud.svg"],
+  ["huaweicloud-elb", "common.provider.huaweicloud.elb", "/imgs/providers/huaweicloud.svg"],
+  ["baiducloud-cdn", "common.provider.baiducloud.cdn", "/imgs/providers/baiducloud.svg"],
+  ["qiniu-cdn", "common.provider.qiniu.cdn", "/imgs/providers/qiniu.svg"],
+  ["dogecloud-cdn", "common.provider.dogecloud.cdn", "/imgs/providers/dogecloud.svg"],
+  ["local", "common.provider.local", "/imgs/providers/local.svg"],
+  ["ssh", "common.provider.ssh", "/imgs/providers/ssh.svg"],
+  ["webhook", "common.provider.webhook", "/imgs/providers/webhook.svg"],
+  ["k8s-secret", "common.provider.kubernetes.secret", "/imgs/providers/k8s.svg"],
+];
+
 export const deployTargetsMap: Map<DeployTarget["type"], DeployTarget> = new Map(
-  [
+  deployTargetList.map(([type, name, icon]) => [type, { type, provider: type.split("-")[0], name, icon }])
-    ["aliyun-oss", "common.provider.aliyun.oss", "/imgs/providers/aliyun.svg"],
-    ["aliyun-cdn", "common.provider.aliyun.cdn", "/imgs/providers/aliyun.svg"],
-    ["aliyun-dcdn", "common.provider.aliyun.dcdn", "/imgs/providers/aliyun.svg"],
-    ["aliyun-clb", "common.provider.aliyun.clb", "/imgs/providers/aliyun.svg"],
-    ["aliyun-alb", "common.provider.aliyun.alb", "/imgs/providers/aliyun.svg"],
-    ["aliyun-nlb", "common.provider.aliyun.nlb", "/imgs/providers/aliyun.svg"],
-    ["tencent-cdn", "common.provider.tencent.cdn", "/imgs/providers/tencent.svg"],
-    ["tencent-ecdn", "common.provider.tencent.ecdn", "/imgs/providers/tencent.svg"],
-    ["tencent-clb", "common.provider.tencent.clb", "/imgs/providers/tencent.svg"],
-    ["tencent-cos", "common.provider.tencent.cos", "/imgs/providers/tencent.svg"],
-    ["tencent-teo", "common.provider.tencent.teo", "/imgs/providers/tencent.svg"],
-    ["huaweicloud-cdn", "common.provider.huaweicloud.cdn", "/imgs/providers/huaweicloud.svg"],
-    ["huaweicloud-elb", "common.provider.huaweicloud.elb", "/imgs/providers/huaweicloud.svg"],
-    ["baiducloud-cdn", "common.provider.baiducloud.cdn", "/imgs/providers/baiducloud.svg"],
-    ["qiniu-cdn", "common.provider.qiniu.cdn", "/imgs/providers/qiniu.svg"],
-    ["dogecloud-cdn", "common.provider.dogecloud.cdn", "/imgs/providers/dogecloud.svg"],
-    ["local", "common.provider.local", "/imgs/providers/local.svg"],
-    ["ssh", "common.provider.ssh", "/imgs/providers/ssh.svg"],
-    ["webhook", "common.provider.webhook", "/imgs/providers/webhook.svg"],
-    ["k8s-secret", "common.provider.kubernetes.secret", "/imgs/providers/k8s.svg"],
-  ].map(([type, name, icon]) => [type, { type, provider: type.split("-")[0], name, icon }])
 );
+
+export const deployTargets = deployTargetList.map(([type, name, icon]) => ({ type, provider: type.split("-")[0], name, icon }));
+

ui/src/domain/workflow.ts

@@ -2,6 +2,7 @@ import { produce } from "immer";
 import { nanoid } from "nanoid";
 import { accessProviders } from "./access";
 import i18n from "@/i18n";
+import { deployTargets } from "./domain";
 
 export enum WorkflowNodeType {
   Start = "start",
@@ -25,6 +26,52 @@ export const workflowNodeTypeDefaultName: Map<WorkflowNodeType, string> = new Ma
   [WorkflowNodeType.Custom, "自定义"],
 ]);
 
+export type WorkflowNodeIo = {
+  name: string;
+  type: string;
+  required: boolean;
+  label: string;
+  value?: string;
+  valueSelector?: WorkflowNodeIoValueSelector;
+};
+
+export type WorkflowNodeIoValueSelector = {
+  id: string;
+  name: string;
+};
+
+export const workflowNodeTypeDefaultInput: Map<WorkflowNodeType, WorkflowNodeIo[]> = new Map([
+  [WorkflowNodeType.Apply, []],
+  [
+    WorkflowNodeType.Deploy,
+    [
+      {
+        name: "certificate",
+        type: " certificate",
+        required: true,
+        label: "证书",
+      },
+    ],
+  ],
+  [WorkflowNodeType.Notify, []],
+]);
+
+export const workflowNodeTypeDefaultOutput: Map<WorkflowNodeType, WorkflowNodeIo[]> = new Map([
+  [
+    WorkflowNodeType.Apply,
+    [
+      {
+        name: "certificate",
+        type: "certificate",
+        required: true,
+        label: "证书",
+      },
+    ],
+  ],
+  [WorkflowNodeType.Deploy, []],
+  [WorkflowNodeType.Notify, []],
+]);
+
 export type WorkflowNodeConfig = Record<string, string | boolean | number | string[] | undefined>;
 
 export type WorkflowNode = {
@@ -32,7 +79,7 @@ export type WorkflowNode = {
   name: string;
   type: WorkflowNodeType;
 
-  parameters?: WorkflowNodeIo[];
+  input?: WorkflowNodeIo[];
   config?: WorkflowNodeConfig;
   configured?: boolean;
   output?: WorkflowNodeIo[];
@@ -62,6 +109,8 @@ export const newWorkflowNode = (type: WorkflowNodeType, options: NewWorkflowNode
       config: {
         providerType: options.providerType,
       },
+      input: workflowNodeTypeDefaultInput.get(type),
+      output: workflowNodeTypeDefaultOutput.get(type),
     };
   }
 
@@ -202,6 +251,46 @@ export const removeBranch = (node: WorkflowNode | WorkflowBranchNode, branchNode
   });
 };
 
+// 1 个分支的节点，不应该能获取到相邻分支上节点的输出
+export const getWorkflowOutputBeforeId = (node: WorkflowNode | WorkflowBranchNode, id: string, type: string): WorkflowNode[] => {
+  const output: WorkflowNode[] = [];
+
+  const traverse = (current: WorkflowNode | WorkflowBranchNode, output: WorkflowNode[]) => {
+    if (!current) {
+      return false;
+    }
+    if (current.id === id) {
+      return true;
+    }
+
+    if (!isWorkflowBranchNode(current) && current.output && current.output.some((io) => io.type === type)) {
+      output.push({
+        ...current,
+        output: current.output.filter((io) => io.type === type),
+      });
+    }
+
+    if (isWorkflowBranchNode(current)) {
+      const currentLength = output.length;
+      console.log(currentLength);
+      for (const branch of current.branches) {
+        if (traverse(branch, output)) {
+          return true;
+        }
+        // 如果当前分支没有输出，清空之前的输出
+        if (output.length > currentLength) {
+          output.splice(currentLength);
+        }
+      }
+    }
+
+    return traverse(current.next as WorkflowNode, output);
+  };
+
+  traverse(node, output);
+  return output;
+};
+
 export type WorkflowBranchNode = {
   id: string;
   name: string;
@@ -210,20 +299,6 @@ export type WorkflowBranchNode = {
   next?: WorkflowNode | WorkflowBranchNode;
 };
 
-export type WorkflowNodeIo = {
-  name: string;
-  type: string;
-  required: boolean;
-  description?: string;
-  value?: string;
-  valueSelector?: WorkflowNodeIoValueSelector;
-};
-
-export type WorkflowNodeIoValueSelector = {
-  id: string;
-  name: string;
-};
-
 type WorkflowwNodeDropdwonItem = {
   type: WorkflowNodeType;
   providerType?: string;
@@ -243,39 +318,18 @@ export type WorkflowwNodeDropdwonItemIcon = {
   name: string;
 };
 
-const workflowNodeDropdownApplyList: WorkflowwNodeDropdwonItem[] = accessProviders
+const workflowNodeDropdownDeployList: WorkflowwNodeDropdwonItem[] = deployTargets.map((item) => {
-  .filter((item) => {
+  return {
-    return item[3] === "apply" || item[3] === "all";
+    type: WorkflowNodeType.Apply,
-  })
+    providerType: item.type,
-  .map((item) => {
+    name: i18n.t(item.name),
-    return {
+    leaf: true,
-      type: WorkflowNodeType.Apply,
+    icon: {
-      providerType: item[0],
+      type: WorkflowwNodeDropdwonItemIconType.Provider,
-      name: i18n.t(item[1]),
+      name: item.icon,
-      leaf: true,
+    },
-      icon: {
+  };
-        type: WorkflowwNodeDropdwonItemIconType.Provider,
+});
-        name: item[2],
-      },
-    };
-  });
-
-const workflowNodeDropdownDeployList: WorkflowwNodeDropdwonItem[] = accessProviders
-  .filter((item) => {
-    return item[3] === "deploy" || item[3] === "all";
-  })
-  .map((item) => {
-    return {
-      type: WorkflowNodeType.Apply,
-      providerType: item[0],
-      name: i18n.t(item[1]),
-      leaf: true,
-      icon: {
-        type: WorkflowwNodeDropdwonItemIconType.Provider,
-        name: item[2],
-      },
-    };
-  });
 
 export const workflowNodeDropdownList: WorkflowwNodeDropdwonItem[] = [
   {
@@ -285,7 +339,7 @@ export const workflowNodeDropdownList: WorkflowwNodeDropdwonItem[] = [
       type: WorkflowwNodeDropdwonItemIconType.Icon,
       name: "NotebookPen",
     },
-    children: workflowNodeDropdownApplyList,
+    leaf: true,
   },
   {
     type: WorkflowNodeType.Deploy,
@@ -315,3 +369,4 @@ export const workflowNodeDropdownList: WorkflowwNodeDropdwonItem[] = [
     },
   },
 ];
+

ui/src/providers/workflow/index.ts

@@ -1,4 +1,14 @@
-import { addBranch, addNode, removeBranch, removeNode, updateNode, WorkflowBranchNode, WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
+import {
+  addBranch,
+  addNode,
+  getWorkflowOutputBeforeId,
+  removeBranch,
+  removeNode,
+  updateNode,
+  WorkflowBranchNode,
+  WorkflowNode,
+  WorkflowNodeType,
+} from "@/domain/workflow";
 import { create } from "zustand";
 
 export type WorkflowState = {
@@ -8,16 +18,17 @@ export type WorkflowState = {
   addBranch: (branchId: string) => void;
   removeNode: (nodeId: string) => void;
   removeBranch: (branchId: string, index: number) => void;
+  getWorkflowOuptutBeforeId: (id: string, type: string) => WorkflowNode[];
 };
 
-export const useWorkflowStore = create<WorkflowState>((set) => ({
+export const useWorkflowStore = create<WorkflowState>((set, get) => ({
   root: {
     id: "1",
     name: "开始",
     type: WorkflowNodeType.Start,
     next: {
       id: "2",
-      name: "结束",
+      name: "分支",
       type: WorkflowNodeType.Branch,
       branches: [
         {
@@ -81,4 +92,9 @@ export const useWorkflowStore = create<WorkflowState>((set) => ({
         root: newRoot,
       };
     }),
+
+  getWorkflowOuptutBeforeId: (id: string, type: string) => {
+    return getWorkflowOutputBeforeId(get().root, id, type);
+  },
 }));
+