| | |
| | | RiErrorWarningLine, |
| | | } from '@remixicon/react' |
| | | import { |
| | | useFormatTimeFromNow, |
| | | useIsChatMode, |
| | | useNodesInteractions, |
| | | useWorkflow, |
| | | useWorkflowInteractions, |
| | | useWorkflowRun, |
| | | } from '../hooks' |
| | |
| | | const { t } = useTranslation() |
| | | const isChatMode = useIsChatMode() |
| | | const [open, setOpen] = useState(false) |
| | | const { formatTimeFromNow } = useFormatTimeFromNow() |
| | | const { formatTimeFromNow } = useWorkflow() |
| | | const { |
| | | handleNodesCancelSelected, |
| | | } = useNodesInteractions() |
| | |
| | | { |
| | | withText && ( |
| | | <div className={cn( |
| | | 'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 shadow-xs', |
| | | 'cursor-pointer text-[13px] font-medium text-components-button-secondary-text hover:bg-components-button-secondary-bg-hover', |
| | | open && 'bg-components-button-secondary-bg-hover', |
| | | 'flex items-center px-3 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs', |
| | | 'text-[13px] font-medium text-primary-600 cursor-pointer', |
| | | open && '!bg-primary-50', |
| | | )}> |
| | | <ClockPlay |
| | | className={'mr-1 h-4 w-4'} |
| | | className={'mr-1 w-4 h-4'} |
| | | /> |
| | | {t('workflow.common.showRunHistory')} |
| | | </div> |
| | |
| | | popupContent={t('workflow.common.viewRunHistory')} |
| | | > |
| | | <div |
| | | className={cn('group flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')} |
| | | className={cn('group flex items-center justify-center w-7 h-7 rounded-md hover:bg-state-accent-hover cursor-pointer', open && 'bg-state-accent-hover')} |
| | | onClick={() => { |
| | | setCurrentLogItem() |
| | | setShowMessageLogModal(false) |
| | | }} |
| | | > |
| | | <ClockPlay className={cn('h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} /> |
| | | <ClockPlay className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} /> |
| | | </div> |
| | | </Tooltip> |
| | | ) |
| | |
| | | </PortalToFollowElemTrigger> |
| | | <PortalToFollowElemContent className='z-[12]'> |
| | | <div |
| | | className='ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl' |
| | | className='flex flex-col ml-2 w-[240px] bg-white border-[0.5px] border-gray-200 shadow-xl rounded-xl overflow-y-auto' |
| | | style={{ |
| | | maxHeight: 'calc(2 / 3 * 100vh)', |
| | | }} |
| | | > |
| | | <div className='sticky top-0 flex items-center justify-between bg-components-panel-bg px-4 pt-3 text-base font-semibold text-text-primary'> |
| | | <div className='sticky top-0 bg-white flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'> |
| | | <div className='grow'>{t('workflow.common.runHistory')}</div> |
| | | <div |
| | | className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center' |
| | | className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer' |
| | | onClick={() => { |
| | | setCurrentLogItem() |
| | | setShowMessageLogModal(false) |
| | | setOpen(false) |
| | | }} |
| | | > |
| | | <RiCloseLine className='h-4 w-4 text-text-tertiary' /> |
| | | <RiCloseLine className='w-4 h-4 text-gray-500' /> |
| | | </div> |
| | | </div> |
| | | { |
| | | isLoading && ( |
| | | <div className='flex h-10 items-center justify-center'> |
| | | <div className='flex items-center justify-center h-10'> |
| | | <Loading /> |
| | | </div> |
| | | ) |
| | |
| | | { |
| | | !data?.data.length && ( |
| | | <div className='py-12'> |
| | | <ClockPlaySlim className='mx-auto mb-2 h-8 w-8 text-text-quaternary' /> |
| | | <div className='text-center text-[13px] text-text-quaternary'> |
| | | <ClockPlaySlim className='mx-auto mb-2 w-8 h-8 text-gray-300' /> |
| | | <div className='text-center text-[13px] text-gray-400'> |
| | | {t('workflow.common.notRunning')} |
| | | </div> |
| | | </div> |
| | |
| | | <div |
| | | key={item.id} |
| | | className={cn( |
| | | 'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-state-base-hover', |
| | | item.id === historyWorkflowData?.id && 'bg-state-accent-hover hover:bg-state-accent-hover', |
| | | 'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer', |
| | | item.id === historyWorkflowData?.id && 'bg-primary-50', |
| | | )} |
| | | onClick={() => { |
| | | workflowStore.setState({ |
| | |
| | | > |
| | | { |
| | | !isChatMode && item.status === WorkflowRunningStatus.Stopped && ( |
| | | <AlertTriangle className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F79009]' /> |
| | | <AlertTriangle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F79009]' /> |
| | | ) |
| | | } |
| | | { |
| | | !isChatMode && item.status === WorkflowRunningStatus.Failed && ( |
| | | <RiErrorWarningLine className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F04438]' /> |
| | | <RiErrorWarningLine className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F04438]' /> |
| | | ) |
| | | } |
| | | { |
| | | !isChatMode && item.status === WorkflowRunningStatus.Succeeded && ( |
| | | <RiCheckboxCircleLine className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#12B76A]' /> |
| | | <RiCheckboxCircleLine className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#12B76A]' /> |
| | | ) |
| | | } |
| | | <div> |
| | | <div |
| | | className={cn( |
| | | 'flex items-center text-[13px] font-medium leading-[18px] text-text-primary', |
| | | item.id === historyWorkflowData?.id && 'text-text-accent', |
| | | 'flex items-center text-[13px] font-medium leading-[18px]', |
| | | item.id === historyWorkflowData?.id && 'text-primary-600', |
| | | )} |
| | | > |
| | | {`Test ${isChatMode ? 'Chat' : 'Run'} #${item.sequence_number}`} |
| | | {`Test ${isChatMode ? 'Chat' : 'Run'}#${item.sequence_number}`} |
| | | </div> |
| | | <div className='flex items-center text-xs leading-[18px] text-text-tertiary'> |
| | | <div className='flex items-center text-xs text-gray-500 leading-[18px]'> |
| | | {item.created_by_account?.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)} |
| | | </div> |
| | | </div> |