youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 18:08:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): new lint setup (#30020)

Browse Source 
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Stephen Zhou
2025-12-23 16:58:55 +08:00
committed by GitHub
parent 9701a2994b
commit f2842da397
3356 changed files with 85046 additions and 81278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/app/components/workflow/run/agent-log/agent-log-item.tsx
View File

@ -1,20 +1,20 @@
import {
useMemo,
useState,
} from 'react'
import type { AgentLogItemWithChildren } from '@/types/workflow'
import {
RiArrowRightSLine,
RiListView,
} from '@remixicon/react'
import { cn } from '@/utils/classnames'
import {
useMemo,
useState,
} from 'react'
import Button from '@/app/components/base/button'
import type { AgentLogItemWithChildren } from '@/types/workflow'
import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import BlockIcon from '@/app/components/workflow/block-icon'
import { BlockEnum } from '@/app/components/workflow/types'
import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
import BlockIcon from '@/app/components/workflow/block-icon'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { BlockEnum } from '@/app/components/workflow/types'
import { cn } from '@/utils/classnames'
type AgentLogItemProps = {
item: AgentLogItemWithChildren
@ -54,7 +54,7 @@ const AgentLogItem = ({
}, [status])
return (
<div className='rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default'>
<div className="rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default">
<div
className={cn(
'flex cursor-pointer items-center pb-2 pl-1.5 pr-3 pt-2',
@ -64,43 +64,46 @@ const AgentLogItem = ({
>
{
expanded
? <RiArrowRightSLine className='h-4 w-4 shrink-0 rotate-90 text-text-quaternary' />
: <RiArrowRightSLine className='h-4 w-4 shrink-0 text-text-quaternary' />
? <RiArrowRightSLine className="h-4 w-4 shrink-0 rotate-90 text-text-quaternary" />
: <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-quaternary" />
}
<BlockIcon
className='mr-1.5 shrink-0'
className="mr-1.5 shrink-0"
type={toolIcon ? BlockEnum.Tool : BlockEnum.Agent}
toolIcon={toolIcon}
/>
<div
className='system-sm-semibold-uppercase grow truncate text-text-secondary'
className="system-sm-semibold-uppercase grow truncate text-text-secondary"
title={label}
>
{label}
</div>
{
metadata?.elapsed_time && (
<div className='system-xs-regular mr-2 shrink-0 text-text-tertiary'>{metadata?.elapsed_time?.toFixed(3)}s</div>
<div className="system-xs-regular mr-2 shrink-0 text-text-tertiary">
{metadata?.elapsed_time?.toFixed(3)}
s
</div>
)
}
<NodeStatusIcon status={mergeStatus} />
</div>
{
expanded && (
<div className='p-1 pt-0'>
<div className="p-1 pt-0">
{
!!children?.length && (
<Button
className='mb-1 flex w-full items-center justify-between'
variant='tertiary'
className="mb-1 flex w-full items-center justify-between"
variant="tertiary"
onClick={() => onShowAgentOrToolLog(item)}
>
<div className='flex items-center'>
<RiListView className='mr-1 h-4 w-4 shrink-0 text-components-button-tertiary-text' />
<div className="flex items-center">
<RiListView className="mr-1 h-4 w-4 shrink-0 text-components-button-tertiary-text" />
{`${children.length} Action Logs`}
</div>
<div className='flex'>
<RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
<div className="flex">
<RiArrowRightSLine className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
</div>
</Button>
)

18
web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
View File

@ -1,12 +1,12 @@
import { useState } from 'react'
import type { AgentLogItemWithChildren } from '@/types/workflow'
import { RiMoreLine } from '@remixicon/react'
import { useState } from 'react'
import Button from '@/app/components/base/button'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Button from '@/app/components/base/button'
import type { AgentLogItemWithChildren } from '@/types/workflow'
type AgentLogNavMoreProps = {
options: AgentLogItemWithChildren[]
@ -20,7 +20,7 @@ const AgentLogNavMore = ({
return (
<PortalToFollowElem
placement='bottom-start'
placement="bottom-start"
offset={{
mainAxis: 2,
crossAxis: -54,
@ -30,19 +30,19 @@ const AgentLogNavMore = ({
>
<PortalToFollowElemTrigger>
<Button
className='h-6 w-6'
variant='ghost-accent'
className="h-6 w-6"
variant="ghost-accent"
>
<RiMoreLine className='h-4 w-4' />
<RiMoreLine className="h-4 w-4" />
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='w-[136px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
<div className="w-[136px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
{
options.map(option => (
<div
key={option.message_id}
className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover'
className="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover"
onClick={() => {
onShowAgentOrToolLog(option)
setOpen(false)

48
web/app/components/workflow/run/agent-log/agent-log-nav.tsx
View File

@ -1,8 +1,8 @@
import type { AgentLogItemWithChildren } from '@/types/workflow'
import { RiArrowLeftLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import AgentLogNavMore from './agent-log-nav-more'
import Button from '@/app/components/base/button'
import type { AgentLogItemWithChildren } from '@/types/workflow'
import AgentLogNavMore from './agent-log-nav-more'
type AgentLogNavProps = {
agentOrToolLogItemStack: AgentLogItemWithChildren[]
@ -19,41 +19,41 @@ const AgentLogNav = ({
const end = agentOrToolLogItemStack.at(-1)
return (
<div className='flex h-8 items-center bg-components-panel-bg p-1 pr-3'>
<div className="flex h-8 items-center bg-components-panel-bg p-1 pr-3">
<Button
className='shrink-0 px-[5px]'
size='small'
variant='ghost-accent'
className="shrink-0 px-[5px]"
size="small"
variant="ghost-accent"
onClick={() => {
onShowAgentOrToolLog()
}}
>
<RiArrowLeftLine className='mr-1 h-3.5 w-3.5' />
<RiArrowLeftLine className="mr-1 h-3.5 w-3.5" />
AGENT
</Button>
<div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
<div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
{
agentOrToolLogItemStackLength > 1
? (
<Button
className='shrink-0 px-[5px]'
size='small'
variant='ghost-accent'
onClick={() => onShowAgentOrToolLog(first)}
>
{t('workflow.nodes.agent.strategy.label')}
</Button>
)
<Button
className="shrink-0 px-[5px]"
size="small"
variant="ghost-accent"
onClick={() => onShowAgentOrToolLog(first)}
>
{t('workflow.nodes.agent.strategy.label')}
</Button>
)
: (
<div className='system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary'>
{t('workflow.nodes.agent.strategy.label')}
</div>
)
<div className="system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary">
{t('workflow.nodes.agent.strategy.label')}
</div>
)
}
{
!!mid.length && (
<>
<div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
<div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
<AgentLogNavMore
options={mid}
onShowAgentOrToolLog={onShowAgentOrToolLog}
@ -64,8 +64,8 @@ const AgentLogNav = ({
{
!!end && agentOrToolLogItemStackLength > 1 && (
<>
<div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
<div className='system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary'>
<div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
<div className="system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary">
{end.label}
</div>
</>

16
web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
View File

@ -1,9 +1,9 @@
import { RiArrowRightLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import type {
AgentLogItemWithChildren,
NodeTracing,
} from '@/types/workflow'
import { RiArrowRightLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
type AgentLogTriggerProps = {
nodeInfo: NodeTracing
@ -19,27 +19,27 @@ const AgentLogTrigger = ({
return (
<div
className='cursor-pointer rounded-[10px] bg-components-button-tertiary-bg'
className="cursor-pointer rounded-[10px] bg-components-button-tertiary-bg"
onClick={() => {
onShowAgentOrToolLog({ message_id: nodeInfo.id, children: agentLog || [] } as AgentLogItemWithChildren)
}}
>
<div className='system-2xs-medium-uppercase flex items-center px-3 pt-2 text-text-tertiary'>
<div className="system-2xs-medium-uppercase flex items-center px-3 pt-2 text-text-tertiary">
{t('workflow.nodes.agent.strategy.label')}
</div>
<div className='flex items-center pb-1.5 pl-3 pr-2 pt-1'>
<div className="flex items-center pb-1.5 pl-3 pr-2 pt-1">
{
agentStrategy && (
<div className='system-xs-medium grow text-text-secondary'>
<div className="system-xs-medium grow text-text-secondary">
{agentStrategy}
</div>
)
}
<div
className='system-xs-regular-uppercase flex shrink-0 cursor-pointer items-center px-[1px] text-text-tertiary'
className="system-xs-regular-uppercase flex shrink-0 cursor-pointer items-center px-[1px] text-text-tertiary"
>
{t('runLog.detail')}
<RiArrowRightLine className='ml-0.5 h-3.5 w-3.5' />
<RiArrowRightLine className="ml-0.5 h-3.5 w-3.5" />
</div>
</div>
</div>

39
web/app/components/workflow/run/agent-log/agent-result-panel.tsx
View File

@ -1,8 +1,8 @@
import type { AgentLogItemWithChildren } from '@/types/workflow'
import { RiAlertFill } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import AgentLogItem from './agent-log-item'
import AgentLogNav from './agent-log-nav'
import type { AgentLogItemWithChildren } from '@/types/workflow'
type AgentResultPanelProps = {
agentOrToolLogItemStack: AgentLogItemWithChildren[]
@ -19,35 +19,34 @@ const AgentResultPanel = ({
const list = agentOrToolLogListMap[top.message_id]
return (
<div className='overflow-y-auto bg-background-section'>
<div className="overflow-y-auto bg-background-section">
<AgentLogNav
agentOrToolLogItemStack={agentOrToolLogItemStack}
onShowAgentOrToolLog={onShowAgentOrToolLog}
/>
{
<div className='space-y-1 p-2'>
{
list.map(item => (
<AgentLogItem
key={item.message_id}
item={item}
onShowAgentOrToolLog={onShowAgentOrToolLog}
/>
))
}
</div>
}
<div className="space-y-1 p-2">
{
list.map(item => (
<AgentLogItem
key={item.message_id}
item={item}
onShowAgentOrToolLog={onShowAgentOrToolLog}
/>
))
}
</div>
{
top.hasCircle && (
<div className='mt-1 flex items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur px-3 pr-2 shadow-md'>
<div className="mt-1 flex items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur px-3 pr-2 shadow-md">
<div
className='absolute inset-0 rounded-xl opacity-[0.4]'
className="absolute inset-0 rounded-xl opacity-[0.4]"
style={{
background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)',
}}
></div>
<RiAlertFill className='mr-1.5 h-4 w-4 text-text-warning-secondary' />
<div className='system-xs-medium text-text-primary'>
>
</div>
<RiAlertFill className="mr-1.5 h-4 w-4 text-text-warning-secondary" />
<div className="system-xs-medium text-text-primary">
{t('runLog.circularInvocationTip')}
</div>
</div>

12
web/app/components/workflow/run/hooks.ts
View File

@ -1,9 +1,3 @@
import {
useCallback,
useRef,
useState,
} from 'react'
import { useBoolean } from 'ahooks'
import type {
AgentLogItemWithChildren,
IterationDurationMap,
@ -11,6 +5,12 @@ import type {
LoopVariableMap,
NodeTracing,
} from '@/types/workflow'
import { useBoolean } from 'ahooks'
import {
useCallback,
useRef,
useState,
} from 'react'
export const useLogs = () => {
const [showRetryDetail, {

38
web/app/components/workflow/run/index.tsx
View File

@ -1,20 +1,20 @@
'use client'
import type { FC } from 'react'
import type { WorkflowRunDetailResponse } from '@/models/log'
import type { NodeTracing } from '@/types/workflow'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import Loading from '@/app/components/base/loading'
import { ToastContext } from '@/app/components/base/toast'
import { WorkflowRunningStatus } from '@/app/components/workflow/types'
import { fetchRunDetail, fetchTracingList } from '@/service/log'
import { cn } from '@/utils/classnames'
import { useStore } from '../store'
import OutputPanel from './output-panel'
import ResultPanel from './result-panel'
import StatusPanel from './status'
import { WorkflowRunningStatus } from '@/app/components/workflow/types'
import TracingPanel from './tracing-panel'
import { cn } from '@/utils/classnames'
import { ToastContext } from '@/app/components/base/toast'
import Loading from '@/app/components/base/loading'
import { fetchRunDetail, fetchTracingList } from '@/service/log'
import type { NodeTracing } from '@/types/workflow'
import type { WorkflowRunDetailResponse } from '@/models/log'
import { useStore } from '../store'
export type RunProps = {
hideResult?: boolean
@ -118,9 +118,9 @@ const RunPanel: FC<RunProps> = ({
}, [loading])
return (
<div className='relative flex grow flex-col'>
<div className="relative flex grow flex-col">
{/* tab */}
<div className='flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4'>
<div className="flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4">
{!hideResult && (
<div
className={cn(
@ -128,7 +128,9 @@ const RunPanel: FC<RunProps> = ({
currentTab === 'RESULT' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('RESULT')}
>{t('runLog.result')}</div>
>
{t('runLog.result')}
</div>
)}
<div
className={cn(
@ -136,19 +138,23 @@ const RunPanel: FC<RunProps> = ({
currentTab === 'DETAIL' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('DETAIL')}
>{t('runLog.detail')}</div>
>
{t('runLog.detail')}
</div>
<div
className={cn(
'system-sm-semibold-uppercase mr-6 cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
currentTab === 'TRACING' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('TRACING')}
>{t('runLog.tracing')}</div>
>
{t('runLog.tracing')}
</div>
</div>
{/* panel detail */}
<div ref={ref} className={cn('relative h-0 grow overflow-y-auto rounded-b-xl bg-components-panel-bg')}>
{loading && (
<div className='flex h-full items-center justify-center bg-components-panel-bg'>
<div className="flex h-full items-center justify-center bg-components-panel-bg">
<Loading />
</div>
)}
@ -185,7 +191,7 @@ const RunPanel: FC<RunProps> = ({
)}
{!loading && currentTab === 'TRACING' && (
<TracingPanel
className='bg-background-section-burn'
className="bg-background-section-burn"
list={list}
/>
)}

37
web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
View File

@ -1,12 +1,12 @@
import { useTranslation } from 'react-i18next'
import { RiArrowRightSLine } from '@remixicon/react'
import Button from '@/app/components/base/button'
import type {
IterationDurationMap,
NodeTracing,
} from '@/types/workflow'
import { NodeRunningStatus } from '@/app/components/workflow/types'
import { RiArrowRightSLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
import { NodeRunningStatus } from '@/app/components/workflow/types'
type IterationLogTriggerProps = {
nodeInfo: NodeTracing
@ -21,7 +21,8 @@ const IterationLogTrigger = ({
const { t } = useTranslation()
const filterNodesForInstance = (key: string): NodeTracing[] => {
if (!allExecutions) return []
if (!allExecutions)
return []
const parallelNodes = allExecutions.filter(exec =>
exec.execution_metadata?.parallel_mode_run_id === key,
@ -117,9 +118,10 @@ const IterationLogTrigger = ({
// Find all failed iteration nodes
allExecutions.forEach((exec) => {
if (exec.execution_metadata?.iteration_id === nodeInfo.node_id
&& exec.status === NodeRunningStatus.Failed
&& exec.execution_metadata?.iteration_index !== undefined)
&& exec.status === NodeRunningStatus.Failed
&& exec.execution_metadata?.iteration_index !== undefined) {
failedIterationIndices.add(exec.execution_metadata.iteration_index)
}
})
}
@ -129,17 +131,20 @@ const IterationLogTrigger = ({
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'
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={handleOnShowIterationDetail}
>
<Iteration 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.iteration.iteration', { count: displayIterationCount })}{errorCount > 0 && (
<>
{t('workflow.nodes.iteration.comma')}
{t('workflow.nodes.iteration.error', { count: errorCount })}
</>
)}</div>
<RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
<Iteration 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.iteration.iteration', { count: displayIterationCount })}
{errorCount > 0 && (
<>
{t('workflow.nodes.iteration.comma')}
{t('workflow.nodes.iteration.error', { count: errorCount })}
</>
)}
</div>
<RiArrowRightSLine className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
</Button>
)
}

51
web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
View File

@ -1,18 +1,19 @@
'use client'
import type { FC } from 'react'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
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 React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
import TracingPanel from '@/app/components/workflow/run/tracing-panel'
import { NodeRunningStatus } from '@/app/components/workflow/types'
import { cn } from '@/utils/classnames'
import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
const i18nPrefix = 'workflow.singleRun'
type Props = {
@ -48,15 +49,15 @@ const IterationResultPanel: FC<Props> = ({
const hasDurationMap = iterDurationMap && Object.keys(iterDurationMap).length !== 0
if (hasFailed)
return <RiErrorWarningLine className='h-4 w-4 text-text-destructive' />
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 <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-primary-600" />
return (
<>
{hasDurationMap && (
<div className='system-xs-regular text-text-tertiary'>
<div className="system-xs-regular text-text-tertiary">
{countIterDuration(iteration, iterDurationMap)}
</div>
)}
@ -71,20 +72,20 @@ const IterationResultPanel: FC<Props> = ({
}
return (
<div className='bg-components-panel-bg'>
<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'
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>
<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'>
<div className="bg-components-panel-bg p-2">
{list.map((iteration, index) => (
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl border-none bg-background-section-burn')}>
<div
@ -96,27 +97,33 @@ const IterationResultPanel: FC<Props> = ({
onClick={() => toggleIteration(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'>
<Iteration className='h-3 w-3 text-text-primary-on-surface' />
<div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500">
<Iteration className="h-3 w-3 text-text-primary-on-surface" />
</div>
<span className='system-sm-semibold-uppercase grow text-text-primary'>
{t(`${i18nPrefix}.iteration`)} {index + 1}
<span className="system-sm-semibold-uppercase grow text-text-primary">
{t(`${i18nPrefix}.iteration`)}
{' '}
{index + 1}
</span>
{iterationStatusShow(index, iteration, iterDurationMap)}
</div>
</div>
{expandedIterations[index] && <div
className="h-px grow bg-divider-subtle"
></div>}
{expandedIterations[index] && (
<div
className="h-px grow bg-divider-subtle"
>
</div>
)}
<div className={cn(
'transition-all duration-200',
expandedIterations[index]
? 'opacity-100'
: 'max-h-0 overflow-hidden opacity-0',
)}>
)}
>
<TracingPanel
list={iteration}
className='bg-background-section-burn'
className="bg-background-section-burn"
/>
</div>
</div>

30
web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
View File

@ -1,11 +1,11 @@
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 { RiArrowRightSLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import { Loop } from '@/app/components/base/icons/src/vender/workflow'
type LoopLogTriggerProps = {
@ -21,7 +21,8 @@ const LoopLogTrigger = ({
const { t } = useTranslation()
const filterNodesForInstance = (key: string): NodeTracing[] => {
if (!allExecutions) return []
if (!allExecutions)
return []
const parallelNodes = allExecutions.filter(exec =>
exec.execution_metadata?.parallel_mode_run_id === key,
@ -90,17 +91,20 @@ const LoopLogTrigger = ({
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'
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' />
<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>
)
}

55
web/app/components/workflow/run/loop-log/loop-result-panel.tsx
View File

@ -1,20 +1,21 @@
'use client'
import type { FC } from 'react'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import type { LoopDurationMap, LoopVariableMap, NodeTracing } from '@/types/workflow'
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 React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
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'
import TracingPanel from '@/app/components/workflow/run/tracing-panel'
import { NodeRunningStatus } from '@/app/components/workflow/types'
import { cn } from '@/utils/classnames'
const i18nPrefix = 'workflow.singleRun'
type Props = {
@ -54,15 +55,15 @@ const LoopResultPanel: FC<Props> = ({
const hasDurationMap = loopDurationMap && Object.keys(loopDurationMap).length !== 0
if (hasFailed)
return <RiErrorWarningLine className='h-4 w-4 text-text-destructive' />
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 <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-primary-600" />
return (
<>
{hasDurationMap && (
<div className='system-xs-regular text-text-tertiary'>
<div className="system-xs-regular text-text-tertiary">
{countLoopDuration(loop, loopDurationMap)}
</div>
)}
@ -77,20 +78,20 @@ const LoopResultPanel: FC<Props> = ({
}
return (
<div className='bg-components-panel-bg'>
<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'
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>
<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'>
<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
@ -102,27 +103,33 @@ const LoopResultPanel: FC<Props> = ({
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 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 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>}
{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'>
<div className="p-2 pb-0">
<CodeEditor
readOnly
title={<div>{t('workflow.nodes.loop.loopVariables').toLocaleUpperCase()}</div>}
@ -136,7 +143,7 @@ const LoopResultPanel: FC<Props> = ({
}
<TracingPanel
list={loop}
className='bg-background-section-burn'
className="bg-background-section-burn"
/>
</div>
</div>

57
web/app/components/workflow/run/loop-result-panel.tsx
View File

@ -1,16 +1,16 @@
'use client'
import type { FC } from 'react'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import type { NodeTracing } from '@/types/workflow'
import {
RiArrowRightSLine,
RiCloseLine,
} from '@remixicon/react'
import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
import TracingPanel from './tracing-panel'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Loop } from '@/app/components/base/icons/src/vender/workflow'
import { cn } from '@/utils/classnames'
import type { NodeTracing } from '@/types/workflow'
import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
import TracingPanel from './tracing-panel'
const i18nPrefix = 'workflow.singleRun'
@ -40,17 +40,17 @@ const LoopResultPanel: FC<Props> = ({
const main = (
<>
<div className={cn(!noWrap && 'shrink-0 ', 'px-4 pt-3')}>
<div className='flex h-8 shrink-0 items-center justify-between'>
<div className='system-xl-semibold truncate text-text-primary'>
<div className="flex h-8 shrink-0 items-center justify-between">
<div className="system-xl-semibold truncate text-text-primary">
{t(`${i18nPrefix}.testRunLoop`)}
</div>
<div className='ml-2 shrink-0 cursor-pointer p-1' onClick={onHide}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
<div className="ml-2 shrink-0 cursor-pointer p-1" onClick={onHide}>
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
</div>
</div>
<div className='flex cursor-pointer items-center space-x-1 py-2 text-text-accent-secondary' onClick={onBack}>
<ArrowNarrowLeft className='h-4 w-4' />
<div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
<div className="flex cursor-pointer items-center space-x-1 py-2 text-text-accent-secondary" onClick={onBack}>
<ArrowNarrowLeft className="h-4 w-4" />
<div className="system-sm-medium">{t(`${i18nPrefix}.back`)}</div>
</div>
</div>
{/* List */}
@ -66,30 +66,37 @@ const LoopResultPanel: FC<Props> = ({
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 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 className="system-sm-semibold-uppercase grow text-text-primary">
{t(`${i18nPrefix}.loop`)}
{' '}
{index + 1}
</span>
<RiArrowRightSLine className={cn(
'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
expandedLoops[index] && 'rotate-90',
)} />
)}
/>
</div>
</div>
{expandedLoops[index] && <div
className="h-px grow bg-divider-subtle"
></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',
)}>
)}
>
<TracingPanel
list={loop}
className='bg-background-section-burn'
className="bg-background-section-burn"
/>
</div>
@ -109,16 +116,16 @@ const LoopResultPanel: FC<Props> = ({
return (
<div
className='absolute inset-0 z-10 rounded-2xl pt-10'
className="absolute inset-0 z-10 rounded-2xl pt-10"
style={{
backgroundColor: 'rgba(16, 24, 40, 0.20)',
}}
onClick={handleNotBubble}
>
<div className='flex h-full flex-col rounded-2xl bg-components-panel-bg'>
<div className="flex h-full flex-col rounded-2xl bg-components-panel-bg">
{main}
</div>
</div >
</div>
)
}
export default React.memo(LoopResultPanel)

54
web/app/components/workflow/run/meta.tsx
View File

@ -26,14 +26,14 @@ const MetaData: FC<Props> = ({
const { formatTime } = useTimestamp()
return (
<div className='relative'>
<div className='system-xs-medium-uppercase h-6 py-1 text-text-tertiary'>{t('runLog.meta.title')}</div>
<div className='py-1'>
<div className='flex'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.status')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
<div className="relative">
<div className="system-xs-medium-uppercase h-6 py-1 text-text-tertiary">{t('runLog.meta.title')}</div>
<div className="py-1">
<div className="flex">
<div className="system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary">{t('runLog.meta.status')}</div>
<div className="system-xs-regular grow px-2 py-1.5 text-text-secondary">
{status === 'running' && (
<div className='my-1 h-2 w-16 rounded-sm bg-text-quaternary'/>
<div className="my-1 h-2 w-16 rounded-sm bg-text-quaternary" />
)}
{status === 'succeeded' && (
<span>SUCCESS</span>
@ -52,44 +52,44 @@ const MetaData: FC<Props> = ({
)}
</div>
</div>
<div className='flex'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.executor')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
<div className="flex">
<div className="system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary">{t('runLog.meta.executor')}</div>
<div className="system-xs-regular grow px-2 py-1.5 text-text-secondary">
{status === 'running' && (
<div className='my-1 h-2 w-[88px] rounded-sm bg-text-quaternary'/>
<div className="my-1 h-2 w-[88px] rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
<span>{executor || 'N/A'}</span>
)}
</div>
</div>
<div className='flex'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.startTime')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
<div className="flex">
<div className="system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary">{t('runLog.meta.startTime')}</div>
<div className="system-xs-regular grow px-2 py-1.5 text-text-secondary">
{status === 'running' && (
<div className='my-1 h-2 w-[72px] rounded-sm bg-text-quaternary'/>
<div className="my-1 h-2 w-[72px] rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
<span>{startTime ? formatTime(startTime, t('appLog.dateTimeFormat') as string) : '-'}</span>
)}
</div>
</div>
<div className='flex'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.time')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
<div className="flex">
<div className="system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary">{t('runLog.meta.time')}</div>
<div className="system-xs-regular grow px-2 py-1.5 text-text-secondary">
{status === 'running' && (
<div className='my-1 h-2 w-[72px] rounded-sm bg-text-quaternary'/>
<div className="my-1 h-2 w-[72px] rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
<span>{time ? `${time.toFixed(3)}s` : '-'}</span>
)}
</div>
</div>
<div className='flex'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.tokens')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
<div className="flex">
<div className="system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary">{t('runLog.meta.tokens')}</div>
<div className="system-xs-regular grow px-2 py-1.5 text-text-secondary">
{status === 'running' && (
<div className='my-1 h-2 w-[48px] rounded-sm bg-text-quaternary'/>
<div className="my-1 h-2 w-[48px] rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
<span>{`${tokens || 0} Tokens`}</span>
@ -97,11 +97,11 @@ const MetaData: FC<Props> = ({
</div>
</div>
{showSteps && (
<div className='flex'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.steps')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
<div className="flex">
<div className="system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary">{t('runLog.meta.steps')}</div>
<div className="system-xs-regular grow px-2 py-1.5 text-text-secondary">
{status === 'running' && (
<div className='my-1 h-2 w-[24px] rounded-sm bg-text-quaternary'/>
<div className="my-1 h-2 w-[24px] rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
<span>{steps}</span>

82
web/app/components/workflow/run/node.tsx
View File

@ -1,24 +1,5 @@
'use client'
import { useTranslation } from 'react-i18next'
import type { FC } from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import {
RiAlertFill,
RiArrowRightSLine,
RiCheckboxCircleFill,
RiErrorWarningLine,
RiLoader2Line,
} from '@remixicon/react'
import BlockIcon from '../block-icon'
import { BlockEnum } from '../types'
import { RetryLogTrigger } from './retry-log'
import { IterationLogTrigger } from './iteration-log'
import { LoopLogTrigger } from './loop-log'
import { AgentLogTrigger } from './agent-log'
import { cn } from '@/utils/classnames'
import StatusContainer from '@/app/components/workflow/run/status-container'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import type {
AgentLogItemWithChildren,
IterationDurationMap,
@ -26,11 +7,30 @@ import type {
LoopVariableMap,
NodeTracing,
} from '@/types/workflow'
import {
RiAlertFill,
RiArrowRightSLine,
RiCheckboxCircleFill,
RiErrorWarningLine,
RiLoader2Line,
} from '@remixicon/react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tooltip from '@/app/components/base/tooltip'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import StatusContainer from '@/app/components/workflow/run/status-container'
import { hasRetryNode } from '@/app/components/workflow/utils'
import { useDocLink } from '@/context/i18n'
import Tooltip from '@/app/components/base/tooltip'
import { cn } from '@/utils/classnames'
import BlockIcon from '../block-icon'
import { BlockEnum } from '../types'
import LargeDataAlert from '../variable-inspect/large-data-alert'
import { AgentLogTrigger } from './agent-log'
import { IterationLogTrigger } from './iteration-log'
import { LoopLogTrigger } from './loop-log'
import { RetryLogTrigger } from './retry-log'
type Props = {
className?: string
@ -113,7 +113,7 @@ const NodePanel: FC<Props> = ({
return (
<div className={cn('px-2 py-1', className)}>
<div className='group rounded-[10px] border border-components-panel-border bg-background-default shadow-xs transition-all hover:shadow-md'>
<div className="group rounded-[10px] border border-components-panel-border bg-background-default shadow-xs transition-all hover:shadow-md">
<div
className={cn(
'flex cursor-pointer items-center pl-1 pr-3',
@ -133,22 +133,28 @@ const NodePanel: FC<Props> = ({
<BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('mr-2 shrink-0', inMessage && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
<Tooltip
popupContent={
<div className='max-w-xs'>{nodeInfo.title}</div>
<div className="max-w-xs">{nodeInfo.title}</div>
}
>
<div className={cn(
'system-xs-semibold-uppercase grow truncate text-text-secondary',
hideInfo && '!text-xs',
)}>{nodeInfo.title}</div>
)}
>
{nodeInfo.title}
</div>
</Tooltip>
{nodeInfo.status !== 'running' && !hideInfo && (
<div className='system-xs-regular shrink-0 text-text-tertiary'>{nodeInfo.execution_metadata?.total_tokens ? `${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens · ` : ''}{`${getTime(nodeInfo.elapsed_time || 0)}`}</div>
<div className="system-xs-regular shrink-0 text-text-tertiary">
{nodeInfo.execution_metadata?.total_tokens ? `${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens · ` : ''}
{`${getTime(nodeInfo.elapsed_time || 0)}`}
</div>
)}
{nodeInfo.status === 'succeeded' && (
<RiCheckboxCircleFill className='ml-2 h-3.5 w-3.5 shrink-0 text-text-success' />
<RiCheckboxCircleFill className="ml-2 h-3.5 w-3.5 shrink-0 text-text-success" />
)}
{nodeInfo.status === 'failed' && (
<RiErrorWarningLine className='ml-2 h-3.5 w-3.5 shrink-0 text-text-warning' />
<RiErrorWarningLine className="ml-2 h-3.5 w-3.5 shrink-0 text-text-warning" />
)}
{nodeInfo.status === 'stopped' && (
<RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
@ -157,14 +163,14 @@ const NodePanel: FC<Props> = ({
<RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
)}
{nodeInfo.status === 'running' && (
<div className='flex shrink-0 items-center text-[13px] font-medium leading-[16px] text-text-accent'>
<span className='mr-2 text-xs font-normal'>Running</span>
<RiLoader2Line className='h-3.5 w-3.5 animate-spin' />
<div className="flex shrink-0 items-center text-[13px] font-medium leading-[16px] text-text-accent">
<span className="mr-2 text-xs font-normal">Running</span>
<RiLoader2Line className="h-3.5 w-3.5 animate-spin" />
</div>
)}
</div>
{!collapseState && !hideProcessDetail && (
<div className='px-1 pb-1'>
<div className="px-1 pb-1">
{/* The nav to the iteration detail */}
{isIterationNode && !notShowIterationNav && onShowIterationDetail && (
<IterationLogTrigger
@ -197,29 +203,29 @@ const NodePanel: FC<Props> = ({
}
<div className={cn('mb-1', hideInfo && '!px-2 !py-0.5')}>
{(nodeInfo.status === 'stopped') && (
<StatusContainer status='stopped'>
<StatusContainer status="stopped">
{t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}
</StatusContainer>
)}
{(nodeInfo.status === 'exception') && (
<StatusContainer status='stopped'>
<StatusContainer status="stopped">
{nodeInfo.error}
<a
href={docLink('/guides/workflow/error-handling/error-type')}
target='_blank'
className='text-text-accent'
target="_blank"
className="text-text-accent"
>
{t('workflow.common.learnMore')}
</a>
</StatusContainer>
)}
{nodeInfo.status === 'failed' && (
<StatusContainer status='failed'>
<StatusContainer status="failed">
{nodeInfo.error}
</StatusContainer>
)}
{nodeInfo.status === 'retry' && (
<StatusContainer status='failed'>
<StatusContainer status="failed">
{nodeInfo.error}
</StatusContainer>
)}
@ -232,7 +238,7 @@ const NodePanel: FC<Props> = ({
language={CodeLanguage.json}
value={nodeInfo.inputs}
isJSONStringifyBeauty
footer={nodeInfo.inputs_truncated && <LargeDataAlert textHasNoExport className='mx-1 mb-1 mt-2 h-7' />}
footer={nodeInfo.inputs_truncated && <LargeDataAlert textHasNoExport className="mx-1 mb-1 mt-2 h-7" />}
/>
</div>
)}
@ -256,7 +262,7 @@ const NodePanel: FC<Props> = ({
value={nodeInfo.outputs}
isJSONStringifyBeauty
tip={<ErrorHandleTip type={nodeInfo.execution_metadata?.error_strategy} />}
footer={nodeInfo.outputs_truncated && <LargeDataAlert textHasNoExport downloadUrl={nodeInfo.outputs_full_content?.download_url} className='mx-1 mb-1 mt-2 h-7' />}
footer={nodeInfo.outputs_truncated && <LargeDataAlert textHasNoExport downloadUrl={nodeInfo.outputs_full_content?.download_url} className="mx-1 mb-1 mt-2 h-7" />}
/>
</div>
)}

28
web/app/components/workflow/run/output-panel.tsx
View File

@ -1,13 +1,13 @@
'use client'
import type { FC } from 'react'
import { useMemo } from 'react'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { Markdown } from '@/app/components/base/markdown'
import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
import { FileList } from '@/app/components/base/file-uploader'
import StatusContainer from '@/app/components/workflow/run/status-container'
import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
import { Markdown } from '@/app/components/base/markdown'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import StatusContainer from '@/app/components/workflow/run/status-container'
type OutputPanelProps = {
isRunning?: boolean
@ -54,24 +54,24 @@ const OutputPanel: FC<OutputPanelProps> = ({
return getProcessedFilesFromResponse(fileList)
}, [outputs])
return (
<div className='p-2'>
<div className="p-2">
{isRunning && (
<div className='pl-[26px] pt-4'>
<LoadingAnim type='text' />
<div className="pl-[26px] pt-4">
<LoadingAnim type="text" />
</div>
)}
{!isRunning && error && (
<div className='px-4'>
<StatusContainer status='failed'>{error}</StatusContainer>
<div className="px-4">
<StatusContainer status="failed">{error}</StatusContainer>
</div>
)}
{!isRunning && !outputs && (
<div className='px-4 py-2'>
<Markdown content='No Output' />
<div className="px-4 py-2">
<Markdown content="No Output" />
</div>
)}
{isTextOutput && (
<div className='px-4 py-2'>
<div className="px-4 py-2">
<Markdown
content={
Array.isArray(outputs[Object.keys(outputs)[0]])
@ -82,7 +82,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
</div>
)}
{fileList.length > 0 && (
<div className='px-4 py-2'>
<div className="px-4 py-2">
<FileList
files={fileList}
showDeleteAction={false}
@ -92,7 +92,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
</div>
)}
{!isTextOutput && outputs && Object.keys(outputs).length > 0 && height! > 0 && (
<div className='flex flex-col gap-2'>
<div className="flex flex-col gap-2">
<CodeEditor
showFileList
readOnly

38
web/app/components/workflow/run/result-panel.tsx
View File

@ -1,22 +1,22 @@
'use client'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
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 {
AgentLogItemWithChildren,
NodeTracing,
} from '@/types/workflow'
import { BlockEnum } from '@/app/components/workflow/types'
import { hasRetryNode } from '@/app/components/workflow/utils'
import { useTranslation } from 'react-i18next'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { AgentLogTrigger } from '@/app/components/workflow/run/agent-log'
import { IterationLogTrigger } from '@/app/components/workflow/run/iteration-log'
import { LoopLogTrigger } from '@/app/components/workflow/run/loop-log'
import { RetryLogTrigger } from '@/app/components/workflow/run/retry-log'
import { AgentLogTrigger } from '@/app/components/workflow/run/agent-log'
import { BlockEnum } from '@/app/components/workflow/types'
import { hasRetryNode } from '@/app/components/workflow/utils'
import LargeDataAlert from '../variable-inspect/large-data-alert'
import MetaData from './meta'
import StatusPanel from './status'
export type ResultPanelProps = {
nodeInfo?: NodeTracing
@ -80,8 +80,8 @@ const ResultPanel: FC<ResultPanelProps> = ({
const isToolNode = nodeInfo?.node_type === BlockEnum.Tool && !!nodeInfo?.agentLog?.length
return (
<div className='bg-components-panel-bg py-2'>
<div className='px-4 py-2'>
<div className="bg-components-panel-bg py-2">
<div className="px-4 py-2">
<StatusPanel
status={status}
time={elapsed_time}
@ -91,7 +91,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
isListening={isListening}
/>
</div>
<div className='px-4'>
<div className="px-4">
{
isIterationNode && handleShowIterationResultList && (
<IterationLogTrigger
@ -125,14 +125,14 @@ const ResultPanel: FC<ResultPanelProps> = ({
)
}
</div>
<div className='flex flex-col gap-2 px-4 py-2'>
<div className="flex flex-col gap-2 px-4 py-2">
<CodeEditor
readOnly
title={<div>{t('workflow.common.input').toLocaleUpperCase()}</div>}
language={CodeLanguage.json}
value={inputs}
isJSONStringifyBeauty
footer={inputs_truncated && <LargeDataAlert textHasNoExport className='mx-1 mb-1 mt-2 h-7' />}
footer={inputs_truncated && <LargeDataAlert textHasNoExport className="mx-1 mb-1 mt-2 h-7" />}
/>
{process_data && (
<CodeEditor
@ -141,7 +141,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
language={CodeLanguage.json}
value={process_data}
isJSONStringifyBeauty
footer={process_data_truncated && <LargeDataAlert textHasNoExport className='mx-1 mb-1 mt-2 h-7' />}
footer={process_data_truncated && <LargeDataAlert textHasNoExport className="mx-1 mb-1 mt-2 h-7" />}
/>
)}
{(outputs || status === 'running') && (
@ -152,14 +152,14 @@ const ResultPanel: FC<ResultPanelProps> = ({
value={outputs}
isJSONStringifyBeauty
tip={<ErrorHandleTip type={execution_metadata?.error_strategy} />}
footer={outputs_truncated && <LargeDataAlert textHasNoExport downloadUrl={outputs_full_content?.download_url} className='mx-1 mb-1 mt-2 h-7' />}
footer={outputs_truncated && <LargeDataAlert textHasNoExport downloadUrl={outputs_full_content?.download_url} className="mx-1 mb-1 mt-2 h-7" />}
/>
)}
</div>
<div className='px-4 py-2'>
<div className='divider-subtle h-[0.5px]' />
<div className="px-4 py-2">
<div className="divider-subtle h-[0.5px]" />
</div>
<div className='px-4 py-2'>
<div className="px-4 py-2">
<MetaData
status={status}
executor={created_by}

28
web/app/components/workflow/run/result-text.tsx
View File

@ -1,11 +1,11 @@
'use client'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
import { FileList } from '@/app/components/base/file-uploader'
import { ImageIndentLeft } from '@/app/components/base/icons/src/vender/line/editor'
import { Markdown } from '@/app/components/base/markdown'
import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
import StatusContainer from '@/app/components/workflow/run/status-container'
import { FileList } from '@/app/components/base/file-uploader'
type ResultTextProps = {
isRunning?: boolean
@ -24,26 +24,26 @@ const ResultText: FC<ResultTextProps> = ({
}) => {
const { t } = useTranslation()
return (
<div className='bg-background-section-burn'>
<div className="bg-background-section-burn">
{isRunning && !outputs && (
<div className='pl-[26px] pt-4'>
<LoadingAnim type='text' />
<div className="pl-[26px] pt-4">
<LoadingAnim type="text" />
</div>
)}
{!isRunning && error && (
<div className='px-4 py-2'>
<StatusContainer status='failed'>
<div className="px-4 py-2">
<StatusContainer status="failed">
{error}
</StatusContainer>
</div>
)}
{!isRunning && !outputs && !error && !allFiles?.length && (
<div className='mt-[120px] flex flex-col items-center px-4 py-2 text-[13px] leading-[18px] text-gray-500'>
<ImageIndentLeft className='h-6 w-6 text-gray-400' />
<div className='mr-2'>{t('runLog.resultEmpty.title')}</div>
<div className="mt-[120px] flex flex-col items-center px-4 py-2 text-[13px] leading-[18px] text-gray-500">
<ImageIndentLeft className="h-6 w-6 text-gray-400" />
<div className="mr-2">{t('runLog.resultEmpty.title')}</div>
<div>
{t('runLog.resultEmpty.tipLeft')}
<span onClick={onClick} className='cursor-pointer text-primary-600'>{t('runLog.resultEmpty.link')}</span>
<span onClick={onClick} className="cursor-pointer text-primary-600">{t('runLog.resultEmpty.link')}</span>
{t('runLog.resultEmpty.tipRight')}
</div>
</div>
@ -51,13 +51,13 @@ const ResultText: FC<ResultTextProps> = ({
{(outputs || !!allFiles?.length) && (
<>
{outputs && (
<div className='px-4 py-2'>
<div className="px-4 py-2">
<Markdown content={outputs} />
</div>
)}
{!!allFiles?.length && allFiles.map(item => (
<div key={item.varName} className='system-xs-regular flex flex-col gap-1 px-4 py-2'>
<div className='py-1 text-text-tertiary '>{item.varName}</div>
<div key={item.varName} className="system-xs-regular flex flex-col gap-1 px-4 py-2">
<div className="py-1 text-text-tertiary ">{item.varName}</div>
<FileList
files={item.list}
showDeleteAction={false}

14
web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
View File

@ -1,10 +1,10 @@
import { useTranslation } from 'react-i18next'
import type { NodeTracing } from '@/types/workflow'
import {
RiArrowRightSLine,
RiRestartFill,
} from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import type { NodeTracing } from '@/types/workflow'
type RetryLogTriggerProps = {
nodeInfo: NodeTracing
@ -25,15 +25,15 @@ const RetryLogTrigger = ({
return (
<Button
className='mb-1 flex w-full items-center justify-between'
variant='tertiary'
className="mb-1 flex w-full items-center justify-between"
variant="tertiary"
onClick={handleShowRetryResultList}
>
<div className='flex items-center'>
<RiRestartFill className='mr-0.5 h-4 w-4 shrink-0 text-components-button-tertiary-text' />
<div className="flex items-center">
<RiRestartFill className="mr-0.5 h-4 w-4 shrink-0 text-components-button-tertiary-text" />
{t('workflow.nodes.common.retry.retries', { num: retryDetail?.length })}
</div>
<RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
<RiArrowRightSLine className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
</Button>
)
}

14
web/app/components/workflow/run/retry-log/retry-result-panel.tsx
View File

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

11
web/app/components/workflow/run/special-result-panel.tsx
View File

@ -1,7 +1,3 @@
import { RetryResultPanel } from './retry-log'
import { IterationResultPanel } from './iteration-log'
import { LoopResultPanel } from './loop-log'
import { AgentResultPanel } from './agent-log'
import type {
AgentLogItemWithChildren,
IterationDurationMap,
@ -9,6 +5,10 @@ import type {
LoopVariableMap,
NodeTracing,
} from '@/types/workflow'
import { AgentResultPanel } from './agent-log'
import { IterationResultPanel } from './iteration-log'
import { LoopResultPanel } from './loop-log'
import { RetryResultPanel } from './retry-log'
export type SpecialResultPanelProps = {
showRetryDetail?: boolean
@ -54,7 +54,8 @@ const SpecialResultPanel = ({
<div onClick={(e) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
}}>
}}
>
{
!!showRetryDetail && !!retryResultList?.length && setShowRetryDetailFalse && (
<RetryResultPanel

6
web/app/components/workflow/run/status-container.tsx
View File

@ -1,8 +1,8 @@
'use client'
import type { FC } from 'react'
import useTheme from '@/hooks/use-theme'
import { Theme } from '@/types/app'
import { cn } from '@/utils/classnames'
import useTheme from '@/hooks/use-theme'
type Props = {
status: string
@ -43,7 +43,9 @@ const StatusContainer: FC<Props> = ({
'absolute left-0 top-0 h-[50px] w-[65%] bg-no-repeat',
theme === Theme.light && 'bg-[url(~@/app/components/workflow/run/assets/highlight.svg)]',
theme === Theme.dark && 'bg-[url(~@/app/components/workflow/run/assets/highlight-dark.svg)]',
)}></div>
)}
>
</div>
{children}
</div>
)

57
web/app/components/workflow/run/status.tsx
View File

@ -1,10 +1,10 @@
'use client'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'
import Indicator from '@/app/components/header/indicator'
import StatusContainer from '@/app/components/workflow/run/status-container'
import { useDocLink } from '@/context/i18n'
import { cn } from '@/utils/classnames'
type ResultProps = {
status: string
@ -28,12 +28,13 @@ const StatusPanel: FC<ResultProps> = ({
return (
<StatusContainer status={status}>
<div className='flex'>
<div className="flex">
<div className={cn(
'max-w-[120px] flex-[33%]',
status === 'partial-succeeded' && 'min-w-[140px]',
)}>
<div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('runLog.resultPanel.status')}</div>
)}
>
<div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('runLog.resultPanel.status')}</div>
<div
className={cn(
'system-xs-semibold-uppercase flex items-center gap-1',
@ -46,58 +47,58 @@ const StatusPanel: FC<ResultProps> = ({
>
{status === 'running' && (
<>
<Indicator color={'blue'} />
<Indicator color="blue" />
<span>{isListening ? 'Listening' : 'Running'}</span>
</>
)}
{status === 'succeeded' && (
<>
<Indicator color={'green'} />
<Indicator color="green" />
<span>SUCCESS</span>
</>
)}
{status === 'partial-succeeded' && (
<>
<Indicator color={'green'} />
<Indicator color="green" />
<span>PARTIAL SUCCESS</span>
</>
)}
{status === 'exception' && (
<>
<Indicator color={'yellow'} />
<Indicator color="yellow" />
<span>EXCEPTION</span>
</>
)}
{status === 'failed' && (
<>
<Indicator color={'red'} />
<Indicator color="red" />
<span>FAIL</span>
</>
)}
{status === 'stopped' && (
<>
<Indicator color={'yellow'} />
<Indicator color="yellow" />
<span>STOP</span>
</>
)}
</div>
</div>
<div className='max-w-[152px] flex-[33%]'>
<div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('runLog.resultPanel.time')}</div>
<div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
<div className="max-w-[152px] flex-[33%]">
<div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('runLog.resultPanel.time')}</div>
<div className="system-sm-medium flex items-center gap-1 text-text-secondary">
{status === 'running' && (
<div className='h-2 w-16 rounded-sm bg-text-quaternary' />
<div className="h-2 w-16 rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
<span>{time ? `${time?.toFixed(3)}s` : '-'}</span>
)}
</div>
</div>
<div className='flex-[33%]'>
<div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('runLog.resultPanel.tokens')}</div>
<div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
<div className="flex-[33%]">
<div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('runLog.resultPanel.tokens')}</div>
<div className="system-sm-medium flex items-center gap-1 text-text-secondary">
{status === 'running' && (
<div className='h-2 w-20 rounded-sm bg-text-quaternary' />
<div className="h-2 w-20 rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
<span>{`${tokens || 0} Tokens`}</span>
@ -107,13 +108,13 @@ const StatusPanel: FC<ResultProps> = ({
</div>
{status === 'failed' && error && (
<>
<div className='my-2 h-[0.5px] bg-divider-subtle'/>
<div className='system-xs-regular whitespace-pre-wrap text-text-destructive'>{error}</div>
<div className="my-2 h-[0.5px] bg-divider-subtle" />
<div className="system-xs-regular whitespace-pre-wrap text-text-destructive">{error}</div>
{
!!exceptionCounts && (
<>
<div className='my-2 h-[0.5px] bg-divider-subtle'/>
<div className='system-xs-regular text-text-destructive'>
<div className="my-2 h-[0.5px] bg-divider-subtle" />
<div className="system-xs-regular text-text-destructive">
{t('workflow.nodes.common.errorHandle.partialSucceeded.tip', { num: exceptionCounts })}
</div>
</>
@ -124,8 +125,8 @@ const StatusPanel: FC<ResultProps> = ({
{
status === 'partial-succeeded' && !!exceptionCounts && (
<>
<div className='my-2 h-[0.5px] bg-divider-deep'/>
<div className='system-xs-medium text-text-warning'>
<div className="my-2 h-[0.5px] bg-divider-deep" />
<div className="system-xs-medium text-text-warning">
{t('workflow.nodes.common.errorHandle.partialSucceeded.tip', { num: exceptionCounts })}
</div>
</>
@ -134,13 +135,13 @@ const StatusPanel: FC<ResultProps> = ({
{
status === 'exception' && (
<>
<div className='my-2 h-[0.5px] bg-divider-deep'/>
<div className='system-xs-medium text-text-warning'>
<div className="my-2 h-[0.5px] bg-divider-deep" />
<div className="system-xs-medium text-text-warning">
{error}
<a
href={docLink('/guides/workflow/error-handling/error-type')}
target='_blank'
className='text-text-accent'
target="_blank"
className="text-text-accent"
>
{t('workflow.common.learnMore')}
</a>

24
web/app/components/workflow/run/tracing-panel.tsx
View File

@ -1,22 +1,22 @@
'use client'
import type { FC } from 'react'
import type { NodeTracing } from '@/types/workflow'
import {
RiArrowDownSLine,
RiMenu4Line,
} from '@remixicon/react'
import
React,
{
useCallback,
useState,
} from 'react'
import { cn } from '@/utils/classnames'
import {
RiArrowDownSLine,
RiMenu4Line,
} from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import formatNodeList from '@/app/components/workflow/run/utils/format-log'
import { cn } from '@/utils/classnames'
import { useLogs } from './hooks'
import NodePanel from './node'
import SpecialResultPanel from './special-result-panel'
import type { NodeTracing } from '@/types/workflow'
import formatNodeList from '@/app/components/workflow/run/utils/format-log'
type TracingPanelProps = {
list: NodeTracing[]
@ -109,7 +109,8 @@ const TracingPanel: FC<TracingPanelProps> = ({
onMouseLeave={handleParallelMouseLeave}
>
<div className="mb-1 flex items-center">
<button type="button"
<button
type="button"
onClick={() => toggleCollapse(node.id)}
className={cn(
'mr-2 transition-colors',
@ -124,13 +125,16 @@ const TracingPanel: FC<TracingPanelProps> = ({
<div
className="mx-2 h-px grow bg-divider-subtle"
style={{ background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08), rgba(255, 255, 255, 0)' }}
></div>
>
</div>
</div>
<div className={`relative pl-2 ${isCollapsed ? 'hidden' : ''}`}>
<div className={cn(
'absolute bottom-0 left-[5px] top-0 w-[2px]',
isHovered ? 'bg-text-accent-secondary' : 'bg-divider-subtle',
)}></div>
)}
>
</div>
{parallelDetail.children!.map(renderNode)}
</div>
</div>

4
web/app/components/workflow/run/utils/format-log/agent/index.spec.ts
View File

@ -2,12 +2,12 @@ import format from '.'
import { agentNodeData, multiStepsCircle, oneStepCircle } from './data'
describe('agent', () => {
test('list should transform to tree', () => {
it('list should transform to tree', () => {
// console.log(format(agentNodeData.in as any))
expect(format(agentNodeData.in as any)).toEqual(agentNodeData.expect)
})
test('list should remove circle log item', () => {
it('list should remove circle log item', () => {
// format(oneStepCircle.in as any)
expect(format(oneStepCircle.in as any)).toEqual(oneStepCircle.expect)
expect(format(multiStepsCircle.in as any)).toEqual(multiStepsCircle.expect)

2
web/app/components/workflow/run/utils/format-log/agent/index.ts
View File

@ -1,6 +1,6 @@
import { BlockEnum } from '@/app/components/workflow/types'
import type { AgentLogItem, AgentLogItemWithChildren, NodeTracing } from '@/types/workflow'
import { cloneDeep } from 'lodash-es'
import { BlockEnum } from '@/app/components/workflow/types'
const supportedAgentLogNodes = [BlockEnum.Agent, BlockEnum.Tool]

50
web/app/components/workflow/run/utils/format-log/graph-to-log-struct.ts
View File

@ -1,7 +1,7 @@
type IterationInfo = { iterationId: string; iterationIndex: number }
type LoopInfo = { loopId: string; loopIndex: number }
type NodePlain = { nodeType: 'plain'; nodeId: string; } & (Partial<IterationInfo> & Partial<LoopInfo>)
type NodeComplex = { nodeType: string; nodeId: string; params: (NodePlain | (NodeComplex & (Partial<IterationInfo> & Partial<LoopInfo>)) | Node[] | number)[] } & (Partial<IterationInfo> & Partial<LoopInfo>)
type IterationInfo = { iterationId: string, iterationIndex: number }
type LoopInfo = { loopId: string, loopIndex: number }
type NodePlain = { nodeType: 'plain', nodeId: string } & (Partial<IterationInfo> & Partial<LoopInfo>)
type NodeComplex = { nodeType: string, nodeId: string, params: (NodePlain | (NodeComplex & (Partial<IterationInfo> & Partial<LoopInfo>)) | Node[] | number)[] } & (Partial<IterationInfo> & Partial<LoopInfo>)
type Node = NodePlain | NodeComplex
/**
@ -25,8 +25,10 @@ function parseTopLevelFlow(dsl: string): string[] {
for (let i = 0; i < dsl.length; i++) {
const char = dsl[i]
if (char === '(') nested++
if (char === ')') nested--
if (char === '(')
nested++
if (char === ')')
nested--
if (char === '-' && dsl[i + 1] === '>' && nested === 0) {
segments.push(buffer.trim())
buffer = ''
@ -61,8 +63,10 @@ function parseNode(nodeStr: string, parentIterationId?: string, parentLoopId?: s
// Split the inner content by commas, respecting nested parentheses
for (let i = 0; i < innerContent.length; i++) {
const char = innerContent[i]
if (char === '(') nested++
if (char === ')') nested--
if (char === '(')
nested++
if (char === ')')
nested--
if (char === ',' && nested === 0) {
parts.push(buffer.trim())
@ -137,12 +141,12 @@ function parseParams(paramParts: string[], parentIteration?: string, parentLoopI
}
type NodeData = {
id: string;
node_id: string;
title: string;
node_type?: string;
execution_metadata: Record<string, any>;
status: string;
id: string
node_id: string
title: string
node_type?: string
execution_metadata: Record<string, any>
status: string
}
/**
@ -181,13 +185,17 @@ function convertRetryNode(node: Node): NodeData[] {
id: nodeId,
node_id: nodeId,
title: nodeId,
execution_metadata: iterationId ? {
iteration_id: iterationId,
iteration_index: iterationIndex || 0,
} : loopId ? {
loop_id: loopId,
loop_index: loopIndex || 0,
} : {},
execution_metadata: iterationId
? {
iteration_id: iterationId,
iteration_index: iterationIndex || 0,
}
: loopId
? {
loop_id: loopId,
loop_index: loopIndex || 0,
}
: {},
status: 'retry',
})
}

6
web/app/components/workflow/run/utils/format-log/index.ts
View File

@ -1,11 +1,11 @@
import type { NodeTracing } from '@/types/workflow'
import { cloneDeep } from 'lodash-es'
import { BlockEnum } from '../../../types'
import formatAgentNode from './agent'
import { addChildrenToIterationNode } from './iteration'
import { addChildrenToLoopNode } from './loop'
import formatParallelNode from './parallel'
import formatRetryNode from './retry'
import formatAgentNode from './agent'
import { cloneDeep } from 'lodash-es'
import { BlockEnum } from '../../../types'
const formatIterationAndLoopNode = (list: NodeTracing[], t: any) => {
const clonedList = cloneDeep(list)

4
web/app/components/workflow/run/utils/format-log/iteration/index.spec.ts
View File

@ -1,12 +1,12 @@
import { noop } from 'lodash-es'
import format from '.'
import graphToLogStruct from '../graph-to-log-struct'
import { noop } from 'lodash-es'
describe('iteration', () => {
const list = graphToLogStruct('start -> (iteration, iterationNode, plainNode1 -> plainNode2)')
// const [startNode, iterationNode, ...iterations] = list
const result = format(list as any, noop)
test('result should have no nodes in iteration node', () => {
it('result should have no nodes in iteration node', () => {
expect((result as any).find((item: any) => !!item.execution_metadata?.iteration_id)).toBeUndefined()
})
// test('iteration should put nodes in details', () => {

5
web/app/components/workflow/run/utils/format-log/iteration/index.ts
View File

@ -1,11 +1,12 @@
import { BlockEnum } from '@/app/components/workflow/types'
import type { NodeTracing } from '@/types/workflow'
import { BlockEnum } from '@/app/components/workflow/types'
import formatParallelNode from '../parallel'
export function addChildrenToIterationNode(iterationNode: NodeTracing, childrenNodes: NodeTracing[]): NodeTracing {
const details: NodeTracing[][] = []
childrenNodes.forEach((item, index) => {
if (!item.execution_metadata) return
if (!item.execution_metadata)
return
const { iteration_index = 0 } = item.execution_metadata
const runIndex: number = iteration_index !== undefined ? iteration_index : index
if (!details[runIndex])

6
web/app/components/workflow/run/utils/format-log/loop/index.spec.ts
View File

@ -1,15 +1,15 @@
import { noop } from 'lodash-es'
import format from '.'
import graphToLogStruct from '../graph-to-log-struct'
import { noop } from 'lodash-es'
describe('loop', () => {
const list = graphToLogStruct('start -> (loop, loopNode, plainNode1 -> plainNode2)')
const [startNode, loopNode, ...loops] = list
const result = format(list as any, noop)
test('result should have no nodes in loop node', () => {
it('result should have no nodes in loop node', () => {
expect(result.find(item => !!item.execution_metadata?.loop_id)).toBeUndefined()
})
test('loop should put nodes in details', () => {
it('loop should put nodes in details', () => {
expect(result).toEqual([
startNode,
{

5
web/app/components/workflow/run/utils/format-log/loop/index.ts
View File

@ -1,11 +1,12 @@
import { BlockEnum } from '@/app/components/workflow/types'
import type { NodeTracing } from '@/types/workflow'
import { BlockEnum } from '@/app/components/workflow/types'
import formatParallelNode from '../parallel'
export function addChildrenToLoopNode(loopNode: NodeTracing, childrenNodes: NodeTracing[]): NodeTracing {
const details: NodeTracing[][] = []
childrenNodes.forEach((item) => {
if (!item.execution_metadata) return
if (!item.execution_metadata)
return
const { parallel_mode_run_id, loop_index = 0 } = item.execution_metadata
const runIndex: number = (parallel_mode_run_id || loop_index) as number
if (!details[runIndex])

12
web/app/components/workflow/run/utils/format-log/parallel/index.ts
View File

@ -1,5 +1,5 @@
import { BlockEnum } from '@/app/components/workflow/types'
import type { NodeTracing } from '@/types/workflow'
import { BlockEnum } from '@/app/components/workflow/types'
function printNodeStructure(node: NodeTracing, depth: number) {
const indent = ' '.repeat(depth)
@ -12,11 +12,13 @@ function printNodeStructure(node: NodeTracing, depth: number) {
}
function addTitle({
list, depth, belongParallelIndexInfo,
list,
depth,
belongParallelIndexInfo,
}: {
list: NodeTracing[],
depth: number,
belongParallelIndexInfo?: string,
list: NodeTracing[]
depth: number
belongParallelIndexInfo?: string
}, t: any) {
let branchIndex = 0
const hasMoreThanOneParallel = list.filter(node => node.parallelDetail?.isParallelStartNode).length > 1

4
web/app/components/workflow/run/utils/format-log/retry/index.spec.ts
View File

@ -6,10 +6,10 @@ describe('retry', () => {
const steps = graphToLogStruct('start -> (retry, retryNode, 3)')
const [startNode, retryNode, ...retryDetail] = steps
const result = format(steps as any)
test('should have no retry status nodes', () => {
it('should have no retry status nodes', () => {
expect(result.find(item => item.status === 'retry')).toBeUndefined()
})
test('should put retry nodes in retryDetail', () => {
it('should put retry nodes in retryDetail', () => {
expect(result).toEqual([
startNode,
{