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

[ui] Fixes logger height issue when sidebar has events (#15759) 

* Fixes logger height issue when sidebar has events

* Much simpler grid method for height calc
This commit is contained in:
Phil Renaud 2023-01-13 12:16:02 -05:00 committed by GitHub
parent 8cd77c14a2
commit d588aabca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/15759.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:bug
ui: Scale down logger height in the UI when the sidebar container also has task events
```

3
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"}} {{if this.isSideBarOpen "open"}}"
class="sidebar task-context-sidebar has-subnav {{if this.wide "wide"}} {{if @task.events.length "has-events"}} {{if this.isSideBarOpen "open"}}"
{{on-click-outside
@fns.closeSidebar
capture=true
@ -74,7 +74,6 @@
</ListTable>
</div>
</div>
<hr />
{{/if}}
<TaskLog

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

@ -73,6 +73,13 @@ $subNavOffset: 49px;
}
.task-context-sidebar {
display: grid;
gap: 1rem;
grid-template-rows: auto 1fr;
&.has-events {
grid-template-rows: auto minmax(auto, 25%) 1fr;
}
header {
display: grid;
justify-content: left;
@ -120,30 +127,24 @@ $subNavOffset: 49px;
}
}
.task-events .boxed-section-body {
height: 250px;
overflow: auto;
table {
height: 100%;
}
& > .task-events,
& > .task-log {
overflow: hidden;
}
// 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
.task-events,
.task-log {
display: grid;
grid-template-rows: auto 1fr;
.boxed-section-body {
overflow: auto;
}
.notification {
grid-row: -1;
}
}
.cli-window {
height: calc(100vh - $offsetWithoutEvents);
}
&.has-events {
.cli-window {
height: calc(100vh - $offsetWithoutEvents - $sidebarEventsHeight);
}
height: 100%;
}
}

3
ui/mirage/factories/task-state.js
View File

@ -5,7 +5,8 @@ const TASK_STATUSES = ['pending', 'running', 'finished', 'failed'];
const REF_TIME = new Date();
export default Factory.extend({
name: () => '!!!this should be set by the allocation that owns this task state!!!',
name: () =>
'!!!this should be set by the allocation that owns this task state!!!',
state: () => faker.helpers.randomize(TASK_STATUSES),
kind: null,
startedAt: () => faker.date.past(2 / 365, REF_TIME),