[ui] task logs in sidebar

.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
+```

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(),
     },

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() {

ui/app/components/task-context-sidebar.hbs

@@ -0,0 +1,46 @@
+<Portal @target="log-sidebar-portal">
+	<div
+		class="sidebar task-context-sidebar has-subnav {{if this.isSideBarOpen "open"}}"
+		{{on-click-outside
+			@fns.closeSidebar
+			capture=true
+		}}
+	>
+	{{#if @task}}
+		{{keyboard-commands this.keyCommands}}
+		<header>
+			<h1 class="title">
+				{{@task.name}}
+				<span class="state {{@task.state}}">
+					{{@task.state}}
+				</span>
+			</h1>
+			<LinkTo
+				class="link"
+				title={{@task.name}}
+				@route="allocations.allocation.task"
+				@models={{array @task.allocation @task}}
+			>
+				Go to Task page
+			</LinkTo>
+			<button
+				class="button close is-borderless"
+				type="button"
+				{{on "click" @fns.closeSidebar}}
+			>
+				{{x-icon "cancel"}}
+			</button>
+		</header>
+
+		<section class="section is-full-width">
+			<TaskLog
+				@allocation={{@task.allocation}}
+				@task={{@task.name}}
+				@shouldFillHeight={{false}}
+			/>
+		</section>
+
+
+	{{/if}}
+	</div>
+</Portal>

ui/app/components/task-context-sidebar.js

@@ -0,0 +1,16 @@
+// @ts-check
+import Component from '@glimmer/component';
+
+export default class TaskContextSidebarComponent extends Component {
+  get isSideBarOpen() {
+    return !!this.args.task;
+  }
+
+  keyCommands = [
+    {
+      label: 'Close Task Logs Sidebar',
+      pattern: ['Escape'],
+      action: () => this.args.fns.closeSidebar(),
+    },
+  ];
+}

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')

ui/app/components/task-sub-row.hbs

@@ -5,12 +5,12 @@
 	}}
 >
 	<td colspan={{@namespan}}>
-		/
-		<LinkTo @route="allocations.allocation.task" @models={{array this.task.allocation this.task}}>
-			{{this.task.name}}
-		</LinkTo>
-		{{!-- TODO: in-page logs --}}
-		{{!-- <FlightIcon @name="logs" /> --}}
+		<div class="name-grid">
+			<LinkTo title={{this.task.name}} class="task-name" @route="allocations.allocation.task" @models={{array this.task.allocation this.task}}>{{this.task.name}}</LinkTo>
+			<button type="button" class="logs-sidebar-trigger button is-borderless is-inline is-compact" onclick={{action "handleTaskLogsClick" this.task}}>
+				<FlightIcon @name="logs" />View Logs
+			</button>
+		</div>
 	</td>
 	<td data-test-cpu class="is-1 has-text-centered">
 		{{#if this.task.isRunning}}
@@ -76,4 +76,13 @@
 	</td>
 </tr>
 
-{{yield}}
+{{yield}}
+
+{{#if this.activeTaskForLogs}}
+	<TaskContextSidebar
+		@task={{this.activeTaskForLogs}}
+		@fns={{hash
+			closeSidebar=this.closeSidebar
+		}}
+	/>
+{{/if}}

ui/app/components/task-sub-row.js

@@ -71,4 +71,18 @@ export default class TaskSubRowComponent extends Component {
     } while (this.enablePolling);
   }).drop())
   fetchStats;
+
+  //#region Logs Sidebar
+
+  @tracked activeTaskForLogs = null;
+
+  @action handleTaskLogsClick(task) {
+    this.activeTaskForLogs = task;
+  }
+
+  @action closeSidebar() {
+    this.activeTaskForLogs = null;
+  }
+
+  //#endregion Logs Sidebar
 }

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 {

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;
+      }
+    }
+  }
+}

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;
+        }
+      }
+
+      .logs-sidebar-trigger {
+        color: $blue;
+        text-decoration: underline;
+        font-weight: normal;
+        svg {
+          color: black;
+          margin-right: 5px;
+          position: relative;
+          top: 3px;
+        }
+      }
     }
   }
 }

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;

ui/app/templates/application.hbs

@@ -26,6 +26,8 @@
 
 <KeyboardShortcutsModal />
 
+<PortalTarget @name="log-sidebar-portal" />
+
 {{#if this.error}}
   <div class="error-container">
     <div data-test-error class="error-message">

ui/app/templates/clients/client/index.hbs

@@ -497,9 +497,8 @@
           @class="is-padded"
         />
 
-        <span class="is-padded">
+        <span class="is-padded is-one-line">
           <Toggle
-            class="button is-borderless is-inline"
             @isActive={{this.showSubTasks}}
             @onToggle={{this.toggleShowSubTasks}}
             title="Show tasks of allocations"

ui/app/templates/components/job-page/parts/recent-allocations.hbs

@@ -3,7 +3,6 @@
     Recent Allocations
     <span class="pull-right is-padded">
       <Toggle
-        class="button is-borderless is-inline"
         @isActive={{this.showSubTasks}}
         @onToggle={{this.toggleShowSubTasks}}
         title="Show tasks of allocations"

ui/app/templates/components/task-log.hbs

@@ -25,5 +25,5 @@
   </span>
 </div>
 <div data-test-log-box class="boxed-section-body is-dark is-full-bleed">
-  <StreamingFile @logger={{this.logger}} @mode={{this.streamMode}} @isStreaming={{this.isStreaming}} />
+  <StreamingFile @logger={{this.logger}} @mode={{this.streamMode}} @isStreaming={{this.isStreaming}} @shouldFillHeight={{this.shouldFillHeight}} />
 </div>

ui/app/templates/jobs/job/task-group.hbs

@@ -149,9 +149,8 @@
           @class="is-padded"
           @inputClass="is-compact"
         />
-        <span class="is-padded">
+        <span class="is-padded is-one-line">
           <Toggle
-            class="button is-borderless is-inline"
             @isActive={{this.showSubTasks}}
             @onToggle={{this.toggleShowSubTasks}}
             title="Show tasks of allocations"

ui/tests/integration/components/task-context-sidebar-test.js

@@ -0,0 +1,27 @@
+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`<TaskContextSidebar />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <TaskContextSidebar>
+        template block text
+      </TaskContextSidebar>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+    await componentA11yAudit(this.element, assert);
+  });
+});