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: enhance ManageTraefikPorts with ScrollArea for better UI and port management display

Browse Source
This commit is contained in:
vishalkadam47
2024-12-30 07:32:34 +05:30
parent 638fbe17a6
commit 9122a1e4b2
1 changed files with 112 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,7 @@ import {
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -114,7 +115,15 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
</DialogTitle> </DialogTitle>
<DialogDescription className="text-base w-full"> <DialogDescription className="text-base w-full">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{t("settings.server.webServer.traefik.managePortsDescription")} <div className="flex flex-col gap-1">
{t(
"settings.server.webServer.traefik.managePortsDescription",
)}
<span className="text-sm text-muted-foreground">
{fields.length} port mapping{fields.length !== 1 ? "s" : ""}{" "}
configured
</span>
</div>
<Button <Button
onClick={handleAddPort} onClick={handleAddPort}
variant="default" variant="default"
@@ -141,109 +150,111 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
</p> </p>
</div> </div>
) : ( ) : (
<div className="grid gap-4"> <ScrollArea className="h-[400px] pr-4">
{fields.map((field, index) => ( <div className="grid gap-4">
<Card key={field.id}> {fields.map((field, index) => (
<CardContent className="grid grid-cols-[1fr_1fr_1.5fr_auto] gap-4 p-4 transparent"> <Card key={field.id}>
<FormField <CardContent className="grid grid-cols-[1fr_1fr_1.5fr_auto] gap-4 p-4 transparent">
control={form.control} <FormField
name={`ports.${index}.targetPort`} control={form.control}
render={({ field }) => ( name={`ports.${index}.targetPort`}
<FormItem> render={({ field }) => (
<FormLabel className="text-sm font-medium text-muted-foreground"> <FormItem>
{t( <FormLabel className="text-sm font-medium text-muted-foreground">
"settings.server.webServer.traefik.targetPort", {t(
)} "settings.server.webServer.traefik.targetPort",
</FormLabel> )}
<FormControl> </FormLabel>
<Input
type="number"
{...field}
onChange={(e) =>
field.onChange(Number(e.target.value))
}
className="w-full dark:bg-black"
placeholder="e.g. 8080"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={`ports.${index}.publishedPort`}
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm font-medium text-muted-foreground">
{t(
"settings.server.webServer.traefik.publishedPort",
)}
</FormLabel>
<FormControl>
<Input
type="number"
{...field}
onChange={(e) =>
field.onChange(Number(e.target.value))
}
className="w-full dark:bg-black"
placeholder="e.g. 80"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={`ports.${index}.publishMode`}
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm font-medium text-muted-foreground">
{t(
"settings.server.webServer.traefik.publishMode",
)}
</FormLabel>
<Select
onValueChange={field.onChange}
value={field.value}
>
<FormControl> <FormControl>
<SelectTrigger className="dark:bg-black"> <Input
<SelectValue /> type="number"
</SelectTrigger> {...field}
onChange={(e) =>
field.onChange(Number(e.target.value))
}
className="w-full dark:bg-black"
placeholder="e.g. 8080"
/>
</FormControl> </FormControl>
<SelectContent> <FormMessage />
<SelectItem value="host"> </FormItem>
Host Mode )}
</SelectItem> />
<SelectItem value="ingress">
Ingress Mode
</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<div className="flex items-end"> <FormField
<Button control={form.control}
onClick={() => remove(index)} name={`ports.${index}.publishedPort`}
variant="ghost" render={({ field }) => (
size="icon" <FormItem>
className="text-muted-foreground hover:text-destructive" <FormLabel className="text-sm font-medium text-muted-foreground">
> {t(
<Trash2 className="h-4 w-4" /> "settings.server.webServer.traefik.publishedPort",
</Button> )}
</div> </FormLabel>
</CardContent> <FormControl>
</Card> <Input
))} type="number"
</div> {...field}
onChange={(e) =>
field.onChange(Number(e.target.value))
}
className="w-full dark:bg-black"
placeholder="e.g. 80"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={`ports.${index}.publishMode`}
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm font-medium text-muted-foreground">
{t(
"settings.server.webServer.traefik.publishMode",
)}
</FormLabel>
<Select
onValueChange={field.onChange}
value={field.value}
>
<FormControl>
<SelectTrigger className="dark:bg-black">
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="host">
Host Mode
</SelectItem>
<SelectItem value="ingress">
Ingress Mode
</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<div className="flex items-end">
<Button
onClick={() => remove(index)}
variant="ghost"
size="icon"
className="text-muted-foreground hover:text-destructive"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</CardContent>
</Card>
))}
</div>
</ScrollArea>
)} )}
{fields.length > 0 && ( {fields.length > 0 && (
@@ -281,7 +292,6 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
</AlertBlock> </AlertBlock>
)} )}
</div> </div>
<DialogFooter> <DialogFooter>
<Button <Button
type="submit" type="submit"