Update allocation detail page to look like job and node

ui/app/models/allocation.js

@@ -38,6 +38,18 @@ export default Model.extend({
     return STATUS_ORDER[this.get('clientStatus')] || 100;
   }),
 
+  statusClass: computed('clientStatus', function() {
+    const classMap = {
+      pending: 'is-pending',
+      running: 'is-primary',
+      complete: 'is-complete',
+      failed: 'is-error',
+      lost: 'is-light',
+    };
+
+    return classMap[this.get('clientStatus')] || 'is-dark';
+  }),
+
   taskGroup: computed('taskGroupName', 'job.taskGroups.[]', function() {
     const taskGroups = this.get('job.taskGroups');
     return taskGroups && taskGroups.findBy('name', this.get('taskGroupName'));

ui/app/styles/core/tag.scss

@@ -16,6 +16,16 @@
     color: $blue-invert;
   }
 
+  &.is-primary {
+    background: $primary;
+    color: $primary-invert;
+  }
+
+  &.is-complete {
+    background: $nomad-green-dark;
+    color: findColorInvert($nomad-green-dark);
+  }
+
   &.is-error {
     background: $danger;
     color: $danger-invert;

ui/app/templates/allocations/allocation/index.hbs

@@ -3,11 +3,23 @@
 {{/global-header}}
 {{#gutter-menu class="page-body"}}
   <section class="section">
-    <h1 class="title">Allocation {{model.name}}</h1>
+    <h1 class="title">
-    <h3 class="subtitle">
+      Allocation {{model.name}}
-      For job {{#link-to "jobs.job" model.job (query-params jobNamespace=model.job.namespace.id)}}{{model.job.name}}{{/link-to}}
+      <span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span>
-      on client {{#link-to "clients.client" model.node}}{{model.node.shortId}}{{/link-to}}
+      <span class="tag is-hollow is-small no-text-transform">{{model.id}}</span>
-    </h3>
+    </h1>
+
+    <div class="boxed-section is-small">
+      <div class="boxed-section-body inline-definitions">
+        <span class="label">Allocation Details</span>
+        <span class="pair job-link"><span class="term">Job</span>
+          {{#link-to "jobs.job" model.job (query-params jobNamespace=model.job.namespace.id)}}{{model.job.name}}{{/link-to}}
+        </span>
+        <span class="pair node-link"><span class="term">Client</span>
+          {{#link-to "clients.client" model.node}}{{model.node.shortId}}{{/link-to}}
+        </span>
+      </div>
+    </div>
 
     <div class="message">
       <div class="message-header">

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

@@ -28,14 +28,19 @@ test('/allocation/:id should name the allocation and link to the corresponding j
   assert
 ) {
   assert.ok(find('h1').textContent.includes(allocation.name), 'Allocation name is in the heading');
-  assert.ok(find('h3').textContent.includes(job.name), 'Job name is in the subheading');
+  assert.equal(
-  assert.ok(
+    find('.inline-definitions .job-link a').textContent.trim(),
-    find('h3').textContent.includes(node.id.split('-')[0]),
+    job.name,
+    'Job name is in the subheading'
+  );
+  assert.equal(
+    find('.inline-definitions .node-link a').textContent.trim(),
+    node.id.split('-')[0],
     'Node short id is in the subheading'
   );
 
   andThen(() => {
-    click(findAll('h3 a')[0]);
+    click('.inline-definitions .job-link a');
   });
 
   andThen(() => {
@@ -45,7 +50,7 @@ test('/allocation/:id should name the allocation and link to the corresponding j
   visit(`/allocations/${allocation.id}`);
 
   andThen(() => {
-    click(findAll('h3 a')[1]);
+    click('.inline-definitions .node-link a');
   });
 
   andThen(() => {