refactor(multi-server): add deploy templates on different servers

2025-06-26 18:27:59 +00:00 · 2024-09-17 00:38:27 -06:00
parent abe787593c
commit a591e02ffa
9 changed files with 106 additions and 24 deletions
--- a/apps/dokploy/components/dashboard/project/add-application.tsx
+++ b/apps/dokploy/components/dashboard/project/add-application.tsx
@@ -73,7 +73,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {

 	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
-	const { data: servers } = api.server.all.useQuery();
+	const { data: servers } = api.server.withSSHKey.useQuery();

 	const { mutateAsync, isLoading, error, isError } =
 		api.application.create.useMutation();
--- a/apps/dokploy/components/dashboard/project/add-compose.tsx
+++ b/apps/dokploy/components/dashboard/project/add-compose.tsx
@@ -72,7 +72,7 @@ interface Props {
 export const AddCompose = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
 	const slug = slugify(projectName);
-	const { data: servers } = api.server.all.useQuery();
+	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { mutateAsync, isLoading, error, isError } =
 		api.compose.create.useMutation();

--- a/apps/dokploy/components/dashboard/project/add-database.tsx
+++ b/apps/dokploy/components/dashboard/project/add-database.tsx
@@ -157,7 +157,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
 	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
-	const { data: servers } = api.server.all.useQuery();
+	const { data: servers } = api.server.withSSHKey.useQuery();
 	const postgresMutation = api.postgres.create.useMutation();
 	const mongoMutation = api.mongo.create.useMutation();
 	const redisMutation = api.redis.create.useMutation();
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -19,6 +19,21 @@ import {
 	CommandInput,
 	CommandItem,
 } from "@/components/ui/command";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
 	Dialog,
 	DialogContent,
@@ -43,12 +58,14 @@ import {
 	Code,
 	Github,
 	Globe,
+	HelpCircle,
 	PuzzleIcon,
 	SearchIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
+import { Label } from "@/components/ui/label";
 interface Props {
 	projectId: string;
 }
@@ -58,9 +75,12 @@ export const AddTemplate = ({ projectId }: Props) => {
 	const [open, setOpen] = useState(false);
 	const { data } = api.compose.templates.useQuery();
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { data: tags, isLoading: isLoadingTags } =
 		api.compose.getTags.useQuery();
 	const utils = api.useUtils();
+
+	const [serverId, setServerId] = useState<string | undefined>(undefined);
 	const { mutateAsync, isLoading, error, isError } =
 		api.compose.deployTemplate.useMutation();

@@ -109,7 +129,6 @@ export const AddTemplate = ({ projectId }: Props) => {
 									role="combobox"
 									className={cn(
 										"md:max-w-[15rem] w-full justify-between !bg-input",
-										// !field.value && "text-muted-foreground",
 									)}
 								>
 									{isLoadingTags
@@ -267,30 +286,79 @@ export const AddTemplate = ({ projectId }: Props) => {
 																	This will deploy {template.name} template to
 																	your project.
 																</AlertDialogDescription>
+
+																<div>
+																	<TooltipProvider delayDuration={0}>
+																		<Tooltip>
+																			<TooltipTrigger asChild>
+																				<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
+																					Select a Server (Optional)
+																					<HelpCircle className="size-4 text-muted-foreground" />
+																				</Label>
+																			</TooltipTrigger>
+																			<TooltipContent
+																				className="z-[999] w-[300px]"
+																				align="start"
+																				side="top"
+																			>
+																				<span>
+																					If not server is selected, the
+																					application will be deployed on the
+																					server where the user is logged in.
+																				</span>
+																			</TooltipContent>
+																		</Tooltip>
+																	</TooltipProvider>
+
+																	<Select
+																		onValueChange={(e) => {
+																			setServerId(e);
+																		}}
+																	>
+																		<SelectTrigger>
+																			<SelectValue placeholder="Select a Server" />
+																		</SelectTrigger>
+																		<SelectContent>
+																			<SelectGroup>
+																				{servers?.map((server) => (
+																					<SelectItem
+																						key={server.serverId}
+																						value={server.serverId}
+																					>
+																						{server.name}
+																					</SelectItem>
+																				))}
+																				<SelectLabel>
+																					Servers ({servers?.length})
+																				</SelectLabel>
+																			</SelectGroup>
+																		</SelectContent>
+																	</Select>
+																</div>
 															</AlertDialogHeader>
 															<AlertDialogFooter>
 																<AlertDialogCancel>Cancel</AlertDialogCancel>
 																<AlertDialogAction
+																	disabled={isLoading}
 																	onClick={async () => {
-																		await mutateAsync({
+																		const promise = mutateAsync({
 																			projectId,
+																			serverId: serverId || undefined,
 																			id: template.id,
-																		})
-																			.then(async () => {
-																				toast.success(
-																					`${template.name} template created succesfully`,
-																				);
-
+																		});
+																		toast.promise(promise, {
+																			loading: "Setting up...",
+																			success: (data) => {
 																				utils.project.one.invalidate({
 																					projectId,
 																				});
 																				setOpen(false);
-																			})
-																			.catch(() => {
-																				toast.error(
-																					`Error to delete ${template.name} template`,
-																				);
-																			});
+																				return `${template.name} template created succesfully`;
+																			},
+																			error: (err) => {
+																				return `Ocurred an error deploying ${template.name} template`;
+																			},
+																		});
 																	}}
 																>
 																	Confirm
--- a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
@@ -26,7 +26,7 @@ import { TerminalModal } from "../web-server/terminal-modal";
 import { AddServer } from "./add-server";
 import { SetupServer } from "./setup-server";
 export const ShowServers = () => {
-	const { data, refetch } = api.server.all.useQuery();
+	const { data, refetch } = api.server.withSSHKey.useQuery();
 	const { mutateAsync } = api.server.remove.useMutation();
 	const { data: sshKeys } = api.sshKey.all.useQuery();

--- a/apps/dokploy/server/api/routers/compose.ts
+++ b/apps/dokploy/server/api/routers/compose.ts
@@ -37,7 +37,7 @@ import { eq } from "drizzle-orm";
 import { dump } from "js-yaml";
 import _ from "lodash";
 import { nanoid } from "nanoid";
-import { findAdmin } from "../services/admin";
+import { findAdmin, findAdminById } from "../services/admin";
 import {
 	createCompose,
 	createComposeByTemplate,
@@ -53,6 +53,7 @@ import { createMount } from "../services/mount";
 import { findProjectById } from "../services/project";
 import { addNewService, checkServiceAccess } from "../services/user";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
+import { findServerById } from "../services/server";

 export const composeRouter = createTRPCRouter({
 	create: protectedProcedure
@@ -235,7 +236,8 @@ export const composeRouter = createTRPCRouter({

 			const generate = await loadTemplateModule(input.id as TemplatesKeys);

-			const admin = await findAdmin();
+			const admin = await findAdminById(ctx.user.adminId);
+			let serverIp = admin.serverIp;

 			if (!admin.serverIp) {
 				throw new TRPCError({
@@ -247,9 +249,14 @@ export const composeRouter = createTRPCRouter({

 			const project = await findProjectById(input.projectId);

+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				serverIp = server.ipAddress;
+			}
+
 			const projectName = slugify(`${project.name} ${input.id}`);
 			const { envs, mounts, domains } = generate({
-				serverIp: admin.serverIp,
+				serverIp: serverIp || "",
 				projectName: projectName,
 			});

@@ -257,6 +264,7 @@ export const composeRouter = createTRPCRouter({
 				...input,
 				composeFile: composeFile,
 				env: envs?.join("\n"),
+				serverId: input.serverId,
 				name: input.id,
 				sourceType: "raw",
 				appName: `${projectName}-${generatePassword(6)}`,
--- a/apps/dokploy/server/api/routers/server.ts
+++ b/apps/dokploy/server/api/routers/server.ts
@@ -10,7 +10,7 @@ import {
 } from "@/server/db/schema";
 import { setupServer } from "@/server/utils/servers/setup-server";
 import { TRPCError } from "@trpc/server";
-import { desc } from "drizzle-orm";
+import { desc, isNotNull } from "drizzle-orm";
 import { removeDeploymentsByServerId } from "../services/deployment";
 import {
 	createServer,
@@ -46,6 +46,12 @@ export const serverRouter = createTRPCRouter({
 			orderBy: desc(server.createdAt),
 		});
 	}),
+	withSSHKey: protectedProcedure.query(async ({ input, ctx }) => {
+		return await db.query.server.findMany({
+			orderBy: desc(server.createdAt),
+			where: isNotNull(server.sshKeyId),
+		});
+	}),
 	setup: protectedProcedure
 		.input(apiFindOneServer)
 		.mutation(async ({ input, ctx }) => {
--- a/apps/dokploy/server/api/services/compose.ts
+++ b/apps/dokploy/server/api/services/compose.ts
@@ -97,7 +97,6 @@ export const createComposeByTemplate = async (
 		.insert(compose)
 		.values({
 			...input,
-			serverId: "y91z1__c4SJbBe1TwQuaN",
 		})
 		.returning()
 		.then((value) => value[0]);
@@ -304,7 +303,6 @@ export const deployRemoteCompose = async ({
 		title: titleLog,
 		description: descriptionLog,
 	});
-
 	try {
 		if (compose.serverId) {
 			let command = "set -e;";
@@ -362,6 +360,7 @@ export const deployRemoteCompose = async ({
 			buildLink,
 		});
 	} catch (error) {
+		console.log(error);
 		await updateDeploymentStatus(deployment.deploymentId, "error");
 		await updateCompose(composeId, {
 			composeStatus: "error",
--- a/apps/dokploy/server/db/schema/compose.ts
+++ b/apps/dokploy/server/db/schema/compose.ts
@@ -145,6 +145,7 @@ export const apiCreateComposeByTemplate = createSchema
 	})
 	.extend({
 		id: z.string().min(1),
+		serverId: z.string().optional(),
 	});

 export const apiFindCompose = z.object({