From a76147d820e53236c370e5e750c9511e6acb4dea Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Tue, 20 Jan 2026 16:19:12 +0100 Subject: [PATCH] feat(cluster): enhance swarm settings UI with tooltips and documentation links - Added tooltips to menu items in the swarm settings for better user guidance. - Included documentation URLs and descriptions for Health Check, Restart Policy, Placement, Update Config, Rollback Config, Mode, Labels, Stop Grace Period, and Endpoint Spec. - Updated type assertions in rollback and update config forms for improved type safety. --- .../cluster/modify-swarm-settings.tsx | 115 +++++++++++++++--- .../swarm-forms/rollback-config-form.tsx | 2 +- .../swarm-forms/update-config-form.tsx | 2 +- 3 files changed, 98 insertions(+), 21 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx index 5721132a7..aa96d320d 100644 --- a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx +++ b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx @@ -1,4 +1,4 @@ -import { Settings } from "lucide-react"; +import { ExternalLink, Settings } from "lucide-react"; import { useState } from "react"; import { AlertBlock } from "@/components/shared/alert-block"; import { Button } from "@/components/ui/button"; @@ -10,6 +10,12 @@ import { DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { EndpointSpecForm, @@ -27,6 +33,8 @@ type MenuItem = { id: string; label: string; description: string; + docUrl?: string; + docDescription?: string; }; const menuItems: MenuItem[] = [ @@ -34,38 +42,81 @@ const menuItems: MenuItem[] = [ id: "health-check", label: "Health Check", description: "Configure health check settings", + docUrl: + "https://docs.docker.com/reference/cli/docker/service/create/#healthcheck", + docDescription: + "Configure HEALTHCHECK to test a container's health. Determines if a container is healthy by running a command inside the container.", }, { id: "restart-policy", label: "Restart Policy", description: "Configure restart policy", + docUrl: + "https://docs.docker.com/reference/cli/docker/service/create/#restart-policy", + docDescription: + "Configure the restart policy for containers in the service. Controls when and how containers should be restarted.", }, { id: "placement", label: "Placement", description: "Configure placement constraints", + docUrl: + "https://docs.docker.com/reference/cli/docker/service/create/#placement-pref", + docDescription: + "Control which nodes service tasks can be scheduled on. Use constraints, preferences, and platform specifications.", }, { id: "update-config", label: "Update Config", description: "Configure update strategy", + docUrl: + "https://docs.docker.com/reference/cli/docker/service/create/#update-config", + docDescription: + "Configure how the service should be updated. Controls parallelism, delay, failure action, and order of updates.", }, { id: "rollback-config", label: "Rollback Config", description: "Configure rollback strategy", + docUrl: + "https://docs.docker.com/reference/cli/docker/service/create/#rollback-config", + docDescription: + "Configure automated rollback on update failure. Similar to update config but applies to rollback operations.", + }, + { + id: "mode", + label: "Mode", + description: "Configure service mode", + docUrl: "https://docs.docker.com/reference/cli/docker/service/create/#mode", + docDescription: + "Set service mode to either 'replicated' (default) with a specified number of tasks, or 'global' (one task per node).", + }, + { + id: "labels", + label: "Labels", + description: "Configure service labels", + docUrl: + "https://docs.docker.com/reference/cli/docker/service/create/#label", + docDescription: + "Add metadata to services using labels. Labels are key-value pairs for organizing and filtering services.", }, - { id: "mode", label: "Mode", description: "Configure service mode" }, - { id: "labels", label: "Labels", description: "Configure service labels" }, { id: "stop-grace-period", label: "Stop Grace Period", description: "Configure stop grace period", + docUrl: + "https://docs.docker.com/reference/cli/docker/service/create/#stop-grace-period", + docDescription: + "Time to wait before forcefully killing a container. Given in nanoseconds. Default is 10 seconds.", }, { id: "endpoint-spec", label: "Endpoint Spec", description: "Configure endpoint specification", + docUrl: + "https://docs.docker.com/reference/cli/docker/service/create/#endpoint-mode", + docDescription: + "Configure endpoint mode for service discovery. Choose between 'vip' (virtual IP) or 'dnsrr' (DNS round-robin).", }, ]; @@ -110,22 +161,48 @@ export const AddSwarmSettings = ({ id, type }: Props) => { {/* Left Column - Menu */}
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx index c9c6ad128..d53215348 100644 --- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx +++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx @@ -103,7 +103,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => { mysqlId: id || "", mariadbId: id || "", mongoId: id || "", - rollbackConfigSwarm: hasAnyValue ? formData : null, + rollbackConfigSwarm: (hasAnyValue ? formData : null) as any, }); toast.success("Rollback config updated successfully"); diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx index 26c42adff..4119c41f8 100644 --- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx +++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx @@ -109,7 +109,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => { mysqlId: id || "", mariadbId: id || "", mongoId: id || "", - updateConfigSwarm: hasAnyValue ? formData : null, + updateConfigSwarm: (hasAnyValue ? formData : null) as any, }); toast.success("Update config updated successfully");