workflow logs

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx

 import React from 'react'
 import Main from '@/app/components/app/log-annotation'
 import { PageType } from '@/app/components/app/configuration/toolbox/annotation/type'
-import type { AppMode } from '@/types/app'
 
 export type IProps = {
   params: { appId: string }
-  appMode: AppMode
 }
 
 const Logs = async ({
   params: { appId },
-  appMode,
 }: IProps) => {
   return (
-    <Main appMode={appMode} pageType={PageType.log} appId={appId} />
+    <Main pageType={PageType.log} appId={appId} />
   )
 }
 

web/app/components/app/log-annotation/index.tsx

@@ -7,32 +7,40 @@ import { useRouter } from 'next/navigation'
 import Log from '@/app/components/app/log'
 import WorkflowLog from '@/app/components/app/workflow-log'
 import Annotation from '@/app/components/app/annotation'
+import Loading from '@/app/components/base/loading'
 import { PageType } from '@/app/components/app/configuration/toolbox/annotation/type'
 import TabSlider from '@/app/components/base/tab-slider-plain'
-import type { AppMode } from '@/types/app'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 type Props = {
   pageType: PageType
   appId: string
-  appMode: AppMode
 }
 
 const LogAnnotation: FC<Props> = ({
   pageType,
   appId,
-  appMode,
 }) => {
   const { t } = useTranslation()
   const router = useRouter()
+  const { appDetail } = useAppStore()
 
   const options = [
     { value: PageType.log, text: t('appLog.title') },
     { value: PageType.annotation, text: t('appAnnotation.title') },
   ]
 
+  if (!appDetail) {
+    return (
+      <div className='flex h-full items-center justify-center bg-white'>
+        <Loading />
+      </div>
+    )
+  }
+
   return (
     <div className='pt-4 px-6 h-full flex flex-col'>
-      {appMode !== 'workflow' && (
+      {appDetail.mode !== 'workflow' && (
         <TabSlider
           className='shrink-0'
           value={pageType}
@@ -42,10 +50,10 @@ const LogAnnotation: FC<Props> = ({
           options={options}
         />
       )}
-      <div className={cn('grow', appMode !== 'workflow' && 'mt-3')}>
-        {pageType === PageType.log && appMode !== 'workflow' && (<Log appId={appId} />)}
+      <div className={cn('grow', appDetail.mode !== 'workflow' && 'mt-3')}>
+        {pageType === PageType.log && appDetail.mode !== 'workflow' && (<Log appId={appId} />)}
         {pageType === PageType.annotation && (<Annotation appId={appId} />)}
-        {pageType === PageType.log && appMode === 'workflow' && (<WorkflowLog appId={appId} />)}
+        {pageType === PageType.log && appDetail.mode === 'workflow' && (<WorkflowLog appDetail={appDetail} />)}
       </div>
     </div>
   )

web/app/components/app/workflow-log/detail.tsx

@@ -6,7 +6,7 @@ import Run from '@/app/components/workflow/run'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 
 type ILogDetail = {
-  appDetail?: App
+  appDetail: App
   onClose: () => void
 }
 
@@ -19,7 +19,7 @@ const DetailPanel: FC<ILogDetail> = ({ appDetail, 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='TRACING' appId={appDetail?.id || ''}></Run>
+      <Run activeTab='TRACING' appId={appDetail.id}></Run>
     </div>
   )
 }

web/app/components/app/workflow-log/filter.tsx

@@ -20,7 +20,7 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
       <div className="relative rounded-md">
         <SimpleSelect
           defaultValue={'all'}
-          className='!w-[100px]'
+          className='!min-w-[100px]'
           onSelect={
             (item) => {
               setQueryParams({ ...queryParams, status: item.value as string })

web/app/components/app/workflow-log/index.tsx

@@ -13,13 +13,12 @@ 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 type { App, AppMode } from '@/types/app'
 import Drawer from '@/app/components/base/drawer'
 
 export type ILogsProps = {
-  appId: string
+  appDetail: App
 }
 
 export type QueryParam = {
@@ -32,7 +31,6 @@ const ThreeDotsIcon = ({ className }: SVGProps<SVGElement>) => {
     <path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 }
-
 const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
   const { t } = useTranslation()
   const pathname = usePathname()
@@ -51,7 +49,8 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
   </div>
 }
 
-const Logs: FC<ILogsProps> = ({ appId }) => {
+const Logs: FC<ILogsProps> = ({ appDetail }) => {
+  // ###TODO###
   const [showDrawer, setShowDrawer] = useState<boolean>(true)
   const onCloseDrawer = () => {
     setShowDrawer(false)
@@ -64,22 +63,18 @@ const Logs: FC<ILogsProps> = ({ appId }) => {
   const query = {
     page: currPage + 1,
     limit: APP_PAGE_LIMIT,
-    ...queryParams,
+    ...(queryParams.status !== 'all' ? { status: queryParams.status } : {}),
+    ...(queryParams.keyword ? { keyword: queryParams.keyword } : {}),
   }
 
-  // Get the app type first
-  const { data: appDetail } = useSWR({ url: '/apps', id: appId }, fetchAppDetail)
-
-  const getWebAppType = (appType?: AppMode) => {
-    if (!appType)
-      return ''
+  const getWebAppType = (appType: AppMode) => {
     if (appType === 'completion' || appType === 'workflow')
       return 'completion'
     return 'chat'
   }
 
   const { data: workflowLogs, mutate } = useSWR({
-    url: `/apps/${appId}/workflow-app-logs`,
+    url: `/apps/${appDetail.id}/workflow-app-logs`,
     params: query,
   }, fetchWorkflowLogs)
   const total = workflowLogs?.total
@@ -98,7 +93,7 @@ const Logs: FC<ILogsProps> = ({ appId }) => {
           ? <Loading type='app' />
           : total > 0
             ? <List logs={workflowLogs} appDetail={appDetail} onRefresh={mutate} />
-            : <EmptyElement appUrl={`${appDetail?.site.app_base_url}/${getWebAppType(appDetail?.mode)}/${appDetail?.site.access_token}`} />
+            : <EmptyElement appUrl={`${appDetail.site.app_base_url}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)

web/app/components/app/workflow-log/list.tsx

@@ -50,7 +50,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     if (status === 'stopped') {
       return (
         <div className='inline-flex items-center gap-1'>
-          <Indicator color={'gray'} />
+          <Indicator color={'yellow'} />
           <span>Stop</span>
         </div>
       )
@@ -71,7 +71,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     setCurrentLog(undefined)
   }
 
-  if (!logs)
+  if (!logs || !appDetail)
     return <Loading />
 
   return (
@@ -104,7 +104,6 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
               <td>
                 <div className={cn(
                   log.workflow_run.elapsed_time === 0 && 'text-gray-400',
-                  log.workflow_run.elapsed_time > 10 && 'text-orange-400',
                 )}>{`${log.workflow_run.elapsed_time}s`}</div>
               </td>
               <td>{log.workflow_run.total_tokens}</td>