From 93d116a9d0b816131cb9f60d028c8ef69e58e6cc Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sat, 2 Mar 2024 14:05:05 +0800
Subject: [PATCH] add tracing panel

---
 .../components/app/workflow-log/detail.tsx    |  2 +-
 web/app/components/workflow/run/node.tsx      | 90 +++++++++++++++++++
 web/app/components/workflow/run/tracing.tsx   | 24 +++--
 3 files changed, 109 insertions(+), 7 deletions(-)
 create mode 100644 web/app/components/workflow/run/node.tsx

diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx
index 3b2d7ff269..ee0677e876 100644
--- a/web/app/components/app/workflow-log/detail.tsx
+++ b/web/app/components/app/workflow-log/detail.tsx
@@ -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='RESULT' appId={appDetail?.id || ''}></Run>
+      <Run activeTab='TRACING' appId={appDetail?.id || ''}></Run>
     </div>
   )
 }
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
new file mode 100644
index 0000000000..79b1dda0f5
--- /dev/null
+++ b/web/app/components/workflow/run/node.tsx
@@ -0,0 +1,90 @@
+'use client'
+import type { FC } from 'react'
+import cn from 'classnames'
+import BlockIcon from '../block-icon'
+import type { BlockEnum } from '../types'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { CheckCircle, Loading02 } from '@/app/components/base/icons/src/vender/line/general'
+import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
+
+export type NodeInfo = {
+  type: BlockEnum
+  title: string
+  time: number
+  tokens: number
+  status: string
+  error?: string
+}
+
+type Props = {
+  nodeInfo: NodeInfo
+  collapsed: boolean
+  collapseHandle: () => void
+}
+
+const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
+  const getTime = (time: number) => {
+    if (time < 1)
+      return `${time * 1000} ms`
+    if (time > 60)
+      return `${parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
+  }
+  const getTokenCount = (tokens: number) => {
+    if (tokens < 1000)
+      return tokens
+    if (tokens >= 1000 && tokens < 1000000)
+      return `${parseFloat((tokens / 1000).toFixed(3))}K`
+    if (tokens >= 1000000)
+      return `${parseFloat((tokens / 1000000).toFixed(3))}M`
+  }
+  return (
+    <div className='px-4 py-1'>
+      <div className='group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs cursor-pointer hover:shadow-md' onClick={collapseHandle}>
+        <div
+          className={cn(
+            'flex items-center pl-[6px] py-3 pr-3',
+            !collapsed && 'pb-2',
+          )}
+        >
+          <ChevronRight
+            className={cn(
+              'shrink-0 w-3 h-3 mr-1 text-gray-400 transition-all group-hover:text-gray-500',
+              !collapsed && 'rotate-90',
+            )}
+          />
+          <BlockIcon className='shrink-0 mr-2' type={nodeInfo.type} />
+          <div className='grow text-gray-700 text-[13px] leading-[16px] font-semibold truncate' title={nodeInfo.title}>{nodeInfo.title}</div>
+          <div className='shrink-0 text-gray-500 text-xs leading-[18px]'>{`${getTime(nodeInfo.time)} · ${getTokenCount(nodeInfo.tokens)} tokens`}</div>
+          {nodeInfo.status === 'succeeded' && (
+            <CheckCircle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
+          )}
+          {nodeInfo.status === 'failed' && (
+            <AlertTriangle className='shrink-0 ml-2 w-3 h-3 text-[#F79009]' />
+          )}
+          {nodeInfo.status === 'stopped' && (
+            <AlertTriangle className='shrink-0 ml-2 w-3 h-3 text-[#F79009]' />
+          )}
+          {nodeInfo.status === 'running' && (
+            <div className='shrink-0 text-primary-600 text-[13px] leading-[16px] font-medium'>
+              <Loading02 className='mr-1 w-3.5 h-3.5 animate-spin' />
+              <span>Running</span>
+            </div>
+          )}
+        </div>
+        {!collapsed && (
+          <div className='pb-2'>
+            {/* TODO */}
+            <div className='px-[10px] py-1'>
+              <div className='p-3 bg-gray-50 rounded-lg h-[120px] text-gray-700'>INPUT</div>
+            </div>
+            <div className='px-[10px] py-1'>
+              <div className='p-3 bg-gray-50 rounded-lg h-[120px] text-gray-700'>OUPUT</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default NodePanel
diff --git a/web/app/components/workflow/run/tracing.tsx b/web/app/components/workflow/run/tracing.tsx
index 51f54b33aa..adfcc8563a 100644
--- a/web/app/components/workflow/run/tracing.tsx
+++ b/web/app/components/workflow/run/tracing.tsx
@@ -1,22 +1,34 @@
 'use client'
 import type { FC } from 'react'
-// import React, { useState } 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'
+import { BlockEnum } from '../types'
+import NodePanel from './node'
 
 type TracingProps = {
   appId: string
 }
 
+const nodeInfoFake = {
+  type: BlockEnum.Start,
+  title: 'START',
+  time: 67.349,
+  tokens: 2708,
+  status: 'succeeded',
+}
+
 const Tracing: FC<TracingProps> = ({ appId }) => {
   const { t } = useTranslation()
-  // const [currentTab, setCurrentTab] = useState<string>(activeTab)
+  const [nodeCollapsed, setCurrentTab] = useState<boolean>(false)
+
+  const collapseStateChange = () => {
+    setCurrentTab(!nodeCollapsed)
+  }
 
   return (
-    <div className='bg-gray-50'>
-      Tracing panel = TODO
+    <div className='bg-gray-50 py-2'>
+      <NodePanel nodeInfo={nodeInfoFake} collapsed={nodeCollapsed} collapseHandle={collapseStateChange} />
     </div>
   )
 }