From cfb853efbfddad2810f56760c65cc03d37001ad8 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 1 Mar 2024 20:31:41 +0800
Subject: [PATCH] log detail panel

---
 .../components/app/workflow-log/detail.tsx    | 27 +++++++++++
 web/app/components/app/workflow-log/index.tsx | 21 ++++++++-
 web/app/components/app/workflow-log/list.tsx  | 18 ++------
 web/app/components/workflow/run/index.tsx     | 46 +++++++++++++++++++
 web/app/components/workflow/run/result.tsx    | 24 ++++++++++
 web/app/components/workflow/run/tracing.tsx   | 24 ++++++++++
 web/i18n/en-US/app-log.ts                     |  6 +++
 web/i18n/zh-Hans/app-log.ts                   |  8 +++-
 8 files changed, 156 insertions(+), 18 deletions(-)
 create mode 100644 web/app/components/app/workflow-log/detail.tsx
 create mode 100644 web/app/components/workflow/run/index.tsx
 create mode 100644 web/app/components/workflow/run/result.tsx
 create mode 100644 web/app/components/workflow/run/tracing.tsx

diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx
new file mode 100644
index 0000000000..3b2d7ff269
--- /dev/null
+++ b/web/app/components/app/workflow-log/detail.tsx
@@ -0,0 +1,27 @@
+'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
+  onClose: () => void
+}
+
+const DetailPanel: FC<ILogDetail> = ({ appDetail, onClose }) => {
+  const { t } = useTranslation()
+
+  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}>
+        <XClose className='w-4 h-4 text-gray-500' />
+      </span>
+      <h1 className='shrink-0 px-4 py-1 text-md font-semibold text-gray-900'>{t('appLog.runDetail.workflowTitle')}</h1>
+      <Run activeTab='RESULT' appId={appDetail?.id || ''}></Run>
+    </div>
+  )
+}
+
+export default DetailPanel
diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx
index 6601bd923a..8aa1d1a632 100644
--- a/web/app/components/app/workflow-log/index.tsx
+++ b/web/app/components/app/workflow-log/index.tsx
@@ -9,12 +9,14 @@ import { Trans, useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import List from './list'
 import Filter from './filter'
+import DetailPanel from './detail'
 import s from './style.module.css'
 import Loading from '@/app/components/base/loading'
 import { fetchWorkflowLogs } from '@/service/log'
 import { fetchAppDetail } from '@/service/apps'
 import { APP_PAGE_LIMIT } from '@/config'
 import type { AppMode } from '@/types/app'
+import Drawer from '@/app/components/base/drawer'
 
 export type ILogsProps = {
   appId: string
@@ -50,6 +52,11 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
 }
 
 const Logs: FC<ILogsProps> = ({ appId }) => {
+  const [showDrawer, setShowDrawer] = useState<boolean>(true)
+  const onCloseDrawer = () => {
+    setShowDrawer(false)
+  }
+
   const { t } = useTranslation()
   const [queryParams, setQueryParams] = useState<QueryParam>({ status: 'all' })
   const [currPage, setCurrPage] = React.useState<number>(0)
@@ -79,7 +86,10 @@ const Logs: FC<ILogsProps> = ({ appId }) => {
 
   return (
     <div className='flex flex-col h-full'>
-      <h1 className='text-md font-semibold text-gray-900'>{t('appLog.workflowTitle')}</h1>
+      <h1 className='text-md font-semibold text-gray-900' onClick={() => {
+        console.log(1)
+        setShowDrawer(true)
+      }}>{t('appLog.workflowTitle')}</h1>
       <p className='flex text-sm font-normal text-gray-500'>{t('appLog.workflowSubtitle')}</p>
       <div className='flex flex-col py-4 flex-1'>
         <Filter queryParams={queryParams} setQueryParams={setQueryParams} />
@@ -124,6 +134,15 @@ const Logs: FC<ILogsProps> = ({ appId }) => {
           </Pagination>
           : null}
       </div>
+      <Drawer
+        isOpen={showDrawer}
+        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'
+      >
+        <DetailPanel onClose={onCloseDrawer} appDetail={appDetail} />
+      </Drawer>
     </div>
   )
 }
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 6a089fcb68..dd033c2320 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import dayjs from 'dayjs'
-import { createContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import s from './style.module.css'
+import DetailPanel from './detail'
 import type { WorkflowAppLogDetail, WorkflowLogsResponse } from '@/models/log'
 import type { App } from '@/types/app'
 import Loading from '@/app/components/base/loading'
@@ -21,13 +21,6 @@ type ILogs = {
 
 const defaultValue = 'N/A'
 
-type IDrawerContext = {
-  onClose: () => void
-  appDetail?: App
-}
-
-const DrawerContext = createContext<IDrawerContext>({} as IDrawerContext)
-
 const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
   const { t } = useTranslation()
 
@@ -130,14 +123,9 @@ const WorkflowAppLogList: FC<ILogs> = ({ 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'
+        panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl border border-gray-200'
       >
-        <DrawerContext.Provider value={{
-          onClose: onCloseDrawer,
-          appDetail,
-        }}>
-          {<div>TODO</div>}
-        </DrawerContext.Provider>
+        <DetailPanel onClose={onCloseDrawer} appDetail={appDetail} />
       </Drawer>
     </div>
   )
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
new file mode 100644
index 0000000000..77fb5ec0b0
--- /dev/null
+++ b/web/app/components/workflow/run/index.tsx
@@ -0,0 +1,46 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import Result from './result'
+import Tracing from './tracing'
+
+type RunProps = {
+  activeTab: 'RESULT' | 'TRACING'
+  appId: string
+}
+
+const RunPanel: FC<RunProps> = ({ activeTab, appId }) => {
+  const { t } = useTranslation()
+  const [currentTab, setCurrentTab] = useState<string>(activeTab)
+
+  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={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',
+          )}
+          onClick={() => setCurrentTab('RESULT')}
+        >{t('appLog.runDetail.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 === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
+          )}
+          onClick={() => setCurrentTab('TRACING')}
+        >{t('appLog.runDetail.tracing')}</div>
+      </div>
+      {/* panel detal */}
+      <div className={cn('grow bg-white overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>
+        {currentTab === 'RESULT' && <Result appId={appId}/>}
+        {currentTab === 'TRACING' && <Tracing appId={appId}/>}
+      </div>
+    </div>
+  )
+}
+
+export default RunPanel
diff --git a/web/app/components/workflow/run/result.tsx b/web/app/components/workflow/run/result.tsx
new file mode 100644
index 0000000000..4e71213541
--- /dev/null
+++ b/web/app/components/workflow/run/result.tsx
@@ -0,0 +1,24 @@
+'use client'
+import type { FC } from 'react'
+// import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+// import cn from 'classnames'
+// import Loading from '@/app/components/base/loading'
+// import Indicator from '@/app/components/header/indicator'
+
+type ResultProps = {
+  appId: string
+}
+
+const Result: FC<ResultProps> = ({ appId }) => {
+  const { t } = useTranslation()
+  // const [currentTab, setCurrentTab] = useState<string>(activeTab)
+
+  return (
+    <div className='bg-white'>
+      Result panel = TODO
+    </div>
+  )
+}
+
+export default Result
diff --git a/web/app/components/workflow/run/tracing.tsx b/web/app/components/workflow/run/tracing.tsx
new file mode 100644
index 0000000000..51f54b33aa
--- /dev/null
+++ b/web/app/components/workflow/run/tracing.tsx
@@ -0,0 +1,24 @@
+'use client'
+import type { FC } from 'react'
+// import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+// import cn from 'classnames'
+// import Loading from '@/app/components/base/loading'
+// import Indicator from '@/app/components/header/indicator'
+
+type TracingProps = {
+  appId: string
+}
+
+const Tracing: FC<TracingProps> = ({ appId }) => {
+  const { t } = useTranslation()
+  // const [currentTab, setCurrentTab] = useState<string>(activeTab)
+
+  return (
+    <div className='bg-gray-50'>
+      Tracing panel = TODO
+    </div>
+  )
+}
+
+export default Tracing
diff --git a/web/i18n/en-US/app-log.ts b/web/i18n/en-US/app-log.ts
index 9a0d4f419f..e4849cc935 100644
--- a/web/i18n/en-US/app-log.ts
+++ b/web/i18n/en-US/app-log.ts
@@ -72,6 +72,12 @@ const translation = {
   },
   workflowTitle: 'Workflow Logs',
   workflowSubtitle: 'The log recorded the operation of Automate.',
+  runDetail: {
+    title: 'Conversation Log',
+    workflowTitle: 'Log Detail',
+    result: 'RESULT',
+    tracing: 'TRACING',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/app-log.ts b/web/i18n/zh-Hans/app-log.ts
index 6355ccba87..c5eae35836 100644
--- a/web/i18n/zh-Hans/app-log.ts
+++ b/web/i18n/zh-Hans/app-log.ts
@@ -70,8 +70,12 @@ const translation = {
       not_annotated: '未标注',
     },
   },
-  workflowTitle: 'Workflow Logs',
-  workflowSubtitle: 'The log recorded the operation of Automate.',
+  workflowTitle: '日志',
+  workflowSubtitle: '日志记录了应用的执行情况',
+  runDetail: {
+    title: '对话日志',
+    workflowTitle: '日志详情',
+  },
 }
 
 export default translation