fix: correct the parameter for attachment events (#502)

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];
 }

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -49,6 +49,7 @@ limitations under the License. -->
       </span>
     </div>
     <h5 class="mb-10" v-if="currentSpan.tags && currentSpan.tags.length"> {{ t("tags") }}. </h5>
+    <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">
@@ -58,6 +59,7 @@ limitations under the License. -->
           </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">
       <div class="mb-10 sm">
@@ -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 {