From 043927686656365397279c708d72a094e6d370ef Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 18 Mar 2024 13:24:27 +0800
Subject: [PATCH] add tracing panel

---
 .../components/workflow/run/tracing-panel.tsx | 27 +++++++++++++++++++
 web/app/components/workflow/run/tracing.tsx   | 17 +++++-------
 2 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 web/app/components/workflow/run/tracing-panel.tsx

diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
new file mode 100644
index 0000000000..aefb7db498
--- /dev/null
+++ b/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
diff --git a/web/app/components/workflow/run/tracing.tsx b/web/app/components/workflow/run/tracing.tsx
index 8cfe39a7ec..75a183efa8 100644
--- a/web/app/components/workflow/run/tracing.tsx
+++ b/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}
+    />
   )
 }