From 05e3d241f17692925d1fc537c75c4957af64ac12 Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Sat, 15 Nov 2025 17:43:51 -0600 Subject: [PATCH] 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"); + }); + }} + > + + + )} +
-
- ))} + ); + })}
)}