refact workflow run log

web/app/components/workflow/nodes/iteration/panel.tsx

@@ -53,7 +53,6 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
     isShowIterationDetail,
     backToSingleRun,
     showIterationDetail,
-    hideIterationDetail,
     runningStatus,
     handleRun,
     handleStop,
@@ -181,7 +180,6 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
       {isShowIterationDetail && (
         <IterationResultPanel
           onBack={backToSingleRun}
-          onHide={hideIterationDetail}
           list={iterationRunResult}
         />
       )}

web/app/components/workflow/panel/workflow-preview.tsx

@@ -1,8 +1,6 @@
 import {
   memo,
-  useCallback,
   useEffect,
-  // useRef,
   useState,
 } from 'react'
 import {
@@ -11,7 +9,6 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import copy from 'copy-to-clipboard'
-import { useBoolean } from 'ahooks'
 import ResultText from '../run/result-text'
 import ResultPanel from '../run/result-panel'
 import TracingPanel from '../run/tracing-panel'
@@ -24,12 +21,9 @@ import {
 } from '../types'
 import { SimpleBtn } from '../../app/text-generate/item'
 import Toast from '../../base/toast'
-import { IterationResultPanel } from '../run/iteration-log'
-import { RetryResultPanel } from '../run/retry-log'
 import InputsPanel from './inputs-panel'
 import cn from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
-import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 
 const WorkflowPreview = () => {
   const { t } = useTranslation()
@@ -53,44 +47,6 @@ const WorkflowPreview = () => {
       switchTab('DETAIL')
   }, [workflowRunningData])
 
-  const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
-  const [retryRunResult, setRetryRunResult] = useState<NodeTracing[]>([])
-  const [iterDurationMap, setIterDurationMap] = useState<IterationDurationMap>({})
-  const [isShowIterationDetail, {
-    setTrue: doShowIterationDetail,
-    setFalse: doHideIterationDetail,
-  }] = useBoolean(false)
-  const [isShowRetryDetail, {
-    setTrue: doShowRetryDetail,
-    setFalse: doHideRetryDetail,
-  }] = useBoolean(false)
-
-  const handleShowIterationDetail = useCallback((detail: NodeTracing[][], iterationDurationMap: IterationDurationMap) => {
-    setIterDurationMap(iterationDurationMap)
-    setIterationRunResult(detail)
-    doShowIterationDetail()
-  }, [doShowIterationDetail])
-
-  const handleRetryDetail = useCallback((detail: NodeTracing[]) => {
-    setRetryRunResult(detail)
-    doShowRetryDetail()
-  }, [doShowRetryDetail])
-
-  if (isShowIterationDetail) {
-    return (
-      <div className={`
-      flex flex-col w-[420px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
-    `}>
-        <IterationResultPanel
-          list={iterationRunResult}
-          onHide={doHideIterationDetail}
-          onBack={doHideIterationDetail}
-          iterDurationMap={iterDurationMap}
-        />
-      </div>
-    )
-  }
-
   return (
     <div className={`
       flex flex-col w-[420px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
@@ -102,17 +58,6 @@ const WorkflowPreview = () => {
         </div>
       </div>
       <div className='grow relative flex flex-col'>
-        {isShowIterationDetail
-          ? (
-            <IterationResultPanel
-              list={iterationRunResult}
-              onHide={doHideIterationDetail}
-              onBack={doHideIterationDetail}
-              iterDurationMap={iterDurationMap}
-            />
-          )
-          : (
-            <>
         <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
           {showInputsPanel && (
             <div
@@ -212,12 +157,10 @@ const WorkflowPreview = () => {
               <Loading />
             </div>
           )}
-                {currentTab === 'TRACING' && !isShowRetryDetail && (
+          {currentTab === 'TRACING' && (
             <TracingPanel
               className='bg-background-section-burn'
               list={workflowRunningData?.tracing || []}
-                    onShowIterationDetail={handleShowIterationDetail}
-                    onShowRetryDetail={handleRetryDetail}
             />
           )}
           {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
@@ -225,18 +168,7 @@ const WorkflowPreview = () => {
               <Loading />
             </div>
           )}
-                {
-                  currentTab === 'TRACING' && isShowRetryDetail && (
-                    <RetryResultPanel
-                      list={retryRunResult}
-                      onBack={doHideRetryDetail}
-                    />
-                  )
-                }
         </div>
-            </>
-          )}
-
       </div>
     </div>
   )

web/app/components/workflow/run/index.tsx

@@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next'
 import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
-import SpecialResultPanel from './special-result-panel'
-import { useLogs } from './hooks'
 import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
@@ -105,24 +103,6 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
     adjustResultHeight()
   }, [loading])
 
-  const {
-    showSpecialResultPanel,
-
-    showRetryDetail,
-    setShowRetryDetailFalse,
-    retryResultList,
-    handleShowRetryResultList,
-
-    showIteratingDetail,
-    setShowIteratingDetailFalse,
-    iterationResultList,
-    iterationResultDurationMap,
-    handleShowIterationResultList,
-
-    showAgentDetail,
-    setShowAgentDetailFalse,
-  } = useLogs()
-
   return (
     <div className='grow relative flex flex-col'>
       {/* tab */}
@@ -152,7 +132,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detail */}
-      <div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
+      <div ref={ref} className={cn('relative grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl')}>
         {loading && (
           <div className='flex h-full items-center justify-center bg-components-panel-bg'>
             <Loading />
@@ -179,31 +159,12 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
             exceptionCounts={runDetail.exceptions_count}
           />
         )}
-        {!loading && currentTab === 'TRACING' && !showSpecialResultPanel && (
+        {!loading && currentTab === 'TRACING' && (
           <TracingPanel
             className='bg-background-section-burn'
             list={list}
-            onShowIterationDetail={handleShowIterationResultList}
-            onShowRetryDetail={handleShowRetryResultList}
           />
         )}
-        {
-          !loading && currentTab === 'TRACING' && showSpecialResultPanel && (
-            <SpecialResultPanel
-              showRetryDetail={showRetryDetail}
-              setShowRetryDetailFalse={setShowRetryDetailFalse}
-              retryResultList={retryResultList}
-
-              showIteratingDetail={showIteratingDetail}
-              setShowIteratingDetailFalse={setShowIteratingDetailFalse}
-              iterationResultList={iterationResultList}
-              iterationResultDurationMap={iterationResultDurationMap}
-
-              showAgentDetail={showAgentDetail}
-              setShowAgentDetailFalse={setShowAgentDetailFalse}
-            />
-          )
-        }
       </div>
     </div>
   )

web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx

@@ -3,15 +3,13 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  RiArrowLeftLine,
   RiArrowRightSLine,
-  RiCloseLine,
   RiErrorWarningLine,
   RiLoader2Line,
 } from '@remixicon/react'
-import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
-import { RetryResultPanel } from '@/app/components/workflow/run/retry-log'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
 import cn from '@/utils/classnames'
 import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
@@ -19,17 +17,13 @@ const i18nPrefix = 'workflow.singleRun'
 
 type Props = {
   list: NodeTracing[][]
-  onHide: () => void
   onBack: () => void
-  noWrap?: boolean
   iterDurationMap?: IterationDurationMap
 }
 
 const IterationResultPanel: FC<Props> = ({
   list,
-  onHide,
   onBack,
-  noWrap,
   iterDurationMap,
 }) => {
   const { t } = useTranslation()
@@ -75,29 +69,22 @@ const IterationResultPanel: FC<Props> = ({
       </>
     )
   }
-  const [retryRunResult, setRetryRunResult] = useState<Record<string, NodeTracing[]> | undefined>()
-  const handleRetryDetail = (v: number, detail?: NodeTracing[]) => {
-    setRetryRunResult({ ...retryRunResult, [v]: detail })
-  }
 
-  const main = (
-    <>
-      <div className={cn(!noWrap && 'shrink-0 ', 'px-4 pt-3')}>
-        <div className='shrink-0 flex justify-between items-center h-8'>
-          <div className='system-xl-semibold text-text-primary truncate'>
-            {t(`${i18nPrefix}.testRunIteration`)}
-          </div>
-          <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
-          </div>
-        </div>
-        <div className='flex items-center py-2 space-x-1 text-text-accent-secondary cursor-pointer' onClick={onBack}>
-          <ArrowNarrowLeft className='w-4 h-4' />
+  return (
+    <div className='bg-components-panel-bg'>
+      <div
+        className='flex items-center px-4 h-8 text-text-accent-secondary cursor-pointer border-b-[0.5px] border-b-divider-regular'
+        onClick={(e) => {
+          e.stopPropagation()
+          e.nativeEvent.stopImmediatePropagation()
+          onBack()
+        }}
+      >
+        <RiArrowLeftLine className='mr-1 w-4 h-4' />
         <div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
       </div>
-      </div>
       {/* List */}
-      <div className={cn(!noWrap ? 'flex-grow overflow-auto' : 'max-h-full', 'p-2 bg-components-panel-bg')}>
+      <div className='p-2 bg-components-panel-bg'>
         {list.map((iteration, index) => (
           <div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
             <div
@@ -121,8 +108,6 @@ const IterationResultPanel: FC<Props> = ({
             {expandedIterations[index] && <div
               className="grow h-px bg-divider-subtle"
             ></div>}
-            {
-              !retryRunResult?.[index] && (
             <div className={cn(
               'overflow-hidden transition-all duration-200',
               expandedIterations[index] ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0',
@@ -130,44 +115,11 @@ const IterationResultPanel: FC<Props> = ({
               <TracingPanel
                 list={iteration}
                 className='bg-background-section-burn'
-                    onShowRetryDetail={v => handleRetryDetail(index, v)}
               />
             </div>
-              )
-            }
-            {
-              retryRunResult?.[index] && (
-                <RetryResultPanel
-                  list={retryRunResult[index]}
-                  onBack={() => handleRetryDetail(index, undefined)}
-                />
-              )
-            }
           </div>
         ))}
       </div>
-    </>
-  )
-  const handleNotBubble = useCallback((e: React.MouseEvent) => {
-    // if not do this, it will trigger the message log modal disappear(useClickAway)
-    e.stopPropagation()
-    e.nativeEvent.stopImmediatePropagation()
-  }, [])
-
-  if (noWrap)
-    return main
-
-  return (
-    <div
-      className='absolute inset-0 z-10 rounded-2xl pt-10'
-      style={{
-        backgroundColor: 'rgba(16, 24, 40, 0.20)',
-      }}
-      onClick={handleNotBubble}
-    >
-      <div className='h-full rounded-2xl bg-components-panel-bg flex flex-col'>
-        {main}
-      </div>
     </div>
   )
 }

web/app/components/workflow/run/meta.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useTimestamp from '@/hooks/use-timestamp'
 
-interface Props {
+type Props = {
   status: string
   executor?: string
   startTime?: number

web/app/components/workflow/run/output-panel.tsx

@@ -9,7 +9,7 @@ import { FileList } from '@/app/components/base/file-uploader'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
 
-interface OutputPanelProps {
+type OutputPanelProps = {
   isRunning?: boolean
   outputs?: any
   error?: string
@@ -47,7 +47,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
     return getProcessedFilesFromResponse(fileList)
   }, [outputs])
   return (
-    <div className='py-2'>
+    <div className='p-2'>
       {isRunning && (
         <div className='pt-4 pl-[26px]'>
           <LoadingAnim type='text' />

web/app/components/workflow/run/special-result-panel.tsx

@@ -43,7 +43,6 @@ const SpecialResultPanel = ({
         showIteratingDetail && (
           <IterationResultPanel
             list={iterationResultList}
-            onHide={setShowIteratingDetailFalse}
             onBack={setShowIteratingDetailFalse}
             iterDurationMap={iterationResultDurationMap}
           />

web/app/components/workflow/run/tracing-panel.tsx

@@ -12,16 +12,16 @@ import {
   RiMenu4Line,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { useLogs } from './hooks'
 import NodePanel from './node'
+import SpecialResultPanel from './special-result-panel'
 import {
   BlockEnum,
 } from '@/app/components/workflow/types'
-import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
+import type { NodeTracing } from '@/types/workflow'
 
 type TracingPanelProps = {
   list: NodeTracing[]
-  onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
-  onShowRetryDetail?: (detail: NodeTracing[]) => void
   className?: string
   hideNodeInfo?: boolean
   hideNodeProcessDetail?: boolean
@@ -160,8 +160,6 @@ function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): Tracing
 
 const TracingPanel: FC<TracingPanelProps> = ({
   list,
-  onShowIterationDetail,
-  onShowRetryDetail,
   className,
   hideNodeInfo = false,
   hideNodeProcessDetail = false,
@@ -203,6 +201,24 @@ const TracingPanel: FC<TracingPanelProps> = ({
     }
   }, [])
 
+  const {
+    showSpecialResultPanel,
+
+    showRetryDetail,
+    setShowRetryDetailFalse,
+    retryResultList,
+    handleShowRetryResultList,
+
+    showIteratingDetail,
+    setShowIteratingDetailFalse,
+    iterationResultList,
+    iterationResultDurationMap,
+    handleShowIterationResultList,
+
+    showAgentDetail,
+    setShowAgentDetailFalse,
+  } = useLogs()
+
   const renderNode = (node: TracingNodeProps) => {
     if (node.isParallel) {
       const isCollapsed = collapsedNodes.has(node.id)
@@ -252,8 +268,8 @@ const TracingPanel: FC<TracingPanelProps> = ({
           </div>
           <NodePanel
             nodeInfo={node.data!}
-            onShowIterationDetail={onShowIterationDetail}
-            onShowRetryDetail={onShowRetryDetail}
+            onShowIterationDetail={handleShowIterationResultList}
+            onShowRetryDetail={handleShowRetryResultList}
             justShowIterationNavArrow={true}
             justShowRetryNavArrow={true}
             hideInfo={hideNodeInfo}
@@ -264,6 +280,24 @@ const TracingPanel: FC<TracingPanelProps> = ({
     }
   }
 
+  if (showSpecialResultPanel) {
+    return (
+      <SpecialResultPanel
+        showRetryDetail={showRetryDetail}
+        setShowRetryDetailFalse={setShowRetryDetailFalse}
+        retryResultList={retryResultList}
+
+        showIteratingDetail={showIteratingDetail}
+        setShowIteratingDetailFalse={setShowIteratingDetailFalse}
+        iterationResultList={iterationResultList}
+        iterationResultDurationMap={iterationResultDurationMap}
+
+        showAgentDetail={showAgentDetail}
+        setShowAgentDetailFalse={setShowAgentDetailFalse}
+      />
+    )
+  }
+
   return (
     <div className={cn(className || 'bg-components-panel-bg', 'py-2')}>
       {treeNodes.map(renderNode)}