opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style update of log

This commit is contained in:
JzoNg 2024-08-13 17:11:17 +08:00
parent 74333db4c8
commit bea4ec5998
10 changed files with 46 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/app/workflow-log/detail.tsx
View File

@ -15,9 +15,9 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose }) => {
return (
<div className='grow relative flex flex-col py-3'>
<span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-gray-500' />
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
</span>
<h1 className='shrink-0 px-4 py-1 text-md font-semibold text-gray-900'>{t('appLog.runDetail.workflowTitle')}</h1>
<h1 className='shrink-0 px-4 py-1 text-text-primary system-xl-semibold'>{t('appLog.runDetail.workflowTitle')}</h1>
<Run runID={runID}/>
</div>
)

14
web/app/components/base/chat/chat/answer/workflow-process.tsx
View File

@ -67,9 +67,9 @@ const WorkflowProcessItem = ({
return (
<div
className={cn(
'mb-2 rounded-xl border-[0.5px] border-black/8',
'mb-2 rounded-xl border-[0.5px] border-components-panel-border',
collapse ? 'py-[7px]' : hideInfo ? 'pt-2 pb-1' : 'py-2',
collapse && (!grayBg ? 'bg-white' : 'bg-gray-50'),
collapse && (!grayBg ? 'bg-components-panel-bg' : 'bg-background-section-burn'),
hideInfo ? 'mx-[-8px] px-1' : 'w-full px-3',
)}
style={{
@ -85,23 +85,23 @@ const WorkflowProcessItem = ({
>
{
running && (
<RiLoader2Line className='shrink-0 mr-1 w-3 h-3 text-[#667085] animate-spin' />
<RiLoader2Line className='shrink-0 mr-1 w-3 h-3 text-text-accent animate-spin' />
)
}
{
succeeded && (
<CheckCircle className='shrink-0 mr-1 w-3 h-3 text-[#12B76A]' />
<CheckCircle className='shrink-0 mr-1 w-3 h-3 text-text-success' />
)
}
{
failed && (
<RiErrorWarningFill className='shrink-0 mr-1 w-3 h-3 text-[#F04438]' />
<RiErrorWarningFill className='shrink-0 mr-1 w-3 h-3 text-text-destructive' />
)
}
<div className='grow text-xs font-medium text-gray-700'>
<div className='grow text-xs font-medium text-text-secondary'>
{t('workflow.common.workflowProcess')}
</div>
<RiArrowRightSLine className={`'ml-1 w-3 h-3 text-gray-500' ${collapse ? '' : 'rotate-90'}`} />
<RiArrowRightSLine className={`'ml-1 w-3 h-3 text-text-tertiary' ${collapse ? '' : 'rotate-90'}`} />
</div>
{
!collapse && (

50
web/app/components/base/message-log-modal/index.tsx
View File

@ -1,13 +1,11 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useBoolean, useClickAway } from 'ahooks'
import { useEffect, useRef, useState } from 'react'
import { useClickAway } from 'ahooks'
import { RiCloseLine } from '@remixicon/react'
import IterationResultPanel from '../../workflow/run/iteration-result-panel'
import cn from '@/utils/classnames'
import type { IChatItem } from '@/app/components/base/chat/chat/type'
import Run from '@/app/components/workflow/run'
import type { NodeTracing } from '@/types/workflow'
type MessageLogModalProps = {
currentLogItem?: IChatItem
@ -36,23 +34,12 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
setMounted(true)
}, [])
const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
const [isShowIterationDetail, {
setTrue: doShowIterationDetail,
setFalse: doHideIterationDetail,
}] = useBoolean(false)
const handleShowIterationDetail = useCallback((detail: NodeTracing[][]) => {
setIterationRunResult(detail)
doShowIterationDetail()
}, [doShowIterationDetail])
if (!currentLogItem || !currentLogItem.workflow_run_id)
return null
return (
<div
className={cn('relative flex flex-col py-3 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10')}
className={cn('relative flex flex-col py-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
style={{
width: fixedWidth ? width : 480,
...(!fixedWidth
@ -68,28 +55,15 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
}}
ref={ref}
>
{isShowIterationDetail
? (
<IterationResultPanel
list={iterationRunResult}
onHide={doHideIterationDetail}
onBack={doHideIterationDetail}
/>
)
: (
<>
<h1 className='shrink-0 px-4 py-1 text-md font-semibold text-gray-900'>{t('appLog.runDetail.title')}</h1>
<span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-gray-500' />
</span>
<Run
hideResult activeTab={defaultTab as any}
runID={currentLogItem.workflow_run_id}
onShowIterationDetail={handleShowIterationDetail}
/>
</>
)}
<h1 className='shrink-0 px-4 py-1 text-text-primary system-xl-semibold'>{t('appLog.runDetail.title')}</h1>
<span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
</span>
<Run
hideResult
activeTab={defaultTab as any}
runID={currentLogItem.workflow_run_id}
/>
</div>
)
}

4
web/app/components/workflow/panel/record.tsx
View File

@ -18,8 +18,8 @@ const Record = () => {
}, [handleUpdateWorkflowCanvas])
return (
<div className='flex flex-col w-[400px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white'>
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
<div className='flex flex-col w-[400px] h-full rounded-l-2xl border-[0.5px] border-components-panel-border shadow-xl bg-components-panel-bg'>
<div className='flex items-center justify-between p-4 pb-1 text-text-primary system-xl-semibold'>
{`Test Run#${historyWorkflowData?.sequence_number}`}
</div>
<Run

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

@ -22,10 +22,9 @@ export type RunProps = {
activeTab?: 'RESULT' | 'DETAIL' | 'TRACING'
runID: string
getResultCallback?: (result: WorkflowRunDetailResponse) => void
onShowIterationDetail: (detail: NodeTracing[][]) => void
}
const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getResultCallback, onShowIterationDetail }) => {
const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getResultCallback }) => {
const { t } = useTranslation()
const { notify } = useContext(ToastContext)
const [currentTab, setCurrentTab] = useState<string>(activeTab)
@ -197,35 +196,35 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
return (
<div className='grow relative flex flex-col'>
{/* tab */}
<div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
<div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-divider-subtle'>
{!hideResult && (
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
currentTab === 'RESULT' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('RESULT')}
>{t('runLog.result')}</div>
)}
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
currentTab === 'DETAIL' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('DETAIL')}
>{t('runLog.detail')}</div>
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
currentTab === 'TRACING' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('TRACING')}
>{t('runLog.tracing')}</div>
</div>
{/* panel detal */}
<div ref={ref} className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-gray-50')}>
<div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
{loading && (
<div className='flex h-full items-center justify-center bg-white'>
<div className='flex h-full items-center justify-center bg-components-panel-bg'>
<Loading />
</div>
)}

14
web/app/components/workflow/run/iteration-result-panel.tsx
View File

@ -28,24 +28,24 @@ const IterationResultPanel: FC<Props> = ({
<>
<div className={cn(!noWrap && 'shrink-0 ', 'pl-4 pr-3 pt-3')}>
<div className='shrink-0 flex justify-between items-center h-8'>
<div className='text-base font-semibold text-gray-900 truncate'>
<div className='system-xl-semibold text-text-primary truncate'>
{t(`${i18nPrefix}.testRunIteration`)}
</div>
<div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
<RiCloseLine className='w-4 h-4 text-gray-500 ' />
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div>
</div>
<div className='flex items-center py-2 space-x-1 text-primary-600 cursor-pointer' onClick={onBack}>
<div className='flex items-center py-2 space-x-1 text-util-colors-blue-brand-blue-brand-600 cursor-pointer' onClick={onBack}>
<ArrowNarrowLeft className='w-4 h-4' />
<div className='leading-[18px] text-[13px] font-medium'>{t(`${i18nPrefix}.back`)}</div>
<div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
</div>
</div>
{/* List */}
<div className={cn(!noWrap ? 'h-0 grow' : 'max-h-full', 'overflow-y-auto px-4 pb-4 bg-gray-50')}>
<div className={cn(!noWrap ? 'h-0 grow' : 'max-h-full', 'overflow-y-auto px-4 pb-4 bg-background-section-burn')}>
{list.map((iteration, index) => (
<div key={index} className={cn('my-4', index === 0 && 'mt-2')}>
<div className='flex items-center'>
<div className='shrink-0 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{t(`${i18nPrefix}.iteration`)} {index + 1}</div>
<div className='shrink-0 system-xs-semibold-uppercase text-text-tertiary'>{t(`${i18nPrefix}.iteration`)} {index + 1}</div>
<div
className='ml-3 grow w-0 h-px'
style={{ background: 'linear-gradient(to right, #F3F4F6, rgba(243, 244, 246, 0))' }}
@ -83,7 +83,7 @@ const IterationResultPanel: FC<Props> = ({
}}
onClick={handleNotBubble}
>
<div className='h-full rounded-2xl bg-white flex flex-col'>
<div className='h-full rounded-2xl bg-components-panel-bg flex flex-col'>
{main}
</div>
</div >

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

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

4
web/app/components/workflow/run/result-panel.tsx
View File

@ -36,7 +36,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
}) => {
const { t } = useTranslation()
return (
<div className='bg-white py-2'>
<div className='bg-components-panel-bg py-2'>
<div className='px-4 py-2'>
<StatusPanel
status={status}
@ -73,7 +73,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
)}
</div>
<div className='px-4 py-2'>
<div className='h-[0.5px] bg-black opacity-5' />
<div className='h-[0.5px] divider-subtle' />
</div>
<div className='px-4 py-2'>
<MetaData

4
web/app/components/workflow/run/result-text.tsx
View File

@ -20,7 +20,7 @@ const ResultText: FC<ResultTextProps> = ({
}) => {
const { t } = useTranslation()
return (
<div className='bg-gray-50 py-2'>
<div className='bg-background-section-burn py-2'>
{isRunning && !outputs && (
<div className='pt-4 pl-[26px]'>
<LoadingAnim type='text' />
@ -28,7 +28,7 @@ const ResultText: FC<ResultTextProps> = ({
)}
{!isRunning && error && (
<div className='px-4'>
<div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs'>
<div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-xs'>
<div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
</div>
</div>

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

@ -10,7 +10,7 @@ type TracingPanelProps = {
const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail }) => {
return (
<div className='bg-gray-50 py-2'>
<div className='bg-background-section-burn py-2'>
{list.map(node => (
<NodePanel
key={node.id}