Docker compose support (#111)

* feat(WIP): compose implementation * feat: add volumes, networks, services name hash generate * feat: add compose config test unique * feat: add tests for each unique config * feat: implement lodash for docker compose parsing * feat: add tests for generating compose file * refactor: implement logs docker compose * refactor: composeFile set not empty * feat: implement providers for compose deployments * feat: add Files volumes to compose * feat: add stop compose button * refactor: change strategie of building compose * feat: create .env file in composepath * refactor: simplify git and github function * chore: update deps * refactor: update migrations and add badge to recognize compose type * chore: update lock yaml * refactor: use code editor * feat: add monitoring for app types * refactor: reset stats on change appName * refactor: add option to clean monitoring folder * feat: show current command that will run * feat: add prefix * fix: add missing types * refactor: add docker provider and expose by default as false * refactor: customize error page * refactor: unified deployments to be a single one * feat: add vitest to ci/cd * revert: back to initial version * refactor: add maxconcurrency vitest * refactor: add pool forks to vitest * feat: add pocketbase template * fix: update path resolution compose * removed * feat: add template pocketbase * feat: add pocketbase template * feat: add support button * feat: add plausible template * feat: add calcom template * feat: add version to each template * feat: add code editor to enviroment variables and swarm settings json * refactor: add loader when download the image * fix: use base64 to generate keys plausible * feat: add recognized domain names by enviroment compose * refactor: show alert to redeploy in each card advanced tab * refactor: add validation to prevent create compose if not have permissions * chore: add templates section to contributing * chore: add example contributing
2025-06-26 18:27:59 +00:00 · 2024-06-02 15:26:28 -06:00
parent 1df6db738e
commit 8f9d21c0f8
139 changed files with 16513 additions and 1208 deletions
--- a/pages/_error.tsx
+++ b/pages/_error.tsx
@@ -1,57 +1,98 @@
+import { Logo } from "@/components/shared/logo";
 import { buttonVariants } from "@/components/ui/button";
+import type { NextPageContext } from "next";
 import Link from "next/link";

 interface Props {
 	statusCode: number;
+	error?: Error;
 }

-export default function Custom404({ statusCode }: Props) {
+export default function Custom404({ statusCode, error }: Props) {
+	const displayStatusCode = statusCode || 400;
+	console.log(error, statusCode);
 	return (
 		<div className="h-screen">
-			<section className="relative z-10 bg-background h-screen items-center justify-center">
-				<div className="container mx-auto h-screen items-center justify-center flex">
-					<div className="-mx-4 flex">
-						<div className="w-full px-4">
-							<div className="mx-auto max-w-[700px] text-center">
-								<h2 className="mb-2 text-[50px] font-bold leading-none text-white sm:text-[80px]">
-									{statusCode
-										? `An error ${statusCode} occurred on server`
-										: "An error occurred on client"}
-								</h2>
-								<h4 className="mb-3 text-[22px] font-semibold leading-tight text-white">
-									Oops! That page can’t be found
-								</h4>
-								<p className="mb-8 text-lg text-white">
-									The page you are looking was not found
-								</p>
-								<Link
-									href="/"
-									className={buttonVariants({
-										size: "lg",
-									})}
-								>
-									Go To Home
-								</Link>
+			<div className="max-w-[50rem] flex flex-col mx-auto size-full">
+				<header className="mb-auto flex justify-center z-50 w-full py-4">
+					<nav className="px-4 sm:px-6 lg:px-8" aria-label="Global">
+						<Link
+							href="https://dokploy.com"
+							target="_blank"
+							className="flex flex-row items-center gap-2"
+						>
+							<Logo />
+							<span className="font-medium text-sm">Dokploy</span>
+						</Link>
+					</nav>
+				</header>
+				<main id="content">
+					<div className="text-center py-10 px-4 sm:px-6 lg:px-8">
+						<h1 className="block text-7xl font-bold text-primary sm:text-9xl">
+							{displayStatusCode}
+						</h1>
+						{/* <AlertBlock className="max-w-xs mx-auto">
+							<p className="text-muted-foreground">
+								Oops, something went wrong.
+							</p>
+							<p className="text-muted-foreground">
+								Sorry, we couldn't find your page.
+							</p>
+						</AlertBlock> */}
+						<p className="mt-3 text-muted-foreground">
+							{statusCode === 404
+								? "Sorry, we couldn't find your page."
+								: "Oops, something went wrong."}
+						</p>
+						{error && (
+							<div className="mt-3 text-red-500">
+								<p>{error.message}</p>
 							</div>
+						)}
+
+						<div className="mt-5 flex flex-col justify-center items-center gap-2 sm:flex-row sm:gap-3">
+							<Link
+								href="/dashboard/projects"
+								className={buttonVariants({
+									variant: "secondary",
+									className: "flex flex-row gap-2",
+								})}
+							>
+								<svg
+									className="flex-shrink-0 size-4"
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								>
+									<path d="m15 18-6-6 6-6" />
+								</svg>
+								Go to homepage
+							</Link>
 						</div>
 					</div>
-				</div>
+				</main>

-				<div className="absolute left-0 top-0 -z-10 flex h-full w-full items-center justify-between space-x-5 md:space-x-8 lg:space-x-14">
-					<div className="h-full w-1/3 bg-gradient-to-t from-[#FFFFFF14] to-[#C4C4C400]" />
-					<div className="flex h-full w-1/3">
-						<div className="h-full w-1/2 bg-gradient-to-b from-[#FFFFFF14] to-[#C4C4C400]" />
-						<div className="h-full w-1/2 bg-gradient-to-t from-[#FFFFFF14] to-[#C4C4C400]" />
+				<footer className="mt-auto text-center py-5">
+					<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
+						<p className="text-sm text-gray-500">
+							Submit Log in issue on Github
+						</p>
 					</div>
-					<div className="h-full w-1/3 bg-gradient-to-b from-[#FFFFFF14] to-[#C4C4C400]" />
-				</div>
-			</section>
+				</footer>
+			</div>
 		</div>
 	);
 }

 // @ts-ignore
-Error.getInitialProps = ({ res, err }) => {
+Error.getInitialProps = ({ res, err, ...rest }: NextPageContext) => {
+	console.log(err, rest);
 	const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
-	return { statusCode };
+	return { statusCode, error: err };
 };
--- a/pages/api/deploy/[refreshToken].ts
+++ b/pages/api/deploy/[refreshToken].ts
@@ -47,13 +47,12 @@ export default async function handler(
 				webhookDockerTag &&
 				webhookDockerTag !== applicationDockerTag
 			) {
-				 res.status(301).json({
+				res.status(301).json({
 					message: `Application Image Tag (${applicationDockerTag}) doesn't match request event payload Image Tag (${webhookDockerTag}).`,
 				});
 				return;
 			}
-		}
-		else if (sourceType === "github") {
+		} else if (sourceType === "github") {
 			const branchName = extractBranchName(req.headers, req.body);
 			if (!branchName || branchName !== application.branch) {
 				res.status(301).json({ message: "Branch Not Match" });
@@ -77,6 +76,7 @@ export default async function handler(
 				applicationId: application.applicationId as string,
 				titleLog: deploymentTitle,
 				type: "deploy",
+				applicationType: "application",
 			};
 			await myQueue.add(
 				"deployments",
@@ -118,16 +118,19 @@ function extractImageTag(dockerImage: string | null) {
 /**
 * @link https://docs.docker.com/docker-hub/webhooks/#example-webhook-payload
 */
-function extractImageTagFromRequest(headers: any, body: any): string | null {
+export const extractImageTagFromRequest = (
+	headers: any,
+	body: any,
+): string | null => {
 	if (headers["user-agent"]?.includes("Go-http-client")) {
 		if (body.push_data && body.repository) {
 			return body.push_data.tag;
 		}
 	}
 	return null;
-}
+};

-function extractCommitMessage(headers: any, body: any) {
+export const extractCommitMessage = (headers: any, body: any) => {
 	// GitHub
 	if (headers["x-github-event"]) {
 		return body.head_commit ? body.head_commit.message : "NEW COMMIT";
@@ -161,9 +164,9 @@ function extractCommitMessage(headers: any, body: any) {
 	}

 	return "NEW CHANGES";
-}
+};

-function extractBranchName(headers: any, body: any) {
+export const extractBranchName = (headers: any, body: any) => {
 	if (headers["x-github-event"] || headers["x-gitea-event"]) {
 		return body?.ref?.replace("refs/heads/", "");
 	}
@@ -177,4 +180,4 @@ function extractBranchName(headers: any, body: any) {
 	}

 	return null;
-}
+};
--- a/pages/api/deploy/compose/[refreshToken].ts
+++ b/pages/api/deploy/compose/[refreshToken].ts
@@ -0,0 +1,83 @@
+import { db } from "@/server/db";
+import { compose } from "@/server/db/schema";
+import type { DeploymentJob } from "@/server/queues/deployments-queue";
+import { myQueue } from "@/server/queues/queueSetup";
+import { eq } from "drizzle-orm";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { extractBranchName, extractCommitMessage } from "../[refreshToken]";
+import { updateCompose } from "@/server/api/services/compose";
+
+export default async function handler(
+	req: NextApiRequest,
+	res: NextApiResponse,
+) {
+	const { refreshToken } = req.query;
+	try {
+		if (req.headers["x-github-event"] === "ping") {
+			res.status(200).json({ message: "Ping received, webhook is active" });
+			return;
+		}
+		const composeResult = await db.query.compose.findFirst({
+			where: eq(compose.refreshToken, refreshToken as string),
+			with: {
+				project: true,
+			},
+		});
+
+		if (!composeResult) {
+			res.status(404).json({ message: "Compose Not Found" });
+			return;
+		}
+		if (!composeResult?.autoDeploy) {
+			res.status(400).json({ message: "Compose Not Deployable" });
+			return;
+		}
+
+		const deploymentTitle = extractCommitMessage(req.headers, req.body);
+
+		const sourceType = composeResult.sourceType;
+
+		if (sourceType === "github") {
+			const branchName = extractBranchName(req.headers, req.body);
+			if (!branchName || branchName !== composeResult.branch) {
+				res.status(301).json({ message: "Branch Not Match" });
+				return;
+			}
+		} else if (sourceType === "git") {
+			const branchName = extractBranchName(req.headers, req.body);
+			if (!branchName || branchName !== composeResult.customGitBranch) {
+				res.status(301).json({ message: "Branch Not Match" });
+				return;
+			}
+		}
+
+		try {
+			await updateCompose(composeResult.composeId, {
+				composeStatus: "running",
+			});
+
+			const jobData: DeploymentJob = {
+				composeId: composeResult.composeId as string,
+				titleLog: deploymentTitle,
+				type: "deploy",
+				applicationType: "compose",
+			};
+			await myQueue.add(
+				"deployments",
+				{ ...jobData },
+				{
+					removeOnComplete: true,
+					removeOnFail: true,
+				},
+			);
+		} catch (error) {
+			res.status(400).json({ message: "Error To Deploy Compose", error });
+			return;
+		}
+
+		res.status(200).json({ message: "Compose Deployed Succesfully" });
+	} catch (error) {
+		console.log(error);
+		res.status(400).json({ message: "Error To Deploy Compose", error });
+	}
+}
--- a/pages/dashboard/project/[projectId].tsx
+++ b/pages/dashboard/project/[projectId].tsx
@@ -1,5 +1,7 @@
 import { AddApplication } from "@/components/dashboard/project/add-application";
+import { AddCompose } from "@/components/dashboard/project/add-compose";
 import { AddDatabase } from "@/components/dashboard/project/add-database";
+import { AddTemplate } from "@/components/dashboard/project/add-template";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -31,7 +33,7 @@ import type { findProjectById } from "@/server/api/services/project";
 import { validateRequest } from "@/server/auth/auth";
 import { api } from "@/utils/api";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { FolderInput, GlobeIcon, PlusIcon } from "lucide-react";
+import { CircuitBoard, FolderInput, GlobeIcon, PlusIcon } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -43,7 +45,14 @@ import superjson from "superjson";

 export type Services = {
 	name: string;
-	type: "mariadb" | "application" | "postgres" | "mysql" | "mongo" | "redis";
+	type:
+		| "mariadb"
+		| "application"
+		| "postgres"
+		| "mysql"
+		| "mongo"
+		| "redis"
+		| "compose";
 	description?: string | null;
 	id: string;
 	createdAt: string;
@@ -113,7 +122,24 @@ export const extractServices = (data: Project | undefined) => {
 			description: item.description,
 		})) || [];

-	applications.push(...mysql, ...redis, ...mongo, ...postgres, ...mariadb);
+	const compose: Services[] =
+		data?.compose.map((item) => ({
+			name: item.name,
+			type: "compose",
+			id: item.composeId,
+			createdAt: item.createdAt,
+			status: item.composeStatus,
+			description: item.description,
+		})) || [];
+
+	applications.push(
+		...mysql,
+		...redis,
+		...mongo,
+		...postgres,
+		...mariadb,
+		...compose,
+	);

 	applications.sort((a, b) => {
 		return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
@@ -144,7 +170,8 @@ const Project = (
 		data?.mysql?.length === 0 &&
 		data?.postgres?.length === 0 &&
 		data?.redis?.length === 0 &&
-		data?.applications?.length === 0;
+		data?.applications?.length === 0 &&
+		data?.compose?.length === 0;

 	const applications = extractServices(data);

@@ -185,6 +212,8 @@ const Project = (
 								<DropdownMenuSeparator />
 								<AddApplication projectId={projectId} />
 								<AddDatabase projectId={projectId} />
+								<AddCompose projectId={projectId} />
+								<AddTemplate projectId={projectId} />
 							</DropdownMenuContent>
 						</DropdownMenu>
 					)}
@@ -249,6 +278,9 @@ const Project = (
 													{service.type === "application" && (
 														<GlobeIcon className="h-6 w-6" />
 													)}
+													{service.type === "compose" && (
+														<CircuitBoard className="h-6 w-6" />
+													)}
 												</span>
 											</div>
 										</CardTitle>
--- a/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
+++ b/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
@@ -14,7 +14,6 @@ import { ShowGeneralApplication } from "@/components/dashboard/application/gener
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { UpdateApplication } from "@/components/dashboard/application/update-application";
 import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
-import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import {
--- a/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
+++ b/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
@@ -0,0 +1,245 @@
+import { AddCommandCompose } from "@/components/dashboard/compose/advanced/add-command";
+import { ShowVolumesCompose } from "@/components/dashboard/compose/advanced/show-volumes";
+import { DeleteCompose } from "@/components/dashboard/compose/delete-compose";
+import { ShowDeploymentsCompose } from "@/components/dashboard/compose/deployments/show-deployments-compose";
+import { ShowEnvironmentCompose } from "@/components/dashboard/compose/enviroment/show";
+import { ShowGeneralCompose } from "@/components/dashboard/compose/general/show";
+import { ShowDockerLogsCompose } from "@/components/dashboard/compose/logs/show";
+import { ShowMonitoringCompose } from "@/components/dashboard/compose/monitoring/show";
+import { UpdateCompose } from "@/components/dashboard/compose/update-compose";
+import { ProjectLayout } from "@/components/layouts/project-layout";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+} from "@/components/ui/breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { appRouter } from "@/server/api/root";
+import { validateRequest } from "@/server/auth/auth";
+import { api } from "@/utils/api";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import { CircuitBoard } from "lucide-react";
+import type {
+	GetServerSidePropsContext,
+	InferGetServerSidePropsType,
+} from "next";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useState, type ReactElement } from "react";
+import superjson from "superjson";
+
+type TabState =
+	| "projects"
+	| "settings"
+	| "advanced"
+	| "deployments"
+	| "monitoring";
+
+const Service = (
+	props: InferGetServerSidePropsType<typeof getServerSideProps>,
+) => {
+	const { composeId, activeTab } = props;
+	const router = useRouter();
+	const { projectId } = router.query;
+	const [tab, setSab] = useState<TabState>(activeTab);
+	const { data } = api.compose.one.useQuery(
+		{ composeId },
+		{
+			refetchInterval: 5000,
+		},
+	);
+
+	const { data: auth } = api.auth.get.useQuery();
+	const { data: user } = api.user.byAuthId.useQuery(
+		{
+			authId: auth?.id || "",
+		},
+		{
+			enabled: !!auth?.id && auth?.rol === "user",
+		},
+	);
+
+	return (
+		<div className="pb-10">
+			<div className="flex flex-col gap-4">
+				<Breadcrumb>
+					<BreadcrumbItem>
+						<BreadcrumbLink as={Link} href="/dashboard/projects">
+							Projects
+						</BreadcrumbLink>
+					</BreadcrumbItem>
+					<BreadcrumbItem>
+						<BreadcrumbLink
+							as={Link}
+							href={`/dashboard/project/${data?.project.projectId}`}
+						>
+							{data?.project.name}
+						</BreadcrumbLink>
+					</BreadcrumbItem>
+
+					<BreadcrumbItem isCurrentPage>
+						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
+					</BreadcrumbItem>
+				</Breadcrumb>
+				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
+					<div className="flex  flex-col justify-between w-fit gap-2">
+						<div className="flex flex-row items-center gap-2 xl:gap-4 flex-wrap">
+							<h1 className="flex items-center gap-2 text-xl font-bold lg:text-3xl">
+								{data?.name}
+							</h1>
+							<span className="text-sm">{data?.appName}</span>
+						</div>
+
+						{data?.description && (
+							<p className="text-sm text-muted-foreground max-w-6xl">
+								{data?.description}
+							</p>
+						)}
+					</div>
+					<div className="relative flex flex-row gap-4">
+						<div className="absolute -right-1  -top-2">
+							<StatusTooltip status={data?.composeStatus} />
+						</div>
+
+						<CircuitBoard className="h-6 w-6 text-muted-foreground" />
+					</div>
+				</header>
+			</div>
+			<Tabs
+				value={tab}
+				defaultValue="general"
+				className="w-full"
+				onValueChange={(e) => {
+					setSab(e as TabState);
+					const newPath = `/dashboard/project/${projectId}/services/compose/${composeId}?tab=${e}`;
+					router.push(newPath, undefined, { shallow: true });
+				}}
+			>
+				<div className="flex flex-row items-center justify-between  w-full gap-4">
+					<TabsList className="md:grid md:w-fit md:grid-cols-6 max-md:overflow-y-scroll justify-start">
+						<TabsTrigger value="general">General</TabsTrigger>
+						<TabsTrigger value="environment">Environment</TabsTrigger>
+						<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+						<TabsTrigger value="logs">Logs</TabsTrigger>
+						<TabsTrigger value="deployments">Deployments</TabsTrigger>
+						<TabsTrigger value="advanced">Advanced</TabsTrigger>
+					</TabsList>
+					<div className="flex flex-row gap-2">
+						<UpdateCompose composeId={composeId} />
+
+						{(auth?.rol === "admin" || user?.canDeleteServices) && (
+							<DeleteCompose composeId={composeId} />
+						)}
+					</div>
+				</div>
+
+				<TabsContent value="general">
+					<div className="flex flex-col gap-4 pt-2.5">
+						<ShowGeneralCompose composeId={composeId} />
+					</div>
+				</TabsContent>
+				<TabsContent value="environment">
+					<div className="flex flex-col gap-4 pt-2.5">
+						<ShowEnvironmentCompose composeId={composeId} />
+					</div>
+				</TabsContent>
+
+				<TabsContent value="monitoring">
+					<div className="flex flex-col gap-4 pt-2.5">
+						<ShowMonitoringCompose
+							appName={data?.appName || ""}
+							appType={data?.composeType || "docker-compose"}
+						/>
+					</div>
+				</TabsContent>
+
+				<TabsContent value="logs">
+					<div className="flex flex-col gap-4 pt-2.5">
+						<ShowDockerLogsCompose appName={data?.appName || ""} />
+					</div>
+				</TabsContent>
+
+				<TabsContent value="deployments">
+					<div className="flex flex-col gap-4 pt-2.5">
+						<ShowDeploymentsCompose composeId={composeId} />
+					</div>
+				</TabsContent>
+				<TabsContent value="advanced">
+					<div className="flex flex-col gap-4 pt-2.5">
+						<AddCommandCompose composeId={composeId} />
+						<ShowVolumesCompose composeId={composeId} />
+					</div>
+				</TabsContent>
+			</Tabs>
+		</div>
+	);
+};
+
+export default Service;
+Service.getLayout = (page: ReactElement) => {
+	return <ProjectLayout>{page}</ProjectLayout>;
+};
+
+export async function getServerSideProps(
+	ctx: GetServerSidePropsContext<{
+		composeId: string;
+		activeTab: TabState;
+	}>,
+) {
+	const { query, params, req, res } = ctx;
+
+	const activeTab = query.tab;
+	const { user, session } = await validateRequest(req, res);
+	if (!user) {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/",
+			},
+		};
+	}
+	// Fetch data from external API
+	const helpers = createServerSideHelpers({
+		router: appRouter,
+		ctx: {
+			req: req as any,
+			res: res as any,
+			db: null as any,
+			session: session,
+			user: user,
+		},
+		transformer: superjson,
+	});
+
+	// Valid project, if not return to initial homepage....
+	if (typeof params?.composeId === "string") {
+		try {
+			await helpers.compose.one.fetch({
+				composeId: params?.composeId,
+			});
+
+			return {
+				props: {
+					trpcState: helpers.dehydrate(),
+					composeId: params?.composeId,
+					activeTab: (activeTab || "general") as TabState,
+				},
+			};
+		} catch (error) {
+			return {
+				redirect: {
+					permanent: false,
+					destination: "/dashboard/projects",
+				},
+			};
+		}
+	}
+
+	return {
+		redirect: {
+			permanent: false,
+			destination: "/",
+		},
+	};
+}