From 08515957f10e6b97076922ddc58c1f650a507116 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Wed, 25 Dec 2024 16:56:55 +0800
Subject: [PATCH] refact workflow run log

---
 .../components/before-run-form/index.tsx      |  2 +-
 .../workflow/nodes/iteration/panel.tsx        |  4 +-
 .../workflow/panel/workflow-preview.tsx       |  4 +-
 .../workflow/run/agent-log/index.tsx          |  3 +
 .../workflow/run/iteration-log/index.tsx      |  2 +
 .../iteration-log/iteration-log-trigger.tsx   | 72 ++++++++++++++++
 .../iteration-result-panel.tsx                |  8 +-
 web/app/components/workflow/run/node.tsx      | 82 ++++---------------
 .../workflow/run/retry-log/index.tsx          |  2 +
 .../run/retry-log/retry-log-trigger.tsx       | 41 ++++++++++
 .../{ => retry-log}/retry-result-panel.tsx    |  2 +-
 .../workflow/run/special-result-panel.tsx     |  4 +-
 12 files changed, 146 insertions(+), 80 deletions(-)
 create mode 100644 web/app/components/workflow/run/agent-log/index.tsx
 create mode 100644 web/app/components/workflow/run/iteration-log/index.tsx
 create mode 100644 web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
 rename web/app/components/workflow/run/{ => iteration-log}/iteration-result-panel.tsx (95%)
 create mode 100644 web/app/components/workflow/run/retry-log/index.tsx
 create mode 100644 web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
 rename web/app/components/workflow/run/{ => retry-log}/retry-result-panel.tsx (96%)

diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index 667263c102..fe18290ebf 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -18,7 +18,7 @@ import Toast from '@/app/components/base/toast'
 import { TransferMethod } from '@/types/app'
 import { getProcessedFiles } from '@/app/components/base/file-uploader/utils'
 import type { NodeTracing } from '@/types/workflow'
-import RetryResultPanel from '@/app/components/workflow/run/retry-result-panel'
+import { RetryResultPanel } from '@/app/components/workflow/run/retry-log'
 import type { BlockEnum } from '@/app/components/workflow/types'
 import type { Emoji } from '@/app/components/tools/types'
 
diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index 9b6b3d3790..2ad2cac2d9 100644
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/web/app/components/workflow/nodes/iteration/panel.tsx
@@ -7,7 +7,7 @@ import {
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import Split from '../_base/components/split'
 import ResultPanel from '../../run/result-panel'
-import IterationResultPanel from '../../run/iteration-result-panel'
+import { IterationResultPanel } from '../../run/iteration-log'
 import { MAX_ITERATION_PARALLEL_NUM, MIN_ITERATION_PARALLEL_NUM } from '../../constants'
 import type { IterationNodeType } from './types'
 import useConfig from './use-config'
@@ -123,7 +123,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
                 onChange={changeParallelNums}
                 max={MAX_ITERATION_PARALLEL_NUM}
                 min={MIN_ITERATION_PARALLEL_NUM}
-                className=' flex-shrink-0 flex-1 mt-4'
+                className=' shrink-0 flex-1 mt-4'
               />
             </div>
 
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 210a95f1f8..2e7f859b93 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -24,8 +24,8 @@ import {
 } from '../types'
 import { SimpleBtn } from '../../app/text-generate/item'
 import Toast from '../../base/toast'
-import IterationResultPanel from '../run/iteration-result-panel'
-import RetryResultPanel from '../run/retry-result-panel'
+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'
diff --git a/web/app/components/workflow/run/agent-log/index.tsx b/web/app/components/workflow/run/agent-log/index.tsx
new file mode 100644
index 0000000000..26a43ca8c5
--- /dev/null
+++ b/web/app/components/workflow/run/agent-log/index.tsx
@@ -0,0 +1,3 @@
+export { default as AgentLogTrigger } from './agent-log-trigger'
+export { default as AgentResultPanel } from './agent-result-panel'
+export { default as AgentToolCallResultPanel } from './tool-call-result-panel'
diff --git a/web/app/components/workflow/run/iteration-log/index.tsx b/web/app/components/workflow/run/iteration-log/index.tsx
new file mode 100644
index 0000000000..5cbe70fece
--- /dev/null
+++ b/web/app/components/workflow/run/iteration-log/index.tsx
@@ -0,0 +1,2 @@
+export { default as IterationLogTrigger } from './iteration-log-trigger'
+export { default as IterationResultPanel } from './iteration-result-panel'
diff --git a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
new file mode 100644
index 0000000000..350c15c2b8
--- /dev/null
+++ b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
@@ -0,0 +1,72 @@
+import { useTranslation } from 'react-i18next'
+import { RiArrowRightSLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import type {
+  IterationDurationMap,
+  NodeTracing,
+} from '@/types/workflow'
+import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
+import Split from '@/app/components/workflow/nodes/_base/components/split'
+
+type IterationLogTriggerProps = {
+  nodeInfo: NodeTracing
+  onShowIterationResultList: (iterationResultList: NodeTracing[][], iterationResultDurationMap: IterationDurationMap) => void
+  justShowIterationNavArrow?: boolean
+}
+const IterationLogTrigger = ({
+  nodeInfo,
+  onShowIterationResultList,
+  justShowIterationNavArrow,
+}: IterationLogTriggerProps) => {
+  const { t } = useTranslation()
+  const getErrorCount = (details: NodeTracing[][] | undefined) => {
+    if (!details || details.length === 0)
+      return 0
+
+    return details.reduce((acc, iteration) => {
+      if (iteration.some(item => item.status === 'failed'))
+        acc++
+      return acc
+    }, 0)
+  }
+  const getCount = (iteration_curr_length: number | undefined, iteration_length: number) => {
+    if ((iteration_curr_length && iteration_curr_length < iteration_length) || !iteration_length)
+      return iteration_curr_length
+
+    return iteration_length
+  }
+  const handleOnShowIterationDetail = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+    onShowIterationResultList(nodeInfo.details || [], nodeInfo?.iterDurationMap || nodeInfo.execution_metadata?.iteration_duration_map || {})
+  }
+  return (
+    <div className='mt-2 mb-1 !px-2'>
+      <Button
+        className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
+        onClick={handleOnShowIterationDetail}
+      >
+        <Iteration className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
+        <div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
+          <>
+            {t('workflow.nodes.iteration.comma')}
+            {t('workflow.nodes.iteration.error', { count: getErrorCount(nodeInfo.details) })}
+          </>
+        )}</div>
+        {justShowIterationNavArrow
+          ? (
+            <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
+          )
+          : (
+            <div className='flex items-center space-x-1 text-[#155EEF]'>
+              <div className='text-[13px] font-normal '>{t('workflow.common.viewDetailInTracingPanel')}</div>
+              <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
+            </div>
+          )}
+      </Button>
+      <Split className='mt-2' />
+    </div>
+  )
+}
+
+export default IterationLogTrigger
diff --git a/web/app/components/workflow/run/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
similarity index 95%
rename from web/app/components/workflow/run/iteration-result-panel.tsx
rename to web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
index 282c75880c..07e0db969f 100644
--- a/web/app/components/workflow/run/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
@@ -8,10 +8,10 @@ import {
   RiErrorWarningLine,
   RiLoader2Line,
 } from '@remixicon/react'
-import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
-import { NodeRunningStatus } from '../types'
-import TracingPanel from './tracing-panel'
-import RetryResultPanel from './retry-result-panel'
+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'
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 25e3802107..f8e28ff713 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -8,16 +8,14 @@ import {
   RiCheckboxCircleFill,
   RiErrorWarningLine,
   RiLoader2Line,
-  RiRestartFill,
 } from '@remixicon/react'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
-import Split from '../nodes/_base/components/split'
-import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
+import { RetryLogTrigger } from './retry-log'
+import { IterationLogTrigger } from './iteration-log'
 import cn from '@/utils/classnames'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
-import Button from '@/app/components/base/button'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
@@ -72,38 +70,13 @@ const NodePanel: FC<Props> = ({
       return `${Number.parseFloat((tokens / 1000000).toFixed(3))}M`
   }
 
-  const getCount = (iteration_curr_length: number | undefined, iteration_length: number) => {
-    if ((iteration_curr_length && iteration_curr_length < iteration_length) || !iteration_length)
-      return iteration_curr_length
-
-    return iteration_length
-  }
-  const getErrorCount = (details: NodeTracing[][] | undefined) => {
-    if (!details || details.length === 0)
-      return 0
-
-    return details.reduce((acc, iteration) => {
-      if (iteration.some(item => item.status === 'failed'))
-        acc++
-      return acc
-    }, 0)
-  }
   useEffect(() => {
     setCollapseState(!nodeInfo.expand)
   }, [nodeInfo.expand, setCollapseState])
 
   const isIterationNode = nodeInfo.node_type === BlockEnum.Iteration
   const isRetryNode = hasRetryNode(nodeInfo.node_type) && nodeInfo.retryDetail
-  const handleOnShowIterationDetail = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation()
-    e.nativeEvent.stopImmediatePropagation()
-    onShowIterationDetail?.(nodeInfo.details || [], nodeInfo?.iterDurationMap || nodeInfo.execution_metadata?.iteration_duration_map || {})
-  }
-  const handleOnShowRetryDetail = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation()
-    e.nativeEvent.stopImmediatePropagation()
-    onShowRetryDetail?.(nodeInfo.retryDetail || [])
-  }
+
   return (
     <div className={cn('px-2 py-1', className)}>
       <div className='group transition-all bg-background-default border border-components-panel-border rounded-[10px] shadow-xs hover:shadow-md'>
@@ -153,45 +126,18 @@ const NodePanel: FC<Props> = ({
         {!collapseState && !hideProcessDetail && (
           <div className='px-1 pb-1'>
             {/* The nav to the iteration detail */}
-            {isIterationNode && !notShowIterationNav && (
-              <div className='mt-2 mb-1 !px-2'>
-                <Button
-                  className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
-                  onClick={handleOnShowIterationDetail}
-                >
-                  <Iteration className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
-                  <div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
-                    <>
-                      {t('workflow.nodes.iteration.comma')}
-                      {t('workflow.nodes.iteration.error', { count: getErrorCount(nodeInfo.details) })}
-                    </>
-                  )}</div>
-                  {justShowIterationNavArrow
-                    ? (
-                      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
-                    )
-                    : (
-                      <div className='flex items-center space-x-1 text-[#155EEF]'>
-                        <div className='text-[13px] font-normal '>{t('workflow.common.viewDetailInTracingPanel')}</div>
-                        <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
-                      </div>
-                    )}
-                </Button>
-                <Split className='mt-2' />
-              </div>
+            {isIterationNode && !notShowIterationNav && onShowIterationDetail && (
+              <IterationLogTrigger
+                nodeInfo={nodeInfo}
+                onShowIterationResultList={onShowIterationDetail}
+                justShowIterationNavArrow={justShowIterationNavArrow}
+              />
             )}
-            {isRetryNode && (
-              <Button
-                className='flex items-center justify-between mb-1 w-full'
-                variant='tertiary'
-                onClick={handleOnShowRetryDetail}
-              >
-                <div className='flex items-center'>
-                  <RiRestartFill className='mr-0.5 w-4 h-4 text-components-button-tertiary-text shrink-0' />
-                  {t('workflow.nodes.common.retry.retries', { num: nodeInfo.retryDetail?.length })}
-                </div>
-                <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
-              </Button>
+            {isRetryNode && onShowRetryDetail && (
+              <RetryLogTrigger
+                nodeInfo={nodeInfo}
+                onShowRetryResultList={onShowRetryDetail}
+              />
             )}
             <div className={cn('mb-1', hideInfo && '!px-2 !py-0.5')}>
               {(nodeInfo.status === 'stopped') && (
diff --git a/web/app/components/workflow/run/retry-log/index.tsx b/web/app/components/workflow/run/retry-log/index.tsx
new file mode 100644
index 0000000000..ee83f1a151
--- /dev/null
+++ b/web/app/components/workflow/run/retry-log/index.tsx
@@ -0,0 +1,2 @@
+export { default as RetryLogTrigger } from './retry-log-trigger'
+export { default as RetryResultPanel } from './retry-result-panel'
diff --git a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
new file mode 100644
index 0000000000..9c4a987c42
--- /dev/null
+++ b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowRightSLine,
+  RiRestartFill,
+} from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import type { NodeTracing } from '@/types/workflow'
+
+type RetryLogTriggerProps = {
+  nodeInfo: NodeTracing
+  onShowRetryResultList: (detail: NodeTracing[]) => void
+}
+const RetryLogTrigger = ({
+  nodeInfo,
+  onShowRetryResultList,
+}: RetryLogTriggerProps) => {
+  const { t } = useTranslation()
+  const { retryDetail } = nodeInfo
+
+  const handleShowRetryResultList = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+    onShowRetryResultList(retryDetail || [])
+  }
+
+  return (
+    <Button
+      className='flex items-center justify-between mb-1 w-full'
+      variant='tertiary'
+      onClick={handleShowRetryResultList}
+    >
+      <div className='flex items-center'>
+        <RiRestartFill className='mr-0.5 w-4 h-4 text-components-button-tertiary-text shrink-0' />
+        {t('workflow.nodes.common.retry.retries', { num: retryDetail?.length })}
+      </div>
+      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
+    </Button>
+  )
+}
+
+export default RetryLogTrigger
diff --git a/web/app/components/workflow/run/retry-result-panel.tsx b/web/app/components/workflow/run/retry-log/retry-result-panel.tsx
similarity index 96%
rename from web/app/components/workflow/run/retry-result-panel.tsx
rename to web/app/components/workflow/run/retry-log/retry-result-panel.tsx
index 3b177b1623..a8d171a4fc 100644
--- a/web/app/components/workflow/run/retry-result-panel.tsx
+++ b/web/app/components/workflow/run/retry-log/retry-result-panel.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import {
   RiArrowLeftLine,
 } from '@remixicon/react'
-import TracingPanel from './tracing-panel'
+import TracingPanel from '../tracing-panel'
 import type { NodeTracing } from '@/types/workflow'
 
 type Props = {
diff --git a/web/app/components/workflow/run/special-result-panel.tsx b/web/app/components/workflow/run/special-result-panel.tsx
index c8918e897e..1098e20165 100644
--- a/web/app/components/workflow/run/special-result-panel.tsx
+++ b/web/app/components/workflow/run/special-result-panel.tsx
@@ -1,5 +1,5 @@
-import RetryResultPanel from './retry-result-panel'
-import IterationResultPanel from './iteration-result-panel'
+import { RetryResultPanel } from './retry-log'
+import { IterationResultPanel } from './iteration-log'
 import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 
 type SpecialResultPanelProps = {