Added task links to various alloc tables (#14592)

* Added task links to various alloc tables * Lintfix * Border collapse and added to task group page * Logs icon temporarily removed and localStorage added * Mock task added to test * Delog * Two asserts in new test * Remove commented-out code * Changelog * Removing args.allocation deps
hashicorp · Sep 16, 2022 · 0358bd0 · 0358bd0
1 parent 1a4e3a7
commit 0358bd0
Show file tree

Hide file tree

Showing 16 changed files with 329 additions and 15 deletions.
diff --git a/.changelog/14592.txt b/.changelog/14592.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: allow deep-dive clicks to tasks from client, job, and task group routes.
+```
diff --git a/ui/app/components/job-page/parts/recent-allocations.js b/ui/app/components/job-page/parts/recent-allocations.js
@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import PromiseArray from 'nomad-ui/utils/classes/promise-array';
 import { classNames } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
+import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
 
 @classic
 @classNames('boxed-section')
@@ -13,6 +14,14 @@ export default class RecentAllocations extends Component {
   sortProperty = 'modifyIndex';
   sortDescending = true;
 
+  @localStorageProperty('nomadShowSubTasks', true) showSubTasks;
+
+  @action
+  toggleShowSubTasks(e) {
+    e.preventDefault();
+    this.set('showSubTasks', !this.get('showSubTasks'));
+  }
+
   @computed('job.allocations.@each.modifyIndex')
   get sortedAllocations() {
     return PromiseArray.create({

diff --git a/ui/app/components/task-sub-row.hbs b/ui/app/components/task-sub-row.hbs
@@ -0,0 +1,79 @@
+<tr class="task-sub-row"
+	{{keyboard-shortcut
+		enumerated=true
+		action=(action "gotoTask" this.task.allocation this.task)
+	}}
+>
+	<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" /> --}}
+	</td>
+	<td data-test-cpu class="is-1 has-text-centered">
+		{{#if this.task.isRunning}}
+			{{#if (and (not this.cpu) this.fetchStats.isRunning)}}
+				...
+			{{else if this.statsError}}
+				<span
+					class="tooltip text-center"
+					role="tooltip"
+					aria-label="Couldn't collect stats"
+				>
+					{{x-icon "alert-triangle" class="is-warning"}}
+				</span>
+			{{else}}
+				<div
+					class="inline-chart is-small tooltip"
+					role="tooltip"
+					aria-label="{{format-hertz this.cpu.used}}
+						/
+						{{format-hertz this.taskStats.reservedCPU}}"
+				>
+					<progress
+						class="progress is-info is-small"
+						value="{{this.cpu.percent}}"
+						max="1"
+					>
+						{{this.cpu.percent}}
+					</progress>
+				</div>
+			{{/if}}
+		{{/if}}
+	</td>
+	<td data-test-mem class="is-1 has-text-centered">
+		{{#if this.task.isRunning}}
+			{{#if (and (not this.memory) this.fetchStats.isRunning)}}
+				...
+			{{else if this.statsError}}
+				<span
+					class="tooltip is-small text-center"
+					role="tooltip"
+					aria-label="Couldn't collect stats"
+				>
+					{{x-icon "alert-triangle" class="is-warning"}}
+				</span>
+			{{else}}
+				<div
+					class="inline-chart tooltip"
+					role="tooltip"
+					aria-label="{{format-bytes this.memory.used}}
+						/
+						{{format-bytes this.taskStats.reservedMemory start="MiB"}}"
+				>
+					<progress
+						class="progress is-danger is-small"
+						value="{{this.memory.percent}}"
+						max="1"
+					>
+						{{this.memory.percent}}
+					</progress>
+				</div>
+			{{/if}}
+		{{/if}}
+	</td>
+</tr>
+
+{{yield}}
diff --git a/ui/app/components/task-sub-row.js b/ui/app/components/task-sub-row.js
@@ -0,0 +1,74 @@
+import Ember from 'ember';
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { task, timeout } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+
+export default class TaskSubRowComponent extends Component {
+  @service store;
+  @service router;
+  @service('stats-trackers-registry') statsTrackersRegistry;
+
+  constructor() {
+    super(...arguments);
+    // Kick off stats polling
+    const allocation = this.task.allocation;
+    if (allocation) {
+      this.fetchStats.perform();
+    } else {
+      this.fetchStats.cancelAll();
+    }
+  }
+
+  @alias('args.taskState') task;
+
+  @action
+  gotoTask(allocation, task) {
+    this.router.transitionTo('allocations.allocation.task', allocation, task);
+  }
+
+  // Since all tasks for an allocation share the same tracker, use the registry
+  @computed('task.{allocation,isRunning}')
+  get stats() {
+    if (!this.task.isRunning) return undefined;
+
+    return this.statsTrackersRegistry.getTracker(this.task.allocation);
+  }
+
+  // Internal state
+  @tracked statsError = false;
+
+  @computed
+  get enablePolling() {
+    return !Ember.testing;
+  }
+
+  @computed('task.name', 'stats.tasks.[]')
+  get taskStats() {
+    if (!this.stats) return undefined;
+
+    return this.stats.tasks.findBy('task', this.task.name);
+  }
+
+  @alias('taskStats.cpu.lastObject') cpu;
+  @alias('taskStats.memory.lastObject') memory;
+
+  @(task(function* () {
+    do {
+      if (this.stats) {
+        try {
+          yield this.stats.poll.linked().perform();
+          this.statsError = false;
+        } catch (error) {
+          this.statsError = true;
+        }
+      }
+
+      yield timeout(500);
+    } while (this.enablePolling);
+  }).drop())
+  fetchStats;
+}
diff --git a/ui/app/controllers/clients/client/index.js b/ui/app/controllers/clients/client/index.js
@@ -15,6 +15,7 @@ import {
   deserializedQueryParam as selection,
 } from 'nomad-ui/utils/qp-serialize';
 import classic from 'ember-classic-decorator';
+import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
 
 @classic
 export default class ClientController extends Controller.extend(
@@ -60,6 +61,14 @@ export default class ClientController extends Controller.extend(
   sortProperty = 'modifyIndex';
   sortDescending = true;
 
+  @localStorageProperty('nomadShowSubTasks', false) showSubTasks;
+
+  @action
+  toggleShowSubTasks(e) {
+    e.preventDefault();
+    this.set('showSubTasks', !this.get('showSubTasks'));
+  }
+
   @computed()
   get searchProps() {
     return ['shortId', 'name'];

diff --git a/ui/app/controllers/jobs/job/task-group.js b/ui/app/controllers/jobs/job/task-group.js
@@ -13,6 +13,7 @@ import {
   deserializedQueryParam as selection,
 } from 'nomad-ui/utils/qp-serialize';
 import classic from 'ember-classic-decorator';
+import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
 
 @classic
 export default class TaskGroupController extends Controller.extend(
@@ -57,6 +58,14 @@ export default class TaskGroupController extends Controller.extend(
     return ['shortId', 'name'];
   }
 
+  @localStorageProperty('nomadShowSubTasks', true) showSubTasks;
+
+  @action
+  toggleShowSubTasks(e) {
+    e.preventDefault();
+    this.set('showSubTasks', !this.get('showSubTasks'));
+  }
+
   @computed('model.allocations.[]')
   get allocations() {
     return this.get('model.allocations') || [];

diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss
@@ -49,3 +49,4 @@
 @import './components/variables';
 @import './components/keyboard-shortcuts-modal';
 @import './components/services';
+@import './components/task-sub-row';
diff --git a/ui/app/styles/components/task-sub-row.scss b/ui/app/styles/components/task-sub-row.scss
@@ -0,0 +1,16 @@
+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;
+    }
+  }
+}
diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss
@@ -41,6 +41,10 @@
     }
   }
 
+  &.with-collapsed-borders {
+    border-collapse: collapse;
+  }
+
   &.is-darkened {
     tbody tr:not(.is-selected) {
       background-color: $white-bis;

diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs
@@ -496,6 +496,17 @@
           @inputClass="is-compact"
           @class="is-padded"
         />
+
+        <span class="is-padded">
+          <Toggle
+            class="button is-borderless is-inline"
+            @isActive={{this.showSubTasks}}
+            @onToggle={{this.toggleShowSubTasks}}
+            title="Show tasks of allocations"
+          >
+            Show Tasks
+          </Toggle>
+        </span>
       </div>
     </div>
     <div
@@ -512,7 +523,7 @@
             @source={{p.list}}
             @sortProperty={{this.sortProperty}}
             @sortDescending={{this.sortDescending}}
-            @class="with-foot" as |t|
+            @class="with-foot {{if this.showSubTasks "with-collapsed-borders"}}" as |t|
           >
             <t.head>
               <th class="is-narrow"></th>
@@ -555,6 +566,11 @@
                 @onClick={{action "gotoAllocation" row.model}}
                 @data-test-allocation={{row.model.id}}
               />
+              {{#if this.showSubTasks}}
+                {{#each row.model.states as |task|}}
+                  <TaskSubRow @namespan="8" @taskState={{task}} />
+                {{/each}}
+              {{/if}}
             </t.body>
           </ListTable>
           <div class="table-foot">

diff --git a/ui/app/templates/components/job-page/parts/recent-allocations.hbs b/ui/app/templates/components/job-page/parts/recent-allocations.hbs
@@ -1,6 +1,14 @@
 <div class="boxed-section">
   <div class="boxed-section-head">
     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"
+      >Show Tasks</Toggle>
+    </span>
   </div>
   <div
     class="boxed-section-body
@@ -11,7 +19,7 @@
         @source={{this.sortedAllocations}}
         @sortProperty={{this.sortProperty}}
         @sortDescending={{this.sortDescending}}
-        @class="with-foot" as |t|
+        @class="with-foot {{if this.showSubTasks "with-collapsed-borders"}}" as |t|
       >
         <t.head>
           <th class="is-narrow"></th>
@@ -52,11 +60,18 @@
             @allocation={{row.model}}
             @context="job"
             @onClick={{action "gotoAllocation" row.model}}
+            @showSubTasks={{this.showSubTasks}}
             {{keyboard-shortcut
               enumerated=true
               action=(action "gotoAllocation" row.model)
             }}
           />
+
+          {{#if this.showSubTasks}}
+            {{#each row.model.states as |task|}}
+              <TaskSubRow @namespan="9" @taskState={{task}} />
+            {{/each}}
+          {{/if}}
         </t.body>
       </ListTable>
     {{else}}

diff --git a/ui/app/templates/jobs/job/allocations.hbs b/ui/app/templates/jobs/job/allocations.hbs
@@ -46,7 +46,7 @@
           @source={{p.list}}
           @sortProperty={{this.sortProperty}}
           @sortDescending={{this.sortDescending}}
-          @class="with-foot" as |t|>
+          @class="with-foot with-collapsed-borders" as |t|>
           <t.head>
             <th class="is-narrow"></th>
             <t.sort-by @prop="shortId">ID</t.sort-by>
@@ -70,6 +70,10 @@
               @allocation={{row.model}}
               @context="job"
               @onClick={{action "gotoAllocation" row.model}} />
+              {{#each row.model.states as |task|}}
+                <TaskSubRow @namespan="9" @taskState={{task}} />
+              {{/each}}
+
           </t.body>
         </ListTable>
         <div class="table-foot">