feat: new deployment provider: flexcdn

2025-05-16 22:18:03 +08:00
parent 122d766cab
commit eabd16dd71
28 changed files with 741 additions and 26 deletions
--- a/ui/src/components/access/AccessForm.tsx
+++ b/ui/src/components/access/AccessForm.tsx
@@ -34,6 +34,7 @@ import AccessFormDogeCloudConfig from "./AccessFormDogeCloudConfig";
 import AccessFormDynv6Config from "./AccessFormDynv6Config";
 import AccessFormEdgioConfig from "./AccessFormEdgioConfig";
 import AccessFormEmailConfig from "./AccessFormEmailConfig";
+import AccessFormFlexCDNConfig from "./AccessFormFlexCDNConfig";
 import AccessFormGcoreConfig from "./AccessFormGcoreConfig";
 import AccessFormGnameConfig from "./AccessFormGnameConfig";
 import AccessFormGoDaddyConfig from "./AccessFormGoDaddyConfig";
@@ -218,6 +219,12 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
        return <AccessFormDogeCloudConfig {...nestedFormProps} />;
      case ACCESS_PROVIDERS.DYNV6:
        return <AccessFormDynv6Config {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.EDGIO:
+        return <AccessFormEdgioConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.EMAIL:
+        return <AccessFormEmailConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.FLEXCDN:
+        return <AccessFormFlexCDNConfig {...nestedFormProps} />;
      case ACCESS_PROVIDERS.GCORE:
        return <AccessFormGcoreConfig {...nestedFormProps} />;
      case ACCESS_PROVIDERS.GNAME:
@@ -228,10 +235,6 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
        return <AccessFormGoEdgeConfig {...nestedFormProps} />;
      case ACCESS_PROVIDERS.GOOGLETRUSTSERVICES:
        return <AccessFormGoogleTrustServicesConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.EDGIO:
-        return <AccessFormEdgioConfig {...nestedFormProps} />;
-      case ACCESS_PROVIDERS.EMAIL:
-        return <AccessFormEmailConfig {...nestedFormProps} />;
      case ACCESS_PROVIDERS.HUAWEICLOUD:
        return <AccessFormHuaweiCloudConfig {...nestedFormProps} />;
      case ACCESS_PROVIDERS.JDCLOUD:
--- a/ui/src/components/access/AccessFormFlexCDNConfig.tsx
+++ b/ui/src/components/access/AccessFormFlexCDNConfig.tsx
@@ -0,0 +1,90 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input, Radio, Switch } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { type AccessConfigForFlexCDN } from "@/domain/access";
+
+type AccessFormFlexCDNConfigFieldValues = Nullish<AccessConfigForFlexCDN>;
+
+export type AccessFormFlexCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: AccessFormFlexCDNConfigFieldValues;
+  onValuesChange?: (values: AccessFormFlexCDNConfigFieldValues) => void;
+};
+
+const initFormModel = (): AccessFormFlexCDNConfigFieldValues => {
+  return {
+    apiUrl: "http://<your-host-addr>:8000/",
+    apiRole: "user",
+    accessKeyId: "",
+    accessKey: "",
+  };
+};
+
+const AccessFormFlexCDNConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormFlexCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    apiUrl: z.string().url(t("common.errmsg.url_invalid")),
+    role: z.union([z.literal("user"), z.literal("admin")], {
+      message: t("access.form.flexcdn_api_role.placeholder"),
+    }),
+    accessKeyId: z.string().nonempty(t("access.form.flexcdn_access_key_id.placeholder")).trim(),
+    accessKey: z.string().nonempty(t("access.form.flexcdn_access_key.placeholder")).trim(),
+    allowInsecureConnections: z.boolean().nullish(),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item name="apiUrl" label={t("access.form.flexcdn_api_url.label")} rules={[formRule]}>
+        <Input placeholder={t("access.form.flexcdn_api_url.placeholder")} />
+      </Form.Item>
+
+      <Form.Item name="apiRole" label={t("access.form.flexcdn_api_role.label")} rules={[formRule]}>
+        <Radio.Group options={["user", "admin"].map((s) => ({ label: t(`access.form.flexcdn_api_role.option.${s}.label`), value: s }))} />
+      </Form.Item>
+
+      <Form.Item
+        name="accessKeyId"
+        label={t("access.form.flexcdn_access_key_id.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.flexcdn_access_key_id.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.flexcdn_access_key_id.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name="accessKey"
+        label={t("access.form.flexcdn_access_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.flexcdn_access_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.flexcdn_access_key.placeholder")} />
+      </Form.Item>
+
+      <Form.Item name="allowInsecureConnections" label={t("access.form.flexcdn_allow_insecure_conns.label")} rules={[formRule]}>
+        <Switch
+          checkedChildren={t("access.form.flexcdn_allow_insecure_conns.switch.on")}
+          unCheckedChildren={t("access.form.flexcdn_allow_insecure_conns.switch.off")}
+        />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default AccessFormFlexCDNConfig;
--- a/ui/src/components/access/AccessFormGoEdgeConfig.tsx
+++ b/ui/src/components/access/AccessFormGoEdgeConfig.tsx
@@ -32,16 +32,8 @@ const AccessFormGoEdgeConfig = ({ form: formInst, formName, disabled, initialVal
    role: z.union([z.literal("user"), z.literal("admin")], {
      message: t("access.form.goedge_api_role.placeholder"),
    }),
-    accessKeyId: z
-      .string()
-      .min(1, t("access.form.goedge_access_key_id.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 }))
-      .trim(),
-    accessKey: z
-      .string()
-      .min(1, t("access.form.goedge_access_key.placeholder"))
-      .max(64, t("common.errmsg.string_max", { max: 64 }))
-      .trim(),
+    accessKeyId: z.string().nonempty(t("access.form.goedge_access_key_id.placeholder")).trim(),
+    accessKey: z.string().nonempty(t("access.form.goedge_access_key.placeholder")).trim(),
    allowInsecureConnections: z.boolean().nullish(),
  });
  const formRule = createSchemaFieldRule(formSchema);
--- a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
@@ -46,6 +46,7 @@ import DeployNodeConfigFormBytePlusCDNConfig from "./DeployNodeConfigFormBytePlu
 import DeployNodeConfigFormCdnflyConfig from "./DeployNodeConfigFormCdnflyConfig";
 import DeployNodeConfigFormDogeCloudCDNConfig from "./DeployNodeConfigFormDogeCloudCDNConfig";
 import DeployNodeConfigFormEdgioApplicationsConfig from "./DeployNodeConfigFormEdgioApplicationsConfig";
+import DeployNodeConfigFormFlexCDNConfig from "./DeployNodeConfigFormFlexCDNConfig";
 import DeployNodeConfigFormGcoreCDNConfig from "./DeployNodeConfigFormGcoreCDNConfig";
 import DeployNodeConfigFormGoEdgeConfig from "./DeployNodeConfigFormGoEdgeConfig";
 import DeployNodeConfigFormHuaweiCloudCDNConfig from "./DeployNodeConfigFormHuaweiCloudCDNConfig";
@@ -240,6 +241,8 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
          return <DeployNodeConfigFormDogeCloudCDNConfig {...nestedFormProps} />;
        case DEPLOYMENT_PROVIDERS.EDGIO_APPLICATIONS:
          return <DeployNodeConfigFormEdgioApplicationsConfig {...nestedFormProps} />;
+        case DEPLOYMENT_PROVIDERS.FLEXCDN:
+          return <DeployNodeConfigFormFlexCDNConfig {...nestedFormProps} />;
        case DEPLOYMENT_PROVIDERS.GCORE_CDN:
          return <DeployNodeConfigFormGcoreCDNConfig {...nestedFormProps} />;
        case DEPLOYMENT_PROVIDERS.GOEDGE:
--- a/ui/src/components/workflow/node/DeployNodeConfigFormCdnflyConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormCdnflyConfig.tsx
@@ -79,13 +79,23 @@ const DeployNodeConfigFormCdnflyConfig = ({ form: formInst, formName, disabled,
      </Form.Item>

      <Show when={fieldResourceType === RESOURCE_TYPE_SITE}>
-        <Form.Item name="siteId" label={t("workflow_node.deploy.form.cdnfly_site_id.label")} rules={[formRule]}>
+        <Form.Item
+          name="siteId"
+          label={t("workflow_node.deploy.form.cdnfly_site_id.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.cdnfly_site_id.tooltip") }}></span>}
+        >
          <Input type="number" placeholder={t("workflow_node.deploy.form.cdnfly_site_id.placeholder")} />
        </Form.Item>
      </Show>

      <Show when={fieldResourceType === RESOURCE_TYPE_CERTIFICATE}>
-        <Form.Item name="certificateId" label={t("workflow_node.deploy.form.cdnfly_certificate_id.label")} rules={[formRule]}>
+        <Form.Item
+          name="certificateId"
+          label={t("workflow_node.deploy.form.cdnfly_certificate_id.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.cdnfly_certificate_id.tooltip") }}></span>}
+        >
          <Input type="number" placeholder={t("workflow_node.deploy.form.cdnfly_certificate_id.placeholder")} />
        </Form.Item>
      </Show>
--- a/ui/src/components/workflow/node/DeployNodeConfigFormFlexCDNConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormFlexCDNConfig.tsx
@@ -0,0 +1,84 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input, Select } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import Show from "@/components/Show";
+
+type DeployNodeConfigFormFlexCDNConfigFieldValues = Nullish<{
+  resourceType: string;
+  certificateId?: string | number;
+}>;
+
+export type DeployNodeConfigFormFlexCDNConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: DeployNodeConfigFormFlexCDNConfigFieldValues;
+  onValuesChange?: (values: DeployNodeConfigFormFlexCDNConfigFieldValues) => void;
+};
+
+const RESOURCE_TYPE_CERTIFICATE = "certificate" as const;
+
+const initFormModel = (): DeployNodeConfigFormFlexCDNConfigFieldValues => {
+  return {
+    resourceType: RESOURCE_TYPE_CERTIFICATE,
+    certificateId: "",
+  };
+};
+
+const DeployNodeConfigFormFlexCDNConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: DeployNodeConfigFormFlexCDNConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    resourceType: z.literal(RESOURCE_TYPE_CERTIFICATE, {
+      message: t("workflow_node.deploy.form.flexcdn_resource_type.placeholder"),
+    }),
+    certificateId: z
+      .union([z.string(), z.number().int()])
+      .nullish()
+      .refine((v) => {
+        if (fieldResourceType !== RESOURCE_TYPE_CERTIFICATE) return true;
+        return /^\d+$/.test(v + "") && +v! > 0;
+      }, t("workflow_node.deploy.form.flexcdn_certificate_id.placeholder")),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const fieldResourceType = Form.useWatch("resourceType", formInst);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      onValuesChange={handleFormChange}
+    >
+      <Form.Item name="resourceType" label={t("workflow_node.deploy.form.flexcdn_resource_type.label")} rules={[formRule]}>
+        <Select placeholder={t("workflow_node.deploy.form.flexcdn_resource_type.placeholder")}>
+          <Select.Option key={RESOURCE_TYPE_CERTIFICATE} value={RESOURCE_TYPE_CERTIFICATE}>
+            {t("workflow_node.deploy.form.flexcdn_resource_type.option.certificate.label")}
+          </Select.Option>
+        </Select>
+      </Form.Item>
+
+      <Show when={fieldResourceType === RESOURCE_TYPE_CERTIFICATE}>
+        <Form.Item
+          name="certificateId"
+          label={t("workflow_node.deploy.form.flexcdn_certificate_id.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.flexcdn_certificate_id.tooltip") }}></span>}
+        >
+          <Input type="number" placeholder={t("workflow_node.deploy.form.flexcdn_certificate_id.placeholder")} />
+        </Form.Item>
+      </Show>
+    </Form>
+  );
+};
+
+export default DeployNodeConfigFormFlexCDNConfig;
--- a/ui/src/components/workflow/node/DeployNodeConfigFormGoEdgeConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormGoEdgeConfig.tsx
@@ -68,7 +68,12 @@ const DeployNodeConfigFormGoEdgeConfig = ({ form: formInst, formName, disabled,
      </Form.Item>

      <Show when={fieldResourceType === RESOURCE_TYPE_CERTIFICATE}>
-        <Form.Item name="certificateId" label={t("workflow_node.deploy.form.goedge_certificate_id.label")} rules={[formRule]}>
+        <Form.Item
+          name="certificateId"
+          label={t("workflow_node.deploy.form.goedge_certificate_id.label")}
+          rules={[formRule]}
+          tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.goedge_certificate_id.tooltip") }}></span>}
+        >
          <Input type="number" placeholder={t("workflow_node.deploy.form.goedge_certificate_id.placeholder")} />
        </Form.Item>
      </Show>