Feat/workflow retry (#11885)

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

@@ -9,6 +9,7 @@ import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
 import IterationResultPanel from './iteration-result-panel'
+import RetryResultPanel from './retry-result-panel'
 import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
@@ -107,6 +108,18 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
     const processNonIterationNode = (item: NodeTracing) => {
       const { execution_metadata } = item
       if (!execution_metadata?.iteration_id) {
+        if (item.status === 'retry') {
+          const retryNode = result.find(node => node.node_id === item.node_id)
+
+          if (retryNode) {
+            if (retryNode?.retryDetail)
+              retryNode.retryDetail.push(item)
+            else
+              retryNode.retryDetail = [item]
+          }
+
+          return
+        }
         result.push(item)
         return
       }
@@ -181,10 +194,15 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
 
   const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
   const [iterDurationMap, setIterDurationMap] = useState<IterationDurationMap>({})
+  const [retryRunResult, setRetryRunResult] = useState<NodeTracing[]>([])
   const [isShowIterationDetail, {
     setTrue: doShowIterationDetail,
     setFalse: doHideIterationDetail,
   }] = useBoolean(false)
+  const [isShowRetryDetail, {
+    setTrue: doShowRetryDetail,
+    setFalse: doHideRetryDetail,
+  }] = useBoolean(false)
 
   const handleShowIterationDetail = useCallback((detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => {
     setIterationRunResult(detail)
@@ -192,6 +210,11 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
     setIterDurationMap(iterDurationMap)
   }, [doShowIterationDetail, setIterationRunResult, setIterDurationMap])
 
+  const handleShowRetryDetail = useCallback((detail: NodeTracing[]) => {
+    setRetryRunResult(detail)
+    doShowRetryDetail()
+  }, [doShowRetryDetail, setRetryRunResult])
+
   if (isShowIterationDetail) {
     return (
       <div className='grow relative flex flex-col'>
@@ -261,13 +284,22 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
             exceptionCounts={runDetail.exceptions_count}
           />
         )}
-        {!loading && currentTab === 'TRACING' && (
+        {!loading && currentTab === 'TRACING' && !isShowRetryDetail && (
           <TracingPanel
             className='bg-background-section-burn'
             list={list}
             onShowIterationDetail={handleShowIterationDetail}
+            onShowRetryDetail={handleShowRetryDetail}
           />
         )}
+        {
+          !loading && currentTab === 'TRACING' && isShowRetryDetail && (
+            <RetryResultPanel
+              list={retryRunResult}
+              onBack={doHideRetryDetail}
+            />
+          )
+        }
       </div>
     </div>
   )

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

@@ -8,6 +8,7 @@ import {
   RiCheckboxCircleFill,
   RiErrorWarningLine,
   RiLoader2Line,
+  RiRestartFill,
 } from '@remixicon/react'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
@@ -20,6 +21,7 @@ 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'
+import { hasRetryNode } from '@/app/components/workflow/utils'
 
 type Props = {
   className?: string
@@ -28,8 +30,10 @@ type Props = {
   hideInfo?: boolean
   hideProcessDetail?: boolean
   onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
+  onShowRetryDetail?: (detail: NodeTracing[]) => void
   notShowIterationNav?: boolean
   justShowIterationNavArrow?: boolean
+  justShowRetryNavArrow?: boolean
 }
 
 const NodePanel: FC<Props> = ({
@@ -39,6 +43,7 @@ const NodePanel: FC<Props> = ({
   hideInfo = false,
   hideProcessDetail,
   onShowIterationDetail,
+  onShowRetryDetail,
   notShowIterationNav,
   justShowIterationNavArrow,
 }) => {
@@ -88,11 +93,17 @@ const NodePanel: FC<Props> = ({
   }, [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'>
@@ -169,6 +180,19 @@ const NodePanel: FC<Props> = ({
                 <Split className='mt-2' />
               </div>
             )}
+            {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 flex-shrink-0' />
+                  {t('workflow.nodes.common.retry.retries', { num: nodeInfo.retryDetail?.length })}
+                </div>
+                <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+              </Button>
+            )}
             <div className={cn('mb-1', hideInfo && '!px-2 !py-0.5')}>
               {(nodeInfo.status === 'stopped') && (
                 <StatusContainer status='stopped'>

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

@@ -1,11 +1,17 @@
 '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'
 
 type ResultPanelProps = {
   inputs?: string
@@ -22,6 +28,8 @@ type ResultPanelProps = {
   showSteps?: boolean
   exceptionCounts?: number
   execution_metadata?: any
+  retry_events?: NodeTracing[]
+  onShowRetryDetail?: (retries: NodeTracing[]) => void
 }
 
 const ResultPanel: FC<ResultPanelProps> = ({
@@ -38,8 +46,11 @@ const ResultPanel: FC<ResultPanelProps> = ({
   showSteps,
   exceptionCounts,
   execution_metadata,
+  retry_events,
+  onShowRetryDetail,
 }) => {
   const { t } = useTranslation()
+
   return (
     <div className='bg-components-panel-bg py-2'>
       <div className='px-4 py-2'>
@@ -51,6 +62,23 @@ 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 py-2 flex flex-col gap-2'>
         <CodeEditor
           readOnly

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

@@ -0,0 +1,46 @@
+'use client'
+
+import type { FC } from 'react'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowLeftLine,
+} from '@remixicon/react'
+import TracingPanel from './tracing-panel'
+import type { NodeTracing } from '@/types/workflow'
+
+type Props = {
+  list: NodeTracing[]
+  onBack: () => void
+}
+
+const RetryResultPanel: FC<Props> = ({
+  list,
+  onBack,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <div
+        className='flex items-center px-4 h-8 text-text-accent-secondary bg-components-panel-bg system-sm-medium cursor-pointer'
+        onClick={(e) => {
+          e.stopPropagation()
+          e.nativeEvent.stopImmediatePropagation()
+          onBack()
+        }}
+      >
+        <RiArrowLeftLine className='mr-1 w-4 h-4' />
+        {t('workflow.singleRun.back')}
+      </div>
+      <TracingPanel
+        list={list.map((item, index) => ({
+          ...item,
+          title: `${t('workflow.nodes.common.retry.retry')} ${index + 1}`,
+        }))}
+        className='bg-background-section-burn'
+      />
+    </div >
+  )
+}
+export default memo(RetryResultPanel)

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

@@ -21,6 +21,7 @@ import type { IterationDurationMap, 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,6 +161,7 @@ function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): Tracing
 const TracingPanel: FC<TracingPanelProps> = ({
   list,
   onShowIterationDetail,
+  onShowRetryDetail,
   className,
   hideNodeInfo = false,
   hideNodeProcessDetail = false,
@@ -251,7 +253,9 @@ const TracingPanel: FC<TracingPanelProps> = ({
           <NodePanel
             nodeInfo={node.data!}
             onShowIterationDetail={onShowIterationDetail}
+            onShowRetryDetail={onShowRetryDetail}
             justShowIterationNavArrow={true}
+            justShowRetryNavArrow={true}
             hideInfo={hideNodeInfo}
             hideProcessDetail={hideNodeProcessDetail}
           />