From 76bed821920abdcfcaedce7d1db185798c233af1 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Tue, 10 Jan 2023 17:02:21 -0500
Subject: [PATCH] [ui] Show task events in the sidebar (#15733)

* Add task events to task logs sidebar

* Max-heighting inner table when present for nice looking borders
---
 .changelog/15733.txt                       |  3 ++
 ui/app/components/task-context-sidebar.hbs | 47 +++++++++++++++++++++-
 ui/app/styles/components/sidebar.scss      | 22 ++++++++--
 3 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 .changelog/15733.txt

diff --git a/.changelog/15733.txt b/.changelog/15733.txt
new file mode 100644
index 000000000..f79cae1a7
--- /dev/null
+++ b/.changelog/15733.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Show events alongside logs in the Task sidebar
+```
diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs
index 92f3b8d7e..a9a9c2bcd 100644
--- a/ui/app/components/task-context-sidebar.hbs
+++ b/ui/app/components/task-context-sidebar.hbs
@@ -1,6 +1,6 @@
 <Portal @target="log-sidebar-portal">
 	<div
-		class="sidebar task-context-sidebar has-subnav {{if this.wide "wide"}} {{if this.isSideBarOpen "open"}}"
+		class="sidebar task-context-sidebar has-subnav {{if this.wide "wide"}} {{if this.isSideBarOpen "open"}} {{if this.isSideBarOpen "open"}}"
 		{{on-click-outside
 			@fns.closeSidebar
 			capture=true
@@ -31,6 +31,51 @@
 				{{x-icon "cancel"}}
 			</button>
 		</header>
+		{{#if @task.events.length}}
+			<div class="boxed-section task-events">
+				<div class="boxed-section-head">
+					Recent Events
+				</div>
+				<div class="boxed-section-body is-full-bleed">
+					<ListTable
+						@source={{reverse @task.events}}
+						@class="is-striped" as |t|
+					>
+						<t.head>
+							<th class="is-3">
+								Time
+							</th>
+							<th class="is-1">
+								Type
+							</th>
+							<th>
+								Description
+							</th>
+						</t.head>
+						<t.body as |row|>
+							<tr data-test-task-event>
+								<td data-test-task-event-time>
+									{{format-ts row.model.time}}
+								</td>
+								<td data-test-task-event-type>
+									{{row.model.type}}
+								</td>
+								<td data-test-task-event-message>
+									{{#if row.model.message}}
+										{{row.model.message}}
+									{{else}}
+										<em>
+											No message
+										</em>
+									{{/if}}
+								</td>
+							</tr>
+						</t.body>
+					</ListTable>
+				</div>
+			</div>
+			<hr />
+		{{/if}}
 
 		<TaskLog
 			@allocation={{@task.allocation}}
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
index 76da1a621..9f189ef6b 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@@ -120,16 +120,30 @@ $subNavOffset: 49px;
     }
   }
 
+  .task-events .boxed-section-body {
+    height: 250px;
+    overflow: auto;
+    table {
+      height: 100%;
+    }
+  }
+
   // Instead of trying to calculate on the fly with JS, let's use vh and offset nav and headers above.
   // We can make this a LOT more streamlined when CSS Container Queries are available.
   $sidebarTopOffset: 161px;
   $sidebarInnerPadding: 48px;
   $sidebarHeaderOffset: 74px;
   $cliHeaderOffset: 54.5px;
+  $offsetWithoutEvents: $sidebarTopOffset + $sidebarInnerPadding +
+    $sidebarHeaderOffset + $cliHeaderOffset;
+  $sidebarEventsHeight: 250px + 44px + 44px; // table + table header + horizontal rule
+
   .cli-window {
-    height: calc(
-      100vh - $sidebarTopOffset - $sidebarInnerPadding - $sidebarHeaderOffset -
-        $cliHeaderOffset
-    );
+    height: calc(100vh - $offsetWithoutEvents);
+  }
+  &.has-events {
+    .cli-window {
+      height: calc(100vh - $offsetWithoutEvents - $sidebarEventsHeight);
+    }
   }
 }