feat: show compose volumes

Author: mcfdez

apps/dokploy/components/dashboard/application/advanced/volumes/show-volumes.tsx

@@ -37,6 +37,13 @@ export const ShowVolumes = ({ id, type }: Props) => {
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	// Get volumes in docker-compose.yml for compose services
+	const { data: composeVolumes } = api.compose.loadDefinedVolumes.useQuery(
+		{ composeId: id },
+		{ enabled: type === "compose" && !!id }
+	);
+
 	const { mutateAsync: deleteVolume, isLoading: isRemoving } =
 		api.mounts.remove.useMutation();
 	return (
@@ -50,14 +57,15 @@ export const ShowVolumes = ({ id, type }: Props) => {
 					</CardDescription>
 				</div>
 
-				{data && data?.mounts.length > 0 && (
+				{data && data?.mounts?.length > 0 && (
 					<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
 						Add Volume
 					</AddVolumes>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
-				{data?.mounts.length === 0 ? (
+				{data?.mounts?.length === 0 && 
+				 (type !== "compose" || !composeVolumes || Object.keys(composeVolumes).length === 0) ? (
 					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 						<Package className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground">
@@ -69,12 +77,24 @@ export const ShowVolumes = ({ id, type }: Props) => {
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 gap-4">
-						<AlertBlock type="warning">
-							Please remember to click Redeploy after adding, editing, or
-							deleting a mount to apply the changes.
-						</AlertBlock>
+						{data?.mounts?.length > 0 && (
+							<AlertBlock type="warning">
+								Please remember to click Redeploy after adding, editing, or
+								deleting a mount to apply the changes.
+							</AlertBlock>
+						)}
+						{data?.mounts?.length > 0 && type === "compose" && composeVolumes && Object.keys(composeVolumes).length > 0 && (
+							<div className="border-t pt-4">
+								<div>
+									<h3 className="text-lg font-semibold">File Mounts</h3>
+									<p className="text-sm text-muted-foreground">
+										File mounts configured through Dokploy interface
+									</p>
+								</div>
+							</div>
+						)}
 						<div className="flex flex-col gap-6">
-							{data?.mounts.map((mount) => (
+							{data?.mounts?.map((mount) => (
 								<div key={mount.mountId}>
 									<div
 										key={mount.mountId}
@@ -169,6 +189,49 @@ export const ShowVolumes = ({ id, type }: Props) => {
 						</div>
 					</div>
 				)}
+				{/* Show defined volumes from docker-compose.yml for compose services */}
+				{type === "compose" && composeVolumes && Object.keys(composeVolumes).length > 0 && (
+					<div className="space-y-4">
+						<div>
+							<h3 className="text-lg font-semibold">Defined Volumes</h3>
+							<p className="text-sm text-muted-foreground">
+								Volumes defined in your docker-compose.yml file
+							</p>
+						</div>
+						<div className="grid gap-3">
+							{Object.entries(composeVolumes).map(([volumeName, volumeConfig]) => (
+								<div key={volumeName} className="border rounded-lg p-4">
+									<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+										<div className="flex flex-col gap-1">
+											<span className="font-medium">Volume Name</span>
+											<span className="text-sm text-muted-foreground">
+												{volumeName}
+											</span>
+										</div>
+										<div className="flex flex-col gap-1">
+											<span className="font-medium">Driver</span>
+											<span className="text-sm text-muted-foreground">
+												{typeof volumeConfig === 'object' && volumeConfig !== null 
+													? (volumeConfig as any)?.driver || 'default'
+													: 'default'
+												}
+											</span>
+										</div>
+										<div className="flex flex-col gap-1">
+											<span className="font-medium">External</span>
+											<span className="text-sm text-muted-foreground">
+												{typeof volumeConfig === 'object' && volumeConfig !== null 
+													? (volumeConfig as any)?.external ? 'Yes' : 'No'
+													: 'No'
+												}
+											</span>
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
 			</CardContent>
 		</Card>
 	);

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

@@ -20,6 +20,8 @@ import {
 	getComposeContainer,
 	getWebServerSettings,
 	IS_CLOUD,
+	loadDockerCompose,
+	loadDockerComposeRemote,
 	loadServices,
 	randomizeComposeFile,
 	randomizeIsolatedDeploymentComposeFile,
@@ -339,6 +341,48 @@ export const composeRouter = createTRPCRouter({
 			}
 		}),
 
+	/**
+	 * Load volumes defined in the docker-compose file
+	 */
+	loadDefinedVolumes: protectedProcedure
+		.input(apiFindCompose)
+		.query(async ({ input, ctx }) => {
+			const compose = await findComposeById(input.composeId);
+			
+			if (
+				compose.environment.project.organizationId !==
+				ctx.session.activeOrganizationId
+			) {
+				throw new TRPCError({
+					code: "UNAUTHORIZED",
+					message: "You are not authorized to load this compose",
+				});
+			}
+
+			try {
+				// Clone and load the docker-compose file
+				const command = await cloneCompose(compose);
+				if (compose.serverId) {
+					await execAsyncRemote(compose.serverId, command);
+				} else {
+					await execAsync(command);
+				}
+
+				// Load and parse the docker-compose.yml file
+				let composeData;
+				if (compose.serverId) {
+					composeData = await loadDockerComposeRemote(compose);
+				} else {
+					composeData = await loadDockerCompose(compose);
+				}
+
+				return composeData?.volumes || {};
+			} catch (err) {
+				console.error("Error loading defined volumes:", err);
+				return {};
+			}
+		}),
+
 	randomizeCompose: protectedProcedure
 		.input(apiRandomizeCompose)
 		.mutation(async ({ input, ctx }) => {