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

feat(traefik/ports): improved UI

Browse Source
This commit is contained in:
Nicholas Penree
2024-12-23 21:05:43 -05:00
parent 96cdffb5b9
commit 0db98c0b92
3 changed files with 192 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx
View File

@@ -80,8 +80,10 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
<DialogTrigger asChild>{children}</DialogTrigger> <DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl"> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Update Traefik Env</DialogTitle> <DialogTitle>Update Traefik Environment</DialogTitle>
<DialogDescription>Update the traefik env</DialogDescription> <DialogDescription>
Update the traefik environment variables
</DialogDescription>
</DialogHeader> </DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>} {isError && <AlertBlock type="error">{error?.message}</AlertBlock>}

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

@@ -1,11 +1,15 @@
import { AlertBlock } from "@/components/shared/alert-block";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
Select, Select,
@@ -15,6 +19,7 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
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";
@@ -67,6 +72,7 @@ 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 [additionalPorts, setAdditionalPorts] = useState<AdditionalPort[]>([]);
const [isDirty, setIsDirty] = useState(false);
const { data: currentPorts, refetch: refetchPorts } = const { data: currentPorts, refetch: refetchPorts } =
api.settings.getTraefikPorts.useQuery({ api.settings.getTraefikPorts.useQuery({
@@ -91,6 +97,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
...additionalPorts, ...additionalPorts,
{ targetPort: 0, publishedPort: 0, publishMode: "host" }, { targetPort: 0, publishedPort: 0, publishMode: "host" },
]); ]);
setIsDirty(true);
}; };
const handleUpdatePorts = async () => { const handleUpdatePorts = async () => {
@@ -101,130 +108,208 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
}); });
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>
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="sm:max-w-2xl"> <DialogContent className="sm:max-w-3xl">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle className="flex items-center gap-2 text-xl">
{t("settings.server.webServer.traefik.managePorts")} {t("settings.server.webServer.traefik.managePorts")}
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription className="text-base w-full">
{t("settings.server.webServer.traefik.managePortsDescription")} <div className="flex items-center justify-between">
{t("settings.server.webServer.traefik.managePortsDescription")}
<Button
onClick={handleAddPort}
variant="default"
className="gap-2"
>
<Plus className="h-4 w-4" />
Add Mapping
</Button>
</div>
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="grid gap-4 py-4">
{additionalPorts.map((port, index) => (
<div
key={index}
className="grid grid-cols-[120px_120px_minmax(120px,1fr)_80px] gap-4 items-end"
>
<div className="space-y-2">
<Label htmlFor={`target-port-${index}`}>
{t("settings.server.webServer.traefik.targetPort")}
</Label>
<input
id={`target-port-${index}`}
type="number"
value={port.targetPort}
onChange={(e) => {
const newPorts = [...additionalPorts];
if (newPorts[index]) { <div className="grid gap-6 py-4">
newPorts[index].targetPort = Number.parseInt( {additionalPorts.length === 0 ? (
e.target.value, <div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
); <ArrowRightLeft className="size-8 text-muted-foreground" />
} <span className="text-base text-muted-foreground text-center">
No port mappings configured
setAdditionalPorts(newPorts); </span>
}} <p className="text-sm text-muted-foreground text-center">
className="w-full rounded border p-2" Add one to get started
/> </p>
</div>
<div className="space-y-2">
<Label htmlFor={`published-port-${index}`}>
{t("settings.server.webServer.traefik.publishedPort")}
</Label>
<input
id={`published-port-${index}`}
type="number"
value={port.publishedPort}
onChange={(e) => {
const newPorts = [...additionalPorts];
if (newPorts[index]) {
newPorts[index].publishedPort = Number.parseInt(
e.target.value,
);
}
setAdditionalPorts(newPorts);
}}
className="w-full rounded border p-2"
/>
</div>
<div className="space-y-2">
<Label htmlFor={`publish-mode-${index}`}>
{t("settings.server.webServer.traefik.publishMode")}
</Label>
<Select
value={port.publishMode}
onValueChange={(value: "ingress" | "host") => {
const newPorts = [...additionalPorts];
if (newPorts[index]) {
newPorts[index].publishMode = value;
}
setAdditionalPorts(newPorts);
}}
>
<SelectTrigger
id={`publish-mode-${index}`}
className="w-full"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="host">Host</SelectItem>
<SelectItem value="ingress">Ingress</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Button
onClick={() => {
const newPorts = additionalPorts.filter(
(_, i) => i !== index,
);
setAdditionalPorts(newPorts);
}}
variant="destructive"
size="sm"
>
Remove
</Button>
</div>
</div> </div>
))} ) : (
<div className="mt-4 flex justify-between"> <div className="grid gap-4">
<Button onClick={handleAddPort} variant="outline" size="sm"> {additionalPorts.map((port, index) => (
{t("settings.server.webServer.traefik.addPort")} <Card key={index}>
</Button> <CardContent className="grid grid-cols-[1fr_1fr_1.5fr_auto] gap-4 p-4 transparent">
<div className="space-y-2">
<Label
htmlFor={`target-port-${index}`}
className="text-sm font-medium text-muted-foreground"
>
{t("settings.server.webServer.traefik.targetPort")}
</Label>
<Input
id={`target-port-${index}`}
type="number"
value={port.targetPort}
onChange={(e) => {
const newPorts = [...additionalPorts];
if (newPorts[index]) {
newPorts[index].targetPort = Number.parseInt(
e.target.value,
);
}
setAdditionalPorts(newPorts);
}}
className="w-full dark:bg-black"
placeholder="e.g. 8080"
/>
</div>
<div className="space-y-2">
<Label
htmlFor={`published-port-${index}`}
className="text-sm font-medium text-muted-foreground"
>
{t("settings.server.webServer.traefik.publishedPort")}
</Label>
<Input
id={`published-port-${index}`}
type="text"
value={port.publishedPort}
onChange={(e) => {
const newPorts = [...additionalPorts];
if (newPorts[index]) {
newPorts[index].publishedPort = Number.parseInt(
e.target.value,
);
}
setAdditionalPorts(newPorts);
}}
className="w-full dark:bg-black"
placeholder="e.g. 80"
/>
</div>
<div className="space-y-2">
<Label
htmlFor={`publish-mode-${index}`}
className="text-sm font-medium text-muted-foreground"
>
{t("settings.server.webServer.traefik.publishMode")}
</Label>
<Select
value={port.publishMode}
onValueChange={(value: "ingress" | "host") => {
const newPorts = [...additionalPorts];
if (newPorts[index]) {
newPorts[index].publishMode = value;
}
setAdditionalPorts(newPorts);
}}
>
<SelectTrigger
id={`publish-mode-${index}`}
className="dark:bg-black"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="host">Host Mode</SelectItem>
<SelectItem value="ingress">
Ingress Mode
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-end">
<Button
onClick={() => handleRemovePort(index)}
variant="ghost"
size="icon"
className="text-muted-foreground hover:text-destructive"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</CardContent>
</Card>
))}
</div>
)}
{additionalPorts.length > 0 && (
<AlertBlock type="info">
<div className="flex flex-col gap-2">
<span className="text-sm">
<strong>
Each port mapping defines how external traffic reaches
your containers.
</strong>
<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>
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>
</ul>
</span>
</div>
</AlertBlock>
)}
</div>
<DialogFooter className="">
{(additionalPorts.length > 0 || isDirty) && (
<Button <Button
variant="default"
className="text-sm"
onClick={handleUpdatePorts} onClick={handleUpdatePorts}
size="sm" disabled={isLoading || !isDirty}
disabled={isLoading}
> >
Save Save
</Button> </Button>
</div> )}
</div> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </>
); );
}; };
export default ManageTraefikPorts;

4
apps/dokploy/public/locales/en/settings.json
View File

@@ -17,8 +17,8 @@
"settings.server.webServer.updateServerIp": "Update Server IP", "settings.server.webServer.updateServerIp": "Update Server IP",
"settings.server.webServer.server.label": "Server", "settings.server.webServer.server.label": "Server",
"settings.server.webServer.traefik.label": "Traefik", "settings.server.webServer.traefik.label": "Traefik",
"settings.server.webServer.traefik.modifyEnv": "Modify Env", "settings.server.webServer.traefik.modifyEnv": "Modify Environment",
"settings.server.webServer.traefik.managePorts": "Additional Ports", "settings.server.webServer.traefik.managePorts": "Additional Port Mappings",
"settings.server.webServer.traefik.managePortsDescription": "Add or remove additional ports for Traefik", "settings.server.webServer.traefik.managePortsDescription": "Add or remove additional ports for Traefik",
"settings.server.webServer.traefik.targetPort": "Target Port", "settings.server.webServer.traefik.targetPort": "Target Port",
"settings.server.webServer.traefik.publishedPort": "Published Port", "settings.server.webServer.traefik.publishedPort": "Published Port",