opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-30 13:37:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

new style of table

Browse Source
This commit is contained in:
JzoNg 2024-08-19 16:05:12 +08:00
parent 58a56add9c
commit cf61ca24e3
5 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/components/app/workflow-log/index.tsx
View File

@ -35,12 +35,12 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
const pathSegments = pathname.split('/') const pathSegments = pathname.split('/')
pathSegments.pop() pathSegments.pop()
return <div className='flex items-center justify-center h-full'> return <div className='flex items-center justify-center h-full'>
<div className='bg-gray-50 w-[560px] h-fit box-border px-5 py-4 rounded-2xl'> <div className='bg-background-section-burn w-[560px] h-fit box-border px-5 py-4 rounded-2xl'>
<span className='text-gray-700 font-semibold'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span> <span className='text-text-secondary system-md-semibold'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
<div className='mt-2 text-gray-500 text-sm font-normal'> <div className='mt-2 text-text-tertiary system-sm-regular'>
<Trans <Trans
i18nKey="appLog.table.empty.element.content" i18nKey="appLog.table.empty.element.content"
components={{ shareLink: <Link href={`${pathSegments.join('/')}/overview`} className='text-primary-600' />, testLink: <Link href={appUrl} className='text-primary-600' target='_blank' rel='noopener noreferrer' /> }} components={{ shareLink: <Link href={`${pathSegments.join('/')}/overview`} className='text-util-colors-blue-blue-600' />, testLink: <Link href={appUrl} className='text-util-colors-blue-blue-600' target='_blank' rel='noopener noreferrer' /> }}
/> />
</div> </div>
</div> </div>

64
web/app/components/app/workflow-log/list.tsx
View File

@ -2,7 +2,7 @@
import type { FC } from 'react' import type { FC } from 'react'
import React, { useState } from 'react' import React, { useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import s from './style.module.css' // import s from './style.module.css'
import DetailPanel from './detail' import DetailPanel from './detail'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import type { WorkflowAppLogDetail, WorkflowLogsResponse } from '@/models/log' import type { WorkflowAppLogDetail, WorkflowLogsResponse } from '@/models/log'
@ -34,33 +34,33 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
const statusTdRender = (status: string) => { const statusTdRender = (status: string) => {
if (status === 'succeeded') { if (status === 'succeeded') {
return ( return (
<div className='inline-flex items-center gap-1'> <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
<Indicator color={'green'} /> <Indicator color={'green'} />
<span>Success</span> <span className='text-util-colors-green-green-600'>Success</span>
</div> </div>
) )
} }
if (status === 'failed') { if (status === 'failed') {
return ( return (
<div className='inline-flex items-center gap-1'> <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
<Indicator color={'red'} /> <Indicator color={'red'} />
<span className='text-red-600'>Fail</span> <span className='text-util-colors-red-red-600'>Fail</span>
</div> </div>
) )
} }
if (status === 'stopped') { if (status === 'stopped') {
return ( return (
<div className='inline-flex items-center gap-1'> <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
<Indicator color={'yellow'} /> <Indicator color={'yellow'} />
<span>Stop</span> <span className='text-util-colors-warning-warning-600'>Stop</span>
</div> </div>
) )
} }
if (status === 'running') { if (status === 'running') {
return ( return (
<div className='inline-flex items-center gap-1'> <div className='inline-flex items-center gap-1 system-xs-semibold-uppercase'>
<Indicator color={'blue'} /> <Indicator color={'blue'} />
<span className='text-primary-600'>Running</span> <span className='text-util-colors-blue-light-blue-light-600'>Running</span>
</div> </div>
) )
} }
@ -77,43 +77,47 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
return ( return (
<div className='overflow-x-auto'> <div className='overflow-x-auto'>
<table className={cn('mt-1 w-full min-w-[440px] border-collapse border-0 text-sm', s.logTable)}> <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
<thead className="h-8 !pl-3 py-2 leading-[18px] border-b border-gray-200 text-xs text-gray-500 font-medium"> <thead className='system-xs-medium-uppercase text-text-tertiary'>
<tr> <tr>
<td className='w-[1.375rem] whitespace-nowrap'></td> <td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'></td>
<td className='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.startTime')}</td>
<td className='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.status')}</td>
<td className='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.runtime')}</td>
<td className='whitespace-nowrap'>{t('appLog.table.header.tokens')}</td> <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.tokens')}</td>
<td className='whitespace-nowrap'>{t('appLog.table.header.user')}</td> <td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap'>{t('appLog.table.header.user')}</td>
{/* <td className='whitespace-nowrap'>{t('appLog.table.header.version')}</td> */}
</tr> </tr>
</thead> </thead>
<tbody className="text-gray-700 text-[13px]"> <tbody className="text-text-secondary system-sm-regular">
{logs.data.map((log: WorkflowAppLogDetail) => { {logs.data.map((log: WorkflowAppLogDetail) => {
const endUser = log.created_by_end_user ? log.created_by_end_user.session_id : defaultValue const endUser = log.created_by_end_user ? log.created_by_end_user.session_id : defaultValue
return <tr return <tr
key={log.id} key={log.id}
className={`border-b border-gray-200 h-8 hover:bg-gray-50 cursor-pointer ${currentLog?.id !== log.id ? '' : 'bg-gray-50'}`} className={cn('border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer', currentLog?.id !== log.id ? '' : 'bg-background-default-hover')}
onClick={() => { onClick={() => {
setCurrentLog(log) setCurrentLog(log)
setShowDrawer(true) setShowDrawer(true)
}}> }}>
<td className='text-center align-middle'>{!log.read_at && <span className='inline-block bg-[#3F83F8] h-1.5 w-1.5 rounded'></span>}</td> <td className='h-4'>
<td className='w-[160px]'>{formatTime(log.created_at, t('appLog.dateTimeFormat') as string)}</td> {!log.read_at && (
<td>{statusTdRender(log.workflow_run.status)}</td> <div className='p-3 pr-0.5 flex items-center'>
<td> <span className='inline-block bg-util-colors-blue-blue-500 h-1.5 w-1.5 rounded'></span>
</div>
)}
</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( <div className={cn(
log.workflow_run.elapsed_time === 0 && 'text-gray-400', log.workflow_run.elapsed_time === 0 && 'text-text-quaternary',
)}>{`${log.workflow_run.elapsed_time.toFixed(3)}s`}</div> )}>{`${log.workflow_run.elapsed_time.toFixed(3)}s`}</div>
</td> </td>
<td>{log.workflow_run.total_tokens}</td> <td className='p-3 pr-2'>{log.workflow_run.total_tokens}</td>
<td> <td className='p-3 pr-2'>
<div className={cn(endUser === defaultValue ? 'text-gray-400' : 'text-gray-700', 'text-sm overflow-hidden text-ellipsis whitespace-nowrap')}> <div className={cn(endUser === defaultValue ? 'text-text-quaternary' : 'text-text-secondary', 'overflow-hidden text-ellipsis whitespace-nowrap')}>
{endUser} {endUser}
</div> </div>
</td> </td>
{/* <td>VERSION</td> */}
</tr> </tr>
})} })}
</tbody> </tbody>
@ -123,7 +127,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
onClose={onCloseDrawer} onClose={onCloseDrawer}
mask={isMobile} mask={isMobile}
footer={null} footer={null}
panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] 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-components-panel-border'
> >
<DetailPanel onClose={onCloseDrawer} runID={currentLog?.workflow_run.id || ''} /> <DetailPanel onClose={onCloseDrawer} runID={currentLog?.workflow_run.id || ''} />
</Drawer> </Drawer>

6
web/app/components/app/workflow-log/style.module.css
View File

@ -1,9 +1,3 @@
.logTable td {
padding: 7px 8px;
box-sizing: border-box;
max-width: 200px;
}
.pagination li { .pagination li {
list-style: none; list-style: none;
} }

2
web/app/components/workflow/run/index.tsx
View File

@ -197,7 +197,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
>{t('runLog.tracing')}</div> >{t('runLog.tracing')}</div>
</div> </div>
{/* panel detal */} {/* panel detal */}
<div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}> <div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-xl', currentTab === 'TRACING' && '!bg-background-section-burn')}>
{loading && ( {loading && (
<div className='flex h-full items-center justify-center bg-components-panel-bg'> <div className='flex h-full items-center justify-center bg-components-panel-bg'>
<Loading /> <Loading />

2
web/app/components/workflow/run/output-panel.tsx
View File

@ -20,7 +20,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
height, height,
}) => { }) => {
return ( return (
<div className='bg-background-section-burn py-2'> <div className='py-2'>
{isRunning && ( {isRunning && (
<div className='pt-4 pl-[26px]'> <div className='pt-4 pl-[26px]'>
<LoadingAnim type='text' /> <LoadingAnim type='text' />