From 167f75ddc3582af9b934aadb254fa7e56b7a7bd8 Mon Sep 17 00:00:00 2001
From: "Bryson G." <bryson.glembin@gmail.com>
Date: Fri, 20 Dec 2024 01:25:42 -0800
Subject: [PATCH] refactor(dashboard): show log output

---
 .../components/NodeTypes/Task/TaskDetails.tsx    | 16 +++++++++-------
 .../app/[tenantId]/components/OverflowText.tsx   |  5 +++--
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/Task/TaskDetails.tsx b/dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/Task/TaskDetails.tsx
index 8445f69cd..58f1f6cfc 100644
--- a/dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/Task/TaskDetails.tsx
+++ b/dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/Task/TaskDetails.tsx
@@ -9,6 +9,7 @@ import { FC } from 'react'
 import { NodeRunsList } from '../../NodeRunsList'
 import { NodeDetails } from '../NodeDetails'
 import { getTaskRun } from './getTaskRun'
+import { OverflowText } from '@/app/[tenantId]/components/OverflowText'
 
 export const TaskDetails: FC<{
   taskNode?: TaskNode
@@ -93,14 +94,15 @@ export const TaskDetails: FC<{
       {nodeRun && nodeRun.errorMessage && (
         <div className="mt-2 flex flex-col rounded bg-red-200 p-1">
           <h3 className="font-bold">Error</h3>
-          <div className="overflow-x-auto min-w-0">
-            {data?.attempts[0]?.logOutput?.str ?? nodeRun.errorMessage}
-          </div>
+          <OverflowText
+            variant="error"
+            className="text-nowrap"
+            text={data?.attempts[data?.attempts.length - 1]?.logOutput?.str ?? nodeRun.errorMessage}
+          />
         </div>
-  )
-}
-<NodeRunsList nodeRuns={nodeRunsList} />
-    </NodeDetails >
+      )}
+      <NodeRunsList nodeRuns={nodeRunsList} />
+    </NodeDetails>
   )
 }
 
diff --git a/dashboard/src/app/[tenantId]/components/OverflowText.tsx b/dashboard/src/app/[tenantId]/components/OverflowText.tsx
index 8d6bef453..66760e08d 100644
--- a/dashboard/src/app/[tenantId]/components/OverflowText.tsx
+++ b/dashboard/src/app/[tenantId]/components/OverflowText.tsx
@@ -10,9 +10,10 @@ import { tryFormatAsJson } from '@/app/utils/tryFormatAsJson'
 type OverflowTextProps = {
   text: string
   className?: string
+  variant?: 'error'
 }
 
-export const OverflowText: FC<OverflowTextProps> = ({ text, className }) => {
+export const OverflowText: FC<OverflowTextProps> = ({ text, className, variant }) => {
   const textRef = useRef<HTMLDivElement>(null)
   const [isOverflowing, setIsOverflowing] = useState(false)
 
@@ -45,7 +46,7 @@ export const OverflowText: FC<OverflowTextProps> = ({ text, className }) => {
         </DialogTrigger>
         <DialogContent className="max-w-2xl gap-2 overflow-visible">
           <CopyButton value={formattedText} className="h-8 w-8 rounded-full" />
-          <div className="h-96 overflow-auto rounded-lg bg-gray-100">
+          <div className={cn('h-96 overflow-auto rounded-lg bg-gray-100', { 'bg-red-200': variant === 'error' })}>
             <div className="max-w-full whitespace-pre-wrap break-words p-4">{formattedText}</div>
           </div>
         </DialogContent>