New Twiddle

controllers.application.js

import Ember from 'ember';
const { set } = Ember;
const { all } = Ember.RSVP;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  isRunning: false,
  jobsRemaining: 0,
  jobs: [],
  runningJobs: [],
  
  runJob(job) {
    console.log(job);
    job.startTime = Date.now();
    this.get('runningJobs').pushObject(job);
    return new Ember.RSVP.Promise((resolve) => {
      setTimeout(resolve, job.length);
    });
  },
  
  jobDone(job) {
    this.get('runningJobs').removeObject(job);
  },
  
  tick() {
    const now = Date.now();
    this.get('runningJobs').forEach((job) => {
      const percentDone = (now - job.startTime) / job.length;
      set(job, 'percentDone', (percentDone*100) + '%');
      
      if (percentDone > 1) {
        this.jobDone(job);
      }
    });
  },
  
  init() {
    let jobs = this.get('jobs');
    for (let i = 0; i < 20; i++) {
      jobs.push(Ember.Object.create({
        length: Math.random() * 10000 + 1000,
        startTime: 0
      }));
    }
    
    setInterval(() => this.tick(), 100);
  },
  
  
  _quePartsForUpload(uploadRequests, handler, uploadResults = []) {
    const maxRequests = 6;
    const requests = uploadRequests.splice(0, maxRequests);
    set(this, 'jobsRemaining', uploadRequests.length);
    const requestsPromises = requests.map(request => handler(request));
    set(this, 'runningJobs', requests);

    return all(requestsPromises).then(successfulParts => {
      const results = uploadResults.concat(successfulParts);
      if (uploadRequests.length > 0) {
        return this._quePartsForUpload(uploadRequests, handler, results);
      }
      return resolve(results);
    });
  },
  
  _improvedQuePartsForUpload(uploadRequests, handler, uploadResults = []) {

    const getJob = () => {
      let job = uploadRequests.shiftObject();
      set(this, 'jobsRemaining', uploadRequests.length);
      if (job) {
        return handler(job).then(getJob);
      }
    }

    const maxRequests = 6;
    const requestsPromises = new Array(maxRequests).fill()
      .map(getJob);

    return all(requestsPromises).then(successfulParts => {
      const results = uploadResults.concat(successfulParts);
      if (uploadRequests.length > 0) {
        return this._quePartsForUpload(uploadRequests, handler, results);
      }
      return resolve(results);
    });
  },
  
  actions: {
    runOriginal() {
      set(this, 'isRunning', true);
      this._quePartsForUpload(Ember.copy(this.get('jobs')), (job) => this.runJob(job));
    },
    runImproved() {
      set(this, 'isRunning', true);
      this._improvedQuePartsForUpload(Ember.copy(this.get('jobs')), (job) => this.runJob(job));
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<style>
.progress {
height: 15px;
background: red;
}
</style>
{{#unless isRunning}}
  <button {{action "runOriginal"}}>Run Original Queuing Algorithm</button><br />
  <button {{action "runImproved"}}>Run Improved Queuing Algorithm</button><br />
{{/unless}}
Jobs Remaining: {{jobsRemaining}}
{{#each runningJobs as |job|}}
	<div class="progress" style="width:{{job.percentDone}}"></div>
{{/each}}
<br>
<br>

twiddle.json

{
  "version": "0.13.1",
  "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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}