From 93e2dc4f5f9dcaaf750035115ccb05235593c978 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Fri, 8 Mar 2024 21:10:11 +0800 Subject: [PATCH] workflow log result --- .../components/app/workflow-log/detail.tsx | 7 +- web/app/components/app/workflow-log/index.tsx | 7 +- web/app/components/app/workflow-log/list.tsx | 4 +- web/app/components/workflow/run/index.tsx | 9 +- web/app/components/workflow/run/meta.tsx | 8 +- web/app/components/workflow/run/result.tsx | 96 ++++++++++++++----- web/app/components/workflow/run/status.tsx | 6 +- web/app/components/workflow/run/tracing.tsx | 4 +- web/models/log.ts | 19 ++++ web/service/log.ts | 5 + 10 files changed, 115 insertions(+), 50 deletions(-) diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx index 40796a1772..448c02b399 100644 --- a/web/app/components/app/workflow-log/detail.tsx +++ b/web/app/components/app/workflow-log/detail.tsx @@ -1,16 +1,15 @@ 'use client' import type { FC } from 'react' import { useTranslation } from 'react-i18next' -import type { App } from '@/types/app' import Run from '@/app/components/workflow/run' import { XClose } from '@/app/components/base/icons/src/vender/line/general' type ILogDetail = { - appDetail: App + runID: string onClose: () => void } -const DetailPanel: FC = ({ appDetail, onClose }) => { +const DetailPanel: FC = ({ runID, onClose }) => { const { t } = useTranslation() return ( @@ -19,7 +18,7 @@ const DetailPanel: FC = ({ appDetail, onClose }) => {

{t('appLog.runDetail.workflowTitle')}

- + ) } diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx index 5fd345cc3d..1990d28c08 100644 --- a/web/app/components/app/workflow-log/index.tsx +++ b/web/app/components/app/workflow-log/index.tsx @@ -81,10 +81,7 @@ const Logs: FC = ({ appDetail }) => { return (
-

{ - console.log(1) - setShowDrawer(true) - }}>{t('appLog.workflowTitle')}

+

setShowDrawer(true)}>{t('appLog.workflowTitle')}

{t('appLog.workflowSubtitle')}

@@ -136,7 +133,7 @@ const Logs: FC = ({ appDetail }) => { footer={null} 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 373b234c89..6c5b8e9476 100644 --- a/web/app/components/app/workflow-log/list.tsx +++ b/web/app/components/app/workflow-log/list.tsx @@ -95,8 +95,8 @@ const WorkflowAppLogList: FC = ({ logs, appDetail, onRefresh }) => { key={log.id} className={`border-b border-gray-200 h-8 hover:bg-gray-50 cursor-pointer ${currentLog?.id !== log.id ? '' : 'bg-gray-50'}`} onClick={() => { - setShowDrawer(true) setCurrentLog(log) + setShowDrawer(true) }}> {!log.read_at && } {dayjs.unix(log.created_at).format(t('appLog.dateTimeFormat') as string)} @@ -124,7 +124,7 @@ const WorkflowAppLogList: FC = ({ logs, appDetail, onRefresh }) => { footer={null} 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 ff8ac7743e..e63e05f2ad 100644 --- a/web/app/components/workflow/run/index.tsx +++ b/web/app/components/workflow/run/index.tsx @@ -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 = ({ activeTab, appId }) => { +const RunPanel: FC = ({ activeTab, runID }) => { const { t } = useTranslation() const [currentTab, setCurrentTab] = useState(activeTab) @@ -36,8 +37,8 @@ const RunPanel: FC = ({ activeTab, appId }) => { {/* panel detal */}
- {currentTab === 'RESULT' && } - {currentTab === 'TRACING' && } + {currentTab === 'RESULT' && } + {currentTab === 'TRACING' && }
) diff --git a/web/app/components/workflow/run/meta.tsx b/web/app/components/workflow/run/meta.tsx index b3241d80a1..a886399344 100644 --- a/web/app/components/workflow/run/meta.tsx +++ b/web/app/components/workflow/run/meta.tsx @@ -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 = ({ startTime = 0, time, tokens, - fee = 0, - currency = 'USD', steps = 1, }) => { const { t } = useTranslation() @@ -55,7 +51,7 @@ const MetaData: FC = ({
)} {status !== 'running' && ( - {executor} + {executor || 'N/A'} )}
@@ -88,7 +84,7 @@ const MetaData: FC = ({
)} {status !== 'running' && ( - {`${tokens} Tokens ยท ${fee.toLocaleString('en-US', { style: 'currency', currency, minimumFractionDigits: 4 })}`} + {`${tokens} Tokens`} )}
diff --git a/web/app/components/workflow/run/result.tsx b/web/app/components/workflow/run/result.tsx index 7fbd3e5469..10c75f3c40 100644 --- a/web/app/components/workflow/run/result.tsx +++ b/web/app/components/workflow/run/result.tsx @@ -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 = () => { - // const { t } = useTranslation() - // const [currentTab, setCurrentTab] = useState(activeTab) +const Result: FC = ({ runID }) => { + const { appDetail } = useAppStore() + const [loading, setLoading] = useState(true) + const [runDetail, setRunDetail] = useState() + + 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 ( +
+ +
+ ) + } return (
- -
-
- -
-
- -
-
- +
-
INPUT TODO
-
OUPUT TODO
+ {/* ###TODO### value */} + INPUT
} + language={CodeLanguage.json} + value={''} + onChange={() => {}} + /> + {/* ###TODO### value */} + OUTPUT
} + language={CodeLanguage.json} + value={''} + onChange={() => {}} + />
- -
-
- +
) diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx index 4a526861e9..b5422d812c 100644 --- a/web/app/components/workflow/run/status.tsx +++ b/web/app/components/workflow/run/status.tsx @@ -26,7 +26,7 @@ const StatusPanel: FC = ({ status === 'running' && '!bg-primary-50', status === 'succeeded' && '!bg-[#ecfdf3]', status === 'failed' && '!bg-[#fef3f2]', - status === 'stopped' && '!bg-gray-200', + status === 'stopped' && '!bg-[#fffaeb]', )} >
@@ -38,7 +38,7 @@ const StatusPanel: FC = ({ 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 = ({ )} {status === 'stopped' && ( <> - + STOP )} diff --git a/web/app/components/workflow/run/tracing.tsx b/web/app/components/workflow/run/tracing.tsx index adfcc8563a..4fba6d69f3 100644 --- a/web/app/components/workflow/run/tracing.tsx +++ b/web/app/components/workflow/run/tracing.tsx @@ -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 = ({ appId }) => { +const Tracing: FC = () => { const { t } = useTranslation() const [nodeCollapsed, setCurrentTab] = useState(false) diff --git a/web/models/log.ts b/web/models/log.ts index 471bfa7e1f..f7a74503b4 100644 --- a/web/models/log.ts +++ b/web/models/log.ts @@ -264,3 +264,22 @@ export type WorkflowLogsRequest = { page: number limit: number // The default value is 20 and the range is 1-100 } + +export type WorkflowRunDetailResponse = { + id: string + sequence_number: number + version: string + graph: any // TODO + inputs: any // json + status: 'running' | 'succeeded' | 'failed' | 'stopped' + outputs?: any // json + error?: string + elapsed_time?: number + total_tokens?: number + total_steps: number + created_by_role: 'account' | 'end_user' + created_by_account?: AccountInfo + created_by_end_user?: EndUserInfo + created_at: number + finished_at: number +} diff --git a/web/service/log.ts b/web/service/log.ts index 9238b4947b..413374b676 100644 --- a/web/service/log.ts +++ b/web/service/log.ts @@ -17,6 +17,7 @@ import type { LogMessageFeedbacksResponse, WorkflowLogsRequest, WorkflowLogsResponse, + WorkflowRunDetailResponse, } from '@/models/log' export const fetchConversationList: Fetcher }> = ({ appId, params }) => { @@ -63,3 +64,7 @@ export const fetchAnnotationsCount: Fetcher = ({ url, params }) => { return get(url, { params }) } + +export const fetchRunDetail = ({ appID, runID }: { appID: string; runID: string }) => { + return get(`/apps/${appID}/workflow-run/${runID}`) +}