update timeline

src/store/modules/dashboard.ts

@@ -110,9 +110,6 @@ export const dashboardStore = defineStore({
               : 3,
         };
       }
-      if (type === "Event") {
-        newItem.h = 24;
-      }
       if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
         newItem.h = 36;
       }
@@ -168,9 +165,6 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (type === "Event") {
-        newItem.h = 24;
-      }
       if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
         newItem.h = 32;
       }

src/styles/reset.scss

@@ -160,6 +160,7 @@ div.vis-tooltip {
   overflow: hidden;
   background-color: #fff !important;
   white-space: normal !important;
+  font-size: 12px !important;
 }
 
 .vis-item {

src/views/dashboard/controls/Event.vue

@@ -72,6 +72,7 @@ function removeWidget() {
   position: absolute;
   top: 5px;
   right: 3px;
+  z-index: 9999;
 }
 
 .header {

src/views/dashboard/related/event/Content.vue

@@ -59,23 +59,30 @@ function visTimeline() {
     };
   });
   const items: any = new DataSet(events);
-  const options = {
+  const options: any = {
     height: h,
     width: "100%",
+    minHeight: "150px",
     locale: "en",
     autoResize: false,
     tooltip: {
+      overflowMethod: "cap",
       template(item) {
         const data = item.data || {};
-        return `<div>ID: ${data.uuid || ""}</div>
+        let tmp = `<div>ID: ${data.uuid || ""}</div>
         <div>Name: ${data.name || ""}</div>
         <div>Event Type: ${data.type || ""}</div>
         <div>Start Time: ${data.startTime ? visDate(data.startTime) : ""}</div>
         <div>End Time: ${data.endTime ? visDate(data.endTime) : ""}</div>
         <div>Message: ${data.message || ""}</div>
-        <div>Service: ${data.source.service || ""}</div>
-        <div>Endpoint: ${data.source.endpoint || ""}</div>
-        <div>Service Instance: ${data.source.instance || ""}</div>`;
+        <div>Service: ${data.source.service || ""}</div>`;
+        if (data.source.endpoint) {
+          tmp += `<div>Endpoint: ${data.source.endpoint}</div>`;
+        }
+        if (data.source.instance) {
+          tmp += `<div>Service Instance: ${data.source.instance}</div>`;
+        }
+        return tmp;
       },
     },
   };

src/views/dashboard/related/event/Header.vue

@@ -213,18 +213,11 @@ watch(
   width: 120px;
 }
 
-.row {
-  position: relative;
-}
-
 .inputs-max {
   width: 270px;
 }
 
 .search-btn {
-  position: absolute;
-  top: 0;
-  right: 10px;
   cursor: pointer;
   width: 120px;
 }