| | |
| | | const statusTdRender = (status: string) => { |
| | | if (status === 'succeeded') { |
| | | return ( |
| | | <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'> |
| | | <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'> |
| | | <Indicator color={'green'} /> |
| | | <span className='text-util-colors-green-green-600'>Success</span> |
| | | </div> |
| | |
| | | } |
| | | if (status === 'failed') { |
| | | return ( |
| | | <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'> |
| | | <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'> |
| | | <Indicator color={'red'} /> |
| | | <span className='text-util-colors-red-red-600'>Fail</span> |
| | | </div> |
| | |
| | | } |
| | | if (status === 'stopped') { |
| | | return ( |
| | | <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'> |
| | | <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'> |
| | | <Indicator color={'yellow'} /> |
| | | <span className='text-util-colors-warning-warning-600'>Stop</span> |
| | | </div> |
| | |
| | | } |
| | | if (status === 'running') { |
| | | return ( |
| | | <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'> |
| | | <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'> |
| | | <Indicator color={'blue'} /> |
| | | <span className='text-util-colors-blue-light-blue-light-600'>Running</span> |
| | | </div> |
| | |
| | | } |
| | | if (status === 'partial-succeeded') { |
| | | return ( |
| | | <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'> |
| | | <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'> |
| | | <Indicator color={'green'} /> |
| | | <span className='text-util-colors-green-green-600'>Partial Success</span> |
| | | </div> |
| | |
| | | <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}> |
| | | <thead className='system-xs-medium-uppercase text-text-tertiary'> |
| | | <tr> |
| | | <td className='w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1'></td> |
| | | <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.startTime')}</td> |
| | | <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.status')}</td> |
| | | <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.runtime')}</td> |
| | | <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.tokens')}</td> |
| | | <td className='whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.user')}</td> |
| | | <td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'></td> |
| | | <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.startTime')}</td> |
| | | <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.status')}</td> |
| | | <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.runtime')}</td> |
| | | <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.tokens')}</td> |
| | | <td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.user')}</td> |
| | | </tr> |
| | | </thead> |
| | | <tbody className="system-sm-regular text-text-secondary"> |
| | | <tbody className="text-text-secondary system-sm-regular"> |
| | | {logs.data.map((log: WorkflowAppLogDetail) => { |
| | | const endUser = log.created_by_end_user ? log.created_by_end_user.session_id : log.created_by_account ? log.created_by_account.name : defaultValue |
| | | return <tr |
| | | key={log.id} |
| | | className={cn('cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover', currentLog?.id !== log.id ? '' : 'bg-background-default-hover')} |
| | | className={cn('border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer', currentLog?.id !== log.id ? '' : 'bg-background-default-hover')} |
| | | onClick={() => { |
| | | setCurrentLog(log) |
| | | setShowDrawer(true) |
| | | }}> |
| | | <td className='h-4'> |
| | | {!log.read_at && ( |
| | | <div className='flex items-center p-3 pr-0.5'> |
| | | <span className='inline-block h-1.5 w-1.5 rounded bg-util-colors-blue-blue-500'></span> |
| | | <div className='p-3 pr-0.5 flex items-center'> |
| | | <span className='inline-block bg-util-colors-blue-blue-500 h-1.5 w-1.5 rounded'></span> |
| | | </div> |
| | | )} |
| | | </td> |
| | | <td className='w-[160px] p-3 pr-2'>{formatTime(log.created_at, t('appLog.dateTimeFormat') as string)}</td> |
| | | <td className='p-3 pr-2 w-[160px]'>{formatTime(log.created_at, t('appLog.dateTimeFormat') as string)}</td> |
| | | <td className='p-3 pr-2'>{statusTdRender(log.workflow_run.status)}</td> |
| | | <td className='p-3 pr-2'> |
| | | <div className={cn( |
| | |
| | | onClose={onCloseDrawer} |
| | | mask={isMobile} |
| | | footer={null} |
| | | panelClassName='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] rounded-xl border border-components-panel-border' |
| | | panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] rounded-xl border border-components-panel-border' |
| | | > |
| | | <DetailPanel onClose={onCloseDrawer} runID={currentLog?.workflow_run.id || ''} /> |
| | | </Drawer> |