UI: Show deployment deadline for each task group in the running deployment

ui/app/models/task-group-deployment-summary.js

@@ -22,4 +22,6 @@ export default Fragment.extend({
   placedAllocs: attr('number'),
   healthyAllocs: attr('number'),
   unhealthyAllocs: attr('number'),
+
+  requireProgressBy: attr('date'),
 });

ui/app/templates/components/job-deployment/task-groups.hbs

@@ -15,6 +15,9 @@
         <th>Allocs</th>
         <th>Healthy Allocs</th>
         <th>Unhealthy Allocs</th>
+        {{#if inProgress}}
+          <th>Progress Deadline</th>
+        {{/if}}
       {{/t.head}}
       {{#t.body as |row|}}
         <tr data-test-deployment-task-group>
@@ -31,6 +34,11 @@
           <td data-test-deployment-task-group-allocs>{{row.model.placedAllocs}} / {{row.model.desiredTotal}}</td>
           <td data-test-deployment-task-group-healthy>{{row.model.healthyAllocs}}</td>
           <td data-test-deployment-task-group-unhealthy>{{row.model.unhealthyAllocs}}</td>
+          {{#if inProgress}}
+            <td data-test-deployment-task-group-progress-deadline>
+              <span class="nowrap">{{moment-format row.model.requireProgressBy "MM/DD/YY HH:mm:ss"}}</span>
+            </td>
+          {{/if}}
         </tr>
       {{/t.body}}
     {{/list-table}}

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

@@ -19,7 +19,7 @@
       {{#job-deployment-details deployment=job.runningDeployment as |d|}}
         {{d.metrics}}
         {{#if isShowingDeploymentDetails}}
-          {{d.taskGroups}}
+          {{d.taskGroups inProgress=true}}
           {{d.allocations}}
         {{/if}}
       {{/job-deployment-details}}

ui/mirage/factories/deployment-task-group-summary.js

@@ -1,11 +1,15 @@
 import { Factory, faker } from 'ember-cli-mirage';
 
+const REF_TIME = new Date();
+
 export default Factory.extend({
   name: '',
 
   autoRevert: () => Math.random() > 0.5,
   promoted: () => Math.random() > 0.5,
 
+  requireProgressBy: () => faker.date.past(0.5 / 365, REF_TIME),
+
   desiredTotal: faker.random.number({ min: 1, max: 10 }),
 
   desiredCanaries() {

ui/tests/integration/job-page/parts/running-deployment-test.js

@@ -139,3 +139,34 @@ test('the active deployment section can be expanded to show task groups and allo
     });
   });
 });
+
+test('each task group in the expanded task group section shows task group details', function(assert) {
+  this.server.create('node');
+  this.server.create('job', { type: 'service', activeDeployment: true });
+
+  this.store.findAll('job');
+
+  return wait().then(() => {
+    const job = this.store.peekAll('job').get('firstObject');
+
+    this.set('job', job);
+    this.render(hbs`
+      {{job-page/parts/running-deployment job=job}}
+    `);
+
+    return wait()
+      .then(() => {
+        click('[data-test-deployment-toggle-details]');
+        return wait();
+      })
+      .then(() => {
+        const task = job.get('runningDeployment.taskGroupSummaries.firstObject');
+        const findForTaskGroup = selector => find(`[data-test-deployment-task-group-${selector}]`);
+        assert.equal(findForTaskGroup('name').textContent.trim(), task.get('name'));
+        assert.equal(
+          findForTaskGroup('progress-deadline').textContent.trim(),
+          moment(task.get('requireProgressBy')).format('MM/DD/YY HH:mm:ss')
+        );
+      });
+  });
+});