UI: Add poststart and poststop lifecycle phases

ui/app/components/lifecycle-chart-row.js

@@ -23,4 +23,17 @@ export default class LifecycleChartRow extends Component {
 
     return undefined;
   }
+
+  @computed('task.lifecycleName')
+  get lifecycleLabel() {
+    const name = this.task.lifecycleName;
+
+    if (name.includes('sidecar')) {
+      return 'sidecar';
+    } else if (name.includes('ephemeral')) {
+      return name.substr(0, name.indexOf('-'));
+    } else {
+      return name;
+    }
+  }
 }

ui/app/components/lifecycle-chart.js

@@ -14,8 +14,11 @@ export default class LifecycleChart extends Component {
   get lifecyclePhases() {
     const tasksOrStates = this.taskStates || this.tasks;
     const lifecycles = {
-      prestarts: [],
-      sidecars: [],
+      'prestart-ephemerals': [],
+      'prestart-sidecars': [],
+      'poststart-ephemerals': [],
+      'poststart-sidecars': [],
+      poststops: [],
       mains: [],
     };
 
@@ -25,18 +28,29 @@ export default class LifecycleChart extends Component {
     });
 
     const phases = [];
+    const stateActiveIterator = state => state.state === 'running';
 
-    if (lifecycles.prestarts.length || lifecycles.sidecars.length) {
+    if (lifecycles.mains.length < tasksOrStates.length) {
       phases.push({
         name: 'Prestart',
-        isActive: lifecycles.prestarts.some(state => state.state === 'running'),
+        isActive: lifecycles['prestart-ephemerals'].some(stateActiveIterator),
       });
-    }
 
-    if (lifecycles.sidecars.length || lifecycles.mains.length) {
       phases.push({
         name: 'Main',
-        isActive: lifecycles.mains.some(state => state.state === 'running'),
+        isActive:
+          lifecycles.mains.some(stateActiveIterator) ||
+          lifecycles['poststart-ephemerals'].some(stateActiveIterator),
+      });
+
+      // Poststart is rendered as a subphase of main and therefore has no independent active state
+      phases.push({
+        name: 'Poststart',
+      });
+
+      phases.push({
+        name: 'Poststop',
+        isActive: lifecycles.poststops.some(stateActiveIterator),
       });
     }
 
@@ -55,12 +69,14 @@ export default class LifecycleChart extends Component {
 }
 
 const lifecycleNameSortPrefix = {
-  prestart: 0,
-  sidecar: 1,
+  'prestart-ephemeral': 0,
+  'prestart-sidecar': 1,
   main: 2,
+  'poststart-sidecar': 3,
+  'poststart-ephemeral': 4,
+  poststop: 5,
 };
 
 function getTaskSortPrefix(task) {
-  // Prestarts first, then sidecars, then mains
   return `${lifecycleNameSortPrefix[task.lifecycleName]}-${task.name}`;
 }

ui/app/controllers/allocations/allocation/task/index.js

@@ -1,22 +1,10 @@
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
 import { computed as overridable } from 'ember-overridable-computed';
 import { task } from 'ember-concurrency';
 import classic from 'ember-classic-decorator';
 
 @classic
 export default class IndexController extends Controller {
-  @computed('[email protected]')
-  get otherTaskStates() {
-    const taskName = this.model.task.name;
-    return this.model.allocation.states.rejectBy('name', taskName);
-  }
-
-  @computed('[email protected]')
-  get prestartTaskStates() {
-    return this.otherTaskStates.filterBy('task.lifecycle');
-  }
-
   @overridable(() => {
     // { title, description }
     return null;

ui/app/models/task.js

@@ -14,8 +14,18 @@ export default class Task extends Fragment {
 
   @computed('lifecycle', 'lifecycle.sidecar')
   get lifecycleName() {
-    if (this.lifecycle && this.lifecycle.sidecar) return 'sidecar';
-    if (this.lifecycle && this.lifecycle.hook === 'prestart') return 'prestart';
+    if (this.lifecycle) {
+      const { hook, sidecar } = this.lifecycle;
+
+      if (hook === 'prestart') {
+        return sidecar ? 'prestart-sidecar' : 'prestart-ephemeral';
+      } else if (hook === 'poststart') {
+        return sidecar ? 'poststart-sidecar' : 'poststart-ephemeral';
+      } else if (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,16 @@
 
     &.main {
       left: 25%;
+      right: 25%;
+    }
+
+    &.poststart {
+      left: 35%;
+      right: 25%;
+    }
+
+    &.poststop {
+      left: 75%;
       right: 0;
     }
   }
@@ -110,12 +127,34 @@
 
     &.main {
       margin-left: 25%;
+      margin-right: 25%;
     }
 
-    &.prestart {
+    &.prestart-ephemeral {
       margin-right: 75%;
     }
 
+    &.prestart-sidecar {
+      margin-right: 25%;
+    }
+
+    &.poststart-ephemeral,
+    &.poststart-sidecar {
+      margin-left: 35%;
+    }
+
+    &.poststart-sidecar {
+      margin-right: 25%;
+    }
+
+    &.poststart-ephemeral {
+      margin-right: 35%;
+    }
+
+    &.poststop {
+      margin-left: 75%;
+    }
+
     &:last-child .task {
       margin-bottom: 0.9em;
     }

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

@@ -93,38 +93,6 @@
     </div>
   </div>
 
-  {{#if (and (not this.model.task.lifecycle) this.prestartTaskStates)}}
-    <div class="boxed-section" data-test-prestart-tasks>
-      <div class="boxed-section-head">
-        Prestart Tasks
-      </div>
-      <div class="boxed-section-body is-full-bleed">
-        <ListTable @source={{this.prestartTaskStates}} as |t|>
-          <t.head>
-            <th class="is-narrow"></th>
-            <th>Task</th>
-            <th>State</th>
-            <th>Lifecycle</th>
-          </t.head>
-          <t.body as |row|>
-            <tr data-test-prestart-task>
-              <td class="is-narrow">
-                {{#if (and row.model.isRunning (eq row.model.task.lifecycleName "prestart"))}}
-                  <span class="tooltip text-center" role="tooltip" aria-label="Lifecycle constraints not met">
-                    {{x-icon "warning" class="is-warning"}}
-                  </span>
-                {{/if}}
-              </td>
-              <td data-test-name>{{row.model.task.name}}</td>
-              <td data-test-state>{{row.model.state}}</td>
-              <td data-test-lifecycle>{{row.model.task.lifecycleName}}</td>
-            </tr>
-          </t.body>
-        </ListTable>
-      </div>
-    </div>
-  {{/if}}
-
   {{#if this.model.task.volumeMounts.length}}
     <div data-test-volumes class="boxed-section">
       <div class="boxed-section-head">

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

@@ -11,6 +11,6 @@
         {{this.task.name}}
       {{/if}}
     </div>
-    <div class="lifecycle" data-test-lifecycle>{{capitalize this.task.lifecycleName}} Task</div>
+    <div class="lifecycle" data-test-lifecycle>{{capitalize this.lifecycleLabel}} Task</div>
   </div>
 </div>

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

@@ -7,11 +7,14 @@
 
         <div class="lifecycle-phases">
           {{#each this.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"}} {{lowercase phase.name}}" 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,20 @@ export default Factory.extend({
   Resources: generateResources,
 
   Lifecycle: i => {
-    const cycle = i % 3;
+    const cycle = i % 6;
 
     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 if (cycle === 3) {
+      return { Hook: 'poststart', Sidecar: false };
+    } else if (cycle === 4) {
+      return { Hook: 'poststart', Sidecar: true };
+    } else if (cycle === 5) {
+      return { Hook: 'poststop' };
     }
   },
 });