youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 09:58:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

workflow log result

Browse Source
This commit is contained in:
JzoNg
2024-03-08 21:10:11 +08:00
parent 08d2a4279f
commit 93e2dc4f5f
10 changed files with 115 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,13 +5,14 @@ import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import Result from './result'
import Tracing from './tracing'
// import type { App } from '@/types/app'
type RunProps = {
activeTab: 'RESULT' | 'TRACING'
appId: string
runID: string
}
const RunPanel: FC<RunProps> = ({ activeTab, appId }) => {
const RunPanel: FC<RunProps> = ({ activeTab, runID }) => {
const { t } = useTranslation()
const [currentTab, setCurrentTab] = useState<string>(activeTab)
@ -36,8 +37,8 @@ const RunPanel: FC<RunProps> = ({ activeTab, appId }) => {
</div>
{/* panel detal */}
<div className={cn('grow bg-white h-0 overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>
{currentTab === 'RESULT' && <Result />}
{currentTab === 'TRACING' && <Tracing appId={appId}/>}
{currentTab === 'RESULT' && <Result runID={runID} />}
{currentTab === 'TRACING' && <Tracing />}
</div>
</div>
)

8
web/app/components/workflow/run/meta.tsx
View File

@ -10,8 +10,6 @@ type Props = {
startTime?: number
time?: number
tokens?: number
fee?: number
currency?: string
steps?: number
}
@ -21,8 +19,6 @@ const MetaData: FC<Props> = ({
startTime = 0,
time,
tokens,
fee = 0,
currency = 'USD',
steps = 1,
}) => {
const { t } = useTranslation()
@ -55,7 +51,7 @@ const MetaData: FC<Props> = ({
<div className='my-[5px] w-[88px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
)}
{status !== 'running' && (
<span>{executor}</span>
<span>{executor || 'N/A'}</span>
)}
</div>
</div>
@ -88,7 +84,7 @@ const MetaData: FC<Props> = ({
<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>
<span>{`${tokens} Tokens`}</span>
)}
</div>
</div>

96
web/app/components/workflow/run/result.tsx
View File

@ -1,46 +1,94 @@
'use client'
import type { FC } from 'react'
// import React, { useState } from 'react'
// import { useTranslation } from 'react-i18next'
// import cn from 'classnames'
import React, { useEffect, useMemo, useState } from 'react'
import StatusPanel from './status'
import MetaData from './meta'
// import Loading from '@/app/components/base/loading'
import Loading from '@/app/components/base/loading'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { fetchRunDetail } from '@/service/log'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import type { WorkflowRunDetailResponse } from '@/models/log'
import { useStore as useAppStore } from '@/app/components/app/store'
type ResultProps = {
// appId: string
runID: string
}
const Result: FC<ResultProps> = () => {
// const { t } = useTranslation()
// const [currentTab, setCurrentTab] = useState<string>(activeTab)
const Result: FC<ResultProps> = ({ runID }) => {
const { appDetail } = useAppStore()
const [loading, setLoading] = useState<boolean>(true)
const [runDetail, setRunDetail] = useState<WorkflowRunDetailResponse>()
const executor = useMemo(() => {
if (runDetail?.created_by_role === 'account')
return runDetail.created_by_account?.name
if (runDetail?.created_by_role === 'end_user')
return runDetail.created_by_end_user?.session_id
return 'N/A'
}, [runDetail])
useEffect(() => {
// fetch data
if (appDetail && runID) {
setLoading(true)
fetchRunDetail({
appID: appDetail?.id,
runID,
}).then((res: WorkflowRunDetailResponse) => {
setLoading(false)
setRunDetail(res)
})
}
}, [appDetail, runID])
if (loading || !runDetail) {
return (
<div className='flex h-full items-center justify-center bg-white'>
<Loading />
</div>
)
}
return (
<div className='bg-white py-2'>
<div className='px-4 py-2'>
<StatusPanel status={'running'} time={0.653} tokens={27} />
</div>
<div className='px-4 py-2'>
<StatusPanel status={'succeeded'} time={0.653} tokens={27} />
</div>
<div className='px-4 py-2'>
<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={runDetail.status}
time={runDetail.elapsed_time}
tokens={runDetail.total_tokens}
error={runDetail.error}
/>
</div>
<div className='px-4 py-2 flex flex-col gap-2'>
<div>INPUT TODO</div>
<div>OUPUT TODO</div>
{/* ###TODO### value */}
<CodeEditor
readOnly
title={<div>INPUT</div>}
language={CodeLanguage.json}
value={''}
onChange={() => {}}
/>
{/* ###TODO### value */}
<CodeEditor
readOnly
title={<div>OUTPUT</div>}
language={CodeLanguage.json}
value={''}
onChange={() => {}}
/>
</div>
<div className='px-4 py-2'>
<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} />
<MetaData
status={runDetail.status}
executor={executor}
startTime={runDetail.created_at}
time={runDetail.elapsed_time}
tokens={runDetail.total_tokens}
steps={runDetail.total_steps}
/>
</div>
</div>
)

6
web/app/components/workflow/run/status.tsx
View File

@ -26,7 +26,7 @@ const StatusPanel: FC<ResultProps> = ({
status === 'running' && '!bg-primary-50',
status === 'succeeded' && '!bg-[#ecfdf3]',
status === 'failed' && '!bg-[#fef3f2]',
status === 'stopped' && '!bg-gray-200',
status === 'stopped' && '!bg-[#fffaeb]',
)}
>
<div className='flex'>
@ -38,7 +38,7 @@ const StatusPanel: FC<ResultProps> = ({
status === 'running' && '!text-primary-600',
status === 'succeeded' && '!text-[#039855]',
status === 'failed' && '!text-[#d92d20]',
status === 'stopped' && '!text-gray-700',
status === 'stopped' && '!text-[#f79009]',
)}
>
{status === 'running' && (
@ -58,7 +58,7 @@ const StatusPanel: FC<ResultProps> = ({
)}
{status === 'stopped' && (
<>
<Indicator color={'gray'} />
<Indicator color={'yellow'} />
<span>STOP</span>
</>
)}

4
web/app/components/workflow/run/tracing.tsx
View File

@ -7,7 +7,7 @@ import { BlockEnum } from '../types'
import NodePanel from './node'
type TracingProps = {
appId: string
// appId: string
}
const nodeInfoFake = {
@ -18,7 +18,7 @@ const nodeInfoFake = {
status: 'succeeded',
}
const Tracing: FC<TracingProps> = ({ appId }) => {
const Tracing: FC<TracingProps> = () => {
const { t } = useTranslation()
const [nodeCollapsed, setCurrentTab] = useState<boolean>(false)