From 8f030b36e9cee8675765c28b50fba7cfa4882a21 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Mon, 9 Jan 2023 14:38:49 -0500
Subject: [PATCH 1/2] Add task events to task logs sidebar

---
 ui/app/components/task-context-sidebar.hbs | 47 +++++++++++++++++++++-
 ui/app/styles/components/sidebar.scss      | 19 +++++++--
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs
index 523e3c118c63..070a6edd7873 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.isSideBarOpen "open"}}"
+		class="sidebar task-context-sidebar has-subnav {{if this.isSideBarOpen "open"}} {{if @task.events.length "has-events"}}"
 		{{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 9c1c36294df4..4b8186fe4b12 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@@ -105,16 +105,27 @@ $subNavOffset: 49px;
     }
   }
 
+  .task-events .boxed-section-body {
+    height: 250px;
+    overflow: auto;
+  }
+
   // 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);
+    }
   }
 }

From 13f45c18999bb5969afb560273d8031d7bd5940a Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Mon, 9 Jan 2023 14:45:39 -0500
Subject: [PATCH 2/2] Max-heighting inner table when present for nice looking
 borders

---
 .changelog/15733.txt                  | 3 +++
 ui/app/styles/components/sidebar.scss | 3 +++
 2 files changed, 6 insertions(+)
 create mode 100644 .changelog/15733.txt

diff --git a/.changelog/15733.txt b/.changelog/15733.txt
new file mode 100644
index 000000000000..f79cae1a7e91
--- /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/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
index 4b8186fe4b12..371ded3da7f3 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@@ -108,6 +108,9 @@ $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.