| | |
| | | import type { FC } from 'react' |
| | | import React from 'react' |
| | | import { useTranslation } from 'react-i18next' |
| | | import { |
| | | RiArrowRightSLine, |
| | | } from '@remixicon/react' |
| | | import VarReferencePicker from '../_base/components/variable/var-reference-picker' |
| | | import Split from '../_base/components/split' |
| | | import ResultPanel from '../../run/result-panel' |
| | | import IterationResultPanel from '../../run/iteration-result-panel' |
| | | import { MAX_ITERATION_PARALLEL_NUM, MIN_ITERATION_PARALLEL_NUM } from '../../constants' |
| | | import type { IterationNodeType } from './types' |
| | | import useConfig from './use-config' |
| | |
| | | import Select from '@/app/components/base/select' |
| | | import Slider from '@/app/components/base/slider' |
| | | import Input from '@/app/components/base/input' |
| | | import formatTracing from '@/app/components/workflow/run/utils/format-log' |
| | | |
| | | import { useLogs } from '@/app/components/workflow/run/hooks' |
| | | |
| | | const i18nPrefix = 'workflow.nodes.iteration' |
| | | |
| | |
| | | handleOutputVarChange, |
| | | isShowSingleRun, |
| | | hideSingleRun, |
| | | isShowIterationDetail, |
| | | backToSingleRun, |
| | | showIterationDetail, |
| | | hideIterationDetail, |
| | | runningStatus, |
| | | handleRun, |
| | | handleStop, |
| | |
| | | changeParallelNums, |
| | | } = useConfig(id, data) |
| | | |
| | | const nodeInfo = formatTracing(iterationRunResult, t)[0] |
| | | const logsParams = useLogs() |
| | | |
| | | return ( |
| | | <div className='pb-2 pt-2'> |
| | | <div className='space-y-4 px-4 pb-4'> |
| | | <div className='pt-2 pb-2'> |
| | | <div className='px-4 pb-4 space-y-4'> |
| | | <Field |
| | | title={t(`${i18nPrefix}.input`)} |
| | | required |
| | | operations={( |
| | | <div className='system-2xs-medium-uppercase flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 capitalize text-text-tertiary'>Array</div> |
| | | <div className='flex items-center h-[18px] px-1 border border-divider-deep rounded-[5px] system-2xs-medium-uppercase text-text-tertiary capitalize'>Array</div> |
| | | )} |
| | | > |
| | | <VarReferencePicker |
| | |
| | | </Field> |
| | | </div> |
| | | <Split /> |
| | | <div className='mt-2 space-y-4 px-4 pb-4'> |
| | | <div className='mt-2 px-4 pb-4 space-y-4'> |
| | | <Field |
| | | title={t(`${i18nPrefix}.output`)} |
| | | required |
| | | operations={( |
| | | <div className='system-2xs-medium-uppercase flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 capitalize text-text-tertiary'>Array</div> |
| | | <div className='flex items-center h-[18px] px-1 border border-divider-deep rounded-[5px] system-2xs-medium-uppercase text-text-tertiary capitalize'>Array</div> |
| | | )} |
| | | > |
| | | <VarReferencePicker |
| | |
| | | { |
| | | inputs.is_parallel && (<div className='px-4 pb-2'> |
| | | <Field title={t(`${i18nPrefix}.MaxParallelismTitle`)} isSubTitle tooltip={<div className='w-[230px]'>{t(`${i18nPrefix}.MaxParallelismDesc`)}</div>}> |
| | | <div className='row flex'> |
| | | <div className='flex row'> |
| | | <Input type='number' wrapperClassName='w-18 mr-4 ' max={MAX_ITERATION_PARALLEL_NUM} min={MIN_ITERATION_PARALLEL_NUM} value={inputs.parallel_nums} onChange={(e) => { changeParallelNums(Number(e.target.value)) }} /> |
| | | <Slider |
| | | value={inputs.parallel_nums} |
| | | onChange={changeParallelNums} |
| | | max={MAX_ITERATION_PARALLEL_NUM} |
| | | min={MIN_ITERATION_PARALLEL_NUM} |
| | | className=' mt-4 flex-1 shrink-0' |
| | | className=' flex-shrink-0 flex-1 mt-4' |
| | | /> |
| | | </div> |
| | | |
| | |
| | | required: false, |
| | | }], |
| | | values: { [iteratorInputKey]: iterator }, |
| | | onChange: keyValue => setIterator(keyValue[iteratorInputKey]), |
| | | onChange: keyValue => setIterator((keyValue as any)[iteratorInputKey]), |
| | | }, |
| | | ]} |
| | | runningStatus={runningStatus} |
| | | onRun={handleRun} |
| | | onStop={handleStop} |
| | | {...logsParams} |
| | | result={ |
| | | <ResultPanel {...runResult} showSteps={false} nodeInfo={nodeInfo} {...logsParams} /> |
| | | <div className='mt-3'> |
| | | <div className='px-4'> |
| | | <div className='flex items-center h-[34px] justify-between px-3 bg-gray-100 border-[0.5px] border-gray-200 rounded-lg cursor-pointer' onClick={showIterationDetail}> |
| | | <div className='leading-[18px] text-[13px] font-medium text-gray-700'>{t(`${i18nPrefix}.iteration`, { count: iterationRunResult.length })}</div> |
| | | <RiArrowRightSLine className='w-3.5 h-3.5 text-gray-500' /> |
| | | </div> |
| | | <Split className='mt-3' /> |
| | | </div> |
| | | <ResultPanel {...runResult} showSteps={false} /> |
| | | </div> |
| | | } |
| | | /> |
| | | )} |
| | | {isShowIterationDetail && ( |
| | | <IterationResultPanel |
| | | onBack={backToSingleRun} |
| | | onHide={hideIterationDetail} |
| | | list={iterationRunResult} |
| | | /> |
| | | )} |
| | | </div> |
| | | ) |
| | | } |