Merge pull request #8807 from hashicorp/f-ui/lifecycle-poststop

UI: Task lifecycle poststop phase.

ui/app/components/lifecycle-chart.js

@@ -47,6 +47,11 @@ export default class LifecycleChart extends Component {
       phases.push({
         name: 'Poststart',
       });
+
+      phases.push({
+        name: 'Poststop',
+        isActive: lifecycles.poststops.some(stateActiveIterator),
+      });
     }
 
     return phases;

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

@@ -33,6 +33,7 @@
     position: absolute;
     bottom: 0;
     top: 0;
+
     border-top: 2px solid transparent;
 
     .name {
@@ -58,12 +59,12 @@
 
     &.main {
       left: 25%;
-      right: 0;
+      right: 25%;
     }
 
     &.poststart {
-      left: 40%;
-      right: 0;
+      left: 35%;
+      right: 25%;
     }
 
     &.poststop {
@@ -126,20 +127,28 @@
 
     &.main {
       margin-left: 25%;
-      margin-right: 0;
+      margin-right: 25%;
     }
 
     &.prestart-ephemeral {
       margin-right: 75%;
     }
 
+    &.prestart-sidecar {
+      margin-right: 25%;
+    }
+
     &.poststart-ephemeral,
     &.poststart-sidecar {
-      margin-left: 40%;
+      margin-left: 35%;
+    }
+
+    &.poststart-sidecar {
+      margin-right: 25%;
     }
 
     &.poststart-ephemeral {
-      margin-right: 10%;
+      margin-right: 35%;
     }
 
     &.poststop {

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

@@ -14,6 +14,9 @@
           <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>
 
         <div class="lifecycle-chart-rows">

ui/mirage/factories/task.js

@@ -31,7 +31,7 @@ export default Factory.extend({
   },
 
   Lifecycle: i => {
-    const cycle = i % 5;
+    const cycle = i % 6;
 
     if (cycle === 0) {
       return null;
@@ -43,6 +43,8 @@ export default Factory.extend({
       return { Hook: 'poststart', Sidecar: false };
     } else if (cycle === 4) {
       return { Hook: 'poststart', Sidecar: true };
+    } else if (cycle === 5) {
+      return { Hook: 'poststop' };
     }
   },
 

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

@@ -96,7 +96,7 @@ module('Acceptance | allocation detail', function(hooks) {
 
     assert.ok(Allocation.lifecycleChart.isPresent);
     assert.equal(Allocation.lifecycleChart.title, 'Task Lifecycle Status');
-    assert.equal(Allocation.lifecycleChart.phases.length, 3);
+    assert.equal(Allocation.lifecycleChart.phases.length, 4);
     assert.equal(Allocation.lifecycleChart.tasks.length, 6);
 
     await Allocation.lifecycleChart.tasks[0].visit();

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

@@ -42,6 +42,9 @@ module('Acceptance | task detail', function(hooks) {
     if (lifecycle && (lifecycle.Hook === 'prestart' || lifecycle.Hook === 'poststart')) {
       lifecycleName = `${lifecycle.Hook}-${lifecycle.Sidecar ? 'sidecar' : 'ephemeral'}`;
     }
+    if (lifecycle && lifecycle.Hook === 'poststop') {
+      lifecycleName = 'poststop';
+    }
 
     assert.equal(Task.lifecycle, lifecycleName);
 

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

@@ -34,6 +34,10 @@ const tasks = [
     lifecycleName: 'poststart-sidecar',
     name: 'poststart sidecar: 4',
   },
+  {
+    lifecycleName: 'poststop',
+    name: 'poststop: 6',
+  },
 ];
 
 module('Integration | Component | lifecycle-chart', function(hooks) {
@@ -48,6 +52,7 @@ 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, 'Poststart');
+    assert.equal(Chart.phases[3].name, 'Poststop');
 
     Chart.phases.forEach(phase => assert.notOk(phase.isActive));
 
@@ -58,6 +63,7 @@ module('Integration | Component | lifecycle-chart', function(hooks) {
       'main two: 3',
       'poststart sidecar: 4',
       'poststart ephemeral: 5',
+      'poststop: 6',
     ]);
     assert.deepEqual(Chart.tasks.mapBy('lifecycle'), [
       'Prestart Task',
@@ -66,13 +72,15 @@ module('Integration | Component | lifecycle-chart', function(hooks) {
       'Main Task',
       'Sidecar Task',
       'Poststart Task',
+      'Poststop Task',
     ]);
 
     assert.ok(Chart.tasks[0].isPrestartEphemeral);
     assert.ok(Chart.tasks[1].isPrestartSidecar);
     assert.ok(Chart.tasks[2].isMain);
     assert.ok(Chart.tasks[4].isPoststartSidecar);
     assert.ok(Chart.tasks[5].isPoststartEphemeral);
+    assert.ok(Chart.tasks[6].isPoststop);
 
     Chart.tasks.forEach(task => {
       assert.notOk(task.isActive);
@@ -94,10 +102,10 @@ module('Integration | Component | lifecycle-chart', function(hooks) {
   });
 
   test('it renders all phases when there are any non-main tasks', async function(assert) {
-    this.set('tasks', [tasks[0], tasks[2]]);
+    this.set('tasks', [tasks[0], tasks[6]]);
 
     await render(hbs`<LifecycleChart @tasks={{tasks}} />`);
-    assert.equal(Chart.phases.length, 3);
+    assert.equal(Chart.phases.length, 4);
   });
 
   test('it reflects phase and task states when states are passed in', async function(assert) {
@@ -141,8 +149,8 @@ module('Integration | Component | lifecycle-chart', function(hooks) {
   [
     {
       testName: 'expected active phases',
-      runningTaskNames: ['prestart ephemeral', 'main one'],
-      activePhaseNames: ['Prestart', 'Main'],
+      runningTaskNames: ['prestart ephemeral', 'main one', 'poststop'],
+      activePhaseNames: ['Prestart', 'Main', 'Poststop'],
     },
     {
       testName: 'sidecar task states don’t affect phase active states',

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

@@ -23,6 +23,7 @@ export default {
     isPrestartSidecar: hasClass('prestart-sidecar'),
     isPoststartEphemeral: hasClass('poststart-ephemeral'),
     isPoststartSidecar: hasClass('poststart-sidecar'),
+    isPoststop: hasClass('poststop'),
 
     visit: clickable('a'),
   }),