From a9f4fdd5ec08f8a19bd46645dd0ef364e3c73d03 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 21 Jun 2022 15:26:32 +0800
Subject: [PATCH] update timeline

---
 src/styles/reset.scss                         | 14 +++++++
 src/views/dashboard/data.ts                   |  2 +-
 src/views/dashboard/related/event/Content.vue | 37 ++++++++++---------
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 9a95d713..a712991e 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -154,3 +154,17 @@ pre {
 .switch {
   margin: 0 5px;
 }
+
+div.vis-tooltip {
+  max-width: 600px;
+  overflow: hidden;
+  background-color: #fff !important;
+
+  div {
+    word-wrap: break-word !important;
+  }
+}
+
+.vis-item {
+  cursor: pointer;
+}
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index a69198a9..12424ab3 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 export const dragIgnoreFrom =
-  "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules";
+  "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item";
 
 export const PodsChartTypes = ["EndpointList", "InstanceList"];
 
diff --git a/src/views/dashboard/related/event/Content.vue b/src/views/dashboard/related/event/Content.vue
index be545aad..720799cb 100644
--- a/src/views/dashboard/related/event/Content.vue
+++ b/src/views/dashboard/related/event/Content.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import dayjs from "dayjs";
-import { useEventStore } from "@/store/modules/event";
+import { useEventStore } from "../../../../store/modules/event";
 import { DataSet, Timeline } from "vis-timeline/standalone";
 import "vis-timeline/styles/vis-timeline-graph2d.css";
 const eventStore = useEventStore();
@@ -27,6 +27,8 @@ const timeline = ref<Nullable<HTMLDivElement>>(null);
 const visGraph = ref<Nullable<any>>(null);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   new Date(dayjs(date).format(pattern));
+const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
 
 function visTimeline() {
   if (!timeline.value) {
@@ -48,27 +50,20 @@ function visTimeline() {
     width: "100%",
     locale: "en",
     tooltip: {
-      template: function (originalItemData) {
+      template(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 || ""
+        return `<div><span>Event ID: </span>${data.uuid || ""}</div>
+         <div><span>Event Name: </span>${data.name || ""}</div>
+        <div class="mb-5"><span>Event Type: </span>${data.type || ""}</div>
+         <div class="mb-5"><span>Start Time: </span>${
+           data.startTime ? visDate(data.startTime) : ""
          }</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 class="mb-5"><span>End Time: </span>${
+            data.endTime ? visDate(data.endTime) : ""
           }</div>
-        <div class="mb-5"><span class="grey">Event Message: </span>${
-          data.message || ""
+        <div style="minHeight: 30px;word-wrap:break-word; max-width:400px">Event Message: ${
+          data.message
         }</div>
-         <div class="mb-5"><span class="grey">Event Source: </span>
          <div>Service:
             ${data.source.service || ""}</div>
           <div>
@@ -98,4 +93,10 @@ watch(
   height: 100%;
   min-height: 150px;
 }
+
+.message {
+  max-width: 400px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 </style>