mirror of https://github.com/langgenius/dify.git
add meta data of run log
This commit is contained in:
JzoNg
parent
2be2bc5877
commit
7b2499c292
|
|
@ -139,7 +139,7 @@ const Logs: FC<ILogsProps> = ({ appId }) => {
|
|||
onClose={onCloseDrawer}
|
||||
mask={false}
|
||||
footer={null}
|
||||
panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl border border-gray-200'
|
||||
panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] rounded-xl border border-gray-200'
|
||||
>
|
||||
<DetailPanel onClose={onCloseDrawer} appDetail={appDetail} />
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
|
|||
onClose={onCloseDrawer}
|
||||
mask={isMobile}
|
||||
footer={null}
|
||||
panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl border border-gray-200'
|
||||
panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] rounded-xl border border-gray-200'
|
||||
>
|
||||
<DetailPanel onClose={onCloseDrawer} appDetail={appDetail} />
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ const RunPanel: FC<RunProps> = ({ activeTab, appId }) => {
|
|||
>{t('runLog.tracing')}</div>
|
||||
</div>
|
||||
{/* panel detal */}
|
||||
<div className={cn('grow bg-white overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>
|
||||
{currentTab === 'RESULT' && <Result appId={appId}/>}
|
||||
<div className={cn('grow bg-white h-0 overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>
|
||||
{currentTab === 'RESULT' && <Result />}
|
||||
{currentTab === 'TRACING' && <Tracing appId={appId}/>}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
// import cn from 'classnames'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
type Props = {
|
||||
status: 'running' | 'succeeded' | 'failed' | 'stopped'
|
||||
executor?: string
|
||||
startTime?: number
|
||||
time?: number
|
||||
tokens?: number
|
||||
fee?: number
|
||||
currency?: string
|
||||
steps?: number
|
||||
}
|
||||
|
||||
const MetaData: FC<Props> = ({
|
||||
status,
|
||||
executor,
|
||||
startTime = 0,
|
||||
time,
|
||||
tokens,
|
||||
fee = 0,
|
||||
currency = 'USD',
|
||||
steps = 1,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='relative'>
|
||||
<div className='h-6 leading-6 text-gray-500 text-xs font-medium'>{t('runLog.meta.title')}</div>
|
||||
<div className='py-1'>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.status')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
{status === 'running' && (
|
||||
<div className='my-[5px] w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status === 'succeeded' && (
|
||||
<span>SUCCESS</span>
|
||||
)}
|
||||
{status === 'failed' && (
|
||||
<span>FAIL</span>
|
||||
)}
|
||||
{status === 'stopped' && (
|
||||
<span>STOP</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.executor')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
{status === 'running' && (
|
||||
<div className='my-[5px] w-[88px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{executor}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.startTime')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
{status === 'running' && (
|
||||
<div className='my-[5px] w-[72px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{dayjs(startTime * 1000).format('YYYY-MM-DD hh:mm:ss')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.time')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
{status === 'running' && (
|
||||
<div className='my-[5px] w-[72px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{`${time}s`}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.tokens')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
{status === 'running' && (
|
||||
<div className='my-[5px] w-[48px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{`${tokens} Tokens · ${fee.toLocaleString('en-US', { style: 'currency', currency, minimumFractionDigits: 4 })}`}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.steps')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
{status === 'running' && (
|
||||
<div className='my-[5px] w-[24px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{steps}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MetaData
|
||||
|
|
@ -1,42 +1,47 @@
|
|||
'use client'
|
||||
import type { FC } from 'react'
|
||||
// import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
// import { useTranslation } from 'react-i18next'
|
||||
// import cn from 'classnames'
|
||||
import StatusPanel from './status'
|
||||
import MetaData from './meta'
|
||||
// import Loading from '@/app/components/base/loading'
|
||||
// import Indicator from '@/app/components/header/indicator'
|
||||
|
||||
type ResultProps = {
|
||||
appId: string
|
||||
// appId: string
|
||||
}
|
||||
|
||||
const Result: FC<ResultProps> = ({ appId }) => {
|
||||
const { t } = useTranslation()
|
||||
const Result: FC<ResultProps> = () => {
|
||||
// const { t } = useTranslation()
|
||||
// const [currentTab, setCurrentTab] = useState<string>(activeTab)
|
||||
|
||||
return (
|
||||
<div className='bg-white py-2'>
|
||||
<div className='px-4 py-2'>
|
||||
<StatusPanel status='running' time={0.653} tokens={27} />
|
||||
<StatusPanel status={'running'} time={0.653} tokens={27} />
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<StatusPanel status='succeeded' time={0.653} tokens={27} />
|
||||
<StatusPanel status={'succeeded'} time={0.653} tokens={27} />
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<StatusPanel status='failed' time={0.653} tokens={27} />
|
||||
<StatusPanel status={'failed'} time={0.653} tokens={27} error='Fail message here' />
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<StatusPanel status='stopped' time={0.653} tokens={27} />
|
||||
<StatusPanel status={'stopped'} time={0.653} tokens={27} />
|
||||
</div>
|
||||
<div className='px-4 py-2 flex flex-col gap-2'>
|
||||
<div>INPUT TODO</div>
|
||||
<div>OUPUT TODO</div>
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<div className='h-[0.5px] bg-[rbga(0,0,0,0.05)]'/>
|
||||
<div className='h-[0.5px] bg-black opacity-5'/>
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<MetaData status={'running'} />
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<MetaData status={'succeeded'} executor={'Vince'} startTime={1702972783} time={0.653} tokens={27} fee={0.035} currency={'USD'} steps={7} />
|
||||
</div>
|
||||
<div className='px-4 py-2'>META DATA TODO</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,81 +8,91 @@ type ResultProps = {
|
|||
status: 'running' | 'succeeded' | 'failed' | 'stopped'
|
||||
time?: number
|
||||
tokens?: number
|
||||
error?: string
|
||||
}
|
||||
|
||||
const StatusPanel: FC<ResultProps> = ({
|
||||
status,
|
||||
time,
|
||||
tokens,
|
||||
error,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex px-3 py-[10px] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs',
|
||||
'px-3 py-[10px] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs',
|
||||
status === 'running' && '!bg-primary-50',
|
||||
status === 'succeeded' && '!bg-[#ecfdf3]',
|
||||
status === 'failed' && '!bg-[#fef3f2]',
|
||||
status === 'stopped' && '!bg-gray-200',
|
||||
)}
|
||||
>
|
||||
<div className='mr-24'>
|
||||
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.status')}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-1 h-[18px] text-xs leading-3 font-semibold',
|
||||
status === 'running' && '!text-primary-600',
|
||||
status === 'succeeded' && '!text-[#039855]',
|
||||
status === 'failed' && '!text-[#d92d20]',
|
||||
status === 'stopped' && '!text-gray-700',
|
||||
)}
|
||||
>
|
||||
{status === 'running' && (
|
||||
<span>Running</span>
|
||||
)}
|
||||
{status === 'succeeded' && (
|
||||
<>
|
||||
<Indicator color={'green'} />
|
||||
<span>SUCCESS</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'failed' && (
|
||||
<>
|
||||
<Indicator color={'red'} />
|
||||
<span>FAIL</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'stopped' && (
|
||||
<>
|
||||
<Indicator color={'gray'} />
|
||||
<span>STOP</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mr-24'>
|
||||
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.time')}</div>
|
||||
<div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
|
||||
{status === 'running' && (
|
||||
<div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{`${time}s`}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mr-24'>
|
||||
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.tokens')}</div>
|
||||
<div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
|
||||
{status === 'running' && (
|
||||
<div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{`${tokens} Tokens`}</span>
|
||||
)}
|
||||
<div className='flex'>
|
||||
<div className='mr-24'>
|
||||
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.status')}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-1 h-[18px] text-xs leading-3 font-semibold',
|
||||
status === 'running' && '!text-primary-600',
|
||||
status === 'succeeded' && '!text-[#039855]',
|
||||
status === 'failed' && '!text-[#d92d20]',
|
||||
status === 'stopped' && '!text-gray-700',
|
||||
)}
|
||||
>
|
||||
{status === 'running' && (
|
||||
<span>Running</span>
|
||||
)}
|
||||
{status === 'succeeded' && (
|
||||
<>
|
||||
<Indicator color={'green'} />
|
||||
<span>SUCCESS</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'failed' && (
|
||||
<>
|
||||
<Indicator color={'red'} />
|
||||
<span>FAIL</span>
|
||||
</>
|
||||
)}
|
||||
{status === 'stopped' && (
|
||||
<>
|
||||
<Indicator color={'gray'} />
|
||||
<span>STOP</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mr-24'>
|
||||
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.time')}</div>
|
||||
<div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
|
||||
{status === 'running' && (
|
||||
<div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{`${time}s`}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mr-24'>
|
||||
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.tokens')}</div>
|
||||
<div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
|
||||
{status === 'running' && (
|
||||
<div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
|
||||
)}
|
||||
{status !== 'running' && (
|
||||
<span>{`${tokens} Tokens`}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{status === 'failed' && error && (
|
||||
<>
|
||||
<div className='my-2 h-[0.5px] bg-black opacity-5'/>
|
||||
<div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,16 @@ const translation = {
|
|||
time: 'ELAPSED TIME',
|
||||
tokens: 'TOTAL TOKENS',
|
||||
},
|
||||
meta: {
|
||||
title: 'METADATA',
|
||||
status: 'Status',
|
||||
version: 'Version',
|
||||
executor: 'Executor',
|
||||
startTime: 'Start Time',
|
||||
time: 'Elapsed Time',
|
||||
tokens: 'Total Tokens',
|
||||
steps: 'Run Steps',
|
||||
},
|
||||
}
|
||||
|
||||
export default translation
|
||||
|
|
|
|||
|
|
@ -6,6 +6,16 @@ const translation = {
|
|||
time: '运行时间',
|
||||
tokens: '总 token 数',
|
||||
},
|
||||
meta: {
|
||||
title: '元数据',
|
||||
status: '状态',
|
||||
version: '版本',
|
||||
executor: '执行人',
|
||||
startTime: '开始时间',
|
||||
time: '运行时间',
|
||||
tokens: '总 token 数',
|
||||
steps: '运行步数',
|
||||
},
|
||||
}
|
||||
|
||||
export default translation
|
||||
|
|
|
|||
Loading…
Reference in New Issue