update the parallel workflow log for iteration and chatflow preview

This commit is contained in:
Yi
2024-08-29 17:26:17 +08:00
parent 3e257ae907
commit 32a11cbb6a
4 changed files with 28 additions and 38 deletions

View File

@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { RiCloseLine } from '@remixicon/react'
import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
import NodePanel from './node'
import TracingPanel from './tracing-panel'
import cn from '@/utils/classnames'
import type { NodeTracing } from '@/types/workflow'
const i18nPrefix = 'workflow.singleRun'
@ -32,10 +32,10 @@ const IterationResultPanel: FC<Props> = ({
{t(`${i18nPrefix}.testRunIteration`)}
</div>
<div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
<RiCloseLine className='w-4 h-4 text-gray-500 ' />
<RiCloseLine className='w-4 h-4 text-text-tertiary ' />
</div>
</div>
<div className='flex items-center py-2 space-x-1 text-primary-600 cursor-pointer' onClick={onBack}>
<div className='flex items-center py-2 space-x-1 text-text-accent cursor-pointer' onClick={onBack}>
<ArrowNarrowLeft className='w-4 h-4' />
<div className='leading-[18px] text-[13px] font-medium'>{t(`${i18nPrefix}.back`)}</div>
</div>
@ -43,25 +43,10 @@ const IterationResultPanel: FC<Props> = ({
{/* 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>
<TracingPanel
list={iteration}
key={index}
/>
))}
</div>
</>

View File

@ -12,11 +12,14 @@ import {
RiMenu4Line,
} from '@remixicon/react'
import NodePanel from './node'
import {
BlockEnum,
} from '@/app/components/workflow/types'
import type { NodeTracing } from '@/types/workflow'
type TracingPanelProps = {
list: NodeTracing[]
onShowIterationDetail: (detail: NodeTracing[][]) => void
onShowIterationDetail?: (detail: NodeTracing[][]) => void
}
type TracingNodeProps = {
@ -72,9 +75,14 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
}
for (const node of nodes) {
const parallel_id = node.execution_metadata?.parallel_id ?? null
let parallel_id = node.execution_metadata?.parallel_id ?? null
const parent_parallel_id = node.execution_metadata?.parent_parallel_id ?? null
const parallel_start_node_id = node.execution_metadata?.parallel_start_node_id ?? null
let parallel_start_node_id = node.execution_metadata?.parallel_start_node_id ?? null
if (node.node_type === BlockEnum.Iteration) {
parallel_id = node.parallel_id ?? null
parallel_start_node_id = node.parallel_start_node_id ?? null
}
if (!parallel_id) {
rootNodes.push({
@ -173,7 +181,10 @@ const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail }) =>
<div className="system-xs-semibold-uppercase text-text-secondary flex items-center">
<span>{node.parallelTitle}</span>
</div>
<div className="mx-2 flex-grow h-px bg-divider-subtle"></div>
<div
className="mx-2 flex-grow h-px bg-divider-subtle"
style={{ background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08), rgba(255, 255, 255, 0)' }}
></div>
</div>
<div className={`pl-2 relative ${isCollapsed ? 'hidden' : ''}`}>
<div className={cn(