Merge branch 'next' into feat/new-workflow

2025-01-22 20:21:32 +08:00
parent 0f945881a1 5f213b5f51
commit 7a2fc5e2fd
16 changed files with 589 additions and 5 deletions
--- a/ui/src/api/certificates.ts
+++ b/ui/src/api/certificates.ts
@@ -22,3 +22,45 @@ export const archive = async (certificateId: string, format?: CertificateFormatT

  return resp;
 };
+
+type ValidateCertificateResp = {
+  domains: string;
+};
+
+export const validateCertificate = async (certificate: string) => {
+  const pb = getPocketBase();
+  const resp = await pb.send<BaseResponse<ValidateCertificateResp>>(`/api/certificates/validate/certificate`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: {
+      certificate: certificate,
+    },
+  });
+
+  if (resp.code != 0) {
+    throw new ClientResponseError({ status: resp.code, response: resp, data: {} });
+  }
+
+  return resp;
+};
+
+export const validatePrivateKey = async (privateKey: string) => {
+  const pb = getPocketBase();
+  const resp = await pb.send<BaseResponse>(`/api/certificates/validate/private-key`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: {
+      privateKey: privateKey,
+    },
+  });
+
+  if (resp.code != 0) {
+    throw new ClientResponseError({ status: resp.code, response: resp, data: {} });
+  }
+
+  return resp;
+};
--- a/ui/src/components/workflow/WorkflowElement.tsx
+++ b/ui/src/components/workflow/WorkflowElement.tsx
@@ -11,6 +11,7 @@ import ExecuteResultBranchNode from "./node/ExecuteResultBranchNode";
 import ExecuteResultNode from "./node/ExecuteResultNode";
 import NotifyNode from "./node/NotifyNode";
 import StartNode from "./node/StartNode";
+import UploadNode from "./node/UploadNode";

 export type WorkflowElementProps = {
  node: WorkflowNode;
@@ -28,6 +29,9 @@ const WorkflowElement = ({ node, disabled, branchId, branchIndex }: WorkflowElem
      case WorkflowNodeType.Apply:
        return <ApplyNode node={node} disabled={disabled} />;

+      case WorkflowNodeType.Upload:
+        return <UploadNode node={node} disabled={disabled} />;
+
      case WorkflowNodeType.Deploy:
        return <DeployNode node={node} disabled={disabled} />;

@@ -60,3 +64,4 @@ const WorkflowElement = ({ node, disabled, branchId, branchIndex }: WorkflowElem
 };

 export default memo(WorkflowElement);
+
--- a/ui/src/components/workflow/node/AddNode.tsx
+++ b/ui/src/components/workflow/node/AddNode.tsx
@@ -2,6 +2,7 @@ import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
  CloudUploadOutlined as CloudUploadOutlinedIcon,
+  DeploymentUnitOutlined as DeploymentUnitOutlinedIcon,
  PlusOutlined as PlusOutlinedIcon,
  SendOutlined as SendOutlinedIcon,
  SisternodeOutlined as SisternodeOutlinedIcon,
@@ -25,7 +26,8 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
  const dropdownMenus = useMemo(() => {
    return [
      [WorkflowNodeType.Apply, "workflow_node.apply.label", <SolutionOutlinedIcon />],
-      [WorkflowNodeType.Deploy, "workflow_node.deploy.label", <CloudUploadOutlinedIcon />],
+      [WorkflowNodeType.Upload, "workflow_node.upload.label", <CloudUploadOutlinedIcon />],
+      [WorkflowNodeType.Deploy, "workflow_node.deploy.label", <DeploymentUnitOutlinedIcon />],
      [WorkflowNodeType.Notify, "workflow_node.notify.label", <SendOutlinedIcon />],
      [WorkflowNodeType.Branch, "workflow_node.branch.label", <SisternodeOutlinedIcon />],
      [WorkflowNodeType.ExecuteResultBranch, "workflow_node.execute_result_branch.label", <SisternodeOutlinedIcon />],
--- a/ui/src/components/workflow/node/UploadNode.tsx
+++ b/ui/src/components/workflow/node/UploadNode.tsx
@@ -0,0 +1,91 @@
+import { memo, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Flex, Typography } from "antd";
+import { produce } from "immer";
+
+import type { WorkflowNodeConfigForUpload } from "@/domain/workflow";
+import { WorkflowNodeType } from "@/domain/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
+
+import UploadNodeConfigForm, { type UploadNodeConfigFormInstance } from "./UploadNodeConfigForm";
+import SharedNode, { type SharedNodeProps } from "./_SharedNode";
+
+export type UploadNodeProps = SharedNodeProps;
+
+const UploadNode = ({ node, disabled }: UploadNodeProps) => {
+  if (node.type !== WorkflowNodeType.Upload) {
+    console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Upload}`);
+  }
+
+  const { t } = useTranslation();
+
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+
+  const formRef = useRef<UploadNodeConfigFormInstance>(null);
+  const [formPending, setFormPending] = useState(false);
+
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const getFormValues = () => formRef.current!.getFieldsValue() as WorkflowNodeConfigForUpload;
+
+  const wrappedEl = useMemo(() => {
+    if (node.type !== WorkflowNodeType.Upload) {
+      console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Upload}`);
+    }
+
+    if (!node.validated) {
+      return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
+    }
+
+    const config = (node.config as WorkflowNodeConfigForUpload) ?? {};
+    return (
+      <Flex className="size-full overflow-hidden" align="center" gap={8}>
+        <Typography.Text className="truncate">{config.domains ?? ""}</Typography.Text>
+      </Flex>
+    );
+  }, [node]);
+
+  const handleDrawerConfirm = async () => {
+    setFormPending(true);
+    try {
+      await formRef.current!.validateFields();
+    } catch (err) {
+      setFormPending(false);
+      throw err;
+    }
+
+    try {
+      const newValues = getFormValues();
+      const newNode = produce(node, (draft) => {
+        draft.config = {
+          ...newValues,
+        };
+        draft.validated = true;
+      });
+      await updateNode(newNode);
+    } finally {
+      setFormPending(false);
+    }
+  };
+
+  return (
+    <>
+      <SharedNode.Block node={node} disabled={disabled} onClick={() => setDrawerOpen(true)}>
+        {wrappedEl}
+      </SharedNode.Block>
+
+      <SharedNode.ConfigDrawer
+        node={node}
+        open={drawerOpen}
+        pending={formPending}
+        onConfirm={handleDrawerConfirm}
+        onOpenChange={(open) => setDrawerOpen(open)}
+        getFormValues={() => formRef.current!.getFieldsValue()}
+      >
+        <UploadNodeConfigForm ref={formRef} disabled={disabled} initialValues={node.config} />
+      </SharedNode.ConfigDrawer>
+    </>
+  );
+};
+
+export default memo(UploadNode);
--- a/ui/src/components/workflow/node/UploadNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/UploadNodeConfigForm.tsx
@@ -0,0 +1,180 @@
+import { forwardRef, memo, useImperativeHandle } from "react";
+import { useTranslation } from "react-i18next";
+import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
+import { Button, Form, type FormInstance, Input, Upload, type UploadProps } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { validateCertificate, validatePrivateKey } from "@/api/certificates";
+import { type WorkflowNodeConfigForUpload } from "@/domain/workflow";
+import { useAntdForm } from "@/hooks";
+import { getErrMsg } from "@/utils/error";
+import { readFileContent } from "@/utils/file";
+
+type UploadNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForUpload>;
+
+export type UploadNodeConfigFormProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  initialValues?: UploadNodeConfigFormFieldValues;
+  onValuesChange?: (values: UploadNodeConfigFormFieldValues) => void;
+};
+
+export type UploadNodeConfigFormInstance = {
+  getFieldsValue: () => ReturnType<FormInstance<UploadNodeConfigFormFieldValues>["getFieldsValue"]>;
+  resetFields: FormInstance<UploadNodeConfigFormFieldValues>["resetFields"];
+  validateFields: FormInstance<UploadNodeConfigFormFieldValues>["validateFields"];
+};
+
+const initFormModel = (): UploadNodeConfigFormFieldValues => {
+  return {};
+};
+
+const UploadNodeConfigForm = forwardRef<UploadNodeConfigFormInstance, UploadNodeConfigFormProps>(
+  ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
+    const { t } = useTranslation();
+
+    const formSchema = z.object({
+      domains: z.string().nullish(),
+      certificate: z
+        .string({ message: t("workflow_node.upload.form.certificate.placeholder") })
+        .min(1, t("workflow_node.upload.form.certificate.placeholder"))
+        .max(5120, t("common.errmsg.string_max", { max: 5120 })),
+      privateKey: z
+        .string({ message: t("workflow_node.upload.form.private_key.placeholder") })
+        .min(1, t("workflow_node.upload.form.private_key.placeholder"))
+        .max(5120, t("common.errmsg.string_max", { max: 5120 })),
+    });
+    const formRule = createSchemaFieldRule(formSchema);
+    const { form: formInst, formProps } = useAntdForm({
+      name: "workflowNodeUploadConfigForm",
+      initialValues: initialValues ?? initFormModel(),
+    });
+
+    const fieldCertificate = Form.useWatch("certificate", formInst);
+    const fieldPrivateKey = Form.useWatch("privateKey", formInst);
+
+    const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+      onValuesChange?.(values as UploadNodeConfigFormFieldValues);
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        getFieldsValue: () => {
+          return formInst.getFieldsValue(true);
+        },
+        resetFields: (fields) => {
+          return formInst.resetFields(fields as (keyof UploadNodeConfigFormFieldValues)[]);
+        },
+        validateFields: (nameList, config) => {
+          return formInst.validateFields(nameList, config);
+        },
+      } as UploadNodeConfigFormInstance;
+    });
+
+    const handleCertificateFileChange: UploadProps["onChange"] = async ({ file }) => {
+      if (file && file.status !== "removed") {
+        const certificate = await readFileContent(file.originFileObj ?? (file as unknown as File));
+
+        try {
+          const resp = await validateCertificate(certificate);
+          formInst.setFields([
+            {
+              name: "domains",
+              value: resp.data.domains,
+            },
+            {
+              name: "certificate",
+              value: certificate,
+            },
+          ]);
+        } catch (e) {
+          formInst.setFields([
+            {
+              name: "domains",
+              value: "",
+            },
+            {
+              name: "certificate",
+              value: "",
+              errors: [getErrMsg(e)],
+            },
+          ]);
+        }
+      } else {
+        formInst.setFieldValue("certificate", "");
+      }
+
+      onValuesChange?.(formInst.getFieldsValue(true));
+    };
+
+    const handlePrivateKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
+      if (file && file.status !== "removed") {
+        const privateKey = await readFileContent(file.originFileObj ?? (file as unknown as File));
+
+        try {
+          await validatePrivateKey(privateKey);
+          formInst.setFields([
+            {
+              name: "privateKey",
+              value: privateKey,
+            },
+          ]);
+        } catch (e) {
+          formInst.setFields([
+            {
+              name: "privateKey",
+              value: "",
+              errors: [getErrMsg(e)],
+            },
+          ]);
+        }
+      } else {
+        formInst.setFieldValue("privateKey", "");
+      }
+
+      onValuesChange?.(formInst.getFieldsValue(true));
+    };
+
+    return (
+      <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
+        <Form.Item name="domains" label={t("workflow_node.upload.form.domains.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow_node.upload.form.domains.placeholder")} readOnly />
+        </Form.Item>
+
+        <Form.Item name="certificate" label={t("workflow_node.upload.form.certificate.label")} rules={[formRule]}>
+          <Input.TextArea
+            readOnly
+            autoSize={{ minRows: 5, maxRows: 10 }}
+            placeholder={t("workflow_node.upload.form.certificate.placeholder")}
+            value={fieldCertificate}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <Upload beforeUpload={() => false} maxCount={1} onChange={handleCertificateFileChange}>
+            <Button icon={<UploadOutlinedIcon />}>{t("workflow_node.upload.form.certificate.button")}</Button>
+          </Upload>
+        </Form.Item>
+
+        <Form.Item name="privateKey" label={t("workflow_node.upload.form.private_key.label")} rules={[formRule]}>
+          <Input.TextArea
+            readOnly
+            autoSize={{ minRows: 5, maxRows: 10 }}
+            placeholder={t("workflow_node.upload.form.private_key.placeholder")}
+            value={fieldPrivateKey}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <Upload beforeUpload={() => false} maxCount={1} onChange={handlePrivateKeyFileChange}>
+            <Button icon={<UploadOutlinedIcon />}>{t("workflow_node.upload.form.private_key.button")}</Button>
+          </Upload>
+        </Form.Item>
+      </Form>
+    );
+  }
+);
+
+export default memo(UploadNodeConfigForm);
--- a/ui/src/domain/workflow.ts
+++ b/ui/src/domain/workflow.ts
@@ -30,6 +30,7 @@ export enum WorkflowNodeType {
  Start = "start",
  End = "end",
  Apply = "apply",
+  Upload = "upload",
  Deploy = "deploy",
  Notify = "notify",
  Branch = "branch",
@@ -44,6 +45,7 @@ const workflowNodeTypeDefaultNames: Map<WorkflowNodeType, string> = new Map([
  [WorkflowNodeType.Start, i18n.t("workflow_node.start.label")],
  [WorkflowNodeType.End, i18n.t("workflow_node.end.label")],
  [WorkflowNodeType.Apply, i18n.t("workflow_node.apply.label")],
+  [WorkflowNodeType.Upload, i18n.t("workflow_node.upload.label")],
  [WorkflowNodeType.Deploy, i18n.t("workflow_node.deploy.label")],
  [WorkflowNodeType.Notify, i18n.t("workflow_node.notify.label")],
  [WorkflowNodeType.Branch, i18n.t("workflow_node.branch.label")],
@@ -82,6 +84,17 @@ const workflowNodeTypeDefaultOutputs: Map<WorkflowNodeType, WorkflowNodeIO[]> =
      },
    ],
  ],
+  [
+    WorkflowNodeType.Upload,
+    [
+      {
+        name: "certificate",
+        type: "certificate",
+        required: true,
+        label: "证书",
+      },
+    ],
+  ],
  [WorkflowNodeType.Deploy, []],
  [WorkflowNodeType.Notify, []],
 ]);
@@ -121,6 +134,13 @@ export type WorkflowNodeConfigForApply = {
  skipBeforeExpiryDays: number;
 };

+export type WorkflowNodeConfigForUpload = {
+  certificateId: string;
+  domains: string;
+  certificate: string;
+  privateKey: string;
+};
+
 export type WorkflowNodeConfigForDeploy = {
  certificate: string;
  provider: string;
@@ -202,6 +222,7 @@ export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions = {}

  switch (nodeType) {
    case WorkflowNodeType.Apply:
+    case WorkflowNodeType.Upload:
    case WorkflowNodeType.Deploy:
      {
        node.inputs = workflowNodeTypeDefaultInputs.get(nodeType);
@@ -220,11 +241,13 @@ export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions = {}
        node.branches = [newNode(WorkflowNodeType.Condition, { branchIndex: 0 }), newNode(WorkflowNodeType.Condition, { branchIndex: 1 })];
      }
      break;
+
    case WorkflowNodeType.ExecuteResultBranch:
      {
        node.branches = [newNode(WorkflowNodeType.ExecuteSuccess), newNode(WorkflowNodeType.ExecuteFailure)];
      }
      break;
+
    case WorkflowNodeType.ExecuteSuccess:
    case WorkflowNodeType.ExecuteFailure:
      {
--- a/ui/src/i18n/locales/en/nls.workflow.nodes.json
+++ b/ui/src/i18n/locales/en/nls.workflow.nodes.json
@@ -378,6 +378,16 @@
  "workflow_node.notify.form.channel.placeholder": "Please select channel",
  "workflow_node.notify.form.channel.button": "Configure",

+  "workflow_node.upload.label": "Upload",
+  "workflow_node.upload.form.domains.label": "Domains",
+  "workflow_node.upload.form.domains.placholder": "Please select certificate file",
+  "workflow_node.upload.form.certificate.label": "Certificate (PEM format)",
+  "workflow_node.upload.form.certificate.placeholder": "-----BEGIN CERTIFICATE-----...-----END CERTIFICATE-----",
+  "workflow_node.upload.form.certificate.button": "Choose file ...",
+  "workflow_node.upload.form.private_key.label": "Private key (PEM format)",
+  "workflow_node.upload.form.private_key.placeholder": "-----BEGIN (RSA|EC) PRIVATE KEY-----...-----END(RSA|EC) PRIVATE KEY-----",
+  "workflow_node.upload.form.private_key.button": "Choose file ...",
+
  "workflow_node.end.label": "End",

  "workflow_node.branch.label": "Parallel branch",
--- a/ui/src/i18n/locales/zh/nls.workflow.nodes.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.nodes.json
@@ -378,6 +378,16 @@
  "workflow_node.notify.form.channel.placeholder": "请选择通知渠道",
  "workflow_node.notify.form.channel.button": "去配置",

+  "workflow_node.upload.label": "上传",
+  "workflow_node.upload.form.domains.label": "域名",
+  "workflow_node.upload.form.domains.placeholder": "上传证书文件后显示",
+  "workflow_node.upload.form.certificate.label": "证书文件（PEM 格式）",
+  "workflow_node.upload.form.certificate.placeholder": "-----BEGIN CERTIFICATE-----...-----END CERTIFICATE-----",
+  "workflow_node.upload.form.certificate.button": "选择文件",
+  "workflow_node.upload.form.private_key.label": "私钥文件（PEM 格式）",
+  "workflow_node.upload.form.private_key.placeholder": "-----BEGIN (RSA|EC) PRIVATE KEY-----...-----END(RSA|EC) PRIVATE KEY-----",
+  "workflow_node.upload.form.private_key.button": "选择文件",
+
  "workflow_node.end.label": "结束",

  "workflow_node.branch.label": "并行分支",
--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@@ -7,7 +7,10 @@ import {
  DeleteOutlined as DeleteOutlinedIcon,
  DownOutlined as DownOutlinedIcon,
  EllipsisOutlined as EllipsisOutlinedIcon,
+  ExpandOutlined as ExpandOutlinedIcon,
  HistoryOutlined as HistoryOutlinedIcon,
+  MinusOutlined as MinusOutlinedIcon,
+  PlusOutlined as PlusOutlinedIcon,
  UndoOutlined as UndoOutlinedIcon,
 } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-components";
@@ -37,6 +40,8 @@ const WorkflowDetail = () => {
  const [modalApi, ModalContextHolder] = Modal.useModal();
  const [notificationApi, NotificationContextHolder] = notification.useNotification();

+  const [scale, setScale] = useState(1);
+
  const { id: workflowId } = useParams();
  const { workflow, initialized, ...workflowState } = useWorkflowStore(
    useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "setEnabled", "release", "discard"])
@@ -269,7 +274,7 @@ const WorkflowDetail = () => {
                    <Alert banner message={<div className="truncate">{t("workflow.detail.orchestration.draft.alert")}</div>} type="warning" />
                  </Show>
                </div>
-                <div className="flex justify-end">
+                <div className="flex justify-end ">
                  <Space>
                    <Button disabled={!allowRun} icon={<CaretRightOutlinedIcon />} loading={isRunning} type="primary" onClick={handleRunClick}>
                      {t("workflow.detail.orchestration.action.run")}
@@ -300,7 +305,14 @@ const WorkflowDetail = () => {
                  </Space>
                </div>
              </div>
-              <div className="px-12 py-8 max-md:px-4">
+              <div className="fixed bottom-8 right-8 z-10 flex items-center gap-2 rounded-lg bg-white p-2 shadow-lg">
+                <Button icon={<MinusOutlinedIcon />} disabled={scale <= 0.5} onClick={() => setScale((s) => Math.max(0.5, s - 0.1))} />
+                <Typography.Text className="min-w-[3em] text-center">{Math.round(scale * 100)}%</Typography.Text>
+                <Button icon={<PlusOutlinedIcon />} disabled={scale >= 2} onClick={() => setScale((s) => Math.min(2, s + 0.1))} />
+                <Button icon={<ExpandOutlinedIcon />} onClick={() => setScale(1)} />
+              </div>
+
+              <div className="size-full origin-top px-12 py-8 transition-transform duration-300  max-md:px-4" style={{ transform: `scale(${scale})` }}>
                <WorkflowElements />
              </div>
            </div>