ui: use task state to determine if task is active

.changelog/14224.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixed a bug that caused the allocation details page to display the stats bar chart even if the task was pending.
+```

ui/app/models/task-state.js

@@ -1,5 +1,5 @@
 import { computed } from '@ember/object';
-import { alias, none, and } from '@ember/object/computed';
+import { alias, and } from '@ember/object/computed';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { attr } from '@ember-data/model';
 import {
@@ -19,7 +19,6 @@ export default class TaskState extends Fragment {
   @attr('date') finishedAt;
   @attr('boolean') failed;
 
-  @none('finishedAt') isActive;
   @and('isActive', 'allocation.isRunning') isRunning;
 
   @computed('task.kind')
@@ -58,6 +57,11 @@ export default class TaskState extends Fragment {
     return classMap[this.state] || 'is-dark';
   }
 
+  @computed('state')
+  get isActive() {
+    return this.state === 'running';
+  }
+
   restart() {
     return this.allocation.restart(this.name);
   }

ui/tests/acceptance/allocation-detail-test.js

@@ -158,24 +158,47 @@ module('Acceptance | allocation detail', function (hooks) {
   });
 
   test('each task row should list high-level information for the task', async function (assert) {
-    const task = server.db.taskStates
-      .where({ allocationId: allocation.id })
-      .sortBy('name')[0];
-    const events = server.db.taskEvents.where({ taskStateId: task.id });
-    const event = events[events.length - 1];
+    const job = server.create('job', {
+      groupsCount: 1,
+      groupTaskCount: 3,
+      withGroupServices: true,
+      createAllocations: false,
+    });
+
+    const allocation = server.create('allocation', 'withTaskWithPorts', {
+      clientStatus: 'running',
+      jobId: job.id,
+    });
 
     const taskGroup = server.schema.taskGroups.where({
       jobId: allocation.jobId,
       name: allocation.taskGroup,
     }).models[0];
 
-    const jobTask = taskGroup.tasks.models.find((m) => m.name === task.name);
-    const volumes = jobTask.volumeMounts.map((volume) => ({
-      name: volume.Volume,
-      source: taskGroup.volumes[volume.Volume].Source,
-    }));
+    // Set the expected task states.
+    const states = ['running', 'pending', 'dead'];
+    server.db.taskStates
+      .where({ allocationId: allocation.id })
+      .sortBy('name')
+      .forEach((task, i) => {
+        server.db.taskStates.update(task.id, { state: states[i] });
+      });
+
+    await Allocation.visit({ id: allocation.id });
+
+    Allocation.tasks.forEach((taskRow, i) => {
+      const task = server.db.taskStates
+        .where({ allocationId: allocation.id })
+        .sortBy('name')[i];
+      const events = server.db.taskEvents.where({ taskStateId: task.id });
+      const event = events[events.length - 1];
+
+      const jobTask = taskGroup.tasks.models.find((m) => m.name === task.name);
+      const volumes = jobTask.volumeMounts.map((volume) => ({
+        name: volume.Volume,
+        source: taskGroup.volumes[volume.Volume].Source,
+      }));
 
-    Allocation.tasks[0].as((taskRow) => {
       assert.equal(taskRow.name, task.name, 'Name');
       assert.equal(taskRow.state, task.state, 'State');
       assert.equal(taskRow.message, event.displayMessage, 'Event Message');
@@ -185,6 +208,10 @@ module('Acceptance | allocation detail', function (hooks) {
         'Event Time'
       );
 
+      const expectStats = task.state === 'running';
+      assert.equal(taskRow.hasCpuMetrics, expectStats, 'CPU metrics');
+      assert.equal(taskRow.hasMemoryMetrics, expectStats, 'Memory metrics');
+
       const volumesText = taskRow.volumes;
       volumes.forEach((volume) => {
         assert.ok(

ui/tests/pages/allocations/detail.js

@@ -50,6 +50,8 @@ export default create({
     time: text('[data-test-time]'),
     volumes: text('[data-test-volumes]'),
 
+    hasCpuMetrics: isPresent('[data-test-cpu] .inline-chart progress'),
+    hasMemoryMetrics: isPresent('[data-test-mem] .inline-chart progress'),
     hasUnhealthyDriver: isPresent('[data-test-icon="unhealthy-driver"]'),
     hasProxyTag: isPresent('[data-test-proxy-tag]'),