e-c status trackers

controllers.application.js

import Ember from 'ember';
import { task, timeout, all } from 'ember-concurrency';

const { Controller, get, set } = Ember;

const TaskTracker = Ember.ObjectProxy.extend({
  task: null,
  error: null
});

function randomOutcome() {
  if (Math.random() >= 0.5) {
    throw new Error('fake error');
  }
}

export default Controller.extend({
  sampleData: [
    Ember.Object.create({id: 1, word: 'foo'}),
    Ember.Object.create({id: 2, word: 'bar'}),
    Ember.Object.create({id: 3, word: 'baz'}),
    Ember.Object.create({id: 4, word: 'foobar'}),
    Ember.Object.create({id: 5, word: 'foobaz'}),
    Ember.Object.create({id: 6, word: 'bazfoo'})
  ],

  childTask: task(function * (tracker) {
    try {
      yield timeout(500);
      randomOutcome();
    } catch (error) {
      set(tracker, 'error', error);
    }
  }).maxConcurrency(2).enqueue(),

  parentTask: task(function * () {
    let childTask = get(this, 'childTask');
    let data = get(this, 'sampleData');
    let trackers = [];
    let childTasks = [];

    for (let sample of data) {
      let tracker = TaskTracker.create({content: sample});
      let taskInstance = childTask.perform(tracker);
      set(tracker, 'task', taskInstance);
      trackers.push(tracker);
      childTasks.push(taskInstance);
    }

    set(this, 'trackers', trackers);
    set(this, 'errors', null);
    set(this, 'status', 'Waiting for child tasks');
    
    // This is not waiting here!!! WHY?!?!?!
    yield all(childTasks);
    
    // We get here BEFORE childTasks are done! WTF?!
    set(this, 'status', 'All child tasks are done');
    set(this, 'errors', trackers.mapBy('error').compact());
  }).drop()
});

templates.application.hbs

<button onclick={{perform parentTask}}>Click</button>

<p>{{status}}</p>

{{#each errors tagName='ul' as |error|}}
  <li>{{error}}</li>
{{else}}
  <li>No errors</li>
{{/each}}

<hr>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Word</th>
      <th>Task Status</th>
    </tr>
  </thead>
  <tbody>
    {{#each sampleData as |data index|}}
      <tr>
        <td>{{data.id}}</td>
        <td>{{data.word}}</td>
        <td>
          {{#if (get (get trackers (concat index)) "task.isRunning")}}
            {{#if (get (get trackers (concat index)) "task.hasStarted")}}
              Running
            {{else}}
              Waiting
            {{/if}}
          {{else if (get (get trackers (concat index)) "error")}}
            Error
          {{else if (get (get trackers (concat index)) "task.isFinished")}}
            Done
          {{/if}}
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.0",
    "ember-template-compiler": "2.6.0",
    "ember-testing": "2.6.0"
  },
  "addons": {
    "ember-concurrency": "0.7.10"
  }
}