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

14
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,6 +150,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
</p> </p>
</div> </div>
) : ( ) : (
<ScrollArea className="h-[400px] pr-4">
<div className="grid gap-4"> <div className="grid gap-4">
{fields.map((field, index) => ( {fields.map((field, index) => (
<Card key={field.id}> <Card key={field.id}>
@@ -244,6 +254,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
</Card> </Card>
))} ))}
</div> </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"