Refactor the servers/server pages to match the subnav style of nested pages

ui/app/controllers/servers.js

@@ -1,31 +1,5 @@
-import { alias } from '@ember/object/computed';
 import Controller from '@ember/controller';
-import Sortable from 'nomad-ui/mixins/sortable';
-
-export default class ServersController extends Controller.extend(Sortable) {
-  @alias('model.nodes') nodes;
-  @alias('model.agents') agents;
-
-  queryParams = [
-    {
-      currentPage: 'page',
-    },
-    {
-      sortProperty: 'sort',
-    },
-    {
-      sortDescending: 'desc',
-    },
-  ];
-
-  currentPage = 1;
-  pageSize = 8;
-
-  sortProperty = 'isLeader';
-  sortDescending = true;
 
+export default class ServersController extends Controller {
   isForbidden = false;
-
-  @alias('agents') listToSort;
-  @alias('listSorted') sortedAgents;
 }

ui/app/controllers/servers/index.js

@@ -1,7 +1,32 @@
 import { alias } from '@ember/object/computed';
 import Controller, { inject as controller } from '@ember/controller';
+import Sortable from 'nomad-ui/mixins/sortable';
 
-export default class IndexController extends Controller {
+export default class IndexController extends Controller.extend(Sortable) {
   @controller('servers') serversController;
   @alias('serversController.isForbidden') isForbidden;
+
+  @alias('model.nodes') nodes;
+  @alias('model.agents') agents;
+
+  queryParams = [
+    {
+      currentPage: 'page',
+    },
+    {
+      sortProperty: 'sort',
+    },
+    {
+      sortDescending: 'desc',
+    },
+  ];
+
+  currentPage = 1;
+  pageSize = 8;
+
+  sortProperty = 'isLeader';
+  sortDescending = true;
+
+  @alias('agents') listToSort;
+  @alias('listSorted') sortedAgents;
 }

ui/app/routes/servers/server.js

@@ -1,4 +1,14 @@
 import Route from '@ember/routing/route';
 import WithModelErrorHandling from 'nomad-ui/mixins/with-model-error-handling';
 
-export default class ServerRoute extends Route.extend(WithModelErrorHandling) {}
+export default class ServerRoute extends Route.extend(WithModelErrorHandling) {
+  breadcrumbs(model) {
+    if (!model) return [];
+    return [
+      {
+        label: model.name,
+        args: ['servers.server', model.id],
+      },
+    ];
+  }
+}

ui/app/templates/servers.hbs

@@ -1,41 +1,3 @@
 <PageLayout>
-  <section class="section">
-    {{#if isForbidden}}
-      {{partial "partials/forbidden-message"}}
-    {{else}}
-      <ListPagination
-        @source={{sortedAgents}}
-        @size={{pageSize}}
-        @page={{currentPage}} as |p|>
-        <ListTable
-          @source={{p.list}}
-          @sortProperty={{sortProperty}}
-          @sortDescending={{sortDescending}}
-          @class="with-foot" as |t|>
-          <t.head>
-            <t.sort-by @prop="name">Name</t.sort-by>
-            <t.sort-by @prop="status">Status</t.sort-by>
-            <t.sort-by @prop="isLeader">Leader</t.sort-by>
-            <t.sort-by @prop="address">Address</t.sort-by>
-            <t.sort-by @prop="serfPort">port</t.sort-by>
-            <t.sort-by @prop="datacenter">Datacenter</t.sort-by>
-          </t.head>
-          <t.body as |row|>
-            <ServerAgentRow data-test-server-agent-row @agent={{row.model}} />
-          </t.body>
-        </ListTable>
-        <div class="table-foot">
-          <nav class="pagination">
-            <div class="pagination-numbers">
-              {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAgents.length}}
-            </div>
-            <p.prev @class="pagination-previous"> &lt; </p.prev>
-            <p.next @class="pagination-next"> &gt; </p.next>
-            <ul class="pagination-list"></ul>
-          </nav>
-        </div>
-      </ListPagination>
-      {{outlet}}
-    {{/if}}
-  </section>
+  {{outlet}}
 </PageLayout>

ui/app/templates/servers/index.hbs

@@ -1 +1,39 @@
-{{title "Servers"}}
+{{title "Servers"}}
+<section class="section">
+  {{#if isForbidden}}
+    {{partial "partials/forbidden-message"}}
+  {{else}}
+    <ListPagination
+      @source={{sortedAgents}}
+      @size={{pageSize}}
+      @page={{currentPage}} as |p|>
+      <ListTable
+        @source={{p.list}}
+        @sortProperty={{sortProperty}}
+        @sortDescending={{sortDescending}}
+        @class="with-foot" as |t|>
+        <t.head>
+          <t.sort-by @prop="name">Name</t.sort-by>
+          <t.sort-by @prop="status">Status</t.sort-by>
+          <t.sort-by @prop="isLeader">Leader</t.sort-by>
+          <t.sort-by @prop="address">Address</t.sort-by>
+          <t.sort-by @prop="serfPort">port</t.sort-by>
+          <t.sort-by @prop="datacenter">Datacenter</t.sort-by>
+        </t.head>
+        <t.body as |row|>
+          <ServerAgentRow data-test-server-agent-row @agent={{row.model}} />
+        </t.body>
+      </ListTable>
+      <div class="table-foot">
+        <nav class="pagination">
+          <div class="pagination-numbers">
+            {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAgents.length}}
+          </div>
+          <p.prev @class="pagination-previous"> &lt; </p.prev>
+          <p.next @class="pagination-next"> &gt; </p.next>
+          <ul class="pagination-list"></ul>
+        </nav>
+      </div>
+    </ListPagination>
+  {{/if}}
+</section>

ui/app/templates/servers/server.hbs

@@ -1,26 +1,28 @@
 {{title "Server " model.name}}
-<div class="columns">
-  <div class="column is-half">
-    <div class="message">
-      <div class="message-header">
-        Tags
-      </div>
-      <table class="table server-tags">
-        <thead>
-          <tr>
-            <td>Name</td>
-            <td>Value</td>
-          </tr>
-        </thead>
-        <tbody>
-          {{#each sortedTags as |tag|}}
-            <tr data-test-server-tag>
-              <td>{{tag.name}}</td>
-              <td>{{tag.value}}</td>
+<section class="section">
+  <div class="columns">
+    <div class="column is-half">
+      <div class="message">
+        <div class="message-header">
+          Tags
+        </div>
+        <table class="table server-tags">
+          <thead>
+            <tr>
+              <td>Name</td>
+              <td>Value</td>
             </tr>
-          {{/each}}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {{#each sortedTags as |tag|}}
+              <tr data-test-server-tag>
+                <td>{{tag.name}}</td>
+                <td>{{tag.value}}</td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
-</div>
+</section>

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

@@ -34,17 +34,6 @@ module('Acceptance | server detail', function(hooks) {
     });
   });
 
-  test('the list of servers from /servers should still be present', async function(assert) {
-    assert.equal(ServerDetail.servers.length, server.db.agents.length, '# of servers');
-  });
-
-  test('the active server should be denoted in the table', async function(assert) {
-    const activeServers = ServerDetail.servers.filter(server => server.isActive);
-
-    assert.equal(activeServers.length, 1, 'Only one active server');
-    assert.equal(ServerDetail.activeServer.name, agent.name, 'Active server matches current route');
-  });
-
   test('when the server is not found, an error message is shown, but the URL persists', async function(assert) {
     await ServerDetail.visit({ name: 'not-a-real-server' });
 

ui/tests/pages/servers/detail.js

@@ -1,23 +1,13 @@
-import { create, collection, clickable, hasClass, text, visitable } from 'ember-cli-page-object';
-import { getter } from 'ember-cli-page-object/macros';
+import { create, collection, clickable, text, visitable } from 'ember-cli-page-object';
 
 export default create({
   visit: visitable('/servers/:name'),
 
-  servers: collection('[data-test-server-agent-row]', {
-    name: text('[data-test-server-name]'),
-    isActive: hasClass('is-active'),
-  }),
-
   tags: collection('[data-test-server-tag]', {
     name: text('td', { at: 0 }),
     value: text('td', { at: 1 }),
   }),
 
-  activeServer: getter(function() {
-    return this.servers.toArray().find(server => server.isActive);
-  }),
-
   error: {
     title: text('[data-test-error-title]'),
     message: text('[data-test-error-message]'),