Empty state for allocations search on task group detail

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

@@ -90,6 +90,13 @@
               {{#p.last class="pagination-link"}} >| {{/p.last}}
             </ul>
           </nav>
+        {{else}}
+          <div class="boxed-section-body">
+            <div class="empty-message">
+              <h3 class="empty-message-headline">No Matches</h3>
+              <p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
+            </div>
+          </div>
         {{/list-pagination}}
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import { click, findAll, currentURL, visit } from 'ember-native-dom-helpers';
+import { click, find, findAll, fillIn, currentURL, visit } from 'ember-native-dom-helpers';
 import { test } from 'qunit';
 import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance';
 
@@ -41,6 +41,11 @@ moduleForAcceptance('Acceptance | task group detail', {
       taskGroup: taskGroups[1].name,
     });
 
+    // Set a static name to make the search test deterministic
+    server.db.allocations.forEach(alloc => {
+      alloc.name = 'aaaaa';
+    });
+
     visit(`/jobs/${job.id}/${taskGroup.name}`);
   },
 });
@@ -212,3 +217,12 @@ test('each allocation should show stats about the allocation, retrieved directly
     `Requests ${nodeStatsUrl}`
   );
 });
+
+test('when the allocation search has no matches, there is an empty message', function(assert) {
+  fillIn('.search-box input', 'zzzzzz');
+
+  andThen(() => {
+    assert.ok(find('.allocations .empty-message'));
+    assert.equal(find('.allocations .empty-message-headline').textContent, 'No Matches');
+  });
+});