refact workflow run log

web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts

@@ -142,7 +142,7 @@ const useOneStepRun = <T>({
   const { handleNodeDataUpdate }: { handleNodeDataUpdate: (data: any) => void } = useNodeDataUpdate()
   const [canShowSingleRun, setCanShowSingleRun] = useState(false)
   const isShowSingleRun = data._isSingleRun && canShowSingleRun
-  const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
+  const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[]>([])
 
   useEffect(() => {
     if (!checkValid) {
@@ -173,7 +173,7 @@ const useOneStepRun = <T>({
   const workflowStore = useWorkflowStore()
   useEffect(() => {
     workflowStore.getState().setShowSingleRunPanel(!!isShowSingleRun)
-  }, [isShowSingleRun])
+  }, [isShowSingleRun, workflowStore])
 
   const hideSingleRun = () => {
     handleNodeDataUpdate({
@@ -211,7 +211,7 @@ const useOneStepRun = <T>({
       }
       else {
         setIterationRunResult([])
-        let _iterationResult: NodeTracing[][] = []
+        let _iterationResult: NodeTracing[] = []
         let _runResult: any = null
         ssePost(
           getIterationSingleNodeRunUrl(isChatMode, appId!, id),
@@ -231,27 +231,43 @@ const useOneStepRun = <T>({
               _runResult.created_by = iterationData.created_by.name
               setRunResult(_runResult)
             },
-            onIterationNext: () => {
-              // iteration next trigger time is triggered one more time than iterationTimes
-              if (_iterationResult.length >= iterationTimes!)
-                return
-
+            onIterationStart: (params) => {
               const newIterationRunResult = produce(_iterationResult, (draft) => {
-                draft.push([])
+                draft.push({
+                  ...params.data,
+                  status: NodeRunningStatus.Running,
+                })
               })
               _iterationResult = newIterationRunResult
               setIterationRunResult(newIterationRunResult)
             },
+            onIterationNext: () => {
+              // iteration next trigger time is triggered one more time than iterationTimes
+              if (_iterationResult.length >= iterationTimes!)
+                return _iterationResult.length >= iterationTimes!
+            },
             onIterationFinish: (params) => {
               _runResult = params.data
               setRunResult(_runResult)
+              const iterationRunResult = _iterationResult
+              const currentIndex = iterationRunResult.findIndex(trace => trace.id === params.data.id)
+              const newIterationRunResult = produce(iterationRunResult, (draft) => {
+                if (currentIndex > -1) {
+                  draft[currentIndex] = {
+                    ...draft[currentIndex],
+                    ...data,
+                  }
+                }
+              })
+              _iterationResult = newIterationRunResult
+              setIterationRunResult(newIterationRunResult)
             },
             onNodeStarted: (params) => {
               const newIterationRunResult = produce(_iterationResult, (draft) => {
-                draft[draft.length - 1].push({
+                draft.push({
                   ...params.data,
                   status: NodeRunningStatus.Running,
-                } as NodeTracing)
+                })
               })
               _iterationResult = newIterationRunResult
               setIterationRunResult(newIterationRunResult)
@@ -260,18 +276,25 @@ const useOneStepRun = <T>({
               const iterationRunResult = _iterationResult
 
               const { data } = params
-              const currentIndex = iterationRunResult[iterationRunResult.length - 1].findIndex(trace => trace.node_id === data.node_id)
+              const currentIndex = iterationRunResult.findIndex(trace => trace.id === data.id)
               const newIterationRunResult = produce(iterationRunResult, (draft) => {
                 if (currentIndex > -1) {
-                  draft[draft.length - 1][currentIndex] = {
+                  draft[currentIndex] = {
+                    ...draft[currentIndex],
                     ...data,
-                    status: NodeRunningStatus.Succeeded,
-                  } as NodeTracing
+                  }
                 }
               })
               _iterationResult = newIterationRunResult
               setIterationRunResult(newIterationRunResult)
             },
+            onNodeRetry: (params) => {
+              const newIterationRunResult = produce(_iterationResult, (draft) => {
+                draft.push(params.data)
+              })
+              _iterationResult = newIterationRunResult
+              setIterationRunResult(newIterationRunResult)
+            },
             onError: () => {
               handleNodeDataUpdate({
                 id,

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

@@ -1,13 +1,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiArrowRightSLine,
-} from '@remixicon/react'
 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-log'
 import { MAX_ITERATION_PARALLEL_NUM, MIN_ITERATION_PARALLEL_NUM } from '../../constants'
 import type { IterationNodeType } from './types'
 import useConfig from './use-config'
@@ -18,6 +14,12 @@ import Switch from '@/app/components/base/switch'
 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'
 
@@ -50,9 +52,6 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
     handleOutputVarChange,
     isShowSingleRun,
     hideSingleRun,
-    isShowIterationDetail,
-    backToSingleRun,
-    showIterationDetail,
     runningStatus,
     handleRun,
     handleStop,
@@ -69,6 +68,14 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
     changeParallelNums,
   } = useConfig(id, data)
 
+  const nodeInfo = formatTracing(iterationRunResult, t)[0]
+  const {
+    showIteratingDetail,
+    iterationResultList,
+    setShowIteratingDetailFalse,
+    handleShowIterationResultList,
+  } = useLogs()
+
   return (
     <div className='pt-2 pb-2'>
       <div className='px-4 pb-4 space-y-4'>
@@ -165,24 +172,36 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
           onStop={handleStop}
           result={
             <div className='mt-3'>
-              <div className='px-4'>
-                <div className='flex items-center h-[34px] justify-between px-3 bg-gray-100 border-[0.5px] border-gray-200 rounded-lg cursor-pointer' onClick={showIterationDetail}>
-                  <div className='leading-[18px] text-[13px] font-medium text-gray-700'>{t(`${i18nPrefix}.iteration`, { count: iterationRunResult.length })}</div>
-                  <RiArrowRightSLine className='w-3.5 h-3.5 text-gray-500' />
-                </div>
-                <Split className='mt-3' />
-              </div>
-              <ResultPanel {...runResult} showSteps={false} />
+              {
+                !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>
           }
         />
       )}
-      {isShowIterationDetail && (
-        <IterationResultPanel
-          onBack={backToSingleRun}
-          list={iterationRunResult}
-        />
-      )}
     </div>
   )
 }

web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx

@@ -6,17 +6,14 @@ import type {
   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) => {
@@ -41,31 +38,19 @@ const IterationLogTrigger = ({
     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>
+    <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>
+      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
+    </Button>
   )
 }