From 55cd414baa76802e303979068dbe07cb92a43a44 Mon Sep 17 00:00:00 2001
From: Yue Yang <g1enyy0ung@gmail.com>
Date: Mon, 8 Jan 2024 14:46:26 +0800
Subject: [PATCH] style: better annotaions display

Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>
---
 src/datasource.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/datasource.ts b/src/datasource.ts
index a90dc70..29ea567 100644
--- a/src/datasource.ts
+++ b/src/datasource.ts
@@ -199,9 +199,12 @@ export class DataSource extends DataSourceApi<EventQuery, ChaosMeshOptions> {
     return data.map((frame) => {
       const times = frame.fields
         .find((f) => f.name === 'created_at')!
-        .values.reverse() // Default descending order.
+        .values.reverse() // Default descending order. So reverse it.
       const startTime = Date.parse(times[0])
       const endTime = Date.parse(times[times.length - 1])
+      const names = frame.fields
+        .find((f) => f.name === 'name')!
+        .values.reverse()
       const messages = frame.fields
         .find((f) => f.name === 'message')!
         .values.reverse()
@@ -210,13 +213,19 @@ export class DataSource extends DataSourceApi<EventQuery, ChaosMeshOptions> {
         title: `<div><b>${anno.name}</b></div>`,
         time: startTime,
         timeEnd: endTime,
-        text: `<ul style="margin-bottom: 1rem;">
+        text: `<ul style="max-height: 500px; margin-bottom: 1rem; overflow: auto;">
         ${messages
           .map(
             (d, i) =>
-              `<li style="margin-bottom: .5rem">${new Date(
-                times[i]
-              ).toLocaleTimeString()} - ${d}</li>`
+              `<li style="margin-bottom: .5rem;">
+                <div>${i + 1}: ${d}</div>
+                <div>
+                  <span class="label">${names[i]}</span>
+                  <span class="label">${new Date(
+                    times[i]
+                  ).toLocaleTimeString()}</span>
+                </div>
+              </li>`
           )
           .join('')}
         </ul>`,