UI: Allocation detail empty state

ui/app/templates/allocations/allocation/index.hbs

@@ -37,29 +37,36 @@
     <div class="boxed-section-head">
       Tasks
     </div>
-    <div class="boxed-section-body is-full-bleed">
-      {{#list-table
-        source=sortedStates
-        sortProperty=sortProperty
-        sortDescending=sortDescending
-        class="is-striped" as |t|}}
-        {{#t.head}}
-          <th class="is-narrow"></th>
-          {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
-          {{#t.sort-by prop="state"}}State{{/t.sort-by}}
-          <th>Last Event</th>
-          {{#t.sort-by prop="events.lastObject.time"}}Time{{/t.sort-by}}
-          <th>Addresses</th>
-          <th>CPU</th>
-          <th>Memory</th>
-        {{/t.head}}
-        {{#t.body as |row|}}
-          {{task-row
-            data-test-task-row=row.model.name
-            task=row.model
-            onClick=(action "taskClick" row.model.allocation row.model)}}
-        {{/t.body}}
-      {{/list-table}}
+    <div class="boxed-section-body {{if sortedStates.length "is-full-bleed"}}">
+      {{#if sortedStates.length}}
+        {{#list-table
+          source=sortedStates
+          sortProperty=sortProperty
+          sortDescending=sortDescending
+          class="is-striped" as |t|}}
+          {{#t.head}}
+            <th class="is-narrow"></th>
+            {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
+            {{#t.sort-by prop="state"}}State{{/t.sort-by}}
+            <th>Last Event</th>
+            {{#t.sort-by prop="events.lastObject.time"}}Time{{/t.sort-by}}
+            <th>Addresses</th>
+            <th>CPU</th>
+            <th>Memory</th>
+          {{/t.head}}
+          {{#t.body as |row|}}
+            {{task-row
+              data-test-task-row=row.model.name
+              task=row.model
+              onClick=(action "taskClick" row.model.allocation row.model)}}
+          {{/t.body}}
+        {{/list-table}}
+      {{else}}
+        <div data-test-empty-tasks-list class="empty-message">
+          <h3 data-test-empty-tasks-list-headline class="empty-message-headline">No Tasks</h3>
+          <p data-test-empty-tasks-list-body class="empty-message-body">Allocations will not have tasks until they are in a running state.</p>
+        </div>
+      {{/if}}
     </div>
   </div>
 

ui/mirage/factories/allocation.js

@@ -156,9 +156,8 @@ export default Factory.extend({
       namespace,
       jobId: job.id,
       nodeId: node.id,
-      taskStateIds: states.mapBy('id'),
-      task_state_ids: states.mapBy('id'),
-      taskResourcesIds: resources.mapBy('id'),
+      taskStateIds: allocation.clientStatus === 'pending' ? [] : states.mapBy('id'),
+      taskResourcesIds: allocation.clientStatus === 'pending' ? [] : resources.mapBy('id'),
       taskGroup: taskGroup.name,
       name: allocation.name || `${taskGroup.name}.[${faker.random.number(10)}]`,
     });

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

@@ -15,7 +15,7 @@ moduleForAcceptance('Acceptance | allocation detail', {
 
     node = server.create('node');
     job = server.create('job', { groupsCount: 1, createAllocations: false });
-    allocation = server.create('allocation', 'withTaskWithPorts');
+    allocation = server.create('allocation', 'withTaskWithPorts', { clientStatus: 'running' });
 
     // Make sure the node has an unhealthy driver
     node.update({
@@ -76,6 +76,7 @@ test('/allocation/:id should list all tasks for the allocation', function(assert
     server.db.taskStates.where({ allocationId: allocation.id }).length,
     'Table lists all tasks'
   );
+  assert.notOk(Allocation.isEmpty, 'Task table empty state is not shown');
 });
 
 test('each task row should list high-level information for the task', function(assert) {
@@ -146,6 +147,16 @@ test('tasks with an unhealthy driver have a warning icon', function(assert) {
   assert.ok(Allocation.firstUnhealthyTask().hasUnhealthyDriver, 'Warning is shown');
 });
 
+test('when there are no tasks, an empty state is shown', function(assert) {
+  // Make sure the allocation is pending in order to ensure there are no tasks
+  allocation = server.create('allocation', 'withTaskWithPorts', { clientStatus: 'pending' });
+  Allocation.visit({ id: allocation.id });
+
+  andThen(() => {
+    assert.ok(Allocation.isEmpty, 'Task table empty state is shown');
+  });
+});
+
 test('when the allocation has not been rescheduled, the reschedule events section is not rendered', function(assert) {
   assert.notOk(Allocation.hasRescheduleEvents, 'Reschedule Events section exists');
 });

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

@@ -12,7 +12,7 @@ moduleForAcceptance('Acceptance | task detail', {
     server.create('agent');
     server.create('node');
     server.create('job', { createAllocations: false });
-    allocation = server.create('allocation', 'withTaskWithPorts');
+    allocation = server.create('allocation', 'withTaskWithPorts', { clientStatus: 'running' });
     task = server.db.taskStates.where({ allocationId: allocation.id })[0];
 
     Task.visit({ id: allocation.id, name: task.name });
@@ -212,7 +212,7 @@ moduleForAcceptance('Acceptance | task detail (different namespace)', {
     server.create('namespace');
     server.create('namespace', { id: 'other-namespace' });
     server.create('job', { createAllocations: false, namespaceId: 'other-namespace' });
-    allocation = server.create('allocation', 'withTaskWithPorts');
+    allocation = server.create('allocation', 'withTaskWithPorts', { clientStatus: 'running' });
     task = server.db.taskStates.where({ allocationId: allocation.id })[0];
 
     Task.visit({ id: allocation.id, name: task.name });

ui/tests/acceptance/task-logs-test.js

@@ -10,9 +10,9 @@ moduleForAcceptance('Acceptance | task logs', {
   beforeEach() {
     server.create('agent');
     server.create('node', 'forceIPv4');
-    const job = server.create('job');
+    const job = server.create('job', { createAllocations: false });
 
-    allocation = server.db.allocations.where({ jobId: job.id })[0];
+    allocation = server.create('allocation', { jobId: job.id, clientStatus: 'running' });
     task = server.db.taskStates.where({ allocationId: allocation.id })[0];
 
     run.later(run, run.cancelTimers, 1000);

ui/tests/pages/allocations/detail.js

@@ -47,6 +47,8 @@ export default create({
 
   hasRescheduleEvents: isPresent('[data-test-reschedule-events]'),
 
+  isEmpty: isPresent('[data-test-empty-tasks-list]'),
+
   error: {
     isShown: isPresent('[data-test-error]'),
     title: text('[data-test-error-title]'),