luxolus
/
open-nomad
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

[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
This commit is contained in:
Phil Renaud 2023-01-10 17:02:21 -05:00 committed by GitHub
parent 4e16ccc5fa
commit 76bed82192
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/15733.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Show events alongside logs in the Task sidebar
```

47
ui/app/components/task-context-sidebar.hbs
View File

@ -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}}

22
ui/app/styles/components/sidebar.scss
View File

@ -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);
}
}
}