From e9b4245625610d227bd574ea953770d6926c3e80 Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Sat, 15 Nov 2025 23:51:34 -0600 Subject: [PATCH 1/2] feat: enhance environment service to include server details - Added server information retrieval for applications and various database services in the environment service. - Updated the dashboard to display server names alongside services, allowing for better identification and filtering of services by server. - Introduced a dropdown filter for selecting services based on server, improving user experience in managing environments. --- .../environment/[environmentId].tsx | 91 ++++++++++++++++--- packages/server/src/services/environment.ts | 32 ++++++- 2 files changed, 107 insertions(+), 16 deletions(-) diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx index 886756ab2..17fe64ac9 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx @@ -1,4 +1,4 @@ -import type { findProjectById } from "@dokploy/server"; +import type { findEnvironmentById } from "@dokploy/server"; import { validateRequest } from "@dokploy/server/lib/auth"; import { createServerSideHelpers } from "@trpc/react-query/server"; import { @@ -102,6 +102,7 @@ import { api } from "@/utils/api"; export type Services = { appName: string; serverId?: string | null; + serverName?: string | null; name: string; type: | "mariadb" @@ -118,8 +119,7 @@ export type Services = { lastDeployDate?: Date | null; }; -type Project = Awaited>; -type Environment = Project["environments"][0]; +type Environment = Awaited>; export const extractServicesFromEnvironment = ( environment: Environment | undefined, @@ -154,6 +154,7 @@ export const extractServicesFromEnvironment = ( status: item.applicationStatus, description: item.description, serverId: item.serverId, + serverName: item?.server?.name || null, lastDeployDate, }; }) || []; @@ -168,6 +169,7 @@ export const extractServicesFromEnvironment = ( status: item.applicationStatus, description: item.description, serverId: item.serverId, + serverName: item?.server?.name || null, })) || []; const postgres: Services[] = @@ -180,6 +182,7 @@ export const extractServicesFromEnvironment = ( status: item.applicationStatus, description: item.description, serverId: item.serverId, + serverName: item?.server?.name || null, })) || []; const mongo: Services[] = @@ -192,6 +195,7 @@ export const extractServicesFromEnvironment = ( status: item.applicationStatus, description: item.description, serverId: item.serverId, + serverName: item?.server?.name || null, })) || []; const redis: Services[] = @@ -204,6 +208,7 @@ export const extractServicesFromEnvironment = ( status: item.applicationStatus, description: item.description, serverId: item.serverId, + serverName: item?.server?.name || null, })) || []; const mysql: Services[] = @@ -216,6 +221,7 @@ export const extractServicesFromEnvironment = ( status: item.applicationStatus, description: item.description, serverId: item.serverId, + serverName: item?.server?.name || null, })) || []; const compose: Services[] = @@ -244,6 +250,7 @@ export const extractServicesFromEnvironment = ( status: item.composeStatus, description: item.description, serverId: item.serverId, + serverName: item?.server?.name || null, lastDeployDate, }; }) || []; @@ -392,6 +399,7 @@ const EnvironmentPage = ( const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false); const [deleteVolumes, setDeleteVolumes] = useState(false); + const [selectedServerId, setSelectedServerId] = useState("all"); const handleSelectAll = () => { if (selectedServices.length === filteredServices.length) { @@ -781,6 +789,27 @@ const EnvironmentPage = ( setIsBulkActionLoading(false); }; + // Get unique servers from services + const availableServers = useMemo(() => { + if (!applications) return []; + const servers = new Map(); + applications.forEach((service) => { + if (service.serverId && service.serverName) { + servers.set(service.serverId, { + serverId: service.serverId, + serverName: service.serverName, + }); + } + }); + return Array.from(servers.values()); + }, [applications]); + + // Check if there are services without a server (Dokploy server) + const hasServicesWithoutServer = useMemo(() => { + if (!applications) return false; + return applications.some((service) => !service.serverId); + }, [applications]); + const filteredServices = useMemo(() => { if (!applications) return []; const filtered = applications.filter( @@ -789,10 +818,14 @@ const EnvironmentPage = ( service.description ?.toLowerCase() .includes(searchQuery.toLowerCase())) && - (selectedTypes.length === 0 || selectedTypes.includes(service.type)), + (selectedTypes.length === 0 || selectedTypes.includes(service.type)) && + (selectedServerId === "" || + selectedServerId === "all" || + (selectedServerId === "dokploy-server" && !service.serverId) || + service.serverId === selectedServerId), ); return sortServices(filtered); - }, [applications, searchQuery, selectedTypes, sortBy]); + }, [applications, searchQuery, selectedTypes, selectedServerId, sortBy]); const selectedServicesWithRunningStatus = useMemo(() => { return filteredServices.filter( @@ -1366,6 +1399,39 @@ const EnvironmentPage = ( + {(availableServers.length > 0 || + hasServicesWithoutServer) && ( + + )} @@ -1400,11 +1466,6 @@ const EnvironmentPage = ( }} className="flex flex-col group relative cursor-pointer bg-transparent transition-colors hover:bg-border" > - {service.serverId && ( -
- -
- )}
@@ -1471,7 +1532,15 @@ const EnvironmentPage = ( -
+
+ {service.serverName && ( +
+ + + {service.serverName} + +
+ )} Created diff --git a/packages/server/src/services/environment.ts b/packages/server/src/services/environment.ts index c35862714..fb1952818 100644 --- a/packages/server/src/services/environment.ts +++ b/packages/server/src/services/environment.ts @@ -37,16 +37,38 @@ export const findEnvironmentById = async (environmentId: string) => { applications: { with: { deployments: true, + server: true, + }, + }, + mariadb: { + with: { + server: true, + }, + }, + mongo: { + with: { + server: true, + }, + }, + mysql: { + with: { + server: true, + }, + }, + postgres: { + with: { + server: true, + }, + }, + redis: { + with: { + server: true, }, }, - mariadb: true, - mongo: true, - mysql: true, - postgres: true, - redis: true, compose: { with: { deployments: true, + server: true, }, }, project: true, From 3618be65fc5c83e1bb1b216659f4ee4f2e43cf13 Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Sat, 15 Nov 2025 23:54:53 -0600 Subject: [PATCH 2/2] feat: add server icon display in environment service dashboard - Introduced a server icon next to services in the environment dashboard for better visual identification of server associations. - Enhanced user experience by providing immediate visual cues regarding the server linked to each service. --- .../project/[projectId]/environment/[environmentId].tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx index 17fe64ac9..a2e54ad51 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx @@ -1466,6 +1466,11 @@ const EnvironmentPage = ( }} className="flex flex-col group relative cursor-pointer bg-transparent transition-colors hover:bg-border" > + {service.serverId && ( +
+ +
+ )}