From 5dc8ab43140f1d862fc3f120765575e774aaa094 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Fri, 16 Sep 2022 12:17:43 -0400 Subject: [PATCH 01/15] button styles --- ui/app/components/task-sub-row.hbs | 12 +++--- ui/app/styles/components/task-sub-row.scss | 41 +++++++++++++++---- ui/app/templates/clients/client/index.hbs | 1 - .../job-page/parts/recent-allocations.hbs | 1 - ui/app/templates/jobs/job/task-group.hbs | 1 - 5 files changed, 38 insertions(+), 18 deletions(-) diff --git a/ui/app/components/task-sub-row.hbs b/ui/app/components/task-sub-row.hbs index 203fd6555e57..7075362df0a6 100644 --- a/ui/app/components/task-sub-row.hbs +++ b/ui/app/components/task-sub-row.hbs @@ -5,12 +5,12 @@ }} > - / - - {{this.task.name}} - - {{!-- TODO: in-page logs --}} - {{!-- --}} +
+ {{this.task.name}} + +
{{#if this.task.isRunning}} diff --git a/ui/app/styles/components/task-sub-row.scss b/ui/app/styles/components/task-sub-row.scss index e8334b03d579..3820c50ecab7 100644 --- a/ui/app/styles/components/task-sub-row.scss +++ b/ui/app/styles/components/task-sub-row.scss @@ -1,16 +1,39 @@ table tbody .task-sub-row { td { border-top: 2px solid white; - } - td:nth-child(1) { - padding-left: 4rem; - a { - margin-right: 1rem; - } - svg.flight-icon { - position: relative; - top: 3px; + .name-grid { + display: inline-grid; + grid-template-columns: auto 1fr; + margin-left: 4rem; + gap: 1rem; + + .task-name { + display: block; + width: 150px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + &:before { + color: black; + content: '/'; + display: inline-block; + margin-right: 0.5rem; + text-decoration: none; + } + } + + .is-logs-link { + color: $blue; + text-decoration: underline; + font-weight: normal; + svg { + color: black; + margin-right: 5px; + position: relative; + top: 3px; + } + } } } } diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs index 22056e0b2818..6397e760eaf2 100644 --- a/ui/app/templates/clients/client/index.hbs +++ b/ui/app/templates/clients/client/index.hbs @@ -499,7 +499,6 @@ Date: Fri, 16 Sep 2022 12:32:56 -0400 Subject: [PATCH 02/15] Further styles including global toggle adjustment --- ui/app/styles/components/boxed-section.scss | 3 +++ ui/app/styles/components/toggle.scss | 4 +++- ui/app/templates/clients/client/index.hbs | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/ui/app/styles/components/boxed-section.scss b/ui/app/styles/components/boxed-section.scss index 901dc75036cf..4ac5b726a1f9 100644 --- a/ui/app/styles/components/boxed-section.scss +++ b/ui/app/styles/components/boxed-section.scss @@ -26,6 +26,9 @@ .is-padded { padding: 0em 0em 0em 1em; } + .is-one-line { + white-space: nowrap; + } } .is-fixed-width { diff --git a/ui/app/styles/components/toggle.scss b/ui/app/styles/components/toggle.scss index efa07688e150..612041b94019 100644 --- a/ui/app/styles/components/toggle.scss +++ b/ui/app/styles/components/toggle.scss @@ -31,7 +31,9 @@ $size: 12px; .toggler { display: inline-block; position: relative; - vertical-align: middle; + vertical-align: baseline; + position: relative; + top: 1px; width: $size * 2; height: $size; border-radius: $size; diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs index 6397e760eaf2..cb031627eb0e 100644 --- a/ui/app/templates/clients/client/index.hbs +++ b/ui/app/templates/clients/client/index.hbs @@ -497,7 +497,7 @@ @class="is-padded" /> - + Date: Fri, 16 Sep 2022 15:37:21 -0400 Subject: [PATCH 03/15] sidebar funcs and header --- .../components/allocation-service-sidebar.js | 2 +- ui/app/components/task-context-sidebar.hbs | 38 +++++++++++++++ ui/app/components/task-context-sidebar.js | 20 ++++++++ ui/app/components/task-sub-row.hbs | 15 ++++-- ui/app/components/task-sub-row.js | 15 ++++++ ui/app/styles/components/sidebar.scss | 48 +++++++++++++++++++ ui/app/styles/components/task-sub-row.scss | 2 +- ui/app/templates/application.hbs | 2 + .../components/task-context-sidebar-test.js | 26 ++++++++++ 9 files changed, 163 insertions(+), 5 deletions(-) create mode 100644 ui/app/components/task-context-sidebar.hbs create mode 100644 ui/app/components/task-context-sidebar.js create mode 100644 ui/tests/integration/components/task-context-sidebar-test.js diff --git a/ui/app/components/allocation-service-sidebar.js b/ui/app/components/allocation-service-sidebar.js index bab46f0ed645..13ce37e2adbc 100644 --- a/ui/app/components/allocation-service-sidebar.js +++ b/ui/app/components/allocation-service-sidebar.js @@ -10,7 +10,7 @@ export default class AllocationServiceSidebarComponent extends Component { } keyCommands = [ { - label: 'Close Evaluations Sidebar', + label: 'Close Service Sidebar', pattern: ['Escape'], action: () => this.args.fns.closeSidebar(), }, diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs new file mode 100644 index 000000000000..3b9791d71297 --- /dev/null +++ b/ui/app/components/task-context-sidebar.hbs @@ -0,0 +1,38 @@ + +
+ {{#if @task}} + {{log "TASK" @task}} + {{keyboard-commands this.keyCommands}} +
+

+ {{@task.name}} + + {{@task.state}} + +

+ + Go to Task page + + +
+ + {{/if}} +
+ \ No newline at end of file diff --git a/ui/app/components/task-context-sidebar.js b/ui/app/components/task-context-sidebar.js new file mode 100644 index 000000000000..3bdbb9cf1602 --- /dev/null +++ b/ui/app/components/task-context-sidebar.js @@ -0,0 +1,20 @@ +// @ts-check +import { alias } from '@ember/object/computed'; +import { action } from '@ember/object'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; + +export default class TaskContextSidebarComponent extends Component { + get isSideBarOpen() { + console.log('is it open?', this.args.task); + return !!this.args.task; + } + + keyCommands = [ + { + label: 'Close Task Logs Sidebar', + pattern: ['Escape'], + action: () => this.args.fns.closeSidebar(), + }, + ]; +} diff --git a/ui/app/components/task-sub-row.hbs b/ui/app/components/task-sub-row.hbs index 7075362df0a6..719d54cc33e4 100644 --- a/ui/app/components/task-sub-row.hbs +++ b/ui/app/components/task-sub-row.hbs @@ -6,8 +6,8 @@ >
- {{this.task.name}} -
@@ -76,4 +76,13 @@ -{{yield}} \ No newline at end of file +{{yield}} + +{{#if this.activeTaskForLogs}} + +{{/if}} diff --git a/ui/app/components/task-sub-row.js b/ui/app/components/task-sub-row.js index 1499c2edf126..45766766c9ae 100644 --- a/ui/app/components/task-sub-row.js +++ b/ui/app/components/task-sub-row.js @@ -71,4 +71,19 @@ export default class TaskSubRowComponent extends Component { } while (this.enablePolling); }).drop()) fetchStats; + + //#region Logs Sidebar + + @tracked activeTaskForLogs = null; + + @action handleTaskLogsClick(task) { + console.log('clickin up on', task); + this.activeTaskForLogs = task; + } + + @action closeSidebar() { + this.activeTaskForLogs = null; + } + + //#endregion Logs Sidebar } diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss index 357a42fd21a1..37623fae2836 100644 --- a/ui/app/styles/components/sidebar.scss +++ b/ui/app/styles/components/sidebar.scss @@ -56,3 +56,51 @@ $subNavOffset: 49px; padding: 10px; width: 100px; } + +.task-context-sidebar { + header { + display: grid; + justify-content: left; + grid-template-columns: 1fr auto auto; + gap: 2rem; + border-bottom: 1px solid $grey-blue; + padding-bottom: 1rem; + margin-bottom: 1.5rem; + + .title { + margin-bottom: unset; + } + + .link { + align-self: center; + } + + .state { + font-size: 1rem; + font-weight: normal; + margin-left: 1rem; + text-transform: capitalize; + + &:before { + content: ''; + display: inline-block; + height: 1rem; + width: 1rem; + margin-right: 5px; + border-radius: 4px; + position: relative; + top: 2px; + } + + &.running:before { + background-color: $green; + } + &.dead:before { + background-color: $red; + } + &.pending:before { + background-color: $grey-lighter; + } + } + } +} diff --git a/ui/app/styles/components/task-sub-row.scss b/ui/app/styles/components/task-sub-row.scss index 3820c50ecab7..5d7796858b35 100644 --- a/ui/app/styles/components/task-sub-row.scss +++ b/ui/app/styles/components/task-sub-row.scss @@ -23,7 +23,7 @@ table tbody .task-sub-row { } } - .is-logs-link { + .logs-sidebar-trigger { color: $blue; text-decoration: underline; font-weight: normal; diff --git a/ui/app/templates/application.hbs b/ui/app/templates/application.hbs index 3492b2a9e8c9..8a16c4f2db97 100644 --- a/ui/app/templates/application.hbs +++ b/ui/app/templates/application.hbs @@ -26,6 +26,8 @@ + + {{#if this.error}}
diff --git a/ui/tests/integration/components/task-context-sidebar-test.js b/ui/tests/integration/components/task-context-sidebar-test.js new file mode 100644 index 000000000000..a50276330124 --- /dev/null +++ b/ui/tests/integration/components/task-context-sidebar-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | task-context-sidebar', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom(this.element).hasText('template block text'); + }); +}); From 4ac1c4f30f6d4ac46e51d5a93cc94c01ae3cf1f0 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Fri, 16 Sep 2022 16:00:01 -0400 Subject: [PATCH 04/15] Functioning task logs in high-level sidebars --- ui/app/components/streaming-file.js | 9 +++++++-- ui/app/components/task-context-sidebar.hbs | 10 +++++++++- ui/app/components/task-context-sidebar.js | 4 ---- ui/app/components/task-log.js | 2 ++ ui/app/components/task-sub-row.js | 1 - ui/app/templates/components/task-log.hbs | 2 +- .../components/task-context-sidebar-test.js | 5 +++-- 7 files changed, 22 insertions(+), 11 deletions(-) diff --git a/ui/app/components/streaming-file.js b/ui/app/components/streaming-file.js index 8239aedf8f5b..73fb390a4dd3 100644 --- a/ui/app/components/streaming-file.js +++ b/ui/app/components/streaming-file.js @@ -22,6 +22,7 @@ export default class StreamingFile extends Component.extend(WindowResizable) { isStreaming = true; logger = null; follow = true; + shouldFillHeight = true; // Internal bookkeeping to avoid multiple scroll events on one frame requestFrame = true; @@ -89,7 +90,9 @@ export default class StreamingFile extends Component.extend(WindowResizable) { didInsertElement() { super.didInsertElement(...arguments); - this.fillAvailableHeight(); + if (this.shouldFillHeight) { + this.fillAvailableHeight(); + } this.set('_scrollHandler', this.scrollHandler.bind(this)); this.element.addEventListener('scroll', this._scrollHandler); @@ -105,7 +108,9 @@ export default class StreamingFile extends Component.extend(WindowResizable) { } windowResizeHandler() { - once(this, this.fillAvailableHeight); + if (this.shouldFillHeight) { + once(this, this.fillAvailableHeight); + } } fillAvailableHeight() { diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs index 3b9791d71297..6b9579f51061 100644 --- a/ui/app/components/task-context-sidebar.hbs +++ b/ui/app/components/task-context-sidebar.hbs @@ -7,7 +7,6 @@ }} > {{#if @task}} - {{log "TASK" @task}} {{keyboard-commands this.keyCommands}}

@@ -33,6 +32,15 @@

+
+ +
+ + {{/if}}
\ No newline at end of file diff --git a/ui/app/components/task-context-sidebar.js b/ui/app/components/task-context-sidebar.js index 3bdbb9cf1602..31ce73aa3215 100644 --- a/ui/app/components/task-context-sidebar.js +++ b/ui/app/components/task-context-sidebar.js @@ -1,12 +1,8 @@ // @ts-check -import { alias } from '@ember/object/computed'; -import { action } from '@ember/object'; import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; export default class TaskContextSidebarComponent extends Component { get isSideBarOpen() { - console.log('is it open?', this.args.task); return !!this.args.task; } diff --git a/ui/app/components/task-log.js b/ui/app/components/task-log.js index 2ed7325d0371..cf27d928f59e 100644 --- a/ui/app/components/task-log.js +++ b/ui/app/components/task-log.js @@ -35,6 +35,8 @@ export default class TaskLog extends Component { isStreaming = true; streamMode = 'streaming'; + shouldFillHeight = true; + @alias('userSettings.logMode') mode; @computed('allocation.{id,node.httpAddr}', 'useServer') diff --git a/ui/app/components/task-sub-row.js b/ui/app/components/task-sub-row.js index 45766766c9ae..f6956e697bf9 100644 --- a/ui/app/components/task-sub-row.js +++ b/ui/app/components/task-sub-row.js @@ -77,7 +77,6 @@ export default class TaskSubRowComponent extends Component { @tracked activeTaskForLogs = null; @action handleTaskLogsClick(task) { - console.log('clickin up on', task); this.activeTaskForLogs = task; } diff --git a/ui/app/templates/components/task-log.hbs b/ui/app/templates/components/task-log.hbs index b1209a021299..7bb124e29fee 100644 --- a/ui/app/templates/components/task-log.hbs +++ b/ui/app/templates/components/task-log.hbs @@ -25,5 +25,5 @@
- +
diff --git a/ui/tests/integration/components/task-context-sidebar-test.js b/ui/tests/integration/components/task-context-sidebar-test.js index a50276330124..724548a02c36 100644 --- a/ui/tests/integration/components/task-context-sidebar-test.js +++ b/ui/tests/integration/components/task-context-sidebar-test.js @@ -2,13 +2,13 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; +import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; module('Integration | Component | task-context-sidebar', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); + assert.expect(2); await render(hbs``); @@ -22,5 +22,6 @@ module('Integration | Component | task-context-sidebar', function (hooks) { `); assert.dom(this.element).hasText('template block text'); + await componentA11yAudit(this.element, assert); }); }); From fe8f070aa289d9d904a27b1a1f813fb1a30e4225 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Fri, 16 Sep 2022 16:10:17 -0400 Subject: [PATCH 05/15] same-lineify the show tasks toggle --- ui/app/templates/jobs/job/task-group.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs index 384ce8c54ce8..f44625556260 100644 --- a/ui/app/templates/jobs/job/task-group.hbs +++ b/ui/app/templates/jobs/job/task-group.hbs @@ -149,7 +149,7 @@ @class="is-padded" @inputClass="is-compact" /> - + Date: Fri, 16 Sep 2022 16:18:44 -0400 Subject: [PATCH 06/15] Changelog --- .changelog/14612.txt | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .changelog/14612.txt diff --git a/.changelog/14612.txt b/.changelog/14612.txt new file mode 100644 index 000000000000..282b62c3bfba --- /dev/null +++ b/.changelog/14612.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: adds a sidebar to show in-page logs for a given task, accessible via job, client, or task group routes +``` From f190014ec2dcb2586e97dbd47083d6d031314b67 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Mon, 19 Sep 2022 10:45:57 -0400 Subject: [PATCH 07/15] Full-height sidebar calc in css, plz drop soon container queries --- ui/app/components/task-context-sidebar.hbs | 12 +++++------- ui/app/styles/components/sidebar.scss | 16 +++++++++++++++- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs index 6b9579f51061..523e3c118c63 100644 --- a/ui/app/components/task-context-sidebar.hbs +++ b/ui/app/components/task-context-sidebar.hbs @@ -32,13 +32,11 @@ -
- -
+ {{/if}} diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss index 37623fae2836..9c1c36294df4 100644 --- a/ui/app/styles/components/sidebar.scss +++ b/ui/app/styles/components/sidebar.scss @@ -65,7 +65,8 @@ $subNavOffset: 49px; gap: 2rem; border-bottom: 1px solid $grey-blue; padding-bottom: 1rem; - margin-bottom: 1.5rem; + margin-bottom: 24px; + height: 50px; .title { margin-bottom: unset; @@ -103,4 +104,17 @@ $subNavOffset: 49px; } } } + + // 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; + .cli-window { + height: calc( + 100vh - $sidebarTopOffset - $sidebarInnerPadding - $sidebarHeaderOffset - + $cliHeaderOffset + ); + } } From 9eb70987e50cbbd700b5ab4a03b326284c313118 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Mon, 19 Sep 2022 14:02:02 -0400 Subject: [PATCH 08/15] Active status and query params for allocations page --- ui/app/components/task-sub-row.hbs | 2 +- ui/app/components/task-sub-row.js | 5 +++++ ui/app/controllers/jobs/job/allocations.js | 13 +++++++++++++ ui/app/templates/jobs/job/allocations.hbs | 2 +- 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/ui/app/components/task-sub-row.hbs b/ui/app/components/task-sub-row.hbs index 719d54cc33e4..37ada51366a7 100644 --- a/ui/app/components/task-sub-row.hbs +++ b/ui/app/components/task-sub-row.hbs @@ -1,4 +1,4 @@ - {{#each row.model.states as |task|}} - + {{/each}} From a95044169d8e245a08b0e24a8fcb8846c5ae7498 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Mon, 19 Sep 2022 15:50:11 -0400 Subject: [PATCH 09/15] Reactive shouldShowLogs getter and added to client and task group pages --- ui/app/components/task-sub-row.hbs | 4 ++-- ui/app/components/task-sub-row.js | 15 +++++++-------- ui/app/controllers/clients/client/index.js | 11 +++++++++++ ui/app/controllers/jobs/job/allocations.js | 4 +--- ui/app/controllers/jobs/job/task-group.js | 11 +++++++++++ ui/app/templates/clients/client/index.hbs | 2 +- ui/app/templates/jobs/job/task-group.hbs | 2 +- 7 files changed, 34 insertions(+), 15 deletions(-) diff --git a/ui/app/components/task-sub-row.hbs b/ui/app/components/task-sub-row.hbs index 37ada51366a7..09e65a872438 100644 --- a/ui/app/components/task-sub-row.hbs +++ b/ui/app/components/task-sub-row.hbs @@ -78,9 +78,9 @@ {{yield}} -{{#if this.activeTaskForLogs}} +{{#if this.shouldShowLogs}} {{#if this.showSubTasks}} {{#each row.model.states as |task|}} - + {{/each}} {{/if}} diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs index f44625556260..57091b930579 100644 --- a/ui/app/templates/jobs/job/task-group.hbs +++ b/ui/app/templates/jobs/job/task-group.hbs @@ -217,7 +217,7 @@ /> {{#if this.showSubTasks}} {{#each row.model.states as |task|}} - + {{/each}} {{/if}} From 119456d57e0d4d9e2967dae5e7127f0e84d21c47 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Mon, 19 Sep 2022 17:03:40 -0400 Subject: [PATCH 10/15] Higher order func passing, thanks @DingoEatingFuzz --- ui/app/controllers/jobs/job/index.js | 13 ++++++++++++- ui/app/templates/components/job-page.hbs | 2 +- .../job-page/parts/recent-allocations.hbs | 2 +- ui/app/templates/components/job-page/service.hbs | 2 +- ui/app/templates/jobs/job/index.hbs | 2 ++ 5 files changed, 17 insertions(+), 4 deletions(-) diff --git a/ui/app/controllers/jobs/job/index.js b/ui/app/controllers/jobs/job/index.js index f066ac554b26..ed5fc0caeb87 100644 --- a/ui/app/controllers/jobs/job/index.js +++ b/ui/app/controllers/jobs/job/index.js @@ -3,7 +3,7 @@ import { alias } from '@ember/object/computed'; import { inject as service } from '@ember/service'; import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting'; import classic from 'ember-classic-decorator'; - +import { action } from '@ember/object'; @classic export default class IndexController extends Controller.extend( WithNamespaceResetting @@ -20,6 +20,7 @@ export default class IndexController extends Controller.extend( { sortDescending: 'desc', }, + 'activeTask', ]; currentPage = 1; @@ -28,4 +29,14 @@ export default class IndexController extends Controller.extend( sortProperty = 'name'; sortDescending = false; + activeTask = null; + + @action + setActiveTaskQueryParam(task) { + if (task) { + this.set('activeTask', `${task.allocation.id}-${task.name}`); + } else { + this.set('activeTask', null); + } + } } diff --git a/ui/app/templates/components/job-page.hbs b/ui/app/templates/components/job-page.hbs index 564524cd74ca..2b094a903380 100644 --- a/ui/app/templates/components/job-page.hbs +++ b/ui/app/templates/components/job-page.hbs @@ -19,7 +19,7 @@ "job-page/parts/latest-deployment" job=@job handleError=this.handleError ) TaskGroups=(component "job-page/parts/task-groups" job=@job) - RecentAllocations=(component "job-page/parts/recent-allocations" job=@job) + RecentAllocations=(component "job-page/parts/recent-allocations" job=@job activeTask=@activeTask setActiveTaskQueryParam=@setActiveTaskQueryParam) Meta=(component "job-page/parts/meta" job=@job) DasRecommendations=(component "job-page/parts/das-recommendations" job=@job diff --git a/ui/app/templates/components/job-page/parts/recent-allocations.hbs b/ui/app/templates/components/job-page/parts/recent-allocations.hbs index db8dff8d9b80..31e91729d924 100644 --- a/ui/app/templates/components/job-page/parts/recent-allocations.hbs +++ b/ui/app/templates/components/job-page/parts/recent-allocations.hbs @@ -68,7 +68,7 @@ {{#if this.showSubTasks}} {{#each row.model.states as |task|}} - + {{/each}} {{/if}} diff --git a/ui/app/templates/components/job-page/service.hbs b/ui/app/templates/components/job-page/service.hbs index 233e85d3f308..2927e64233eb 100644 --- a/ui/app/templates/components/job-page/service.hbs +++ b/ui/app/templates/components/job-page/service.hbs @@ -8,7 +8,7 @@ - + \ No newline at end of file diff --git a/ui/app/templates/jobs/job/index.hbs b/ui/app/templates/jobs/job/index.hbs index 0ff6bd3acbb1..a1426d21f4ce 100644 --- a/ui/app/templates/jobs/job/index.hbs +++ b/ui/app/templates/jobs/job/index.hbs @@ -5,4 +5,6 @@ sortProperty=this.sortProperty sortDescending=this.sortDescending currentPage=this.currentPage + activeTask=this.activeTask + setActiveTaskQueryParam=this.setActiveTaskQueryParam }} \ No newline at end of file From 3aaec144e1684b8e57698b4df0746620145273eb Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Tue, 20 Sep 2022 10:13:08 -0400 Subject: [PATCH 11/15] Non-service job types get allocation params passed --- ui/app/templates/components/job-page/batch.hbs | 2 +- ui/app/templates/components/job-page/parameterized-child.hbs | 2 +- ui/app/templates/components/job-page/periodic-child.hbs | 2 +- ui/app/templates/components/job-page/sysbatch.hbs | 2 +- ui/app/templates/components/job-page/system.hbs | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/app/templates/components/job-page/batch.hbs b/ui/app/templates/components/job-page/batch.hbs index 12712b17bc87..1ed2b2af243d 100644 --- a/ui/app/templates/components/job-page/batch.hbs +++ b/ui/app/templates/components/job-page/batch.hbs @@ -6,7 +6,7 @@ - + \ No newline at end of file diff --git a/ui/app/templates/components/job-page/parameterized-child.hbs b/ui/app/templates/components/job-page/parameterized-child.hbs index 49a65c67e6cd..9c80a7617b1f 100644 --- a/ui/app/templates/components/job-page/parameterized-child.hbs +++ b/ui/app/templates/components/job-page/parameterized-child.hbs @@ -21,7 +21,7 @@ - +
{{#if @job.meta}} diff --git a/ui/app/templates/components/job-page/periodic-child.hbs b/ui/app/templates/components/job-page/periodic-child.hbs index 3164926803dc..69eef3292d7c 100644 --- a/ui/app/templates/components/job-page/periodic-child.hbs +++ b/ui/app/templates/components/job-page/periodic-child.hbs @@ -21,7 +21,7 @@ - + \ No newline at end of file diff --git a/ui/app/templates/components/job-page/sysbatch.hbs b/ui/app/templates/components/job-page/sysbatch.hbs index 2b9c7e0c0f8d..01f63b41ce56 100644 --- a/ui/app/templates/components/job-page/sysbatch.hbs +++ b/ui/app/templates/components/job-page/sysbatch.hbs @@ -7,7 +7,7 @@ - + \ No newline at end of file diff --git a/ui/app/templates/components/job-page/system.hbs b/ui/app/templates/components/job-page/system.hbs index 693e74bccbdc..1728d6eedb39 100644 --- a/ui/app/templates/components/job-page/system.hbs +++ b/ui/app/templates/components/job-page/system.hbs @@ -8,7 +8,7 @@ - + \ No newline at end of file From 97fd8d3ec2839e8e9dfbd6b7fd8e21fbe7dcb4ac Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Wed, 21 Sep 2022 11:53:19 -0400 Subject: [PATCH 12/15] Keyframe animation for task log sidebar --- ui/app/styles/components/sidebar.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss index 9c1c36294df4..21c08bf1e1ff 100644 --- a/ui/app/styles/components/sidebar.scss +++ b/ui/app/styles/components/sidebar.scss @@ -58,6 +58,10 @@ $subNavOffset: 49px; } .task-context-sidebar { + animation-name: slideFromRight; + animation-duration: 150ms; + animation-fill-mode: both; + header { display: grid; justify-content: left; @@ -118,3 +122,12 @@ $subNavOffset: 49px; ); } } + +@keyframes slideFromRight { + from { + transform: translateX(100%); + } + to { + transform: translateX(0%); + } +} From bfcc2eb88ff6d939c4f27f3bf8d8e75402fb252c Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Wed, 21 Sep 2022 17:01:11 -0400 Subject: [PATCH 13/15] Acceptance test --- ui/tests/acceptance/task-logs-test.js | 39 +++++++++++++++++-- .../components/task-context-sidebar-test.js | 27 ------------- .../components/task-sub-row-test.js | 2 +- ui/tests/pages/allocations/task/logs.js | 2 + 4 files changed, 39 insertions(+), 31 deletions(-) delete mode 100644 ui/tests/integration/components/task-context-sidebar-test.js diff --git a/ui/tests/acceptance/task-logs-test.js b/ui/tests/acceptance/task-logs-test.js index 90ca1e9b3dc5..54b8a4e381c4 100644 --- a/ui/tests/acceptance/task-logs-test.js +++ b/ui/tests/acceptance/task-logs-test.js @@ -1,23 +1,27 @@ /* eslint-disable qunit/require-expect */ -import { currentURL } from '@ember/test-helpers'; +import { click, currentURL } from '@ember/test-helpers'; import { run } from '@ember/runloop'; import { module, test } from 'qunit'; import { setupApplicationTest } from 'ember-qunit'; import { setupMirage } from 'ember-cli-mirage/test-support'; import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit'; import TaskLogs from 'nomad-ui/tests/pages/allocations/task/logs'; +import percySnapshot from '@percy/ember'; +import faker from 'nomad-ui/mirage/faker'; let allocation; let task; +let job; module('Acceptance | task logs', function (hooks) { setupApplicationTest(hooks); setupMirage(hooks); hooks.beforeEach(async function () { + faker.seed(1); server.create('agent'); server.create('node', 'forceIPv4'); - const job = server.create('job', { createAllocations: false }); + job = server.create('job', { createAllocations: false }); allocation = server.create('allocation', { jobId: job.id, @@ -26,14 +30,15 @@ module('Acceptance | task logs', function (hooks) { task = server.db.taskStates.where({ allocationId: allocation.id })[0]; run.later(run, run.cancelTimers, 1000); - await TaskLogs.visit({ id: allocation.id, name: task.name }); }); test('it passes an accessibility audit', async function (assert) { + await TaskLogs.visit({ id: allocation.id, name: task.name }); await a11yAudit(assert); }); test('/allocation/:id/:task_name/logs should have a log component', async function (assert) { + await TaskLogs.visit({ id: allocation.id, name: task.name }); assert.equal( currentURL(), `/allocations/${allocation.id}/${task.name}/logs`, @@ -44,6 +49,7 @@ module('Acceptance | task logs', function (hooks) { }); test('the stdout log immediately starts streaming', async function (assert) { + await TaskLogs.visit({ id: allocation.id, name: task.name }); const node = server.db.nodes.find(allocation.nodeId); const logUrlRegex = new RegExp( `${node.httpAddr}/v1/client/fs/logs/${allocation.id}` @@ -55,4 +61,31 @@ module('Acceptance | task logs', function (hooks) { 'Log requests were made' ); }); + + test('logs are accessible in a sidebar context', async function (assert) { + await TaskLogs.visitParentJob({ + id: job.id, + allocationId: allocation.id, + name: task.name, + }); + assert.notOk(TaskLogs.sidebarIsPresent, 'Sidebar is not present'); + + run.later(() => { + run.cancelTimers(); + }, 500); + + await click('button.logs-sidebar-trigger'); + + assert.ok(TaskLogs.sidebarIsPresent, 'Sidebar is present'); + assert + .dom('.task-context-sidebar h1.title') + .includesText(task.name, 'Sidebar title is correct'); + assert + .dom('.task-context-sidebar h1.title') + .includesText(task.state, 'Task state is correctly displayed'); + await percySnapshot(assert); + + await click('.sidebar button.close'); + assert.notOk(TaskLogs.sidebarIsPresent, 'Sidebar is not present'); + }); }); diff --git a/ui/tests/integration/components/task-context-sidebar-test.js b/ui/tests/integration/components/task-context-sidebar-test.js deleted file mode 100644 index 724548a02c36..000000000000 --- a/ui/tests/integration/components/task-context-sidebar-test.js +++ /dev/null @@ -1,27 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; -import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; - -module('Integration | Component | task-context-sidebar', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - assert.expect(2); - - await render(hbs``); - - assert.dom(this.element).hasText(''); - - // Template block usage: - await render(hbs` - - template block text - - `); - - assert.dom(this.element).hasText('template block text'); - await componentA11yAudit(this.element, assert); - }); -}); diff --git a/ui/tests/integration/components/task-sub-row-test.js b/ui/tests/integration/components/task-sub-row-test.js index 05b38eec3974..5a671ce87957 100644 --- a/ui/tests/integration/components/task-sub-row-test.js +++ b/ui/tests/integration/components/task-sub-row-test.js @@ -54,7 +54,7 @@ module('Integration | Component | task-sub-row', function (hooks) { assert.expect(2); this.set('task', mockTask); await render(hbs``); - assert.dom(this.element).hasText(`/ ${mockTask.name}`); + assert.dom(this.element).includesText(`/ ${mockTask.name}`); await componentA11yAudit(this.element, assert); }); }); diff --git a/ui/tests/pages/allocations/task/logs.js b/ui/tests/pages/allocations/task/logs.js index 12a09145911a..f436aa624517 100644 --- a/ui/tests/pages/allocations/task/logs.js +++ b/ui/tests/pages/allocations/task/logs.js @@ -2,6 +2,8 @@ import { create, isPresent, visitable } from 'ember-cli-page-object'; export default create({ visit: visitable('/allocations/:id/:name/logs'), + visitParentJob: visitable('/jobs/:id/allocations'), hasTaskLog: isPresent('[data-test-task-log]'), + sidebarIsPresent: isPresent('.sidebar.task-context-sidebar'), }); From 38ec3a3f6a5b62495e7405c0066198635238a7d1 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Thu, 22 Sep 2022 10:12:14 -0400 Subject: [PATCH 14/15] A few more sub-row tests --- .../components/task-sub-row-test.js | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/ui/tests/integration/components/task-sub-row-test.js b/ui/tests/integration/components/task-sub-row-test.js index 5a671ce87957..09e8cfbcffa6 100644 --- a/ui/tests/integration/components/task-sub-row-test.js +++ b/ui/tests/integration/components/task-sub-row-test.js @@ -1,6 +1,6 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; +import { render, click } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; @@ -51,10 +51,28 @@ const mockTask = { module('Integration | Component | task-sub-row', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - assert.expect(2); + assert.expect(6); this.set('task', mockTask); await render(hbs``); - assert.dom(this.element).includesText(`/ ${mockTask.name}`); + assert.ok( + this.element.textContent.includes(`${mockTask.name}`), + 'Task name is rendered' + ); + assert.dom('.task-sub-row').doesNotHaveClass('is-active'); + + await render(hbs``); + assert.dom('.task-sub-row').hasClass('is-active'); + + await render( + hbs`` + ); + assert.dom('.task-sub-row td:nth-child(1)').hasAttribute('colspan', '5'); + + await render( + hbs`` + ); + assert.dom('.task-sub-row td:nth-child(1)').hasAttribute('colspan', '9'); + await componentA11yAudit(this.element, assert); }); }); From 74ff4e6d30fb8dae8d6ac155fc697e9017f20282 Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Thu, 22 Sep 2022 10:40:43 -0400 Subject: [PATCH 15/15] Lintfix --- ui/tests/integration/components/task-sub-row-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/tests/integration/components/task-sub-row-test.js b/ui/tests/integration/components/task-sub-row-test.js index 09e8cfbcffa6..7eb7b2f62e4a 100644 --- a/ui/tests/integration/components/task-sub-row-test.js +++ b/ui/tests/integration/components/task-sub-row-test.js @@ -1,6 +1,6 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, click } from '@ember/test-helpers'; +import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';