From 843313ddb9cbe6fee109eeab7f737a001400fe37 Mon Sep 17 00:00:00 2001 From: HarikrishnanD Date: Tue, 11 Nov 2025 13:10:47 +0530 Subject: [PATCH 1/4] feat: add expandable commit messages for deployment logs --- .../deployments/show-deployments.tsx | 106 ++++++++++++++++-- 1 file changed, 97 insertions(+), 9 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx index 1045856c2..5848a046f 100644 --- a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx @@ -1,4 +1,4 @@ -import { Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react"; +import { ChevronDown, ChevronUp, Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react"; import React, { useEffect, useMemo, useState } from "react"; import { toast } from "sonner"; import { AlertBlock } from "@/components/shared/alert-block"; @@ -80,6 +80,52 @@ export const ShowDeployments = ({ } = api.compose.cancelDeployment.useMutation(); const [url, setUrl] = React.useState(""); + const [expandedDescriptions, setExpandedDescriptions] = useState>( + new Set(), + ); + + // Maximum character length before truncating commit messages + const MAX_DESCRIPTION_LENGTH = 150; + + // Helper function to truncate description intelligently + const truncateDescription = (description: string, maxLength: number): string => { + if (maxLength <= 0) { + return description; // Don't truncate if maxLength is 0 or negative + } + if (description.length <= maxLength) { + return description; + } + // Try to truncate at a word boundary if possible + const truncated = description.slice(0, maxLength); + const lastSpace = truncated.lastIndexOf(" "); + // If we find a space near the end (within last 20 chars), use it for cleaner truncation + if (lastSpace > maxLength - 20 && lastSpace > 0) { + return `${truncated.slice(0, lastSpace)}...`; + } + return `${truncated}...`; + }; + + // Check if description should be truncated + const shouldTruncate = (description: string): boolean => { + // Only truncate if MAX_DESCRIPTION_LENGTH is greater than 0 + if (MAX_DESCRIPTION_LENGTH <= 0) { + return false; + } + return description.length > MAX_DESCRIPTION_LENGTH; + }; + + // Toggle expand/collapse state for a specific deployment + const toggleDescription = (deploymentId: string) => { + setExpandedDescriptions((prev) => { + const next = new Set(prev); + if (next.has(deploymentId)) { + next.delete(deploymentId); + } else { + next.add(deploymentId); + } + return next; + }); + }; // Check for stuck deployment (more than 9 minutes) - only for the most recent deployment const stuckDeployment = useMemo(() => { @@ -230,14 +276,56 @@ export const ShowDeployments = ({ className="size-2.5" /> - - {deployment.title} - - {deployment.description && ( - - {deployment.description} - - )} + {(() => { + // The commit message is in the title field, so we truncate that + const titleText = deployment.title.trim(); + const needsTruncation = shouldTruncate(titleText); + const isExpanded = expandedDescriptions.has(deployment.deploymentId); + + return ( +
+ {/* Commit message (from title) - truncated */} + + {isExpanded || !needsTruncation + ? titleText + : truncateDescription( + titleText, + MAX_DESCRIPTION_LENGTH, + )} + + {needsTruncation && ( + + )} + {/* Hash (from description) - shown in compact form */} + {deployment.description && deployment.description.trim() && ( + + {deployment.description} + + )} +
+ ); + })()}
From 70bb32c59073f0756fce52b17c7eda1c6d2fb5e0 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 07:42:12 +0000 Subject: [PATCH 2/4] [autofix.ci] apply automated fixes --- .../deployments/show-deployments.tsx | 36 +++++++++++++------ 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx index 5848a046f..a5a8c5fd6 100644 --- a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx @@ -1,4 +1,12 @@ -import { ChevronDown, ChevronUp, Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react"; +import { + ChevronDown, + ChevronUp, + Clock, + Loader2, + RefreshCcw, + RocketIcon, + Settings, +} from "lucide-react"; import React, { useEffect, useMemo, useState } from "react"; import { toast } from "sonner"; import { AlertBlock } from "@/components/shared/alert-block"; @@ -88,7 +96,10 @@ export const ShowDeployments = ({ const MAX_DESCRIPTION_LENGTH = 150; // Helper function to truncate description intelligently - const truncateDescription = (description: string, maxLength: number): string => { + const truncateDescription = ( + description: string, + maxLength: number, + ): string => { if (maxLength <= 0) { return description; // Don't truncate if maxLength is 0 or negative } @@ -280,8 +291,10 @@ export const ShowDeployments = ({ // The commit message is in the title field, so we truncate that const titleText = deployment.title.trim(); const needsTruncation = shouldTruncate(titleText); - const isExpanded = expandedDescriptions.has(deployment.deploymentId); - + const isExpanded = expandedDescriptions.has( + deployment.deploymentId, + ); + return (
{/* Commit message (from title) - truncated */} @@ -296,7 +309,9 @@ export const ShowDeployments = ({ {needsTruncation && ( )} {/* Hash (from description) - shown in compact form */} - {deployment.description && deployment.description.trim() && ( - - {deployment.description} - - )} + {deployment.description && + deployment.description.trim() && ( + + {deployment.description} + + )}
); })()} From 05e3d241f17692925d1fc537c75c4957af64ac12 Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Sat, 15 Nov 2025 17:43:51 -0600 Subject: [PATCH 3/4] feat: increase commit message truncation length and simplify truncation logic - Updated the maximum character length for commit message truncation from 150 to 200 characters. - Simplified the truncation logic by removing unnecessary checks and consolidating the function to focus solely on the new maximum length. - Enhanced the display logic for deployment titles to ensure better readability and user experience. --- .../deployments/show-deployments.tsx | 297 ++++++++---------- 1 file changed, 136 insertions(+), 161 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx index a5a8c5fd6..8e7eb66ca 100644 --- a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx @@ -92,39 +92,21 @@ export const ShowDeployments = ({ new Set(), ); - // Maximum character length before truncating commit messages - const MAX_DESCRIPTION_LENGTH = 150; + const MAX_DESCRIPTION_LENGTH = 200; - // Helper function to truncate description intelligently - const truncateDescription = ( - description: string, - maxLength: number, - ): string => { - if (maxLength <= 0) { - return description; // Don't truncate if maxLength is 0 or negative - } - if (description.length <= maxLength) { + const truncateDescription = (description: string): string => { + if (description.length <= MAX_DESCRIPTION_LENGTH) { return description; } - // Try to truncate at a word boundary if possible - const truncated = description.slice(0, maxLength); + const truncated = description.slice(0, MAX_DESCRIPTION_LENGTH); const lastSpace = truncated.lastIndexOf(" "); - // If we find a space near the end (within last 20 chars), use it for cleaner truncation - if (lastSpace > maxLength - 20 && lastSpace > 0) { + // Truncate at word boundary if found near the end + if (lastSpace > MAX_DESCRIPTION_LENGTH - 20 && lastSpace > 0) { return `${truncated.slice(0, lastSpace)}...`; } return `${truncated}...`; }; - // Check if description should be truncated - const shouldTruncate = (description: string): boolean => { - // Only truncate if MAX_DESCRIPTION_LENGTH is greater than 0 - if (MAX_DESCRIPTION_LENGTH <= 0) { - return false; - } - return description.length > MAX_DESCRIPTION_LENGTH; - }; - // Toggle expand/collapse state for a specific deployment const toggleDescription = (deploymentId: string) => { setExpandedDescriptions((prev) => { @@ -274,165 +256,158 @@ export const ShowDeployments = ({
) : (
- {deployments?.map((deployment, index) => ( -
-
- - {index + 1}. {deployment.status} - - - {(() => { - // The commit message is in the title field, so we truncate that - const titleText = deployment.title.trim(); - const needsTruncation = shouldTruncate(titleText); - const isExpanded = expandedDescriptions.has( - deployment.deploymentId, - ); + {deployments?.map((deployment, index) => { + const titleText = deployment?.title?.trim() || ""; + const needsTruncation = titleText.length > MAX_DESCRIPTION_LENGTH; + const isExpanded = expandedDescriptions.has( + deployment.deploymentId, + ); - return ( -
- {/* Commit message (from title) - truncated */} - - {isExpanded || !needsTruncation - ? titleText - : truncateDescription( - titleText, - MAX_DESCRIPTION_LENGTH, - )} - - {needsTruncation && ( - - )} - {/* Hash (from description) - shown in compact form */} - {deployment.description && - deployment.description.trim() && ( - - {deployment.description} - - )} -
- ); - })()} -
-
-
- - {deployment.startedAt && deployment.finishedAt && ( - - - {formatDuration( - Math.floor( - (new Date(deployment.finishedAt).getTime() - - new Date(deployment.startedAt).getTime()) / - 1000, - ), - )} - - )} -
+ return ( +
+
+ + {index + 1}. {deployment.status} + + -
- {deployment.pid && deployment.status === "running" && ( - { - await killProcess({ - deploymentId: deployment.deploymentId, - }) - .then(() => { - toast.success("Process killed successfully"); - }) - .catch(() => { - toast.error("Error killing process"); - }); - }} - > - - - )} - + {isExpanded ? ( + <> + + Show less + + ) : ( + <> + + Show more + + )} + + )} + {/* Hash (from description) - shown in compact form */} + {deployment.description?.trim() && ( + + {deployment.description} + + )} +
+
+
+
+ + {deployment.startedAt && deployment.finishedAt && ( + + + {formatDuration( + Math.floor( + (new Date(deployment.finishedAt).getTime() - + new Date(deployment.startedAt).getTime()) / + 1000, + ), + )} + + )} +
- {deployment?.rollback && - deployment.status === "done" && - type === "application" && ( +
+ {deployment.pid && deployment.status === "running" && ( { - await rollback({ - rollbackId: deployment.rollback.rollbackId, + await killProcess({ + deploymentId: deployment.deploymentId, }) .then(() => { - toast.success( - "Rollback initiated successfully", - ); + toast.success("Process killed successfully"); }) .catch(() => { - toast.error("Error initiating rollback"); + toast.error("Error killing process"); }); }} > )} + + + {deployment?.rollback && + deployment.status === "done" && + type === "application" && ( + { + await rollback({ + rollbackId: deployment.rollback.rollbackId, + }) + .then(() => { + toast.success( + "Rollback initiated successfully", + ); + }) + .catch(() => { + toast.error("Error initiating rollback"); + }); + }} + > + + + )} +
-
- ))} + ); + })}
)} Date: Sat, 15 Nov 2025 17:46:14 -0600 Subject: [PATCH 4/4] refactor: simplify deployment description toggle logic - Removed the separate toggleDescription function and integrated its logic directly into the button's onClick handler for better readability. - Maintained functionality for expanding and collapsing deployment descriptions while streamlining the code structure. --- .../deployments/show-deployments.tsx | 26 +++++++------------ 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx index 8e7eb66ca..1885ffc3a 100644 --- a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx @@ -100,26 +100,12 @@ export const ShowDeployments = ({ } const truncated = description.slice(0, MAX_DESCRIPTION_LENGTH); const lastSpace = truncated.lastIndexOf(" "); - // Truncate at word boundary if found near the end if (lastSpace > MAX_DESCRIPTION_LENGTH - 20 && lastSpace > 0) { return `${truncated.slice(0, lastSpace)}...`; } return `${truncated}...`; }; - // Toggle expand/collapse state for a specific deployment - const toggleDescription = (deploymentId: string) => { - setExpandedDescriptions((prev) => { - const next = new Set(prev); - if (next.has(deploymentId)) { - next.delete(deploymentId); - } else { - next.add(deploymentId); - } - return next; - }); - }; - // Check for stuck deployment (more than 9 minutes) - only for the most recent deployment const stuckDeployment = useMemo(() => { if (!isCloud || !deployments || deployments.length === 0) return null; @@ -286,9 +272,15 @@ export const ShowDeployments = ({ {needsTruncation && (