Merge pull request #208 from datazip-inc/feat/show-error-logs-in-test-connection

feat: show error logs in test connection

Author: deepanshupal09-datazip

ui/src/modules/common/Modals/EditSourceModal.tsx

@@ -8,6 +8,7 @@ import { sourceService } from "../../../api"
 import { destinationService } from "../../../api/services/destinationService"
 import { EntityEditModalProps } from "../../../types"
 import { getConnectorImage } from "../../../utils/utils"
+import { TEST_CONNECTION_STATUS } from "../../../utils/constants"
 
 const EntityEditModal = ({ entityType }: EntityEditModalProps) => {
 	const navigate = useNavigate()
@@ -69,7 +70,10 @@ const EntityEditModal = ({ entityType }: EntityEditModalProps) => {
 				? await sourceService.testSourceConnection(getEntityData())
 				: await destinationService.testDestinationConnection(getEntityData())
 
-			if (testResult.data?.status === "SUCCEEDED") {
+			if (
+				testResult.data?.connection_result.status ===
+				TEST_CONNECTION_STATUS.SUCCEEDED
+			) {
 				setTimeout(() => {
 					setShowTestingModal(false)
 					setShowSuccessModal(true)
@@ -82,8 +86,12 @@ const EntityEditModal = ({ entityType }: EntityEditModalProps) => {
 					navigate(navigatePath)
 				}, 2000)
 			} else {
+				const testConnectionError = {
+					message: testResult.data?.connection_result.message || "",
+					logs: testResult.data?.logs || [],
+				}
 				setShowTestingModal(false)
-				setTestConnectionError(testResult.data?.message || "")
+				setTestConnectionError(testConnectionError)
 				setShowFailureModal(true)
 			}
 		} catch (error) {

ui/src/modules/common/Modals/EntityEditModal.tsx

@@ -1,9 +1,12 @@
+import { useState } from "react"
 import { useNavigate } from "react-router-dom"
-import { Modal } from "antd"
-import { Info } from "@phosphor-icons/react"
+import { message, Modal } from "antd"
+import { CopySimpleIcon } from "@phosphor-icons/react"
+import clsx from "clsx"
 
 import { useAppStore } from "../../../store"
 import ErrorIcon from "../../../assets/ErrorIcon.svg"
+import { getLogTextColor, getLogLevelClass } from "../../../utils/utils"
 
 const TestConnectionFailureModal = ({
 	fromSources,
@@ -16,30 +19,57 @@ const TestConnectionFailureModal = ({
 		sourceTestConnectionError,
 		destinationTestConnectionError,
 	} = useAppStore()
+	const [isExpanded, setIsExpanded] = useState(false)
 	const navigate = useNavigate()
 
 	const handleCancel = () => {
 		setShowFailureModal(false)
+		setIsExpanded(false)
 	}
 
 	const handleBackToPath = () => {
 		setShowFailureModal(false)
+		setIsExpanded(false)
 		if (fromSources) {
 			navigate("/sources")
 		} else {
 			navigate("/destinations")
 		}
 	}
 
+	const handleReadMore = () => setIsExpanded(!isExpanded)
+
+	const handleCopyLogs = async () => {
+		try {
+			await navigator.clipboard.writeText(
+				JSON.stringify(
+					fromSources
+						? sourceTestConnectionError?.logs || []
+						: destinationTestConnectionError?.logs || [],
+					null,
+					4,
+				),
+			)
+			message.success("Logs copied to clipboard!")
+		} catch {
+			message.error("Failed to copy logs")
+		}
+	}
+
 	return (
 		<Modal
 			open={showFailureModal}
 			footer={null}
 			closable={false}
 			centered
-			width={420}
+			width={isExpanded ? 980 : 680}
+			className="transition-all duration-300"
 		>
-			<div className="flex flex-col items-center justify-center gap-7 py-6">
+			<div
+				className={`flex flex-col items-center justify-start gap-7 overflow-hidden pb-6 transition-all duration-300 ease-in-out ${
+					isExpanded ? "w-full pt-6" : "mx-auto max-w-[680px] pt-16"
+				}`}
+			>
 				<div className="relative">
 					<div>
 						<img
@@ -48,21 +78,76 @@ const TestConnectionFailureModal = ({
 						/>
 					</div>
 				</div>
-				<div className="flex flex-col items-center">
+				<div className="flex w-full flex-col items-center">
 					<p className="text-sm text-text-tertiary">Failed</p>
-					<h2 className="text-center text-lg font-medium">
+					<h2 className="text-center text-xl font-medium">
 						Your test connection has failed
 					</h2>
-					<div className="mt-2 flex w-[360px] items-center gap-1 overflow-scroll rounded-xl bg-gray-50 p-3 text-xs">
-						<Info
-							weight="bold"
-							className="size-4 flex-shrink-0 text-danger"
-						/>
-						<span className="break-words">
-							{fromSources
-								? sourceTestConnectionError
-								: destinationTestConnectionError}
-						</span>
+					<div className="mt-4 flex w-full flex-col rounded-md border border-neutral-300 text-sm">
+						<div className="flex w-full items-center justify-between border-b border-neutral-300 px-3 py-2">
+							<div className="font-bold">Error </div>
+							{isExpanded && (
+								<CopySimpleIcon
+									onClick={handleCopyLogs}
+									className="size-[14px] flex-shrink-0 cursor-pointer"
+								/>
+							)}
+						</div>
+						<div
+							className={`flex flex-col px-3 py-2 text-neutral-500 ${
+								isExpanded ? "h-[300px] overflow-auto" : "h-auto"
+							}`}
+						>
+							{!isExpanded ? (
+								<div className="max-h-[150px] overflow-auto text-red-500">
+									{fromSources
+										? sourceTestConnectionError?.message || ""
+										: destinationTestConnectionError?.message || ""}
+								</div>
+							) : (
+								<table className="min-w-full">
+									<tbody>
+										{(fromSources
+											? sourceTestConnectionError?.logs || []
+											: destinationTestConnectionError?.logs || []
+										).map((jobLog, index) => (
+											<tr key={index}>
+												<td className="w-24 px-4 py-1 text-sm">
+													<span
+														className={clsx(
+															"rounded-xl px-2 py-[5px] text-xs capitalize",
+															getLogLevelClass(jobLog.level),
+														)}
+													>
+														{jobLog.level}
+													</span>
+												</td>
+												<td
+													className={clsx(
+														"whitespace-pre-wrap break-words px-4 py-3 text-sm text-gray-700",
+														getLogTextColor(jobLog.level),
+													)}
+												>
+													{jobLog.message}
+												</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
+							)}
+
+							{!isExpanded && (
+								<button
+									type="button"
+									onClick={handleReadMore}
+									aria-label="Read more"
+									aria-expanded={isExpanded}
+									className="mt-2 text-left text-blue-600 hover:underline"
+								>
+									Read more
+								</button>
+							)}
+						</div>
 					</div>
 				</div>
 				<div className="flex items-center gap-4">