feat: workflow new nodes (#4683)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl>
Co-authored-by: Sebastian.W <thiner@gmail.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: takatost <takatost@users.noreply.github.com>
Co-authored-by: rechardwang <wh_goodjob@163.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Chenhe Gu <guchenhe@gmail.com>
Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com>
Co-authored-by: Weaxs <459312872@qq.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Vikey Chen <vikeytk@gmail.com>
Co-authored-by: wanghl <Wang-HL@users.noreply.github.com>
Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Bowen Liang <bowenliang@apache.org>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com>
Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn>
Co-authored-by: Matri <qjp@bithuman.io>
Co-authored-by: Benjamin <benjaminx@gmail.com>

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

@@ -4,9 +4,12 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { useBoolean } from 'ahooks'
+import { BlockEnum } from '../types'
 import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
+import IterationResultPanel from './iteration-result-panel'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'
@@ -19,9 +22,10 @@ export type RunProps = {
   activeTab?: 'RESULT' | 'DETAIL' | 'TRACING'
   runID: string
   getResultCallback?: (result: WorkflowRunDetailResponse) => void
+  onShowIterationDetail: (detail: NodeTracing[][]) => void
 }
 
-const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getResultCallback }) => {
+const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getResultCallback, onShowIterationDetail }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const [currentTab, setCurrentTab] = useState<string>(activeTab)
@@ -56,12 +60,76 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
     }
   }, [notify, getResultCallback])
 
+  const formatNodeList = useCallback((list: NodeTracing[]) => {
+    const allItems = list.reverse()
+    const result: NodeTracing[] = []
+    let iterationIndexInfos: {
+      start: number
+      end: number
+    }[] = []
+    allItems.forEach((item) => {
+      const { node_type, index, execution_metadata } = item
+      if (node_type !== BlockEnum.Iteration) {
+        let isInIteration = false
+        let isIterationFirstNode = false
+        iterationIndexInfos.forEach(({ start, end }) => {
+          if (index >= start && index < end) {
+            if (index === start)
+              isIterationFirstNode = true
+
+            isInIteration = true
+          }
+        })
+        if (isInIteration) {
+          const iterationDetails = result[result.length - 1].details!
+          if (isIterationFirstNode)
+            iterationDetails!.push([item])
+
+          else
+            iterationDetails[iterationDetails.length - 1].push(item)
+
+          return
+        }
+        // not in iteration
+        result.push(item)
+
+        return
+      }
+
+      const { steps_boundary } = execution_metadata
+      iterationIndexInfos = []
+      steps_boundary.forEach((boundary, index) => {
+        if (index === 0) {
+          iterationIndexInfos.push({
+            start: boundary,
+            end: 0,
+          })
+        }
+        else if (index === steps_boundary.length - 1) {
+          iterationIndexInfos[iterationIndexInfos.length - 1].end = boundary
+        }
+        else {
+          iterationIndexInfos[iterationIndexInfos.length - 1].end = boundary
+          iterationIndexInfos.push({
+            start: boundary,
+            end: 0,
+          })
+        }
+      })
+      result.push({
+        ...item,
+        details: [],
+      })
+    })
+    return result
+  }, [])
+
   const getTracingList = useCallback(async (appID: string, runID: string) => {
     try {
       const { data: nodeList } = await fetchTracingList({
         url: `/apps/${appID}/workflow-runs/${runID}/node-executions`,
       })
-      setList(nodeList.reverse())
+      setList(formatNodeList(nodeList))
     }
     catch (err) {
       notify({
@@ -103,6 +171,29 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
     adjustResultHeight()
   }, [loading])
 
+  const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
+  const [isShowIterationDetail, {
+    setTrue: doShowIterationDetail,
+    setFalse: doHideIterationDetail,
+  }] = useBoolean(false)
+
+  const handleShowIterationDetail = useCallback((detail: NodeTracing[][]) => {
+    setIterationRunResult(detail)
+    doShowIterationDetail()
+  }, [doShowIterationDetail])
+
+  if (isShowIterationDetail) {
+    return (
+      <div className='grow relative flex flex-col'>
+        <IterationResultPanel
+          list={iterationRunResult}
+          onHide={doHideIterationDetail}
+          onBack={doHideIterationDetail}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className='grow relative flex flex-col'>
       {/* tab */}
@@ -161,6 +252,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
         {!loading && currentTab === 'TRACING' && (
           <TracingPanel
             list={list}
+            onShowIterationDetail={handleShowIterationDetail}
           />
         )}
       </div>

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

@@ -0,0 +1,92 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
+import NodePanel from './node'
+import type { NodeTracing } from '@/types/workflow'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+const i18nPrefix = 'workflow.singleRun'
+
+type Props = {
+  list: NodeTracing[][]
+  onHide: () => void
+  onBack: () => void
+  noWrap?: boolean
+}
+
+const IterationResultPanel: FC<Props> = ({
+  list,
+  onHide,
+  onBack,
+  noWrap,
+}) => {
+  const { t } = useTranslation()
+
+  const main = (
+    <>
+      <div className={cn(!noWrap && 'shrink-0 ', 'pl-4 pr-3 pt-3')}>
+        <div className='shrink-0 flex justify-between items-center h-8'>
+          <div className='text-base font-semibold text-gray-900 truncate'>
+            {t(`${i18nPrefix}.testRunIteration`)}
+          </div>
+          <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
+            <XClose className='w-4 h-4 text-gray-500 ' />
+          </div>
+        </div>
+        <div className='flex items-center py-2 space-x-1 text-primary-600 cursor-pointer' onClick={onBack}>
+          <ArrowNarrowLeft className='w-4 h-4' />
+          <div className='leading-[18px] text-[13px] font-medium'>{t(`${i18nPrefix}.back`)}</div>
+        </div>
+      </div>
+      {/* List */}
+      <div className={cn(!noWrap ? 'h-0 grow' : 'max-h-full', 'overflow-y-auto px-4 pb-4 bg-gray-50')}>
+        {list.map((iteration, index) => (
+          <div key={index} className={cn('my-4', index === 0 && 'mt-2')}>
+            <div className='flex items-center'>
+              <div className='shrink-0 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{t(`${i18nPrefix}.iteration`)} {index + 1}</div>
+              <div
+                className='ml-3 grow w-0 h-px'
+                style={{ background: 'linear-gradient(to right, #F3F4F6, rgba(243, 244, 246, 0))' }}
+              ></div>
+            </div>
+            <div className='mt-0.5 space-y-1'>
+              {iteration.map(node => (
+                <NodePanel
+                  key={node.id}
+                  className='!px-0 !py-0'
+                  nodeInfo={node}
+                  notShowIterationNav
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+  const handleNotBubble = useCallback((e: React.MouseEvent) => {
+    // if not do this, it will trigger the message log modal disappear(useClickAway)
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+  }, [])
+
+  if (noWrap)
+    return main
+
+  return (
+    <div
+      className='absolute inset-0 z-10 rounded-2xl pt-10'
+      style={{
+        backgroundColor: 'rgba(16, 24, 40, 0.20)',
+      }}
+      onClick={handleNotBubble}
+    >
+      <div className='h-full rounded-2xl bg-white flex flex-col'>
+        {main}
+      </div>
+    </div >
+  )
+}
+export default React.memo(IterationResultPanel)

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

@@ -4,23 +4,33 @@ import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import cn from 'classnames'
 import BlockIcon from '../block-icon'
+import { BlockEnum } from '../types'
+import Split from '../nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { AlertCircle, AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { CheckCircle, Loading02 } from '@/app/components/base/icons/src/vender/line/general'
-import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { ArrowNarrowRight, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import type { NodeTracing } from '@/types/workflow'
 
 type Props = {
+  className?: string
   nodeInfo: NodeTracing
   hideInfo?: boolean
   hideProcessDetail?: boolean
+  onShowIterationDetail?: (detail: NodeTracing[][]) => void
+  notShowIterationNav?: boolean
+  justShowIterationNavArrow?: boolean
 }
 
 const NodePanel: FC<Props> = ({
+  className,
   nodeInfo,
   hideInfo = false,
   hideProcessDetail,
+  onShowIterationDetail,
+  notShowIterationNav,
+  justShowIterationNavArrow,
 }) => {
   const [collapseState, doSetCollapseState] = useState<boolean>(true)
   const setCollapseState = useCallback((state: boolean) => {
@@ -51,8 +61,14 @@ const NodePanel: FC<Props> = ({
     setCollapseState(!nodeInfo.expand)
   }, [nodeInfo.expand, setCollapseState])
 
+  const isIterationNode = nodeInfo.node_type === BlockEnum.Iteration
+  const handleOnShowIterationDetail = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+    onShowIterationDetail?.(nodeInfo.details || [])
+  }
   return (
-    <div className={cn('px-4 py-1', hideInfo && '!p-0')}>
+    <div className={cn('px-4 py-1', className, hideInfo && '!p-0')}>
       <div className={cn('group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md', hideInfo && '!rounded-lg')}>
         <div
           className={cn(
@@ -97,6 +113,27 @@ const NodePanel: FC<Props> = ({
         </div>
         {!collapseState && !hideProcessDetail && (
           <div className='pb-2'>
+            {/* The nav to the iteration detail */}
+            {isIterationNode && !notShowIterationNav && (
+              <div className='mt-2 mb-1 !px-2'>
+                <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={handleOnShowIterationDetail}>
+                  <div className='leading-[18px] text-[13px] font-medium text-gray-700'>{t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_length || (nodeInfo.execution_metadata?.steps_boundary?.length - 1) })}</div>
+                  {justShowIterationNavArrow
+                    ? (
+                      <ArrowNarrowRight className='w-3.5 h-3.5 text-gray-500' />
+                    )
+                    : (
+                      <div className='flex items-center space-x-1 text-[#155EEF]'>
+                        <div className='text-[13px] font-normal '>{t('workflow.common.viewDetailInTracingPanel')}</div>
+                        <ArrowNarrowRight className='w-3.5 h-3.5' />
+                      </div>
+                    )}
+                </div>
+                <Split className='mt-2' />
+              </div>
+            )}
             <div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
               {nodeInfo.status === 'stopped' && (
                 <div className='px-3 py-[10px] bg-[#fffaeb] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#dc6803] shadow-xs'>{t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}</div>

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

@@ -5,15 +5,18 @@ import type { NodeTracing } from '@/types/workflow'
 
 type TracingPanelProps = {
   list: NodeTracing[]
+  onShowIterationDetail: (detail: NodeTracing[][]) => void
 }
 
-const TracingPanel: FC<TracingPanelProps> = ({ list }) => {
+const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail }) => {
   return (
     <div className='bg-gray-50 py-2'>
       {list.map(node => (
         <NodePanel
           key={node.id}
           nodeInfo={node}
+          onShowIterationDetail={onShowIterationDetail}
+          justShowIterationNavArrow
         />
       ))}
     </div>