Add rendering of poststop tasks

This is all-Mirage for now but seems to work! 🥳

ui/app/components/lifecycle-chart.js

@@ -14,6 +14,7 @@ export default Component.extend({
       prestarts: [],
       sidecars: [],
       mains: [],
+      poststops: [],
     };
 
     tasksOrStates.forEach(taskOrState => {
@@ -26,17 +27,27 @@ export default Component.extend({
     if (lifecycles.prestarts.length || lifecycles.sidecars.length) {
       phases.push({
         name: 'Prestart',
+        class: 'prestart',
         isActive: lifecycles.prestarts.some(state => state.state === 'running'),
       });
     }
 
     if (lifecycles.sidecars.length || lifecycles.mains.length) {
       phases.push({
         name: 'Main',
+        class: 'main',
         isActive: lifecycles.mains.some(state => state.state === 'running'),
       });
     }
 
+    if (lifecycles.poststops.length) {
+      phases.push({
+        name: 'Poststop',
+        class: 'poststop',
+        isActive: lifecycles.poststops.some(state => state.state === 'running'),
+      });
+    }
+
     return phases;
   }),
 
@@ -53,9 +64,10 @@ const lifecycleNameSortPrefix = {
   prestart: 0,
   sidecar: 1,
   main: 2,
+  poststop: 3,
 };
 
 function getTaskSortPrefix(task) {
-  // Prestarts first, then sidecars, then mains
+  // Prestarts first, then sidecars, then mains, then poststops
   return `${lifecycleNameSortPrefix[task.lifecycleName]}-${task.name}`;
 }

ui/app/models/task.js

@@ -15,6 +15,7 @@ export default Fragment.extend({
   lifecycleName: computed('lifecycle', 'lifecycle.sidecar', function() {
     if (this.lifecycle && this.lifecycle.sidecar) return 'sidecar';
     if (this.lifecycle && this.lifecycle.hook === 'prestart') return 'prestart';
+    if (this.lifecycle && this.lifecycle.hook === 'poststop') return 'poststop';
     return 'main';
   }),
 

ui/app/styles/components/lifecycle-chart.scss

@@ -11,14 +11,21 @@
 
     .divider {
       position: absolute;
-      left: 25%;
       height: 100%;
 
       stroke: $ui-gray-200;
       stroke-width: 3px;
       stroke-dasharray: 1, 7;
       stroke-dashoffset: 1;
       stroke-linecap: square;
+
+      &.prestart {
+        left: 25%;
+      }
+
+      &.poststop {
+        left: 75%;
+      }
     }
   }
 
@@ -52,6 +59,11 @@
 
     &.main {
       left: 25%;
+      right: 75%;
+    }
+
+    &.poststop {
+      left: 75%;
       right: 0;
     }
   }
@@ -110,12 +122,17 @@
 
     &.main {
       margin-left: 25%;
+      margin-right: 25%;
     }
 
     &.prestart {
       margin-right: 75%;
     }
 
+    &.poststop {
+      margin-left: 75%;
+    }
+
     &:last-child .task {
       margin-bottom: 0.9em;
     }

ui/app/templates/components/lifecycle-chart.hbs

@@ -7,11 +7,14 @@
 
         <div class="lifecycle-phases">
           {{#each lifecyclePhases as |phase|}}
-            <div class="lifecycle-phase {{if phase.isActive "is-active"}} {{if (eq phase.name "Main") "main" "prestart"}}" data-test-lifecycle-phase>
+            <div class="lifecycle-phase {{if phase.isActive "is-active"}} {{phase.class}}" data-test-lifecycle-phase>
               <div class="name" data-test-name>{{phase.name}}</div>
             </div>
           {{/each}}
-          <svg class="divider">
+          <svg class="divider prestart">
+            <line x1="0" y1="0" x2="0" y2="100%" />
+          </svg>
+          <svg class="divider poststop">
             <line x1="0" y1="0" x2="0" y2="100%" />
           </svg>
         </div>

ui/mirage/factories/task.js

@@ -19,14 +19,16 @@ export default Factory.extend({
   Resources: generateResources,
 
   Lifecycle: i => {
-    const cycle = i % 3;
+    const cycle = i % 4;
 
     if (cycle === 0) {
       return null;
     } else if (cycle === 1) {
       return { Hook: 'prestart', Sidecar: false };
-    } else {
+    } else if (cycle === 2) {
       return { Hook: 'prestart', Sidecar: true };
+    } else {
+      return { Hook: 'poststop' };
     }
   },
 });

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

@@ -76,7 +76,7 @@ module('Acceptance | allocation detail', function(hooks) {
   test('/allocation/:id should present task lifecycles', async function(assert) {
     const job = server.create('job', {
       groupsCount: 1,
-      groupTaskCount: 3,
+      groupTaskCount: 4,
       withGroupServices: true,
       createAllocations: false,
     });
@@ -94,9 +94,12 @@ module('Acceptance | allocation detail', function(hooks) {
           if (lifecycle.Sidecar) {
             phases.sidecars.push(state);
             state.lifecycleString = 'Sidecar';
-          } else {
+          } else if (lifecycle.Hook === 'prestart') {
             phases.prestarts.push(state);
             state.lifecycleString = 'Prestart';
+          } else {
+            phases.poststops.push(state);
+            state.lifecycleString = 'Poststop';
           }
         } else {
           phases.mains.push(state);
@@ -109,23 +112,26 @@ module('Acceptance | allocation detail', function(hooks) {
         prestarts: [],
         sidecars: [],
         mains: [],
+        poststops: [],
       }
     );
 
     taskStatePhases.prestarts = taskStatePhases.prestarts.sortBy('name');
     taskStatePhases.sidecars = taskStatePhases.sidecars.sortBy('name');
     taskStatePhases.mains = taskStatePhases.mains.sortBy('name');
+    taskStatePhases.poststops = taskStatePhases.poststops.sortBy('name');
 
     const sortedServerStates = taskStatePhases.prestarts.concat(
       taskStatePhases.sidecars,
-      taskStatePhases.mains
+      taskStatePhases.mains,
+      taskStatePhases.poststops
     );
 
     await Allocation.visit({ id: allocation.id });
 
     assert.ok(Allocation.lifecycleChart.isPresent);
     assert.equal(Allocation.lifecycleChart.title, 'Task Lifecycle Status');
-    assert.equal(Allocation.lifecycleChart.phases.length, 2);
+    assert.equal(Allocation.lifecycleChart.phases.length, 3);
     assert.equal(Allocation.lifecycleChart.tasks.length, sortedServerStates.length);
 
     const stateActiveIterator = state => state.state === 'running';
@@ -145,6 +151,14 @@ module('Acceptance | allocation detail', function(hooks) {
       assert.notOk(Allocation.lifecycleChart.phases[1].isActive);
     }
 
+    const anyPoststopsActive = taskStatePhases.poststops.some(stateActiveIterator);
+
+    if (anyPoststopsActive) {
+      assert.ok(Allocation.lifecycleChart.phases[2].isActive);
+    } else {
+      assert.notOk(Allocation.lifecycleChart.phases[2].isActive);
+    }
+
     Allocation.lifecycleChart.tasks.forEach((Task, index) => {
       const serverState = sortedServerStates[index];
 
@@ -154,6 +168,8 @@ module('Acceptance | allocation detail', function(hooks) {
         assert.ok(Task.isSidecar);
       } else if (serverState.lifecycleString === 'Prestart') {
         assert.ok(Task.isPrestart);
+      } else if (serverState.lifecycleString === 'Poststop') {
+        assert.ok(Task.isPoststop);
       } else {
         assert.ok(Task.isMain);
       }

ui/tests/integration/components/lifecycle-chart-test.js

@@ -24,6 +24,10 @@ const tasks = [
     lifecycleName: 'sidecar',
     name: 'sidecar',
   },
+  {
+    lifecycleName: 'poststop',
+    name: 'poststop',
+  },
 ];
 
 module('Integration | Component | lifecycle-chart', function(hooks) {
@@ -37,20 +41,29 @@ module('Integration | Component | lifecycle-chart', function(hooks) {
 
     assert.equal(Chart.phases[0].name, 'Prestart');
     assert.equal(Chart.phases[1].name, 'Main');
+    assert.equal(Chart.phases[2].name, 'Poststop');
 
     Chart.phases.forEach(phase => assert.notOk(phase.isActive));
 
-    assert.deepEqual(Chart.tasks.mapBy('name'), ['prestart', 'sidecar', 'main one', 'main two']);
+    assert.deepEqual(Chart.tasks.mapBy('name'), [
+      'prestart',
+      'sidecar',
+      'main one',
+      'main two',
+      'poststop',
+    ]);
     assert.deepEqual(Chart.tasks.mapBy('lifecycle'), [
       'Prestart Task',
       'Sidecar Task',
       'Main Task',
       'Main Task',
+      'Poststop Task',
     ]);
 
     assert.ok(Chart.tasks[0].isPrestart);
     assert.ok(Chart.tasks[1].isSidecar);
     assert.ok(Chart.tasks[2].isMain);
+    assert.ok(Chart.tasks[4].isPoststop);
 
     Chart.tasks.forEach(task => {
       assert.notOk(task.isActive);

ui/tests/pages/components/lifecycle-chart.js

@@ -21,6 +21,7 @@ export default {
     isMain: hasClass('main'),
     isPrestart: hasClass('prestart'),
     isSidecar: hasClass('sidecar'),
+    isPoststop: hasClass('poststop'),
 
     visit: clickable('a'),
   }),