From 7a47ba9d690f67596d049703613a11cb5125184f Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 14 Apr 2025 17:47:15 +0800
Subject: [PATCH] update trace table

---
 src/types/trace.d.ts                           |  1 +
 .../related/trace/components/D3Graph/Index.vue | 18 ++++++++++++++----
 .../related/trace/components/Table.vue         |  1 -
 .../trace/components/Table/TableItem.vue       |  1 +
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/types/trace.d.ts b/src/types/trace.d.ts
index 822f3965..8d8d4457 100644
--- a/src/types/trace.d.ts
+++ b/src/types/trace.d.ts
@@ -48,6 +48,7 @@ export interface Span {
   logs?: log[];
   parentSegmentId?: string;
   refs?: Ref[];
+  key?: string;
 }
 export type Ref = {
   type?: string;
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 8371abc3..76dfa368 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -60,8 +60,9 @@ limitations under the License. -->
   import { debounce } from "@/utils/debounce";
   import { mutationObserver } from "@/utils/mutation";
   import { TraceGraphType } from "../constant";
+  import { Themes } from "@/constants/data";
 
-  /* global defineProps, Nullable, defineExpose, Recordable */
+  /* global Recordable, Nullable */
   const props = defineProps({
     data: { type: Array as PropType<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
@@ -82,9 +83,6 @@ limitations under the License. -->
   const debounceFunc = debounce(draw, 500);
   const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
 
-  defineExpose({
-    tree,
-  });
   onMounted(() => {
     loading.value = true;
     changeTree();
@@ -163,10 +161,21 @@ limitations under the License. -->
   }
   function viewParentSpan(span: Recordable) {
     if (props.type === TraceGraphType.TABLE) {
+      setTableSpanStyle(span);
       return;
     }
     tree.value.highlightParents(span);
   }
+  function setTableSpanStyle(span: Recordable) {
+    const itemDom: any = document.querySelector(`.trace-item-${span.key}`);
+    const items: any = document.querySelectorAll(".trace-item");
+    for (const item of items) {
+      item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
+    }
+    itemDom.style.background = appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
+    const box: any = document.querySelector("#trace-action-box");
+    box.style.display = "none";
+  }
   function traverseTree(node: Recordable, spanId: string, segmentId: string, data: Recordable) {
     if (!node || node.isBroken) {
       return;
@@ -308,6 +317,7 @@ limitations under the License. -->
     }
     for (const i of [...fixSpans, ...props.data]) {
       i.label = i.endpointName || "no operation name";
+      i.key = Math.random().toString(36).substring(2, 36);
       i.children = [];
       if (segmentGroup[i.segmentId]) {
         segmentGroup[i.segmentId].push(i);
diff --git a/src/views/dashboard/related/trace/components/Table.vue b/src/views/dashboard/related/trace/components/Table.vue
index d2e63d81..8ec36c47 100644
--- a/src/views/dashboard/related/trace/components/Table.vue
+++ b/src/views/dashboard/related/trace/components/Table.vue
@@ -21,7 +21,6 @@ limitations under the License. -->
   import Graph from "./D3Graph/Index.vue";
   import { TraceGraphType } from "./constant";
 
-  /* global defineProps, Recordable*/
   defineProps({
     data: { type: Array as PropType<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 688631a4..0c2519b9 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -55,6 +55,7 @@ limitations under the License. -->
         'level' + (data.level - 1),
         { 'trace-item-error': data.isError },
         { profiled: data.profiled === false },
+        `trace-item-${data.key}`,
       ]"
       :data-text="data.profiled === false ? 'No Thread Dump' : ''"
     >