Feat/iteration single run time (#10512)

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

@@ -13,7 +13,7 @@ import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'
-import type { NodeTracing } from '@/types/workflow'
+import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 import type { WorkflowRunDetailResponse } from '@/models/log'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
@@ -172,15 +172,17 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
   }, [loading])
 
   const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
+  const [iterDurationMap, setIterDurationMap] = useState<IterationDurationMap>({})
   const [isShowIterationDetail, {
     setTrue: doShowIterationDetail,
     setFalse: doHideIterationDetail,
   }] = useBoolean(false)
 
-  const handleShowIterationDetail = useCallback((detail: NodeTracing[][]) => {
+  const handleShowIterationDetail = useCallback((detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => {
     setIterationRunResult(detail)
     doShowIterationDetail()
-  }, [doShowIterationDetail])
+    setIterDurationMap(iterDurationMap)
+  }, [doShowIterationDetail, setIterationRunResult, setIterDurationMap])
 
   if (isShowIterationDetail) {
     return (
@@ -189,6 +191,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
           list={iterationRunResult}
           onHide={doHideIterationDetail}
           onBack={doHideIterationDetail}
+          iterDurationMap={iterDurationMap}
         />
       </div>
     )

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

@@ -6,12 +6,14 @@ import {
   RiArrowRightSLine,
   RiCloseLine,
   RiErrorWarningLine,
+  RiLoader2Line,
 } from '@remixicon/react'
 import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
+import { NodeRunningStatus } from '../types'
 import TracingPanel from './tracing-panel'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
 import cn from '@/utils/classnames'
-import type { NodeTracing } from '@/types/workflow'
+import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 const i18nPrefix = 'workflow.singleRun'
 
 type Props = {
@@ -19,6 +21,7 @@ type Props = {
   onHide: () => void
   onBack: () => void
   noWrap?: boolean
+  iterDurationMap?: IterationDurationMap
 }
 
 const IterationResultPanel: FC<Props> = ({
@@ -26,6 +29,7 @@ const IterationResultPanel: FC<Props> = ({
   onHide,
   onBack,
   noWrap,
+  iterDurationMap,
 }) => {
   const { t } = useTranslation()
   const [expandedIterations, setExpandedIterations] = useState<Record<number, boolean>>({})
@@ -36,6 +40,40 @@ const IterationResultPanel: FC<Props> = ({
       [index]: !prev[index],
     }))
   }, [])
+  const countIterDuration = (iteration: NodeTracing[], iterDurationMap: IterationDurationMap): string => {
+    const IterRunIndex = iteration[0].execution_metadata.iteration_index as number
+    const iterRunId = iteration[0].execution_metadata.parallel_mode_run_id
+    const iterItem = iterDurationMap[iterRunId || IterRunIndex]
+    const duration = iterItem
+    return `${(duration && duration > 0.01) ? duration.toFixed(2) : 0.01}s`
+  }
+  const iterationStatusShow = (index: number, iteration: NodeTracing[], iterDurationMap?: IterationDurationMap) => {
+    const hasFailed = iteration.some(item => item.status === NodeRunningStatus.Failed)
+    const isRunning = iteration.some(item => item.status === NodeRunningStatus.Running)
+    const hasDurationMap = iterDurationMap && Object.keys(iterDurationMap).length !== 0
+
+    if (hasFailed)
+      return <RiErrorWarningLine className='w-4 h-4 text-text-destructive' />
+
+    if (isRunning)
+      return <RiLoader2Line className='w-3.5 h-3.5 text-primary-600 animate-spin' />
+
+    return (
+      <>
+        {hasDurationMap && (
+          <div className='system-xs-regular text-text-tertiary'>
+            {countIterDuration(iteration, iterDurationMap)}
+          </div>
+        )}
+        <RiArrowRightSLine
+          className={cn(
+            'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
+            expandedIterations[index] && 'transform rotate-90',
+          )}
+        />
+      </>
+    )
+  }
 
   const main = (
     <>
@@ -72,19 +110,7 @@ const IterationResultPanel: FC<Props> = ({
                 <span className='system-sm-semibold-uppercase text-text-primary flex-grow'>
                   {t(`${i18nPrefix}.iteration`)} {index + 1}
                 </span>
-                {
-                  iteration.some(item => item.status === 'failed')
-                    ? (
-                      <RiErrorWarningLine className='w-4 h-4 text-text-destructive' />
-                    )
-                    : (< RiArrowRightSLine className={
-                      cn(
-                        'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
-                        expandedIterations[index] && 'transform rotate-90',
-                      )} />
-                    )
-                }
-
+                {iterationStatusShow(index, iteration, iterDurationMap)}
               </div>
             </div>
             {expandedIterations[index] && <div

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

@@ -18,7 +18,7 @@ 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 { NodeTracing } from '@/types/workflow'
+import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 
 type Props = {
   className?: string
@@ -26,7 +26,7 @@ type Props = {
   inMessage?: boolean
   hideInfo?: boolean
   hideProcessDetail?: boolean
-  onShowIterationDetail?: (detail: NodeTracing[][]) => void
+  onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
   notShowIterationNav?: boolean
   justShowIterationNavArrow?: boolean
 }
@@ -90,7 +90,7 @@ const NodePanel: FC<Props> = ({
   const handleOnShowIterationDetail = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
     e.nativeEvent.stopImmediatePropagation()
-    onShowIterationDetail?.(nodeInfo.details || [])
+    onShowIterationDetail?.(nodeInfo.details || [], nodeInfo?.iterDurationMap || nodeInfo.execution_metadata?.iteration_duration_map || {})
   }
   return (
     <div className={cn('px-2 py-1', className)}>

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

@@ -16,11 +16,11 @@ import NodePanel from './node'
 import {
   BlockEnum,
 } from '@/app/components/workflow/types'
-import type { NodeTracing } from '@/types/workflow'
+import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 
 type TracingPanelProps = {
   list: NodeTracing[]
-  onShowIterationDetail?: (detail: NodeTracing[][]) => void
+  onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
   className?: string
   hideNodeInfo?: boolean
   hideNodeProcessDetail?: boolean