From 7b2499c29272b5d8b3fb3d675d0f62ff5a813857 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Sat, 2 Mar 2024 11:16:23 +0800 Subject: [PATCH] add meta data of run log --- web/app/components/app/workflow-log/index.tsx | 2 +- web/app/components/app/workflow-log/list.tsx | 2 +- web/app/components/workflow/run/index.tsx | 4 +- web/app/components/workflow/run/meta.tsx | 111 ++++++++++++++++ web/app/components/workflow/run/result.tsx | 27 ++-- web/app/components/workflow/run/status.tsx | 120 ++++++++++-------- web/i18n/en-US/run-log.ts | 10 ++ web/i18n/zh-Hans/run-log.ts | 10 ++ 8 files changed, 216 insertions(+), 70 deletions(-) create mode 100644 web/app/components/workflow/run/meta.tsx diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx index 8aa1d1a632..0ebc8d2f9e 100644 --- a/web/app/components/app/workflow-log/index.tsx +++ b/web/app/components/app/workflow-log/index.tsx @@ -139,7 +139,7 @@ const Logs: FC = ({ 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' > diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx index dd033c2320..a98a284ce9 100644 --- a/web/app/components/app/workflow-log/list.tsx +++ b/web/app/components/app/workflow-log/list.tsx @@ -123,7 +123,7 @@ const WorkflowAppLogList: FC = ({ 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' > diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx index f2c72c7948..ff8ac7743e 100644 --- a/web/app/components/workflow/run/index.tsx +++ b/web/app/components/workflow/run/index.tsx @@ -35,8 +35,8 @@ const RunPanel: FC = ({ activeTab, appId }) => { >{t('runLog.tracing')} {/* panel detal */} -
- {currentTab === 'RESULT' && } +
+ {currentTab === 'RESULT' && } {currentTab === 'TRACING' && }
diff --git a/web/app/components/workflow/run/meta.tsx b/web/app/components/workflow/run/meta.tsx new file mode 100644 index 0000000000..b3241d80a1 --- /dev/null +++ b/web/app/components/workflow/run/meta.tsx @@ -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 = ({ + status, + executor, + startTime = 0, + time, + tokens, + fee = 0, + currency = 'USD', + steps = 1, +}) => { + const { t } = useTranslation() + + return ( +
+
{t('runLog.meta.title')}
+
+
+
{t('runLog.meta.status')}
+
+ {status === 'running' && ( +
+ )} + {status === 'succeeded' && ( + SUCCESS + )} + {status === 'failed' && ( + FAIL + )} + {status === 'stopped' && ( + STOP + )} +
+
+
+
{t('runLog.meta.executor')}
+
+ {status === 'running' && ( +
+ )} + {status !== 'running' && ( + {executor} + )} +
+
+
+
{t('runLog.meta.startTime')}
+
+ {status === 'running' && ( +
+ )} + {status !== 'running' && ( + {dayjs(startTime * 1000).format('YYYY-MM-DD hh:mm:ss')} + )} +
+
+
+
{t('runLog.meta.time')}
+
+ {status === 'running' && ( +
+ )} + {status !== 'running' && ( + {`${time}s`} + )} +
+
+
+
{t('runLog.meta.tokens')}
+
+ {status === 'running' && ( +
+ )} + {status !== 'running' && ( + {`${tokens} Tokens · ${fee.toLocaleString('en-US', { style: 'currency', currency, minimumFractionDigits: 4 })}`} + )} +
+
+
+
{t('runLog.meta.steps')}
+
+ {status === 'running' && ( +
+ )} + {status !== 'running' && ( + {steps} + )} +
+
+
+
+ ) +} + +export default MetaData diff --git a/web/app/components/workflow/run/result.tsx b/web/app/components/workflow/run/result.tsx index 141b977a4d..7fbd3e5469 100644 --- a/web/app/components/workflow/run/result.tsx +++ b/web/app/components/workflow/run/result.tsx @@ -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 = ({ appId }) => { - const { t } = useTranslation() +const Result: FC = () => { + // const { t } = useTranslation() // const [currentTab, setCurrentTab] = useState(activeTab) return (
- +
- +
- +
- +
INPUT TODO
OUPUT TODO
-
+
+
+
+ +
+
+
-
META DATA TODO
) } diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx index 0ef0dd36a2..4a526861e9 100644 --- a/web/app/components/workflow/run/status.tsx +++ b/web/app/components/workflow/run/status.tsx @@ -8,81 +8,91 @@ type ResultProps = { status: 'running' | 'succeeded' | 'failed' | 'stopped' time?: number tokens?: number + error?: string } const StatusPanel: FC = ({ status, time, tokens, + error, }) => { const { t } = useTranslation() return (
-
-
{t('runLog.resultPanel.status')}
-
- {status === 'running' && ( - Running - )} - {status === 'succeeded' && ( - <> - - SUCCESS - - )} - {status === 'failed' && ( - <> - - FAIL - - )} - {status === 'stopped' && ( - <> - - STOP - - )} -
-
-
-
{t('runLog.resultPanel.time')}
-
- {status === 'running' && ( -
- )} - {status !== 'running' && ( - {`${time}s`} - )} -
-
-
-
{t('runLog.resultPanel.tokens')}
-
- {status === 'running' && ( -
- )} - {status !== 'running' && ( - {`${tokens} Tokens`} - )} +
+
+
{t('runLog.resultPanel.status')}
+
+ {status === 'running' && ( + Running + )} + {status === 'succeeded' && ( + <> + + SUCCESS + + )} + {status === 'failed' && ( + <> + + FAIL + + )} + {status === 'stopped' && ( + <> + + STOP + + )} +
+
+
+
{t('runLog.resultPanel.time')}
+
+ {status === 'running' && ( +
+ )} + {status !== 'running' && ( + {`${time}s`} + )} +
+
+
+
{t('runLog.resultPanel.tokens')}
+
+ {status === 'running' && ( +
+ )} + {status !== 'running' && ( + {`${tokens} Tokens`} + )} +
+ {status === 'failed' && error && ( + <> +
+
{error}
+ + )}
) } diff --git a/web/i18n/en-US/run-log.ts b/web/i18n/en-US/run-log.ts index 14684413cf..964076c1f4 100644 --- a/web/i18n/en-US/run-log.ts +++ b/web/i18n/en-US/run-log.ts @@ -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 diff --git a/web/i18n/zh-Hans/run-log.ts b/web/i18n/zh-Hans/run-log.ts index d7079b9fb0..5149c92798 100644 --- a/web/i18n/zh-Hans/run-log.ts +++ b/web/i18n/zh-Hans/run-log.ts @@ -6,6 +6,16 @@ const translation = { time: '运行时间', tokens: '总 token 数', }, + meta: { + title: '元数据', + status: '状态', + version: '版本', + executor: '执行人', + startTime: '开始时间', + time: '运行时间', + tokens: '总 token 数', + steps: '运行步数', + }, } export default translation