style(workflow): fix line endings and formatting in node panel component
Mminamiyama
11 months ago
parent
091c480547
commit
b5960bf525
@ -1,293 +1,293 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import type { FC } from 'react'
|
import type { FC } from 'react'
|
||||||
import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
|
import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
|
||||||
import {
|
import {
|
||||||
RiAlertFill,
|
RiAlertFill,
|
||||||
RiArrowRightSLine,
|
RiArrowRightSLine,
|
||||||
RiCheckboxCircleFill,
|
RiCheckboxCircleFill,
|
||||||
RiErrorWarningLine,
|
RiErrorWarningLine,
|
||||||
RiLoader2Line,
|
RiLoader2Line,
|
||||||
} from '@remixicon/react'
|
} from '@remixicon/react'
|
||||||
import BlockIcon from '../block-icon'
|
import BlockIcon from '../block-icon'
|
||||||
import { BlockEnum } from '../types'
|
import { BlockEnum } from '../types'
|
||||||
import { RetryLogTrigger } from './retry-log'
|
import { RetryLogTrigger } from './retry-log'
|
||||||
import { IterationLogTrigger } from './iteration-log'
|
import { IterationLogTrigger } from './iteration-log'
|
||||||
import { LoopLogTrigger } from './loop-log'
|
import { LoopLogTrigger } from './loop-log'
|
||||||
import { AgentLogTrigger } from './agent-log'
|
import { AgentLogTrigger } from './agent-log'
|
||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
import StatusContainer from '@/app/components/workflow/run/status-container'
|
import StatusContainer from '@/app/components/workflow/run/status-container'
|
||||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||||
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
||||||
import type {
|
import type {
|
||||||
AgentLogItemWithChildren,
|
AgentLogItemWithChildren,
|
||||||
IterationDurationMap,
|
IterationDurationMap,
|
||||||
LoopDurationMap,
|
LoopDurationMap,
|
||||||
LoopVariableMap,
|
LoopVariableMap,
|
||||||
NodeTracing,
|
NodeTracing,
|
||||||
} from '@/types/workflow'
|
} from '@/types/workflow'
|
||||||
import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
|
import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
|
||||||
import { hasRetryNode } from '@/app/components/workflow/utils'
|
import { hasRetryNode } from '@/app/components/workflow/utils'
|
||||||
import { useDocLink } from '@/context/i18n'
|
import { useDocLink } from '@/context/i18n'
|
||||||
import Tooltip from '@/app/components/base/tooltip'
|
import Tooltip from '@/app/components/base/tooltip'
|
||||||
import NodePosition from '@/app/components/workflow/nodes/_base/components/node-position'
|
import NodePosition from '@/app/components/workflow/nodes/_base/components/node-position'
|
||||||
import type { XYPosition } from 'reactflow'
|
import type { XYPosition } from 'reactflow'
|
||||||
import { WorkflowHistoryStoreContext } from '@/app/components/workflow/workflow-history-store'
|
import { WorkflowHistoryStoreContext } from '@/app/components/workflow/workflow-history-store'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
className?: string
|
className?: string
|
||||||
nodeInfo: NodeTracing
|
nodeInfo: NodeTracing
|
||||||
allExecutions?: NodeTracing[]
|
allExecutions?: NodeTracing[]
|
||||||
inMessage?: boolean
|
inMessage?: boolean
|
||||||
hideInfo?: boolean
|
hideInfo?: boolean
|
||||||
hideProcessDetail?: boolean
|
hideProcessDetail?: boolean
|
||||||
onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
|
onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
|
||||||
onShowLoopDetail?: (detail: NodeTracing[][], loopDurationMap: LoopDurationMap, loopVariableMap: LoopVariableMap) => void
|
onShowLoopDetail?: (detail: NodeTracing[][], loopDurationMap: LoopDurationMap, loopVariableMap: LoopVariableMap) => void
|
||||||
onShowRetryDetail?: (detail: NodeTracing[]) => void
|
onShowRetryDetail?: (detail: NodeTracing[]) => void
|
||||||
onShowAgentOrToolLog?: (detail?: AgentLogItemWithChildren) => void
|
onShowAgentOrToolLog?: (detail?: AgentLogItemWithChildren) => void
|
||||||
notShowIterationNav?: boolean
|
notShowIterationNav?: boolean
|
||||||
notShowLoopNav?: boolean
|
notShowLoopNav?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const NodePanel: FC<Props> = ({
|
const NodePanel: FC<Props> = ({
|
||||||
className,
|
className,
|
||||||
nodeInfo,
|
nodeInfo,
|
||||||
allExecutions,
|
allExecutions,
|
||||||
inMessage = false,
|
inMessage = false,
|
||||||
hideInfo = false,
|
hideInfo = false,
|
||||||
hideProcessDetail,
|
hideProcessDetail,
|
||||||
onShowIterationDetail,
|
onShowIterationDetail,
|
||||||
onShowLoopDetail,
|
onShowLoopDetail,
|
||||||
onShowRetryDetail,
|
onShowRetryDetail,
|
||||||
onShowAgentOrToolLog,
|
onShowAgentOrToolLog,
|
||||||
notShowIterationNav,
|
notShowIterationNav,
|
||||||
notShowLoopNav,
|
notShowLoopNav,
|
||||||
}) => {
|
}) => {
|
||||||
const { store } = useContext(WorkflowHistoryStoreContext)
|
const { store } = useContext(WorkflowHistoryStoreContext)
|
||||||
let inPublishMode = true
|
let inPublishMode = true
|
||||||
let hasNode = false
|
let hasNode = false
|
||||||
let nodePosition: XYPosition = { x: 0, y: 0 }
|
let nodePosition: XYPosition = { x: 0, y: 0 }
|
||||||
let nodeWidth = 0
|
let nodeWidth = 0
|
||||||
let nodeHeight = 0
|
let nodeHeight = 0
|
||||||
|
|
||||||
if (store) {
|
if (store) {
|
||||||
inPublishMode = false
|
inPublishMode = false
|
||||||
const nodes = store.getState().nodes
|
const nodes = store.getState().nodes
|
||||||
const currentNodeIndex = nodes.findIndex(node => node.id === nodeInfo.node_id)
|
const currentNodeIndex = nodes.findIndex(node => node.id === nodeInfo.node_id)
|
||||||
const currentNode = nodes[currentNodeIndex]
|
const currentNode = nodes[currentNodeIndex]
|
||||||
nodePosition = currentNode?.position ?? { x: -1, y: -1 }
|
nodePosition = currentNode?.position ?? { x: -1, y: -1 }
|
||||||
nodeWidth = currentNode?.width ?? -1
|
nodeWidth = currentNode?.width ?? -1
|
||||||
nodeHeight = currentNode?.height ?? -1
|
nodeHeight = currentNode?.height ?? -1
|
||||||
hasNode = !!currentNode
|
hasNode = !!currentNode
|
||||||
}
|
}
|
||||||
|
|
||||||
const [collapseState, doSetCollapseState] = useState<boolean>(true)
|
const [collapseState, doSetCollapseState] = useState<boolean>(true)
|
||||||
const setCollapseState = useCallback((state: boolean) => {
|
const setCollapseState = useCallback((state: boolean) => {
|
||||||
if (hideProcessDetail)
|
if (hideProcessDetail)
|
||||||
return
|
return
|
||||||
doSetCollapseState(state)
|
doSetCollapseState(state)
|
||||||
}, [hideProcessDetail])
|
}, [hideProcessDetail])
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const docLink = useDocLink()
|
const docLink = useDocLink()
|
||||||
|
|
||||||
const getTime = (time: number) => {
|
const getTime = (time: number) => {
|
||||||
if (time < 1)
|
if (time < 1)
|
||||||
return `${(time * 1000).toFixed(3)} ms`
|
return `${(time * 1000).toFixed(3)} ms`
|
||||||
if (time > 60)
|
if (time > 60)
|
||||||
return `${Number.parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
|
return `${Number.parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
|
||||||
return `${time.toFixed(3)} s`
|
return `${time.toFixed(3)} s`
|
||||||
}
|
}
|
||||||
|
|
||||||
const getTokenCount = (tokens: number) => {
|
const getTokenCount = (tokens: number) => {
|
||||||
if (tokens < 1000)
|
if (tokens < 1000)
|
||||||
return tokens
|
return tokens
|
||||||
if (tokens >= 1000 && tokens < 1000000)
|
if (tokens >= 1000 && tokens < 1000000)
|
||||||
return `${Number.parseFloat((tokens / 1000).toFixed(3))}K`
|
return `${Number.parseFloat((tokens / 1000).toFixed(3))}K`
|
||||||
if (tokens >= 1000000)
|
if (tokens >= 1000000)
|
||||||
return `${Number.parseFloat((tokens / 1000000).toFixed(3))}M`
|
return `${Number.parseFloat((tokens / 1000000).toFixed(3))}M`
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCollapseState(!nodeInfo.expand)
|
setCollapseState(!nodeInfo.expand)
|
||||||
}, [nodeInfo.expand, setCollapseState])
|
}, [nodeInfo.expand, setCollapseState])
|
||||||
|
|
||||||
const isIterationNode = nodeInfo.node_type === BlockEnum.Iteration && !!nodeInfo.details?.length
|
const isIterationNode = nodeInfo.node_type === BlockEnum.Iteration && !!nodeInfo.details?.length
|
||||||
const isLoopNode = nodeInfo.node_type === BlockEnum.Loop && !!nodeInfo.details?.length
|
const isLoopNode = nodeInfo.node_type === BlockEnum.Loop && !!nodeInfo.details?.length
|
||||||
const isRetryNode = hasRetryNode(nodeInfo.node_type) && !!nodeInfo.retryDetail?.length
|
const isRetryNode = hasRetryNode(nodeInfo.node_type) && !!nodeInfo.retryDetail?.length
|
||||||
const isAgentNode = nodeInfo.node_type === BlockEnum.Agent && !!nodeInfo.agentLog?.length
|
const isAgentNode = nodeInfo.node_type === BlockEnum.Agent && !!nodeInfo.agentLog?.length
|
||||||
const isToolNode = nodeInfo.node_type === BlockEnum.Tool && !!nodeInfo.agentLog?.length
|
const isToolNode = nodeInfo.node_type === BlockEnum.Tool && !!nodeInfo.agentLog?.length
|
||||||
|
|
||||||
const inputsTitle = useMemo(() => {
|
const inputsTitle = useMemo(() => {
|
||||||
let text = t('workflow.common.input')
|
let text = t('workflow.common.input')
|
||||||
if (nodeInfo.node_type === BlockEnum.Loop)
|
if (nodeInfo.node_type === BlockEnum.Loop)
|
||||||
text = t('workflow.nodes.loop.initialLoopVariables')
|
text = t('workflow.nodes.loop.initialLoopVariables')
|
||||||
return text.toLocaleUpperCase()
|
return text.toLocaleUpperCase()
|
||||||
}, [nodeInfo.node_type, t])
|
}, [nodeInfo.node_type, t])
|
||||||
const processDataTitle = t('workflow.common.processData').toLocaleUpperCase()
|
const processDataTitle = t('workflow.common.processData').toLocaleUpperCase()
|
||||||
const outputTitle = useMemo(() => {
|
const outputTitle = useMemo(() => {
|
||||||
let text = t('workflow.common.output')
|
let text = t('workflow.common.output')
|
||||||
if (nodeInfo.node_type === BlockEnum.Loop)
|
if (nodeInfo.node_type === BlockEnum.Loop)
|
||||||
text = t('workflow.nodes.loop.finalLoopVariables')
|
text = t('workflow.nodes.loop.finalLoopVariables')
|
||||||
return text.toLocaleUpperCase()
|
return text.toLocaleUpperCase()
|
||||||
}, [nodeInfo.node_type, t])
|
}, [nodeInfo.node_type, t])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn('px-2 py-1', className)}>
|
<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
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex cursor-pointer items-center pl-1 pr-3',
|
'flex cursor-pointer items-center pl-1 pr-3',
|
||||||
hideInfo ? 'py-2 pl-2' : 'py-1.5',
|
hideInfo ? 'py-2 pl-2' : 'py-1.5',
|
||||||
!collapseState && (hideInfo ? '!pb-1' : '!pb-1.5'),
|
!collapseState && (hideInfo ? '!pb-1' : '!pb-1.5'),
|
||||||
)}
|
)}
|
||||||
onClick={() => setCollapseState(!collapseState)}
|
onClick={() => setCollapseState(!collapseState)}
|
||||||
>
|
>
|
||||||
{!hideProcessDetail && (
|
{!hideProcessDetail && (
|
||||||
<RiArrowRightSLine
|
<RiArrowRightSLine
|
||||||
className={cn(
|
className={cn(
|
||||||
'mr-1 h-4 w-4 shrink-0 text-text-quaternary transition-all group-hover:text-text-tertiary',
|
'mr-1 h-4 w-4 shrink-0 text-text-quaternary transition-all group-hover:text-text-tertiary',
|
||||||
!collapseState && 'rotate-90',
|
!collapseState && 'rotate-90',
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('mr-2 shrink-0', inMessage && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
|
<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
|
<Tooltip
|
||||||
popupContent={
|
popupContent={
|
||||||
<div className='max-w-xs'>{nodeInfo.title}</div>
|
<div className='max-w-xs'>{nodeInfo.title}</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
'system-xs-semibold-uppercase grow truncate text-text-secondary',
|
'system-xs-semibold-uppercase grow truncate text-text-secondary',
|
||||||
hideInfo && '!text-xs',
|
hideInfo && '!text-xs',
|
||||||
)}>{nodeInfo.title}</div>
|
)}>{nodeInfo.title}</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
{nodeInfo.status !== 'running' && !hideInfo && (
|
{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' && (
|
{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' && (
|
{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' && (
|
{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')} />
|
<RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
|
||||||
)}
|
)}
|
||||||
{nodeInfo.status === 'exception' && (
|
{nodeInfo.status === 'exception' && (
|
||||||
<RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
|
<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' && (
|
{nodeInfo.status === 'running' && (
|
||||||
<div className='flex shrink-0 items-center text-[13px] font-medium leading-[16px] text-text-accent'>
|
<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>
|
<span className='mr-2 text-xs font-normal'>Running</span>
|
||||||
<RiLoader2Line className='h-3.5 w-3.5 animate-spin' />
|
<RiLoader2Line className='h-3.5 w-3.5 animate-spin' />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!inPublishMode && (
|
{!inPublishMode && (
|
||||||
<div className='ml-1' style={{ pointerEvents: hasNode ? 'auto' : 'none', opacity: hasNode ? 1 : 0.5 }}>
|
<div className='ml-1' style={{ pointerEvents: hasNode ? 'auto' : 'none', opacity: hasNode ? 1 : 0.5 }}>
|
||||||
<NodePosition nodePosition={nodePosition} nodeWidth={nodeWidth} nodeHeight={nodeHeight}></NodePosition>
|
<NodePosition nodePosition={nodePosition} nodeWidth={nodeWidth} nodeHeight={nodeHeight}></NodePosition>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{!collapseState && !hideProcessDetail && (
|
{!collapseState && !hideProcessDetail && (
|
||||||
<div className='px-1 pb-1'>
|
<div className='px-1 pb-1'>
|
||||||
{/* The nav to the iteration detail */}
|
{/* The nav to the iteration detail */}
|
||||||
{isIterationNode && !notShowIterationNav && onShowIterationDetail && (
|
{isIterationNode && !notShowIterationNav && onShowIterationDetail && (
|
||||||
<IterationLogTrigger
|
<IterationLogTrigger
|
||||||
nodeInfo={nodeInfo}
|
nodeInfo={nodeInfo}
|
||||||
allExecutions={allExecutions}
|
allExecutions={allExecutions}
|
||||||
onShowIterationResultList={onShowIterationDetail}
|
onShowIterationResultList={onShowIterationDetail}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{/* The nav to the Loop detail */}
|
{/* The nav to the Loop detail */}
|
||||||
{isLoopNode && !notShowLoopNav && onShowLoopDetail && (
|
{isLoopNode && !notShowLoopNav && onShowLoopDetail && (
|
||||||
<LoopLogTrigger
|
<LoopLogTrigger
|
||||||
nodeInfo={nodeInfo}
|
nodeInfo={nodeInfo}
|
||||||
allExecutions={allExecutions}
|
allExecutions={allExecutions}
|
||||||
onShowLoopResultList={onShowLoopDetail}
|
onShowLoopResultList={onShowLoopDetail}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{isRetryNode && onShowRetryDetail && (
|
{isRetryNode && onShowRetryDetail && (
|
||||||
<RetryLogTrigger
|
<RetryLogTrigger
|
||||||
nodeInfo={nodeInfo}
|
nodeInfo={nodeInfo}
|
||||||
onShowRetryResultList={onShowRetryDetail}
|
onShowRetryResultList={onShowRetryDetail}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{
|
{
|
||||||
(isAgentNode || isToolNode) && onShowAgentOrToolLog && (
|
(isAgentNode || isToolNode) && onShowAgentOrToolLog && (
|
||||||
<AgentLogTrigger
|
<AgentLogTrigger
|
||||||
nodeInfo={nodeInfo}
|
nodeInfo={nodeInfo}
|
||||||
onShowAgentOrToolLog={onShowAgentOrToolLog}
|
onShowAgentOrToolLog={onShowAgentOrToolLog}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
<div className={cn('mb-1', hideInfo && '!px-2 !py-0.5')}>
|
<div className={cn('mb-1', hideInfo && '!px-2 !py-0.5')}>
|
||||||
{(nodeInfo.status === 'stopped') && (
|
{(nodeInfo.status === 'stopped') && (
|
||||||
<StatusContainer status='stopped'>
|
<StatusContainer status='stopped'>
|
||||||
{t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}
|
{t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}
|
||||||
</StatusContainer>
|
</StatusContainer>
|
||||||
)}
|
)}
|
||||||
{(nodeInfo.status === 'exception') && (
|
{(nodeInfo.status === 'exception') && (
|
||||||
<StatusContainer status='stopped'>
|
<StatusContainer status='stopped'>
|
||||||
{nodeInfo.error}
|
{nodeInfo.error}
|
||||||
<a
|
<a
|
||||||
href={docLink('/guides/workflow/error-handling/error-type')}
|
href={docLink('/guides/workflow/error-handling/error-type')}
|
||||||
target='_blank'
|
target='_blank'
|
||||||
className='text-text-accent'
|
className='text-text-accent'
|
||||||
>
|
>
|
||||||
{t('workflow.common.learnMore')}
|
{t('workflow.common.learnMore')}
|
||||||
</a>
|
</a>
|
||||||
</StatusContainer>
|
</StatusContainer>
|
||||||
)}
|
)}
|
||||||
{nodeInfo.status === 'failed' && (
|
{nodeInfo.status === 'failed' && (
|
||||||
<StatusContainer status='failed'>
|
<StatusContainer status='failed'>
|
||||||
{nodeInfo.error}
|
{nodeInfo.error}
|
||||||
</StatusContainer>
|
</StatusContainer>
|
||||||
)}
|
)}
|
||||||
{nodeInfo.status === 'retry' && (
|
{nodeInfo.status === 'retry' && (
|
||||||
<StatusContainer status='failed'>
|
<StatusContainer status='failed'>
|
||||||
{nodeInfo.error}
|
{nodeInfo.error}
|
||||||
</StatusContainer>
|
</StatusContainer>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{nodeInfo.inputs && (
|
{nodeInfo.inputs && (
|
||||||
<div className={cn('mb-1')}>
|
<div className={cn('mb-1')}>
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
readOnly
|
readOnly
|
||||||
title={<div>{inputsTitle}</div>}
|
title={<div>{inputsTitle}</div>}
|
||||||
language={CodeLanguage.json}
|
language={CodeLanguage.json}
|
||||||
value={nodeInfo.inputs}
|
value={nodeInfo.inputs}
|
||||||
isJSONStringifyBeauty
|
isJSONStringifyBeauty
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{nodeInfo.process_data && (
|
{nodeInfo.process_data && (
|
||||||
<div className={cn('mb-1')}>
|
<div className={cn('mb-1')}>
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
readOnly
|
readOnly
|
||||||
title={<div>{processDataTitle}</div>}
|
title={<div>{processDataTitle}</div>}
|
||||||
language={CodeLanguage.json}
|
language={CodeLanguage.json}
|
||||||
value={nodeInfo.process_data}
|
value={nodeInfo.process_data}
|
||||||
isJSONStringifyBeauty
|
isJSONStringifyBeauty
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{nodeInfo.outputs && (
|
{nodeInfo.outputs && (
|
||||||
<div>
|
<div>
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
readOnly
|
readOnly
|
||||||
title={<div>{outputTitle}</div>}
|
title={<div>{outputTitle}</div>}
|
||||||
language={CodeLanguage.json}
|
language={CodeLanguage.json}
|
||||||
value={nodeInfo.outputs}
|
value={nodeInfo.outputs}
|
||||||
isJSONStringifyBeauty
|
isJSONStringifyBeauty
|
||||||
tip={<ErrorHandleTip type={nodeInfo.execution_metadata?.error_strategy} />}
|
tip={<ErrorHandleTip type={nodeInfo.execution_metadata?.error_strategy} />}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default NodePanel
|
export default NodePanel
|
||||||
|
|||||||
Loading…
Reference in New Issue