(skywalking-booster-ui) branch main updated: fix: correct the parameter for attachment events (#502)

[qiuxiafan]

This is an automated email from the ASF dual-hosted git repository.

qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new 51817f32 fix: correct the parameter for attachment events (#502)
51817f32 is described below

commit 51817f32de0cd5c4fc78f9c25399316f23d782e8
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Tue Sep 30 11:22:48 2025 +0800

    fix: correct the parameter for attachment events (#502)
---
 src/utils/color.ts                                 |  2 +-
 .../trace/components/D3Graph/SpanDetail.vue        | 34 +++++++++++-----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/utils/color.ts b/src/utils/color.ts
index a7deb13f..f4e36bcb 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -64,7 +64,7 @@ function generateHash(str: string) {
 }
 
 export function getServiceColor(serviceName: string): string {
-  if (!serviceName) return "#eee";
+  if (!serviceName) return "var(--el-color-primary)";
   const hash = generateHash(serviceName);
   return ServicePalette[hash % ServicePalette.length];
 }
diff --git 
a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue 
b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index c21666c2..ed4e0403 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -49,14 +49,16 @@ limitations under the License. -->
       </span>
     </div>
     <h5 class="mb-10" v-if="currentSpan.tags && currentSpan.tags.length"> {{ 
t("tags") }}. </h5>
-    <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
-      <span class="g-sm-4 grey">{{ i.key }}:</span>
-      <span class="g-sm-8 wba">
-        {{ i.value }}
-        <span v-if="i.key === 'db.statement' && i.value" class="grey 
link-hover cp ml-5" @click="copy(i.value)">
-          <Icon size="middle" iconName="review-list" />
+    <div class="scroll_bar_style" style="max-height: 200px; overflow: auto">
+      <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
+        <span class="g-sm-4 grey">{{ i.key }}:</span>
+        <span class="g-sm-8 wba">
+          {{ i.value }}
+          <span v-if="i.key === 'db.statement' && i.value" class="grey 
link-hover cp ml-5" @click="copy(i.value)">
+            <Icon size="middle" iconName="review-list" />
+          </span>
         </span>
-      </span>
+      </div>
     </div>
     <h5 class="mb-10" v-if="currentSpan.logs" 
v-show="currentSpan.logs.length"> {{ t("logs") }}. </h5>
     <div v-for="(i, index) in currentSpan.logs" :key="index">
@@ -234,14 +236,11 @@ limitations under the License. -->
       });
 
     tree.value = new ListGraph({ el: eventGraph.value, handleSelectSpan: 
selectEvent });
-    tree.value.init(
-      {
-        children: events,
-        label: "",
-      },
-      events,
-      0,
-    );
+    tree.value.init({
+      data: { children: events, label: "" },
+      row: events,
+      fixSpansSize: 0,
+    });
     tree.value.draw();
   }
 
@@ -282,8 +281,9 @@ limitations under the License. -->
   .attach-events {
     width: 100%;
     margin: 0 5px 5px 0;
-    height: 400px;
-    overflow: auto;
+    height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   .popup-btn {