Conditionally show the scaling timeline or accordion

ui/app/controllers/jobs/job/task-group.js

@@ -60,6 +60,12 @@ export default class TaskGroupController extends Controller.extend(
   })
   sortedScaleEvents;
 
+  @computed('sortedScaleEvents.@each.{hasCount}', function() {
+    const countEventsCount = this.sortedScaleEvents.filterBy('hasCount').length;
+    return countEventsCount > 1 && countEventsCount >= this.sortedScaleEvents.length / 2;
+  })
+  shouldShowScaleEventTimeline;
+
   @computed('model.job.runningDeployment')
   get tooltipText() {
     if (this.can.cannot('scale job')) return "You aren't allowed to scale task groups";

ui/app/templates/jobs/job/task-group.hbs

@@ -138,14 +138,25 @@
   <LifecycleChart @tasks={{this.model.tasks}} />
 
   {{#if this.model.scaleState.isVisible}}
-    <div data-test-scaling-events class="boxed-section">
-      <div class="boxed-section-head">
-        Recent Scaling Events
+    {{#if this.shouldShowScaleEventTimeline}}
+      <div data-test-scaling-timeline class="boxed-section">
+        <div class="boxed-section-head is-hollow">
+          Scaling Timeline
+        </div>
+        <div class="boxed-section-body">
+          <ScaleEventsChart @events={{this.sortedScaleEvents}} />
+        </div>
       </div>
-      <div class="boxed-section-body">
-        <ScaleEventsAccordion @events={{this.sortedScaleEvents}} />
+    {{else}}
+      <div data-test-scaling-events class="boxed-section">
+        <div class="boxed-section-head">
+          Recent Scaling Events
+        </div>
+        <div class="boxed-section-body">
+          <ScaleEventsAccordion @events={{this.sortedScaleEvents}} />
+        </div>
       </div>
-    </div>
+    {{/if}}
   {{/if}}
 
   {{#if this.model.volumes.length}}

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

@@ -410,7 +410,6 @@ module('Acceptance | task group detail', function(hooks) {
   test('when a task group has no scaling events, there is no recent scaling events section', async function(assert) {
     const taskGroupScale = job.jobScale.taskGroupScales.models.find(m => m.name === taskGroup.name);
     taskGroupScale.update({ events: [] });
-    taskGroupScale.save();
 
     await TaskGroup.visit({ id: job.id, name: taskGroup.name });
 
@@ -419,16 +418,30 @@ module('Acceptance | task group detail', function(hooks) {
 
   test('the recent scaling events section shows all recent scaling events in reverse chronological order', async function(assert) {
     const taskGroupScale = job.jobScale.taskGroupScales.models.find(m => m.name === taskGroup.name);
+    taskGroupScale.update({
+      events: [
+        server.create('scale-event', { error: true }),
+        server.create('scale-event', { error: true }),
+        server.create('scale-event', { error: true }),
+        server.create('scale-event', { error: true }),
+        server.create('scale-event', { count: 3, error: false }),
+        server.create('scale-event', { count: 1, error: false }),
+      ],
+    });
     const scaleEvents = taskGroupScale.events.models.sortBy('time').reverse();
     await TaskGroup.visit({ id: job.id, name: taskGroup.name });
 
     assert.ok(TaskGroup.hasScaleEvents);
+    assert.notOk(TaskGroup.hasScalingTimeline);
 
     scaleEvents.forEach((scaleEvent, idx) => {
       const ScaleEvent = TaskGroup.scaleEvents[idx];
       assert.equal(ScaleEvent.time, moment(scaleEvent.time / 1000000).format('MMM DD HH:mm:ss ZZ'));
       assert.equal(ScaleEvent.message, scaleEvent.message);
-      assert.equal(ScaleEvent.count, scaleEvent.count);
+
+      if (scaleEvent.count != null) {
+        assert.equal(ScaleEvent.count, scaleEvent.count);
+      }
 
       if (scaleEvent.error) {
         assert.ok(ScaleEvent.error);
@@ -441,4 +454,31 @@ module('Acceptance | task group detail', function(hooks) {
       }
     });
   });
+
+  test('when a task group has at least count scaling events and the count scaling events outnumber the non-count scaling events, a timeline is shown instead of an accordion', async function(assert) {
+    const taskGroupScale = job.jobScale.taskGroupScales.models.find(m => m.name === taskGroup.name);
+    taskGroupScale.update({
+      events: [
+        server.create('scale-event', { error: true }),
+        server.create('scale-event', { error: true }),
+        server.create('scale-event', { count: 7, error: false }),
+        server.create('scale-event', { count: 10, error: false }),
+        server.create('scale-event', { count: 2, error: false }),
+        server.create('scale-event', { count: 3, error: false }),
+        server.create('scale-event', { count: 2, error: false }),
+        server.create('scale-event', { count: 9, error: false }),
+        server.create('scale-event', { count: 1, error: false }),
+      ],
+    });
+    const scaleEvents = taskGroupScale.events.models.sortBy('time').reverse();
+    await TaskGroup.visit({ id: job.id, name: taskGroup.name });
+
+    assert.notOk(TaskGroup.hasScaleEvents);
+    assert.ok(TaskGroup.hasScalingTimeline);
+
+    assert.equal(
+      TaskGroup.scalingAnnotations.length,
+      scaleEvents.filter(ev => ev.count == null).length
+    );
+  });
 });

ui/tests/pages/jobs/job/task-group.js

@@ -69,6 +69,11 @@ export default create({
     meta: text(),
   }),
 
+  hasScalingTimeline: isPresent('[data-test-scaling-timeline]'),
+  scalingAnnotations: collection('[data-test-scaling-timeline] [data-test-annotation]', {
+    open: clickable('button'),
+  }),
+
   error: error(),
 
   emptyState: {