From 138650d5610f013df2d2b78409ca87d4d5fe2f93 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Sat, 14 Dec 2024 01:30:36 +0100
Subject: [PATCH] feat: improved deployment view scroll & style

---
 .../deployments/show-deployment.tsx           | 38 ++++++++++++-----
 .../deployments/show-deployment-compose.tsx   | 42 +++++++++++++------
 2 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
index 2d4cbe66..96e32d8c 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -20,9 +20,25 @@ interface Props {
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);
 
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  };
+	
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+	
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	  };
+	
 	useEffect(() => {
 		if (!open || !logPath) return;
 
@@ -53,9 +69,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
 
 	useEffect(() => {
 		const logs = parseLogs(data);
@@ -64,7 +77,12 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+	
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  }, [filteredLogs, autoScroll]);
+
 
 	return (
 		<Dialog
@@ -90,9 +108,11 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 					</DialogDescription>
 				</DialogHeader>
 
-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<div>
-					{ 
+				<div 
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>					{ 
 						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
 							<TerminalLine
 								key={index}
@@ -105,8 +125,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 								<Loader2 className="h-6 w-6 animate-spin" />
 							</div>
 						)}
-						<div ref={endOfLogsRef} />
-					</div>
 				</div>
 			</DialogContent>
 		</Dialog>
diff --git a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
index 702394b6..c8746b71 100644
--- a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
@@ -25,9 +25,26 @@ export const ShowDeploymentCompose = ({
 	serverId,
 }: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  };
+	
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+	
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	  };
+	
+	
 	useEffect(() => {
 		if (!open || !logPath) return;
 
@@ -59,20 +76,19 @@ export const ShowDeploymentCompose = ({
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
 
 	useEffect(() => {
 		const logs = parseLogs(data);
-		console.log(data);
-		console.log(logs);
 		setFilteredLogs(logs);
 	}, [data]);
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+	
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  }, [filteredLogs, autoScroll]);
 
 	return (
 		<Dialog
@@ -90,7 +106,7 @@ export const ShowDeploymentCompose = ({
 				}
 			}}
 		>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl max-h-screen"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
@@ -98,8 +114,12 @@ export const ShowDeploymentCompose = ({
 					</DialogDescription>
 				</DialogHeader>
 
-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<div>
+				<div 
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>
+						
 						
 					{ 
 						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
@@ -115,8 +135,6 @@ export const ShowDeploymentCompose = ({
 						</div>
 						)
 					}
-						<div ref={endOfLogsRef} />
-					</div>
 				</div>
 			</DialogContent>
 		</Dialog>