Add an empty state to the allocation detail task list

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/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/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]'),