Redesign the server detail page to be inline with everything else

ui/app/components/server-subnav.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class ServerSubnav extends Component {}

ui/app/templates/components/server-subnav.hbs

@@ -0,0 +1,6 @@
+<div class="tabs is-subnav">
+  <ul>
+    <li>{{#link-to "servers.server.index" server activeClass="is-active"}}Overview{{/link-to}}</li>
+    <li>{{#link-to "servers.server.monitor" server activeClass="is-active"}}Monitor{{/link-to}}</li>
+  </ul>
+</div>

ui/app/templates/servers/server/index.hbs

@@ -1,28 +1,43 @@
 {{title "Server " model.name}}
+<ServerSubnav @server={{model}} />
 <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>
-          </thead>
-          <tbody>
-            {{#each sortedTags as |tag|}}
-              <tr data-test-server-tag>
-                <td>{{tag.name}}</td>
-                <td>{{tag.value}}</td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      </div>
+  <h1 data-test-title class="title">
+    Server {{model.name}}
+    {{#if model.isLeader}}
+      <span class="bumper-left tag is-primary">Leader</span>
+    {{/if}}
+  </h1>
+  <div class="boxed-section is-small">
+    <div data-test-server-details class="boxed-section-body inline-definitions">
+      <span class="label">Server Details</span>
+      <span class="pair"><span class="term">Status</span>
+        {{model.status}}
+      </span>
+      <span class="pair"><span class="term">Address</span>
+        {{model.rpcAddr}}
+      </span>
+      <span class="pair"><span class="term">Datacenter</span>
+        {{model.datacenter}}
+      </span>
+    </div>
+  </div>
+  <div class="boxed-section">
+    <div class="boxed-section-head">
+      Server Tags
+    </div>
+    <div class="boxed-section-body is-full-bleed">
+      <ListTable @source={{sortedTags}} @class="is-striped" as |t|>
+        <t.head>
+          <td class="is-one-quarter">Name</td>
+          <td>Value</td>
+        </t.head>
+        <t.body as |row|>
+          <tr data-test-server-tag>
+            <td>{{row.model.name}}</td>
+            <td>{{row.model.value}}</td>
+          </tr>
+        </t.body>
+      </ListTable>
     </div>
   </div>
 </section>

ui/app/templates/servers/server/monitor.hbs

@@ -0,0 +1,4 @@
+{{title "Server " model.name}}
+<ServerSubnav @server={{model}} />
+<section class="section">
+</section>