From 6f8e217580b09bec05230f2a51fff60661e3452a Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Fri, 27 Dec 2024 18:10:18 +0800
Subject: [PATCH] refact workflow run log

---
 .../components/before-run-form/index.tsx      | 29 +++-----
 .../components/workflow/nodes/http/panel.tsx  |  9 +--
 .../workflow/nodes/iteration/panel.tsx        | 42 ++----------
 .../components/workflow/nodes/llm/panel.tsx   |  9 +--
 .../components/workflow/nodes/tool/panel.tsx  |  9 +--
 web/app/components/workflow/run/node.tsx      |  4 --
 .../components/workflow/run/result-panel.tsx  | 68 ++++++++++++-------
 .../workflow/run/special-result-panel.tsx     | 26 +++----
 .../components/workflow/run/tracing-panel.tsx |  2 -
 9 files changed, 71 insertions(+), 127 deletions(-)

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 fe18290ebf..2fb873e604 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
@@ -17,10 +17,10 @@ import ResultPanel from '@/app/components/workflow/run/result-panel'
 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-log'
 import type { BlockEnum } from '@/app/components/workflow/types'
 import type { Emoji } from '@/app/components/tools/types'
+import type { SpecialResultPanelProps } from '@/app/components/workflow/run/special-result-panel'
+import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
 
 const i18nPrefix = 'workflow.singleRun'
 
@@ -34,9 +34,8 @@ type BeforeRunFormProps = {
   runningStatus: NodeRunningStatus
   result?: JSX.Element
   forms: FormProps[]
-  retryDetails?: NodeTracing[]
-  onRetryDetailBack?: any
-}
+  showSpecialResultPanel?: boolean
+} & Partial<SpecialResultPanelProps>
 
 function formatValue(value: string | any, type: InputVarType) {
   if (type === InputVarType.number)
@@ -66,8 +65,8 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
   runningStatus,
   result,
   forms,
-  retryDetails,
-  onRetryDetailBack = () => { },
+  showSpecialResultPanel,
+  ...restResultPanelParams
 }) => {
   const { t } = useTranslation()
 
@@ -141,24 +140,14 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
           </div>
         </div>
         {
-          retryDetails?.length && (
+          showSpecialResultPanel && (
             <div className='h-0 grow overflow-y-auto pb-4'>
-              <RetryResultPanel
-                list={retryDetails.map((item, index) => ({
-                  ...item,
-                  title: `${t('workflow.nodes.common.retry.retry')} ${index + 1}`,
-                  node_type: nodeType!,
-                  extras: {
-                    icon: toolIcon!,
-                  },
-                }))}
-                onBack={onRetryDetailBack}
-              />
+              <SpecialResultPanel {...restResultPanelParams} />
             </div>
           )
         }
         {
-          !retryDetails?.length && (
+          !showSpecialResultPanel && (
             <div className='h-0 grow overflow-y-auto pb-4'>
               <div className='mt-3 px-4 space-y-4'>
                 {forms.map((form, index) => (
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 91b3a6140d..8f2b901a84 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -18,7 +18,6 @@ import { FileArrow01 } from '@/app/components/base/icons/src/vender/line/files'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
-import { useRetryDetailShowInSingleRun } from '@/app/components/workflow/nodes/_base/components/retry/hooks'
 
 const i18nPrefix = 'workflow.nodes.http'
 
@@ -61,10 +60,6 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
     hideCurlPanel,
     handleCurlImport,
   } = useConfig(id, data)
-  const {
-    retryDetails,
-    handleRetryDetailsChange,
-  } = useRetryDetailShowInSingleRun()
   // To prevent prompt editor in body not update data.
   if (!isDataReady)
     return null
@@ -198,9 +193,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           runningStatus={runningStatus}
           onRun={handleRun}
           onStop={handleStop}
-          retryDetails={retryDetails}
-          onRetryDetailBack={handleRetryDetailsChange}
-          result={<ResultPanel {...runResult} showSteps={false} onShowRetryDetail={handleRetryDetailsChange} />}
+          result={<ResultPanel {...runResult} showSteps={false} />}
         />
       )}
       {(isShowCurlPanel && !readOnly) && (
diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index 89f4d59734..5dcd3e0c92 100644
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/web/app/components/workflow/nodes/iteration/panel.tsx
@@ -15,10 +15,7 @@ import Select from '@/app/components/base/select'
 import Slider from '@/app/components/base/slider'
 import Input from '@/app/components/base/input'
 import formatTracing from '@/app/components/workflow/run/utils/format-log'
-import {
-  IterationLogTrigger,
-  IterationResultPanel,
-} from '@/app/components/workflow/run/iteration-log'
+
 import { useLogs } from '@/app/components/workflow/run/hooks'
 
 const i18nPrefix = 'workflow.nodes.iteration'
@@ -69,12 +66,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
   } = useConfig(id, data)
 
   const nodeInfo = formatTracing(iterationRunResult, t)[0]
-  const {
-    showIteratingDetail,
-    iterationResultList,
-    setShowIteratingDetailFalse,
-    handleShowIterationResultList,
-  } = useLogs()
+  const logsParams = useLogs()
 
   return (
     <div className='pt-2 pb-2'>
@@ -170,35 +162,9 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
           runningStatus={runningStatus}
           onRun={handleRun}
           onStop={handleStop}
+          {...logsParams}
           result={
-            <div className='mt-3'>
-              {
-                !showIteratingDetail && (
-                  <>
-                    {
-                      nodeInfo && (
-                        <div className='px-4'>
-                          <IterationLogTrigger
-                            nodeInfo={nodeInfo}
-                            onShowIterationResultList={handleShowIterationResultList}
-                          />
-                          <Split className='mt-3' />
-                        </div>
-                      )
-                    }
-                    <ResultPanel {...runResult} showSteps={false} />
-                  </>
-                )
-              }
-              {
-                showIteratingDetail && (
-                  <IterationResultPanel
-                    list={iterationResultList}
-                    onBack={setShowIteratingDetailFalse}
-                  />
-                )
-              }
-            </div>
+            <ResultPanel {...runResult} showSteps={false} nodeInfo={nodeInfo} {...logsParams} />
           }
         />
       )}
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 60f68d93e2..cc0f1c18f4 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -19,7 +19,6 @@ import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/c
 import ResultPanel from '@/app/components/workflow/run/result-panel'
 import Tooltip from '@/app/components/base/tooltip'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
-import { useRetryDetailShowInSingleRun } from '@/app/components/workflow/nodes/_base/components/retry/hooks'
 
 const i18nPrefix = 'workflow.nodes.llm'
 
@@ -70,10 +69,6 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
     runResult,
     filterJinjia2InputVar,
   } = useConfig(id, data)
-  const {
-    retryDetails,
-    handleRetryDetailsChange,
-  } = useRetryDetailShowInSingleRun()
 
   const model = inputs.model
 
@@ -293,9 +288,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
           runningStatus={runningStatus}
           onRun={handleRun}
           onStop={handleStop}
-          retryDetails={retryDetails}
-          onRetryDetailBack={handleRetryDetailsChange}
-          result={<ResultPanel {...runResult} showSteps={false} onShowRetryDetail={handleRetryDetailsChange} />}
+          result={<ResultPanel {...runResult} showSteps={false} />}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index d93e5b8b5c..01dff077eb 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -14,7 +14,6 @@ import Loading from '@/app/components/base/loading'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
-import { useRetryDetailShowInSingleRun } from '@/app/components/workflow/nodes/_base/components/retry/hooks'
 import { useToolIcon } from '@/app/components/workflow/hooks'
 
 const i18nPrefix = 'workflow.nodes.tool'
@@ -52,10 +51,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     outputSchema,
   } = useConfig(id, data)
   const toolIcon = useToolIcon(data)
-  const {
-    retryDetails,
-    handleRetryDetailsChange,
-  } = useRetryDetailShowInSingleRun()
 
   if (isLoading) {
     return <div className='flex h-[200px] items-center justify-center'>
@@ -166,9 +161,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
           runningStatus={runningStatus}
           onRun={handleRun}
           onStop={handleStop}
-          retryDetails={retryDetails}
-          onRetryDetailBack={handleRetryDetailsChange}
-          result={<ResultPanel {...runResult} showSteps={false} onShowRetryDetail={handleRetryDetailsChange} />}
+          result={<ResultPanel {...runResult} showSteps={false} />}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 7cd5bb6e8b..b35e3d89bc 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -36,8 +36,6 @@ type Props = {
   onShowRetryDetail?: (detail: NodeTracing[]) => void
   onShowAgentResultList?: (detail: AgentLogItemWithChildren[]) => void
   notShowIterationNav?: boolean
-  justShowIterationNavArrow?: boolean
-  justShowRetryNavArrow?: boolean
 }
 
 const NodePanel: FC<Props> = ({
@@ -50,7 +48,6 @@ const NodePanel: FC<Props> = ({
   onShowRetryDetail,
   onShowAgentResultList,
   notShowIterationNav,
-  justShowIterationNavArrow,
 }) => {
   const [collapseState, doSetCollapseState] = useState<boolean>(true)
   const setCollapseState = useCallback((state: boolean) => {
@@ -138,7 +135,6 @@ const NodePanel: FC<Props> = ({
               <IterationLogTrigger
                 nodeInfo={nodeInfo}
                 onShowIterationResultList={onShowIterationDetail}
-                justShowIterationNavArrow={justShowIterationNavArrow}
               />
             )}
             {isRetryNode && onShowRetryDetail && (
diff --git a/web/app/components/workflow/run/result-panel.tsx b/web/app/components/workflow/run/result-panel.tsx
index 7448e4b7e1..ce86c73b9f 100644
--- a/web/app/components/workflow/run/result-panel.tsx
+++ b/web/app/components/workflow/run/result-panel.tsx
@@ -1,19 +1,20 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiArrowRightSLine,
-  RiRestartFill,
-} from '@remixicon/react'
 import StatusPanel from './status'
 import MetaData from './meta'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
 import type { NodeTracing } from '@/types/workflow'
-import Button from '@/app/components/base/button'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { hasRetryNode } from '@/app/components/workflow/utils'
+import { IterationLogTrigger } from '@/app/components/workflow/run/iteration-log'
+import { RetryLogTrigger } from '@/app/components/workflow/run/retry-log'
+import { AgentLogTrigger } from '@/app/components/workflow/run/agent-log'
 
-interface ResultPanelProps {
+type ResultPanelProps = {
+  nodeInfo?: NodeTracing
   inputs?: string
   process_data?: string
   outputs?: string
@@ -28,11 +29,13 @@ interface ResultPanelProps {
   showSteps?: boolean
   exceptionCounts?: number
   execution_metadata?: any
-  retry_events?: NodeTracing[]
-  onShowRetryDetail?: (retries: NodeTracing[]) => void
+  handleShowIterationResultList?: (detail: NodeTracing[][], iterDurationMap: any) => void
+  onShowRetryDetail?: (detail: NodeTracing[]) => void
+  onShowAgentResultList?: () => void
 }
 
 const ResultPanel: FC<ResultPanelProps> = ({
+  nodeInfo,
   inputs,
   process_data,
   outputs,
@@ -46,10 +49,14 @@ const ResultPanel: FC<ResultPanelProps> = ({
   showSteps,
   exceptionCounts,
   execution_metadata,
-  retry_events,
+  handleShowIterationResultList,
   onShowRetryDetail,
+  onShowAgentResultList,
 }) => {
   const { t } = useTranslation()
+  const isIterationNode = nodeInfo?.node_type === BlockEnum.Iteration
+  const isRetryNode = hasRetryNode(nodeInfo?.node_type) && nodeInfo?.retryDetail
+  const isAgentNode = nodeInfo?.node_type === BlockEnum.Agent
 
   return (
     <div className='bg-components-panel-bg py-2'>
@@ -62,23 +69,32 @@ const ResultPanel: FC<ResultPanelProps> = ({
           exceptionCounts={exceptionCounts}
         />
       </div>
-      {
-        retry_events?.length && onShowRetryDetail && (
-          <div className='px-4'>
-            <Button
-              className='flex items-center justify-between w-full'
-              variant='tertiary'
-              onClick={() => onShowRetryDetail(retry_events)}
-            >
-              <div className='flex items-center'>
-                <RiRestartFill className='mr-0.5 w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
-                {t('workflow.nodes.common.retry.retries', { num: retry_events?.length })}
-              </div>
-              <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
-            </Button>
-          </div>
-        )
-      }
+      <div className='px-4'>
+        {
+          isIterationNode && handleShowIterationResultList && (
+            <IterationLogTrigger
+              nodeInfo={nodeInfo}
+              onShowIterationResultList={handleShowIterationResultList}
+            />
+          )
+        }
+        {
+          isRetryNode && onShowRetryDetail && (
+            <RetryLogTrigger
+              nodeInfo={nodeInfo}
+              onShowRetryResultList={onShowRetryDetail}
+            />
+          )
+        }
+        {
+          isAgentNode && onShowAgentResultList && (
+            <AgentLogTrigger
+              nodeInfo={nodeInfo}
+              onShowAgentResultList={onShowAgentResultList}
+            />
+          )
+        }
+      </div>
       <div className='px-4 py-2 flex flex-col gap-2'>
         <CodeEditor
           readOnly
diff --git a/web/app/components/workflow/run/special-result-panel.tsx b/web/app/components/workflow/run/special-result-panel.tsx
index e761bb8374..4bf125b15e 100644
--- a/web/app/components/workflow/run/special-result-panel.tsx
+++ b/web/app/components/workflow/run/special-result-panel.tsx
@@ -7,18 +7,18 @@ import type {
   NodeTracing,
 } from '@/types/workflow'
 
-type SpecialResultPanelProps = {
-  showRetryDetail: boolean
-  setShowRetryDetailFalse: () => void
-  retryResultList: NodeTracing[]
+export type SpecialResultPanelProps = {
+  showRetryDetail?: boolean
+  setShowRetryDetailFalse?: () => void
+  retryResultList?: NodeTracing[]
 
-  showIteratingDetail: boolean
-  setShowIteratingDetailFalse: () => void
-  iterationResultList: NodeTracing[][]
-  iterationResultDurationMap: IterationDurationMap
+  showIteratingDetail?: boolean
+  setShowIteratingDetailFalse?: () => void
+  iterationResultList?: NodeTracing[][]
+  iterationResultDurationMap?: IterationDurationMap
 
-  agentResultList: AgentLogItemWithChildren[]
-  setAgentResultList: (list: AgentLogItemWithChildren[]) => void
+  agentResultList?: AgentLogItemWithChildren[]
+  setAgentResultList?: (list: AgentLogItemWithChildren[]) => void
 }
 const SpecialResultPanel = ({
   showRetryDetail,
@@ -36,7 +36,7 @@ const SpecialResultPanel = ({
   return (
     <>
       {
-        showRetryDetail && (
+        !!showRetryDetail && !!retryResultList?.length && setShowRetryDetailFalse && (
           <RetryResultPanel
             list={retryResultList}
             onBack={setShowRetryDetailFalse}
@@ -44,7 +44,7 @@ const SpecialResultPanel = ({
         )
       }
       {
-        showIteratingDetail && (
+        showIteratingDetail && !!iterationResultList?.length && setShowIteratingDetailFalse && (
           <IterationResultPanel
             list={iterationResultList}
             onBack={setShowIteratingDetailFalse}
@@ -53,7 +53,7 @@ const SpecialResultPanel = ({
         )
       }
       {
-        !!agentResultList.length && (
+        !!agentResultList?.length && setAgentResultList && (
           <AgentResultPanel
             list={agentResultList}
             setAgentResultList={setAgentResultList}
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 1d5f5459e8..29b8838825 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -137,8 +137,6 @@ const TracingPanel: FC<TracingPanelProps> = ({
             onShowIterationDetail={handleShowIterationResultList}
             onShowRetryDetail={handleShowRetryResultList}
             onShowAgentResultList={setAgentResultList}
-            justShowIterationNavArrow={true}
-            justShowRetryNavArrow={true}
             hideInfo={hideNodeInfo}
             hideProcessDetail={hideNodeProcessDetail}
           />