Backport of [ui] Show task events in the sidebar into release/1.4.x (#…

…15751) * no-op commit due to failed cherry-picking * [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 Co-authored-by: temp <temp@hashicorp.com> Co-authored-by: Phil Renaud <phil.renaud@hashicorp.com>
hashicorp · Jan 16, 2023 · d877b8c · d877b8c
1 parent b234e03
commit d877b8c
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 5 deletions.
diff --git a/.changelog/15733.txt 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
@@ -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
@@ -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);
+    }
   }
 }