feat: implement deployment jobs API and enhance queue management

Added a new endpoint to fetch deployment jobs for a server, integrating with the Inngest API to retrieve job details. Updated the queue management system to support centralized job retrieval for cloud environments, improving the deployment monitoring experience. Enhanced the UI to include action buttons for job cancellation and improved error handling for job fetching.

apps/dokploy/components/dashboard/deployments/show-queue-table.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import type { inferRouterOutputs } from "@trpc/server";
-import { ListTodo, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { ArrowRight, ListTodo, Loader2, XCircle } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
 	Table,
 	TableBody,
@@ -27,11 +29,13 @@ const stateVariants: Record<
 	| "green"
 	| "red"
 > = {
+	pending: "secondary",
 	waiting: "secondary",
 	active: "yellow",
 	delayed: "outline",
 	completed: "green",
 	failed: "destructive",
+	cancelled: "outline",
 	paused: "outline",
 };
 
@@ -62,11 +66,22 @@ function getJobLabel(row: QueueRow): string {
 }
 
 export function ShowQueueTable(props: { embedded?: boolean }) {
-	const { embedded = false } = props;
+	const { embedded: _embedded = false } = props;
 	const { data: queueList, isLoading } = api.deployment.queueList.useQuery(
 		undefined,
 		{ refetchInterval: 3000 },
 	);
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const utils = api.useUtils();
+	const { mutateAsync: cancelApplicationDeployment, isPending: isCancellingApp } =
+		api.application.cancelDeployment.useMutation({
+			onSuccess: () => void utils.deployment.queueList.invalidate(),
+		});
+	const { mutateAsync: cancelComposeDeployment, isPending: isCancellingCompose } =
+		api.compose.cancelDeployment.useMutation({
+			onSuccess: () => void utils.deployment.queueList.invalidate(),
+		});
+	const isCancelling = isCancellingApp || isCancellingCompose;
 
 	return (
 		<div className="px-0">
@@ -88,6 +103,7 @@ export function ShowQueueTable(props: { embedded?: boolean }) {
 								<TableHead>Processed</TableHead>
 								<TableHead>Finished</TableHead>
 								<TableHead>Error</TableHead>
+								<TableHead className="w-[100px]">Actions</TableHead>
 							</TableRow>
 						</TableHeader>
 						<TableBody>
@@ -95,6 +111,8 @@ export function ShowQueueTable(props: { embedded?: boolean }) {
 								queueList.map((row) => {
 									const d = row.data as Record<string, unknown>;
 									const appType = d?.applicationType as string | undefined;
+									const pathInfo = row.servicePath;
+									const hasLink = pathInfo?.href != null;
 									return (
 										<TableRow key={String(row.id)}>
 											<TableCell className="font-mono text-xs">
@@ -121,12 +139,58 @@ export function ShowQueueTable(props: { embedded?: boolean }) {
 											<TableCell className="max-w-[180px] truncate text-xs text-destructive">
 												{row.failedReason ?? "—"}
 											</TableCell>
+											<TableCell>
+												<div className="flex items-center gap-1">
+													{hasLink ? (
+														<Button variant="ghost" size="sm" asChild>
+															<Link href={pathInfo!.href!}>
+																<ArrowRight className="size-4 mr-1" />
+																Service
+															</Link>
+														</Button>
+													) : (
+														<span className="text-muted-foreground text-xs">—</span>
+													)}
+													{isCloud &&
+														row.state === "active" &&
+														(d?.applicationId != null || d?.composeId != null) && (
+															<Button
+																variant="ghost"
+																size="sm"
+																className="text-destructive hover:text-destructive"
+																disabled={isCancelling}
+																onClick={() => {
+																	const appId =
+																		typeof d.applicationId === "string"
+																			? d.applicationId
+																			: undefined;
+																	const compId =
+																		typeof d.composeId === "string"
+																			? d.composeId
+																			: undefined;
+																	if (appId) {
+																		void cancelApplicationDeployment({
+																			applicationId: appId,
+																		});
+																	} else if (compId) {
+																		void cancelComposeDeployment({
+																			composeId: compId,
+																		});
+																	}
+																}}
+															>
+																<XCircle className="size-4 mr-1" />
+																Cancel
+															</Button>
+														)}
+												</div>
+											</TableCell>
 										</TableRow>
 									);
 								})
 							) : (
 								<TableRow>
-									<TableCell colSpan={9} className="text-center py-12">
+									<TableCell colSpan={10} className="text-center py-12">
 										<div className="flex flex-col items-center justify-center gap-2 text-muted-foreground min-h-[30vh]">
 											<ListTodo className="size-8" />
 											<p className="font-medium">Queue is empty</p>

apps/dokploy/pages/dashboard/deployments.tsx

@@ -1,6 +1,7 @@
 import { validateRequest } from "@dokploy/server/lib/auth";
 import { Rocket } from "lucide-react";
 import type { GetServerSidePropsContext } from "next";
+import { useRouter } from "next/router";
 import type { ReactElement } from "react";
 import { ShowDeploymentsTable } from "@/components/dashboard/deployments/show-deployments-table";
 import { ShowQueueTable } from "@/components/dashboard/deployments/show-queue-table";
@@ -13,7 +14,29 @@ import {
 } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
+const TAB_VALUES = ["deployments", "queue"] as const;
+type TabValue = (typeof TAB_VALUES)[number];
+
+function isValidTab(t: string): t is TabValue {
+	return TAB_VALUES.includes(t as TabValue);
+}
+
 function DeploymentsPage() {
+	const router = useRouter();
+	const tab =
+		router.query.tab && isValidTab(router.query.tab as string)
+			? (router.query.tab as TabValue)
+			: "deployments";
+
+	const setTab = (value: string) => {
+		if (!isValidTab(value)) return;
+		router.replace(
+			{ pathname: "/dashboard/deployments", query: { tab: value } },
+			undefined,
+			{ shallow: true },
+		);
+	};
+
 	return (
 		<div className="w-full">
 			<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-8xl mx-auto min-h-[45vh]">
@@ -30,7 +53,7 @@ function DeploymentsPage() {
 								</CardDescription>
 							</div>
 						</div>
-						<Tabs defaultValue="deployments" className="w-full">
+						<Tabs value={tab} onValueChange={setTab} className="w-full">
 							<TabsList className="mt-2">
 								<TabsTrigger value="deployments">Deployments</TabsTrigger>
 								<TabsTrigger value="queue">Queue</TabsTrigger>

apps/dokploy/server/api/routers/deployment.ts

@@ -10,7 +10,9 @@ import {
 	findDeploymentById,
 	findMemberById,
 	findServerById,
+	IS_CLOUD,
 	removeDeployment,
+	resolveServicePath,
 	updateDeploymentStatus,
 } from "@dokploy/server";
 import { db } from "@dokploy/server/db";
@@ -23,8 +25,13 @@ import {
 	apiFindAllByServer,
 	apiFindAllByType,
 	deployments,
+	server,
 } from "@/server/db/schema";
 import { myQueue } from "@/server/queues/queueSetup";
+import {
+	fetchDeployApiJobs,
+	type QueueJobRow,
+} from "@/server/utils/deploy";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
 export const deploymentRouter = createTRPCRouter({
@@ -83,26 +90,51 @@ export const deploymentRouter = createTRPCRouter({
 		return findAllDeploymentsCentralized(orgId, accessedServices);
 	}),
 
-	queueList: protectedProcedure.query(async () => {
-		const jobs = await myQueue.getJobs();
-		const rows = await Promise.all(
-			jobs.map(async (job) => {
-				const state = await job.getState();
-				console.log(job.data);
-				return {
-					id: job.id,
-					name: job.name ?? undefined,
-					data: job.data as Record<string, unknown>,
-					timestamp: job.timestamp,
-					processedOn: job.processedOn,
-					finishedOn: job.finishedOn,
-					failedReason: job.failedReason ?? undefined,
-					state,
-				};
-			}),
+	queueList: protectedProcedure.query(async ({ ctx }) => {
+		const orgId = ctx.session.activeOrganizationId;
+		let rows: QueueJobRow[];
+
+		if (IS_CLOUD) {
+			const servers = await db.query.server.findMany({
+				where: eq(server.organizationId, orgId),
+				columns: { serverId: true },
+			});
+			rows = [];
+			for (const { serverId } of servers) {
+				const serverRows = await fetchDeployApiJobs(serverId);
+				rows.push(...serverRows);
+			}
+			rows.sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+		} else {
+			const jobs = await myQueue.getJobs();
+			const jobRows = await Promise.all(
+				jobs.map(async (job) => {
+					const state = await job.getState();
+					return {
+						id: String(job.id),
+						name: job.name ?? undefined,
+						data: job.data as Record<string, unknown>,
+						timestamp: job.timestamp,
+						processedOn: job.processedOn,
+						finishedOn: job.finishedOn,
+						failedReason: job.failedReason ?? undefined,
+						state,
+					};
+				}),
+			);
+			jobRows.sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+			rows = jobRows;
+		}
+
+		return Promise.all(
+			rows.map(async (row) => ({
+				...row,
+				servicePath: await resolveServicePath(
+					orgId,
+					(row.data ?? {}) as Record<string, unknown>,
+				),
+			})),
 		);
-		rows.sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
-		return rows;
 	}),
 
 	allByType: protectedProcedure
@@ -115,10 +147,8 @@ export const deploymentRouter = createTRPCRouter({
 					rollback: true,
 				},
 			});
-
 			return deploymentsList;
 		}),
-
 	killProcess: protectedProcedure
 		.input(
 			z.object({

apps/dokploy/server/utils/deploy.ts

@@ -50,3 +50,34 @@ export const cancelDeployment = async (cancelData: CancelDeploymentData) => {
 		throw error;
 	}
 };
+
+export type QueueJobRow = {
+	id: string;
+	name?: string;
+	data: Record<string, unknown>;
+	timestamp?: number;
+	processedOn?: number;
+	finishedOn?: number;
+	failedReason?: string;
+	state: string;
+};
+
+export const fetchDeployApiJobs = async (
+	serverId: string,
+): Promise<QueueJobRow[]> => {
+	try {
+		const res = await fetch(
+			`${process.env.SERVER_URL}/jobs?serverId=${encodeURIComponent(serverId)}`,
+			{
+				headers: {
+					"Content-Type": "application/json",
+					"X-API-Key": process.env.API_KEY || "NO-DEFINED",
+				},
+			},
+		);
+		if (!res.ok) return [];
+		return (await res.json()) as QueueJobRow[];
+	} catch {
+		return [];
+	}
+};