dify
This commit is contained in:
2
dify/web/app/components/workflow/run/loop-log/index.tsx
Normal file
2
dify/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,108 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowRightSLine } from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import type {
|
||||
LoopDurationMap,
|
||||
LoopVariableMap,
|
||||
NodeTracing,
|
||||
} from '@/types/workflow'
|
||||
import { Loop } from '@/app/components/base/icons/src/vender/workflow'
|
||||
|
||||
type LoopLogTriggerProps = {
|
||||
nodeInfo: NodeTracing
|
||||
allExecutions?: NodeTracing[]
|
||||
onShowLoopResultList: (loopResultList: NodeTracing[][], loopResultDurationMap: LoopDurationMap, loopVariableMap: LoopVariableMap) => void
|
||||
}
|
||||
const LoopLogTrigger = ({
|
||||
nodeInfo,
|
||||
allExecutions,
|
||||
onShowLoopResultList,
|
||||
}: LoopLogTriggerProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const filterNodesForInstance = (key: string): NodeTracing[] => {
|
||||
if (!allExecutions) return []
|
||||
|
||||
const parallelNodes = allExecutions.filter(exec =>
|
||||
exec.execution_metadata?.parallel_mode_run_id === key,
|
||||
)
|
||||
if (parallelNodes.length > 0)
|
||||
return parallelNodes
|
||||
|
||||
const serialIndex = Number.parseInt(key, 10)
|
||||
if (!isNaN(serialIndex)) {
|
||||
const serialNodes = allExecutions.filter(exec =>
|
||||
exec.execution_metadata?.loop_id === nodeInfo.node_id
|
||||
&& exec.execution_metadata?.loop_index === serialIndex,
|
||||
)
|
||||
if (serialNodes.length > 0)
|
||||
return serialNodes
|
||||
}
|
||||
|
||||
return []
|
||||
}
|
||||
|
||||
const handleOnShowLoopDetail = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation()
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
|
||||
const loopNodeMeta = nodeInfo.execution_metadata
|
||||
const loopDurMap = nodeInfo?.loopDurationMap || loopNodeMeta?.loop_duration_map || {}
|
||||
const loopVarMap = loopNodeMeta?.loop_variable_map || {}
|
||||
|
||||
let structuredList: NodeTracing[][] = []
|
||||
if (nodeInfo.details?.length) {
|
||||
structuredList = nodeInfo.details
|
||||
}
|
||||
else if (loopNodeMeta?.loop_duration_map) {
|
||||
const instanceKeys = Object.keys(loopNodeMeta.loop_duration_map)
|
||||
structuredList = instanceKeys
|
||||
.map(key => filterNodesForInstance(key))
|
||||
.filter(branchNodes => branchNodes.length > 0)
|
||||
}
|
||||
|
||||
onShowLoopResultList(
|
||||
structuredList,
|
||||
loopDurMap,
|
||||
loopVarMap,
|
||||
)
|
||||
}
|
||||
|
||||
let displayLoopCount = 0
|
||||
const loopMap = nodeInfo.execution_metadata?.loop_duration_map
|
||||
if (loopMap)
|
||||
displayLoopCount = Object.keys(loopMap).length
|
||||
else if (nodeInfo.details?.length)
|
||||
displayLoopCount = nodeInfo.details.length
|
||||
else if (nodeInfo.metadata?.loop_length)
|
||||
displayLoopCount = nodeInfo.metadata.loop_length
|
||||
|
||||
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 errorCount = getErrorCount(nodeInfo.details)
|
||||
|
||||
return (
|
||||
<Button
|
||||
className='flex w-full cursor-pointer items-center gap-2 self-stretch rounded-lg border-none bg-components-button-tertiary-bg-hover px-3 py-2 hover:bg-components-button-tertiary-bg-hover'
|
||||
onClick={handleOnShowLoopDetail}
|
||||
>
|
||||
<Loop className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
|
||||
<div className='system-sm-medium flex-1 text-left text-components-button-tertiary-text'>{t('workflow.nodes.loop.loop', { count: displayLoopCount })}{errorCount > 0 && (
|
||||
<>
|
||||
{t('workflow.nodes.loop.comma')}
|
||||
{t('workflow.nodes.loop.error', { count: errorCount })}
|
||||
</>
|
||||
)}</div>
|
||||
<RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default LoopLogTrigger
|
||||
@@ -0,0 +1,148 @@
|
||||
'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, LoopVariableMap, NodeTracing } from '@/types/workflow'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
||||
const i18nPrefix = 'workflow.singleRun'
|
||||
|
||||
type Props = {
|
||||
list: NodeTracing[][]
|
||||
onBack: () => void
|
||||
loopDurationMap?: LoopDurationMap
|
||||
loopVariableMap?: LoopVariableMap
|
||||
}
|
||||
|
||||
const LoopResultPanel: FC<Props> = ({
|
||||
list,
|
||||
onBack,
|
||||
loopDurationMap,
|
||||
loopVariableMap,
|
||||
}) => {
|
||||
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='h-4 w-4 text-text-destructive' />
|
||||
|
||||
if (isRunning)
|
||||
return <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-primary-600' />
|
||||
|
||||
return (
|
||||
<>
|
||||
{hasDurationMap && (
|
||||
<div className='system-xs-regular text-text-tertiary'>
|
||||
{countLoopDuration(loop, loopDurationMap)}
|
||||
</div>
|
||||
)}
|
||||
<RiArrowRightSLine
|
||||
className={cn(
|
||||
'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
|
||||
expandedLoops[index] && 'rotate-90',
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='bg-components-panel-bg'>
|
||||
<div
|
||||
className='flex h-8 cursor-pointer items-center border-b-[0.5px] border-b-divider-regular px-4 text-text-accent-secondary'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
onBack()
|
||||
}}
|
||||
>
|
||||
<RiArrowLeftLine className='mr-1 h-4 w-4' />
|
||||
<div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
|
||||
</div>
|
||||
{/* List */}
|
||||
<div className='bg-components-panel-bg p-2'>
|
||||
{list.map((loop, index) => (
|
||||
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl border-none bg-background-section-burn')}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-full cursor-pointer items-center justify-between px-3',
|
||||
expandedLoops[index] ? 'pb-2 pt-3' : 'py-3',
|
||||
'rounded-xl text-left',
|
||||
)}
|
||||
onClick={() => toggleLoop(index)}
|
||||
>
|
||||
<div className={cn('flex grow items-center gap-2')}>
|
||||
<div className='flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500'>
|
||||
<Loop className='h-3 w-3 text-text-primary-on-surface' />
|
||||
</div>
|
||||
<span className='system-sm-semibold-uppercase grow text-text-primary'>
|
||||
{t(`${i18nPrefix}.loop`)} {index + 1}
|
||||
</span>
|
||||
{loopStatusShow(index, loop, loopDurationMap)}
|
||||
</div>
|
||||
</div>
|
||||
{expandedLoops[index] && <div
|
||||
className="h-px grow bg-divider-subtle"
|
||||
></div>}
|
||||
<div className={cn(
|
||||
'transition-all duration-200',
|
||||
expandedLoops[index]
|
||||
? 'opacity-100'
|
||||
: 'max-h-0 overflow-hidden opacity-0',
|
||||
)}>
|
||||
{
|
||||
loopVariableMap?.[index] && (
|
||||
<div className='p-2 pb-0'>
|
||||
<CodeEditor
|
||||
readOnly
|
||||
title={<div>{t('workflow.nodes.loop.loopVariables').toLocaleUpperCase()}</div>}
|
||||
language={CodeLanguage.json}
|
||||
height={112}
|
||||
value={loopVariableMap[index]}
|
||||
isJSONStringifyBeauty
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<TracingPanel
|
||||
list={loop}
|
||||
className='bg-background-section-burn'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(LoopResultPanel)
|
||||
Reference in New Issue
Block a user