From 5fd9a2d37a8651287e19dcaf62fb8b85368efe9c Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 20 Jun 2022 18:24:23 +0800
Subject: [PATCH] add event details

---
 src/views/dashboard/related/event/Content.vue | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/views/dashboard/related/event/Content.vue b/src/views/dashboard/related/event/Content.vue
index 6ed2eb4b..be545aad 100644
--- a/src/views/dashboard/related/event/Content.vue
+++ b/src/views/dashboard/related/event/Content.vue
@@ -39,6 +39,7 @@ function visTimeline() {
       content: d.name,
       start: dateFormat(d.startTime),
       end: dateFormat(d.endTime),
+      data: d,
     };
   });
   const items: any = new DataSet(events);
@@ -46,6 +47,40 @@ function visTimeline() {
     height: h,
     width: "100%",
     locale: "en",
+    tooltip: {
+      template: function (originalItemData) {
+        const data = originalItemData.data || {};
+        return ` <div class="mb-5"><span class="grey">Event ID: </span>${
+          data.uuid || ""
+        }</div>
+         <div class="mb-5"><span class="grey">Event Name: </span>${
+           data.name || ""
+         }</div>
+        <div class="mb-5"><span class="grey">Event Type: </span>${
+          data.type || ""
+        }</div>
+         <div class="mb-5"><span class="grey">Start Time: </span>${
+           data.startTime || ""
+         }</div>
+          <div class="mb-5"><span class="grey">End Time: </span>${
+            data.endTime || ""
+          }</div>
+        <div class="mb-5"><span class="grey">Event Message: </span>${
+          data.message || ""
+        }</div>
+         <div class="mb-5"><span class="grey">Event Source: </span>
+         <div>Service:
+            ${data.source.service || ""}</div>
+          <div>
+            Endpoint:
+            ${data.source.endpoint || ""}
+          </div>
+          <div>
+            Service Instance:
+             ${data.source.instance || ""}
+          </div></div>`;
+      },
+    },
   };
   visGraph.value = new Timeline(timeline.value, items, options);
 }