Feature/newnew workflow loop node (#14863)
Co-authored-by: arkunzz <4873204@qq.com>
This commit is contained in:
Wood
2
web/app/components/workflow/run/loop-log/index.tsx
Normal file
2
web/app/components/workflow/run/loop-log/index.tsx
Normal file
@@ -0,0 +1,2 @@
|
||||
export { default as LoopLogTrigger } from './loop-log-trigger'
|
||||
export { default as LoopResultPanel } from './loop-result-panel'
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowRightSLine } from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import type {
|
||||
LoopDurationMap,
|
||||
NodeTracing,
|
||||
} from '@/types/workflow'
|
||||
import { Loop } from '@/app/components/base/icons/src/vender/workflow'
|
||||
|
||||
type LoopLogTriggerProps = {
|
||||
nodeInfo: NodeTracing
|
||||
onShowLoopResultList: (loopResultList: NodeTracing[][], loopResultDurationMap: LoopDurationMap) => void
|
||||
}
|
||||
const LoopLogTrigger = ({
|
||||
nodeInfo,
|
||||
onShowLoopResultList,
|
||||
}: LoopLogTriggerProps) => {
|
||||
const { t } = useTranslation()
|
||||
const getErrorCount = (details: NodeTracing[][] | undefined) => {
|
||||
if (!details || details.length === 0)
|
||||
return 0
|
||||
|
||||
return details.reduce((acc, loop) => {
|
||||
if (loop.some(item => item.status === 'failed'))
|
||||
acc++
|
||||
return acc
|
||||
}, 0)
|
||||
}
|
||||
const getCount = (loop_curr_length: number | undefined, loop_length: number) => {
|
||||
if ((loop_curr_length && loop_curr_length < loop_length) || !loop_length)
|
||||
return loop_curr_length
|
||||
|
||||
return loop_length
|
||||
}
|
||||
const handleOnShowLoopDetail = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation()
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
onShowLoopResultList(nodeInfo.details || [], nodeInfo?.loopDurationMap || nodeInfo.execution_metadata?.loop_duration_map || {})
|
||||
}
|
||||
return (
|
||||
<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={handleOnShowLoopDetail}
|
||||
>
|
||||
<Loop 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.loop.loop', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.loop_length) })}{getErrorCount(nodeInfo.details) > 0 && (
|
||||
<>
|
||||
{t('workflow.nodes.loop.comma')}
|
||||
{t('workflow.nodes.loop.error', { count: getErrorCount(nodeInfo.details) })}
|
||||
</>
|
||||
)}</div>
|
||||
<RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default LoopLogTrigger
|
||||
128
web/app/components/workflow/run/loop-log/loop-result-panel.tsx
Normal file
128
web/app/components/workflow/run/loop-log/loop-result-panel.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiArrowLeftLine,
|
||||
RiArrowRightSLine,
|
||||
RiErrorWarningLine,
|
||||
RiLoader2Line,
|
||||
} from '@remixicon/react'
|
||||
import { NodeRunningStatus } from '@/app/components/workflow/types'
|
||||
import TracingPanel from '@/app/components/workflow/run/tracing-panel'
|
||||
import { Loop } from '@/app/components/base/icons/src/vender/workflow'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { LoopDurationMap, NodeTracing } from '@/types/workflow'
|
||||
const i18nPrefix = 'workflow.singleRun'
|
||||
|
||||
type Props = {
|
||||
list: NodeTracing[][]
|
||||
onBack: () => void
|
||||
loopDurationMap?: LoopDurationMap
|
||||
}
|
||||
|
||||
const LoopResultPanel: FC<Props> = ({
|
||||
list,
|
||||
onBack,
|
||||
loopDurationMap,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [expandedLoops, setExpandedLoops] = useState<Record<number, boolean>>({})
|
||||
|
||||
const toggleLoop = useCallback((index: number) => {
|
||||
setExpandedLoops(prev => ({
|
||||
...prev,
|
||||
[index]: !prev[index],
|
||||
}))
|
||||
}, [])
|
||||
|
||||
const countLoopDuration = (loop: NodeTracing[], loopDurationMap: LoopDurationMap): string => {
|
||||
const loopRunIndex = loop[0]?.execution_metadata?.loop_index as number
|
||||
const loopRunId = loop[0]?.execution_metadata?.parallel_mode_run_id
|
||||
const loopItem = loopDurationMap[loopRunId || loopRunIndex]
|
||||
const duration = loopItem
|
||||
return `${(duration && duration > 0.01) ? duration.toFixed(2) : 0.01}s`
|
||||
}
|
||||
|
||||
const loopStatusShow = (index: number, loop: NodeTracing[], loopDurationMap?: LoopDurationMap) => {
|
||||
const hasFailed = loop.some(item => item.status === NodeRunningStatus.Failed)
|
||||
const isRunning = loop.some(item => item.status === NodeRunningStatus.Running)
|
||||
const hasDurationMap = loopDurationMap && Object.keys(loopDurationMap).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'>
|
||||
{countLoopDuration(loop, loopDurationMap)}
|
||||
</div>
|
||||
)}
|
||||
<RiArrowRightSLine
|
||||
className={cn(
|
||||
'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
|
||||
expandedLoops[index] && 'transform rotate-90',
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='bg-components-panel-bg'>
|
||||
<div
|
||||
className='flex items-center px-4 h-8 text-text-accent-secondary cursor-pointer border-b-[0.5px] border-b-divider-regular'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
onBack()
|
||||
}}
|
||||
>
|
||||
<RiArrowLeftLine className='mr-1 w-4 h-4' />
|
||||
<div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
|
||||
</div>
|
||||
{/* List */}
|
||||
<div className='p-2 bg-components-panel-bg'>
|
||||
{list.map((loop, index) => (
|
||||
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-between w-full px-3 cursor-pointer',
|
||||
expandedLoops[index] ? 'pt-3 pb-2' : 'py-3',
|
||||
'rounded-xl text-left',
|
||||
)}
|
||||
onClick={() => toggleLoop(index)}
|
||||
>
|
||||
<div className={cn('flex items-center gap-2 flex-grow')}>
|
||||
<div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 shrink-0'>
|
||||
<Loop className='w-3 h-3 text-text-primary-on-surface' />
|
||||
</div>
|
||||
<span className='system-sm-semibold-uppercase text-text-primary grow'>
|
||||
{t(`${i18nPrefix}.loop`)} {index + 1}
|
||||
</span>
|
||||
{loopStatusShow(index, loop, loopDurationMap)}
|
||||
</div>
|
||||
</div>
|
||||
{expandedLoops[index] && <div
|
||||
className="grow h-px bg-divider-subtle"
|
||||
></div>}
|
||||
<div className={cn(
|
||||
'overflow-hidden transition-all duration-200',
|
||||
expandedLoops[index] ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0',
|
||||
)}>
|
||||
<TracingPanel
|
||||
list={loop}
|
||||
className='bg-background-section-burn'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(LoopResultPanel)
|
||||
Reference in New Issue
Block a user