Reschedule events timeline for the alloc detail page

ui/app/models/allocation.js

@@ -86,8 +86,8 @@ export default Model.extend({
     'followUpEvaluation',
     function() {
       return (
-        !this.get('nextAllocation') &&
-        !this.get('followUpEvaluation') &&
+        !this.get('nextAllocation.content') &&
+        !this.get('followUpEvaluation.content') &&
         this.get('clientStatus') === 'failed'
       );
     }

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

@@ -91,5 +91,45 @@
         {{/list-table}}
       </div>
     </div>
+
+    {{#if model.hasRescheduleEvents}}
+      <div class="boxed-section">
+        <div class="boxed-section-head is-hollow">
+          Reschedule Events
+        </div>
+        <div class="boxed-section-body">
+          <ol class="timeline">
+            {{#if model.nextAllocation}}
+              {{reschedule-event-row
+                label="Next Allocation"
+                allocation=model.nextAllocation
+                time=model.nextAllocation.modifyTime}}
+            {{/if}}
+            {{#if model.hasStoppedRescheduling}}
+              <li class="timeline-note">
+                {{x-icon "warning" class="is-warning is-text"}} Nomad has stopped attempting to reschedule this allocation.
+              </li>
+            {{/if}}
+            {{#if (and model.followUpEvaluation.waitUntil (not model.nextAllocation))}}
+              <li class="timeline-note">
+                {{x-icon "clock" class="is-info is-text"}} Nomad will attempt to reschedule
+                {{moment-from-now model.followUpEvaluation.waitUntil interval=1000}}
+              </li>
+            {{/if}}
+            {{reschedule-event-row
+              label="This Allocation"
+              allocation=model
+              linkToAllocation=false
+              time=model.modifyTime}}
+
+            {{#each (reverse model.rescheduleEvents) as |event|}}
+              {{reschedule-event-row
+                allocationId=event.previousAllocationId
+                time=event.time}}
+            {{/each}}
+          </ol>
+        </div>
+      </div>
+    {{/if}}
   </section>
 {{/gutter-menu}}

ui/app/templates/components/reschedule-event-row.hbs

@@ -1,33 +1,43 @@
 <li class="timeline-note">
-  {{#if label}}
-    <strong>{{label}}</strong>
-  {{/if}}
   {{moment-format time "MMMM D, YYYY HH:mm:ss"}}
 </li>
 <li class="timeline-object">
   <div class="boxed-section">
-    <div class="boxed-section-head is-light inline-definitions">
-      <span class="bumper-right tag {{allocation.statusClass}}">
-        {{allocation.clientStatus}}
-      </span>
-      <span class="pair">
-        <span class="term">Allocation</span>
-        {{#if linkToAllocation}}
-          {{#link-to "allocations.allocation" allocation.id}}
-            <code>{{allocation.shortId}}</code>
-          {{/link-to}}
-        {{else}}
-          <code>{{allocation.shortId}}</code>
-        {{/if}}
-      </span>
-      <span class="pair">
-        <span class="term">Client</span>
-        <span>
-          {{#link-to "clients.client" allocation.node.id}}
-            <code>{{allocation.node.id}}</code>
-          {{/link-to}}
-        </span>
-      </span>
+    {{#unless linkToAllocation}}
+      <div class="boxed-section-head">
+        This Allocation
+      </div>
+    {{/unless}}
+    <div class="boxed-section-body inline-definitions">
+      <div class="columns">
+        <div class="column is-centered is-minimum">
+          <span class="tag {{allocation.statusClass}}">
+            {{allocation.clientStatus}}
+          </span>
+        </div>
+        <div class="column">
+          <div class="boxed-section-row">
+            <span class="pair">
+              <span class="term">Allocation</span>
+              {{#if linkToAllocation}}
+                {{#link-to "allocations.allocation" allocation.id}}
+                  <code>{{allocation.shortId}}</code>
+                {{/link-to}}
+              {{else}}
+                <code>{{allocation.shortId}}</code>
+              {{/if}}
+            </span>
+            <span class="pair">
+              <span class="term">Client</span>
+              <span>
+                {{#link-to "clients.client" allocation.node.id}}
+                  <code>{{allocation.node.id}}</code>
+                {{/link-to}}
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </li>

ui/public/images/icons/clock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+  <path d="M4 0c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 1c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm-.5 1v2.22l.16.13.5.5.34.38.72-.72-.38-.34-.34-.34v-1.81h-1z" />
+</svg>