feat: add aliyun nlb deployer

This commit is contained in:
Fu Diwei
2024-10-26 12:52:55 +08:00
parent 1690963aaf
commit d87026d5be
11 changed files with 433 additions and 3 deletions

View File

@@ -13,6 +13,7 @@ import DeployToAliyunOSS from "./DeployToAliyunOSS";
import DeployToAliyunCDN from "./DeployToAliyunCDN";
import DeployToAliyunCLB from "./DeployToAliyunCLB";
import DeployToAliyunALB from "./DeployToAliyunALB";
import DeployToAliyunNLB from "./DeployToAliyunNLB";
import DeployToTencentCDN from "./DeployToTencentCDN";
import DeployToTencentCLB from "./DeployToTencentCLB";
import DeployToTencentCOS from "./DeployToTencentCOS";
@@ -126,6 +127,9 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
case "aliyun-alb":
childComponent = <DeployToAliyunALB />;
break;
case "aliyun-nlb":
childComponent = <DeployToAliyunNLB />;
break;
case "tencent-cdn":
childComponent = <DeployToTencentCDN />;
break;

View File

@@ -0,0 +1,162 @@
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 DeployToAliyunNLB = () => {
const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext();
useEffect(() => {
if (!data.id) {
setDeploy({
...data,
config: {
region: "cn-hangzhou",
resourceType: "",
loadbalancerId: "",
listenerId: "",
},
});
}
}, []);
useEffect(() => {
setError({});
}, []);
const formSchema = z
.object({
region: z.string().min(1, t("domain.deployment.form.aliyun_nlb_region.placeholder")),
resourceType: z.union([z.literal("loadbalancer"), z.literal("listener")], {
message: t("domain.deployment.form.aliyun_nlb_resource_type.placeholder"),
}),
loadbalancerId: z.string().optional(),
listenerId: z.string().optional(),
})
.refine((data) => (data.resourceType === "loadbalancer" ? !!data.loadbalancerId?.trim() : true), {
message: t("domain.deployment.form.aliyun_nlb_loadbalancer_id.placeholder"),
path: ["loadbalancerId"],
})
.refine((data) => (data.resourceType === "listener" ? !!data.listenerId?.trim() : true), {
message: t("domain.deployment.form.aliyun_nlb_listener_id.placeholder"),
path: ["listenerId"],
});
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,
listenerId: res.error.errors.find((e) => e.path[0] === "listenerId")?.message,
});
} else {
setError({
...error,
region: undefined,
resourceType: undefined,
loadbalancerId: undefined,
listenerId: undefined,
});
}
}, [data]);
return (
<div className="flex flex-col space-y-8">
<div>
<Label>{t("domain.deployment.form.aliyun_nlb_region.label")}</Label>
<Input
placeholder={t("domain.deployment.form.aliyun_nlb_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_nlb_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_nlb_resource_type.placeholder")} />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="loadbalancer">{t("domain.deployment.form.aliyun_nlb_resource_type.option.loadbalancer.label")}</SelectItem>
<SelectItem value="listener">{t("domain.deployment.form.aliyun_nlb_resource_type.option.listener.label")}</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<div className="text-red-600 text-sm mt-1">{error?.resourceType}</div>
</div>
{data?.config?.resourceType === "loadbalancer" ? (
<div>
<Label>{t("domain.deployment.form.aliyun_nlb_loadbalancer_id.label")}</Label>
<Input
placeholder={t("domain.deployment.form.aliyun_nlb_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_nlb_listener_id.label")}</Label>
<Input
placeholder={t("domain.deployment.form.aliyun_nlb_listener_id.placeholder")}
className="w-full mt-1"
value={data?.config?.listenerId}
onChange={(e) => {
const newData = produce(data, (draft) => {
draft.config ??= {};
draft.config.listenerId = e.target.value?.trim();
});
setDeploy(newData);
}}
/>
<div className="text-red-600 text-sm mt-1">{error?.listenerId}</div>
</div>
) : (
<></>
)}
</div>
);
};
export default DeployToAliyunNLB;