Empty states for clients

ui/app/templates/nodes/index.hbs

@@ -3,9 +3,11 @@
 {{/global-header}}
 {{#gutter-menu class="page-body"}}
   <section class="section">
-    <div class="content">
-      <div>{{search-box searchTerm=(mut searchTerm) placeholder="Search nodes..."}}</div>
-    </div>
+    {{#if nodes.length}}
+      <div class="content">
+        <div>{{search-box searchTerm=(mut searchTerm) placeholder="Search nodes..."}}</div>
+      </div>
+    {{/if}}
     {{#list-pagination
       source=sortedNodes
       size=pageSize
@@ -38,6 +40,18 @@
           <ul class="pagination-list"></ul>
         </nav>
       </div>
+    {{else}}
+      <div class="empty-message">
+        {{#if (eq nodes.length 0)}}
+          <h3 class="empty-message-headline">No Clients</h3>
+          <p class="empty-message-body">
+            There are currently no visible nodes in the cluster. This could mean that the cluster is bootstrapped with no clients. It could also mean {{#link-to "settings.tokens"}}you don't have access to see any clients{{/link-to}}.
+          </p>
+        {{else if searchTerm}}
+          <h3 class="empty-message-headline">No Matches</h3>
+          <p class="empty-message-body">No clients match the term <strong>{{searchTerm}}</strong></p>
+        {{/if}}
+      </div>
     {{/list-pagination}}
   </section>
 {{/gutter-menu}}

ui/tests/acceptance/nodes-list-test.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import { click, findAll, currentURL, visit } from 'ember-native-dom-helpers';
+import { click, find, findAll, currentURL, visit } from 'ember-native-dom-helpers';
 import { test } from 'qunit';
 import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance';
 import { findLeader } from '../../mirage/config';
@@ -75,6 +75,35 @@ test('each client should link to the client detail page', function(assert) {
   });
 });
 
+test('when there are no clients, there is an empty message', function(assert) {
+  server.createList('agent', 1);
+
+  visit('/nodes');
+
+  andThen(() => {
+    assert.ok(find('.empty-message'));
+    assert.equal(find('.empty-message-headline').textContent, 'No Clients');
+  });
+});
+
+test('when there are clients, but no matches for a search term, there is an empty message', function(
+  assert
+) {
+  server.createList('agent', 1);
+  server.create('node', { name: 'node' });
+
+  visit('/nodes');
+
+  andThen(() => {
+    fillIn('.search-box input', 'client');
+  });
+
+  andThen(() => {
+    assert.ok(find('.empty-message'));
+    assert.equal(find('.empty-message-headline').textContent, 'No Matches');
+  });
+});
+
 test('/servers should list all servers', function(assert) {
   const agentsCount = 10;
   const pageSize = 8;