Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: use react hook form

Browse Source
This commit is contained in:
Mauricio Siu
2024-12-24 14:47:42 -06:00
parent 0db98c0b92
commit ce19a42aee
1 changed files with 198 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx
View File

@@ -10,7 +10,6 @@ import {
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -18,61 +17,56 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { ArrowRightLeft, Plus, Trash2 } from "lucide-react"; import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod";
import { useFieldArray, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
/**
* Props for the ManageTraefikPorts component
* @interface Props
* @property {React.ReactNode} children - The trigger element that opens the ports management modal
* @property {string} [serverId] - Optional ID of the server whose ports are being managed
*/
interface Props { interface Props {
children: React.ReactNode; children: React.ReactNode;
serverId?: string; serverId?: string;
} }
/** const PortSchema = z.object({
* Represents a port mapping configuration for Traefik targetPort: z.number().min(1, "Target port is required"),
* @interface AdditionalPort publishedPort: z.number().min(1, "Published port is required"),
* @property {number} targetPort - The internal port that the service is listening on publishMode: z.enum(["ingress", "host"]),
* @property {number} publishedPort - The external port that will be exposed });
* @property {"ingress" | "host"} publishMode - The Docker Swarm publish mode:
* - "host": Publishes the port directly on the host const TraefikPortsSchema = z.object({
* - "ingress": Publishes the port through the Swarm routing mesh ports: z.array(PortSchema),
*/ });
interface AdditionalPort {
targetPort: number; type TraefikPortsForm = z.infer<typeof TraefikPortsSchema>;
publishedPort: number;
publishMode: "ingress" | "host";
}
/**
* ManageTraefikPorts is a component that provides a modal interface for managing
* additional port mappings for Traefik in a Docker Swarm environment.
*
* Features:
* - Add, remove, and edit port mappings
* - Configure target port, published port, and publish mode for each mapping
* - Persist port configurations through API calls
*
* @component
* @example
* ```tsx
* <ManageTraefikPorts serverId="server-123">
* <Button>Manage Ports</Button>
* </ManageTraefikPorts>
* ```
*/
export const ManageTraefikPorts = ({ children, serverId }: Props) => { export const ManageTraefikPorts = ({ children, serverId }: Props) => {
const { t } = useTranslation("settings"); const { t } = useTranslation("settings");
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [additionalPorts, setAdditionalPorts] = useState<AdditionalPort[]>([]);
const [isDirty, setIsDirty] = useState(false); const form = useForm<TraefikPortsForm>({
resolver: zodResolver(TraefikPortsSchema),
defaultValues: {
ports: [],
},
});
const { fields, append, remove } = useFieldArray({
control: form.control,
name: "ports",
});
const { data: currentPorts, refetch: refetchPorts } = const { data: currentPorts, refetch: refetchPorts } =
api.settings.getTraefikPorts.useQuery({ api.settings.getTraefikPorts.useQuery({
@@ -88,38 +82,27 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
useEffect(() => { useEffect(() => {
if (currentPorts) { if (currentPorts) {
setAdditionalPorts(currentPorts); form.reset({ ports: currentPorts });
} }
}, [currentPorts]); }, [currentPorts, form]);
const handleAddPort = () => { const handleAddPort = () => {
setAdditionalPorts([ append({ targetPort: 0, publishedPort: 0, publishMode: "host" });
...additionalPorts,
{ targetPort: 0, publishedPort: 0, publishMode: "host" },
]);
setIsDirty(true);
}; };
const handleUpdatePorts = async () => { const onSubmit = async (data: TraefikPortsForm) => {
try { try {
await updatePorts({ await updatePorts({
serverId, serverId,
additionalPorts, additionalPorts: data.ports,
}); });
toast.success(t("settings.server.webServer.traefik.portsUpdated")); toast.success(t("settings.server.webServer.traefik.portsUpdated"));
setOpen(false); setOpen(false);
setIsDirty(false);
} catch (error) { } catch (error) {
toast.error(t("settings.server.webServer.traefik.portsUpdateError")); toast.error(t("settings.server.webServer.traefik.portsUpdateError"));
} }
}; };
const handleRemovePort = (index: number) => {
const newPorts = additionalPorts.filter((_, i) => i !== index);
setAdditionalPorts(newPorts);
setIsDirty(true);
};
return ( return (
<> <>
<div onClick={() => setOpen(true)}>{children}</div> <div onClick={() => setOpen(true)}>{children}</div>
@@ -144,168 +127,173 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="grid gap-6 py-4"> <Form {...form}>
{additionalPorts.length === 0 ? ( <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<div className="flex w-full flex-col items-center justify-center gap-3 pt-10"> <div className="grid gap-6 py-4">
<ArrowRightLeft className="size-8 text-muted-foreground" /> {fields.length === 0 ? (
<span className="text-base text-muted-foreground text-center"> <div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
No port mappings configured <ArrowRightLeft className="size-8 text-muted-foreground" />
</span> <span className="text-base text-muted-foreground text-center">
<p className="text-sm text-muted-foreground text-center"> No port mappings configured
Add one to get started </span>
</p> <p className="text-sm text-muted-foreground text-center">
</div> Add one to get started
) : ( </p>
<div className="grid gap-4"> </div>
{additionalPorts.map((port, index) => ( ) : (
<Card key={index}> <div className="grid gap-4">
<CardContent className="grid grid-cols-[1fr_1fr_1.5fr_auto] gap-4 p-4 transparent"> {fields.map((field, index) => (
<div className="space-y-2"> <Card key={field.id}>
<Label <CardContent className="grid grid-cols-[1fr_1fr_1.5fr_auto] gap-4 p-4 transparent">
htmlFor={`target-port-${index}`} <FormField
className="text-sm font-medium text-muted-foreground" control={form.control}
> name={`ports.${index}.targetPort`}
{t("settings.server.webServer.traefik.targetPort")} render={({ field }) => (
</Label> <FormItem>
<Input <FormLabel className="text-sm font-medium text-muted-foreground">
id={`target-port-${index}`} {t(
type="number" "settings.server.webServer.traefik.targetPort",
value={port.targetPort} )}
onChange={(e) => { </FormLabel>
const newPorts = [...additionalPorts]; <FormControl>
if (newPorts[index]) { <Input
newPorts[index].targetPort = Number.parseInt( type="number"
e.target.value, {...field}
); onChange={(e) =>
} field.onChange(Number(e.target.value))
setAdditionalPorts(newPorts); }
}} className="w-full dark:bg-black"
className="w-full dark:bg-black" placeholder="e.g. 8080"
placeholder="e.g. 8080" />
/> </FormControl>
</div> <FormMessage />
</FormItem>
)}
/>
<div className="space-y-2"> <FormField
<Label control={form.control}
htmlFor={`published-port-${index}`} name={`ports.${index}.publishedPort`}
className="text-sm font-medium text-muted-foreground" render={({ field }) => (
> <FormItem>
{t("settings.server.webServer.traefik.publishedPort")} <FormLabel className="text-sm font-medium text-muted-foreground">
</Label> {t(
<Input "settings.server.webServer.traefik.publishedPort",
id={`published-port-${index}`} )}
type="text" </FormLabel>
value={port.publishedPort} <FormControl>
onChange={(e) => { <Input
const newPorts = [...additionalPorts]; type="number"
if (newPorts[index]) { {...field}
newPorts[index].publishedPort = Number.parseInt( onChange={(e) =>
e.target.value, field.onChange(Number(e.target.value))
); }
} className="w-full dark:bg-black"
setAdditionalPorts(newPorts); placeholder="e.g. 80"
}} />
className="w-full dark:bg-black" </FormControl>
placeholder="e.g. 80" <FormMessage />
/> </FormItem>
</div> )}
/>
<div className="space-y-2"> <FormField
<Label control={form.control}
htmlFor={`publish-mode-${index}`} name={`ports.${index}.publishMode`}
className="text-sm font-medium text-muted-foreground" render={({ field }) => (
> <FormItem>
{t("settings.server.webServer.traefik.publishMode")} <FormLabel className="text-sm font-medium text-muted-foreground">
</Label> {t(
<Select "settings.server.webServer.traefik.publishMode",
value={port.publishMode} )}
onValueChange={(value: "ingress" | "host") => { </FormLabel>
const newPorts = [...additionalPorts]; <Select
if (newPorts[index]) { onValueChange={field.onChange}
newPorts[index].publishMode = value; value={field.value}
} >
setAdditionalPorts(newPorts); <FormControl>
}} <SelectTrigger className="dark:bg-black">
> <SelectValue />
<SelectTrigger </SelectTrigger>
id={`publish-mode-${index}`} </FormControl>
className="dark:bg-black" <SelectContent>
> <SelectItem value="host">
<SelectValue /> Host Mode
</SelectTrigger> </SelectItem>
<SelectContent> <SelectItem value="ingress">
<SelectItem value="host">Host Mode</SelectItem> Ingress Mode
<SelectItem value="ingress"> </SelectItem>
Ingress Mode </SelectContent>
</SelectItem> </Select>
</SelectContent> <FormMessage />
</Select> </FormItem>
</div> )}
/>
<div className="flex items-end"> <div className="flex items-end">
<Button <Button
onClick={() => handleRemovePort(index)} onClick={() => remove(index)}
variant="ghost" variant="ghost"
size="icon" size="icon"
className="text-muted-foreground hover:text-destructive" className="text-muted-foreground hover:text-destructive"
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
</div> </div>
)} )}
{additionalPorts.length > 0 && ( {fields.length > 0 && (
<AlertBlock type="info"> <AlertBlock type="info">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-sm"> <span className="text-sm">
<strong> <strong>
Each port mapping defines how external traffic reaches Each port mapping defines how external traffic reaches
your containers. your containers.
</strong> </strong>
<ul className="pt-2"> <ul className="pt-2">
<li>
<strong>Host Mode:</strong> Directly binds the port to
the host machine.
<ul className="p-2 list-inside list-disc">
<li> <li>
Best for single-node deployments or when you need <strong>Host Mode:</strong> Directly binds the port
guaranteed port availability. to the host machine.
<ul className="p-2 list-inside list-disc">
<li>
Best for single-node deployments or when you
need guaranteed port availability.
</li>
</ul>
</li>
<li>
<strong>Ingress Mode:</strong> Routes through Docker
Swarm's load balancer.
<ul className="p-2 list-inside list-disc">
<li>
Recommended for multi-node deployments and
better scalability.
</li>
</ul>
</li> </li>
</ul> </ul>
</li> </span>
<li> </div>
<strong>Ingress Mode:</strong> Routes through Docker </AlertBlock>
Swarm's load balancer. )}
<ul className="p-2 list-inside list-disc"> </div>
<li>
Recommended for multi-node deployments and better
scalability.
</li>
</ul>
</li>
</ul>
</span>
</div>
</AlertBlock>
)}
</div>
<DialogFooter className=""> <DialogFooter>
{(additionalPorts.length > 0 || isDirty) && ( <Button
<Button type="submit"
variant="default" variant="default"
className="text-sm" className="text-sm"
onClick={handleUpdatePorts} isLoading={isLoading}
disabled={isLoading || !isDirty} >
> Save
Save </Button>
</Button> </DialogFooter>
)} </form>
</DialogFooter> </Form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </>