feat: add aliyun clb deployer

ui/src/components/certimate/DeployEditDialog.tsx

@@ -11,6 +11,7 @@ import AccessEditDialog from "./AccessEditDialog";
 import { Context as DeployEditContext } from "./DeployEdit";
 import DeployToAliyunOSS from "./DeployToAliyunOSS";
 import DeployToAliyunCDN from "./DeployToAliyunCDN";
+import DeployToAliyunCLB from "./DeployToAliyunCLB";
 import DeployToTencentCDN from "./DeployToTencentCDN";
 import DeployToTencentCLB from "./DeployToTencentCLB";
 import DeployToTencentCOS from "./DeployToTencentCOS";
@@ -118,6 +119,9 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
     case "aliyun-dcdn":
       childComponent = <DeployToAliyunCDN />;
       break;
+    case "aliyun-clb":
+      childComponent = <DeployToAliyunCLB />;
+      break;
     case "tencent-cdn":
       childComponent = <DeployToTencentCDN />;
       break;

ui/src/components/certimate/DeployToAliyunCLB.tsx

@@ -0,0 +1,156 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import { produce } from "immer";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useDeployEditContext } from "./DeployEdit";
+
+const DeployToAliyunCLB = () => {
+  const { t } = useTranslation();
+
+  const { deploy: data, setDeploy, error, setError } = useDeployEditContext();
+
+  useEffect(() => {
+    if (!data.id) {
+      setDeploy({
+        ...data,
+        config: {
+          region: "cn-hangzhou",
+          resourceType: "",
+          loadbalancerId: "",
+          listenerPort: "443",
+        },
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    setError({});
+  }, []);
+
+  const formSchema = z
+    .object({
+      region: z.string().min(1, t("domain.deployment.form.aliyun_clb_region.placeholder")),
+      resourceType: z.string().min(1, t("domain.deployment.form.aliyun_clb_resource_type.placeholder")),
+      loadbalancerId: z.string().optional(),
+      listenerPort: z.string().optional(),
+    })
+    .refine((data) => (data.resourceType === "loadbalancer" || data.resourceType === "listener" ? !!data.loadbalancerId?.trim() : true), {
+      message: t("domain.deployment.form.aliyun_clb_loadbalancer_id.placeholder"),
+      path: ["loadbalancerId"],
+    })
+    .refine((data) => (data.resourceType === "listener" ? +data.listenerPort! > 0 && +data.listenerPort! < 65535 : true), {
+      message: t("domain.deployment.form.aliyun_clb_listener_port.placeholder"),
+      path: ["listenerPort"],
+    });
+
+  useEffect(() => {
+    const res = formSchema.safeParse(data.config);
+    if (!res.success) {
+      setError({
+        ...error,
+        region: res.error.errors.find((e) => e.path[0] === "region")?.message,
+        resourceType: res.error.errors.find((e) => e.path[0] === "resourceType")?.message,
+        loadbalancerId: res.error.errors.find((e) => e.path[0] === "loadbalancerId")?.message,
+        listenerPort: res.error.errors.find((e) => e.path[0] === "listenerPort")?.message,
+      });
+    } else {
+      setError({
+        ...error,
+        region: undefined,
+        resourceType: undefined,
+        loadbalancerId: undefined,
+        listenerPort: undefined,
+      });
+    }
+  }, [data]);
+
+  return (
+    <div className="flex flex-col space-y-8">
+      <div>
+        <Label>{t("domain.deployment.form.aliyun_clb_region.label")}</Label>
+        <Input
+          placeholder={t("domain.deployment.form.aliyun_clb_region.placeholder")}
+          className="w-full mt-1"
+          value={data?.config?.region}
+          onChange={(e) => {
+            const newData = produce(data, (draft) => {
+              draft.config ??= {};
+              draft.config.region = e.target.value?.trim();
+            });
+            setDeploy(newData);
+          }}
+        />
+        <div className="text-red-600 text-sm mt-1">{error?.region}</div>
+      </div>
+
+      <div>
+        <Label>{t("domain.deployment.form.aliyun_clb_resource_type.label")}</Label>
+        <Select
+          value={data?.config?.resourceType}
+          onValueChange={(value) => {
+            const newData = produce(data, (draft) => {
+              draft.config ??= {};
+              draft.config.resourceType = value?.trim();
+            });
+            setDeploy(newData);
+          }}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={t("domain.deployment.form.aliyun_clb_resource_type.placeholder")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="loadbalancer">{t("domain.deployment.form.aliyun_clb_resource_type.option.loadbalancer.label")}</SelectItem>
+              <SelectItem value="listener">{t("domain.deployment.form.aliyun_clb_resource_type.option.listener.label")}</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <div className="text-red-600 text-sm mt-1">{error?.resourceType}</div>
+      </div>
+
+      <div>
+        <Label>{t("domain.deployment.form.aliyun_clb_loadbalancer_id.label")}</Label>
+        <Input
+          placeholder={t("domain.deployment.form.aliyun_clb_loadbalancer_id.placeholder")}
+          className="w-full mt-1"
+          value={data?.config?.loadbalancerId}
+          onChange={(e) => {
+            const newData = produce(data, (draft) => {
+              draft.config ??= {};
+              draft.config.loadbalancerId = e.target.value?.trim();
+            });
+            setDeploy(newData);
+          }}
+        />
+        <div className="text-red-600 text-sm mt-1">{error?.loadbalancerId}</div>
+      </div>
+
+      {data?.config?.resourceType === "listener" ? (
+        <div>
+          <Label>{t("domain.deployment.form.aliyun_clb_listener_port.label")}</Label>
+          <Input
+            placeholder={t("domain.deployment.form.aliyun_clb_listener_port.placeholder")}
+            className="w-full mt-1"
+            value={data?.config?.listenerPort}
+            onChange={(e) => {
+              const newData = produce(data, (draft) => {
+                draft.config ??= {};
+                draft.config.listenerPort = e.target.value?.trim();
+              });
+              setDeploy(newData);
+            }}
+          />
+          <div className="text-red-600 text-sm mt-1">{error?.listenerPort}</div>
+        </div>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+
+export default DeployToAliyunCLB;

ui/src/components/certimate/DeployToHuaweiCloudELB.tsx

@@ -44,7 +44,7 @@ const DeployToHuaweiCloudCDN = () => {
       message: t("domain.deployment.form.huaweicloud_elb_certificate_id.placeholder"),
       path: ["certificateId"],
     })
-    .refine((data) => (data.resourceType === "loadbalancer" ? !!data.certificateId?.trim() : true), {
+    .refine((data) => (data.resourceType === "loadbalancer" ? !!data.loadbalancerId?.trim() : true), {
       message: t("domain.deployment.form.huaweicloud_elb_loadbalancer_id.placeholder"),
       path: ["loadbalancerId"],
     })