Deconstruct the existing job detail page into common parts

This is to later compose job detail page variations

ui/app/components/job-page/parts/evaluations.js

@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  job: null,
+
+  classNames: ['boxed-section'],
+
+  sortedEvaluations: computed('job.evaluations.@each.modifyIndex', function() {
+    return (this.get('job.evaluations') || []).sortBy('modifyIndex').reverse();
+  }),
+});

ui/app/components/job-page/parts/placement-failures.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  job: null,
+  tagName: '',
+});

ui/app/components/job-page/parts/running-deployment.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  job: null,
+  tagName: '',
+});

ui/app/components/job-page/parts/summary.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  job: null,
+
+  classNames: ['boxed-section'],
+});

ui/app/components/job-page/parts/task-groups.js

@@ -0,0 +1,23 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import Sortable from 'nomad-ui/mixins/sortable';
+
+export default Component.extend(Sortable, {
+  job: null,
+
+  classNames: ['boxed-section'],
+
+  // Provide a value that is bound to a query param
+  sortProperty: null,
+  sortDescending: null,
+
+  gotoTaskGroup() {},
+
+  taskGroups: computed('job.taskGroups.[]', function() {
+    return this.get('job.taskGroups') || [];
+  }),
+
+  listToSort: alias('taskGroups'),
+  sortedTaskGroups: alias('listSorted'),
+});

ui/app/templates/components/job-page/parts/body.hbs

@@ -0,0 +1,6 @@
+{{#gutter-menu class="page-body" onNamespaceChange=onNamespaceChange}}
+  {{partial "jobs/job/subnav"}}
+  <section class="section">
+    {{yield}}
+  </section>
+{{/gutter-menu}}

ui/app/templates/components/job-page/parts/evaluations.hbs

@@ -0,0 +1,38 @@
+<div class="boxed-section-head">
+  Evaluations
+</div>
+<div class="boxed-section-body {{if sortedEvaluations.length "is-full-bleed"}} evaluations">
+  {{#if sortedEvaluations.length}}
+    {{#list-table source=sortedEvaluations as |t|}}
+      {{#t.head}}
+        <th>ID</th>
+        <th>Priority</th>
+        <th>Triggered By</th>
+        <th>Status</th>
+        <th>Placement Failures</th>
+      {{/t.head}}
+      {{#t.body as |row|}}
+        <tr data-test-evaluation="{{row.model.shortId}}">
+          <td data-test-id>{{row.model.shortId}}</td>
+          <td data-test-priority>{{row.model.priority}}</td>
+          <td data-test-triggered-by>{{row.model.triggeredBy}}</td>
+          <td data-test-status>{{row.model.status}}</td>
+          <td data-test-blocked>
+            {{#if (eq row.model.status "blocked")}}
+              N/A - In Progress
+            {{else if row.model.hasPlacementFailures}}
+              True
+            {{else}}
+              False
+            {{/if}}
+          </td>
+        </tr>
+      {{/t.body}}
+    {{/list-table}}
+  {{else}}
+    <div data-test-empty-evaluations-list class="empty-message">
+      <h3 data-test-empty-evaluations-list-headline class="empty-message-headline">No Evaluations</h3>
+      <p class="empty-message-body">This is most likely due to garbage collection.</p>
+    </div>
+  {{/if}}
+</div>

ui/app/templates/components/job-page/parts/placement-failures.hbs

@@ -0,0 +1,12 @@
+{{#if job.hasPlacementFailures}}
+  <div class="boxed-section is-danger" data-test-placement-failures>
+    <div class="boxed-section-head">
+      Placement Failures
+    </div>
+    <div class="boxed-section-body">
+      {{#each job.taskGroups as |taskGroup|}}
+        {{placement-failure taskGroup=taskGroup}}
+      {{/each}}
+    </div>
+  </div>
+{{/if}}

ui/app/templates/components/job-page/parts/running-deployment.hbs

@@ -0,0 +1,33 @@
+{{#if job.runningDeployment}}
+  <div class="boxed-section is-info" data-test-active-deployment>
+    <div class="boxed-section-head">
+      <div class="boxed-section-row">
+        Active Deployment
+        <span class="badge is-white is-subtle bumper-left" data-test-active-deployment-stat="id">{{job.runningDeployment.shortId}}</span>
+        {{#if job.runningDeployment.version.submitTime}}
+          <span class="pull-right submit-time" data-test-active-deployment-stat="submit-time">{{moment-from-now job.runningDeployment.version.submitTime}}</span>
+        {{/if}}
+      </div>
+      <div class="boxed-section-row">
+        <span class="tag is-info is-outlined">Running</span>
+        {{#if job.runningDeployment.requiresPromotion}}
+          <span class="tag bumper-left is-warning no-text-transform">Deployment is running but requires promotion</span>
+        {{/if}}
+      </div>
+    </div>
+    <div class="boxed-section-body with-foot">
+      {{#job-deployment-details deployment=job.runningDeployment as |d|}}
+        {{d.metrics}}
+        {{#if isShowingDeploymentDetails}}
+          {{d.taskGroups}}
+          {{d.allocations}}
+        {{/if}}
+      {{/job-deployment-details}}
+    </div>
+    <div class="boxed-section-foot">
+      <a class="pull-right" {{action (toggle "isShowingDeploymentDetails" this)}} data-test-deployment-toggle-details>
+        {{if isShowingDeploymentDetails "Hide" "Show"}} deployment task groups and allocations
+      </a>
+    </div>
+  </div>
+{{/if}}

ui/app/templates/components/job-page/parts/summary.hbs

@@ -0,0 +1,27 @@
+<div class="boxed-section-head">
+  <div>
+    {{#if job.hasChildren}}
+      Children Status <span class="badge is-white">{{job.totalChildren}}</span>
+    {{else}}
+      Allocation Status <span class="badge is-white">{{job.totalAllocs}}</span>
+    {{/if}}
+  </div>
+</div>
+<div class="boxed-section-body">
+  {{#component (if job.hasChildren "children-status-bar" "allocation-status-bar")
+    allocationContainer=job
+    job=job
+    class="split-view" as |chart|}}
+    <ol data-test-allocations-legend class="legend">
+      {{#each chart.data as |datum index|}}
+        <li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
+          <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
+          <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
+          <span class="label">
+            {{datum.label}}
+          </span>
+        </li>
+      {{/each}}
+    </ol>
+  {{/component}}
+</div>

ui/app/templates/components/job-page/parts/task-groups.hbs

@@ -0,0 +1,25 @@
+<div class="boxed-section">
+  <div class="boxed-section-head">
+    Task Groups
+  </div>
+  <div class="boxed-section-body is-full-bleed">
+    {{#list-table
+      source=sortedTaskGroups
+      sortProperty=sortProperty
+      sortDescending=sortDescending as |t|}}
+      {{#t.head}}
+        {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
+        {{#t.sort-by prop="count"}}Count{{/t.sort-by}}
+        {{#t.sort-by prop="queuedOrStartingAllocs" class="is-3"}}Allocation Status{{/t.sort-by}}
+        {{#t.sort-by prop="reservedCPU"}}Reserved CPU{{/t.sort-by}}
+        {{#t.sort-by prop="reservedMemory"}}Reserved Memory{{/t.sort-by}}
+        {{#t.sort-by prop="reservedEphemeralDisk"}}Reserved Disk{{/t.sort-by}}
+      {{/t.head}}
+      {{#t.body as |row|}}
+        {{task-group-row data-test-task-group
+          taskGroup=row.model
+          onClick=(action gotoTaskGroup row.model)}}
+      {{/t.body}}
+    {{/list-table}}
+  </div>
+</div>