add tracing panel

web/app/components/workflow/run/tracing-panel.tsx

@@ -0,0 +1,27 @@
+'use client'
+import type { FC } from 'react'
+import NodePanel from './node'
+import type { NodeTracing } from '@/types/workflow'
+
+type TracingPanelProps = {
+  list: NodeTracing[]
+  collapseState: boolean[]
+  collapseHandle: (index: number) => void
+}
+
+const TracingPanel: FC<TracingPanelProps> = ({ list, collapseState, collapseHandle }) => {
+  return (
+    <div className='bg-gray-50 py-2'>
+      {list.map((node, index) => (
+        <NodePanel
+          key={node.id}
+          nodeInfo={node}
+          collapsed={collapseState[index]}
+          collapseHandle={() => collapseHandle(index)}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default TracingPanel

web/app/components/workflow/run/tracing.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
-import NodePanel from './node'
+import TracingPanel from './tracing-panel'
 import Loading from '@/app/components/base/loading'
 import { fetchTracingList } from '@/service/log'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -62,16 +62,11 @@ const Tracing: FC<TracingProps> = ({ runID }) => {
   }
 
   return (
-    <div className='bg-gray-50 py-2'>
-      {list.map((node, index) => (
-        <NodePanel
-          key={node.id}
-          nodeInfo={node}
-          collapsed={collapseState[index]}
-          collapseHandle={() => collapseStateChange(index)}
-        />
-      ))}
-    </div>
+    <TracingPanel
+      list={list}
+      collapseState={collapseState}
+      collapseHandle={collapseStateChange}
+    />
   )
 }