Making task runner.
This page's making task runner example.
Playground<!DOCTYPE html>
<html>
<head>
<title>Task Runner</title>
<link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js"></script>
<script src="http://www.3daysofprogramming.com/playground/examples/resources/js/stats.js"></script>
<style>
/**
* Create a position for the chart
* on the page */
#chart {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container" class="main">
<canvas id="chart"></canvas>
</div>
<div>
<button id="enroll-essential">Enroll ESSENTIAL</button>
<button id="enroll-critical">Enroll CRITICAL</button>
<button id="enroll-normal">Enroll NORMAL</button>
<button id="enroll-idle">Enroll IDLE</button>
<button id="enroll-worker">Enroll Worker Task</button>
<button id="enroll-abort">Enroll Aborted ESSENTIAL Task</button>
</div>
<div>
<button id="terminate-essential">Terminate ESSENTIAL</button>
<button id="terminate-critical">Terminate CRITICAL</button>
<button id="terminate-normal">Terminate NORMAL</button>
<button id="terminate-idle">Terminate IDLE</button>
<button id="terminate-all">Terminate ALL</button>
</div>
<script>
import {sleep} from "./utils/common";
import {randomInt} from "../src/pg/utils/math";
import {
Task,
TASK_PRIORITY, TASK_STATUS,
TaskRunner,
WorkerTask
} from "./utils/task-runner";
var chart;
var taskRunner;
function init() {
var container = document.getElementById('container');
var width = container.clientWidth;
var height = container.clientHeight;
var canvas = document.getElementById('chart');
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
var chartUpdate = _.throttle(function () {
chart.data.datasets[0].data = taskRunner.status.map(function (s) { return s.queue; });
chart.update();
}, 100);
taskRunner = new TaskRunner();
taskRunner.on('task:enroll', chartUpdate);
taskRunner.on('task:process', chartUpdate);
taskRunner.on('worker-task:process', chartUpdate);
taskRunner.on('terminate:priority', chartUpdate);
taskRunner.on('terminate:all', chartUpdate);
chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["ESSENTIAL", "CRITICAL", "NORMAL", "IDLE", "WORKER"],
datasets: [{
label: '# of tasks',
data: taskRunner.status.map(function (s) { return s.queue; }),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(75, 192, 192, 0.2)' ],
borderColor: [
'rgba(255,99,132,1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(75, 192, 192, 1)' ],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Object.values(TASK_PRIORITY).forEach(function (p) {
var button = document.getElementById(("enroll-" + (p.key.toLowerCase())));
if (!button) {
return;
}
button.addEventListener('click', function () {
var promises = [];
var size = randomInt(100, 500);
for (var i = 0; i < size; i++) {
promises.push(taskRunner.enroll(getTask(), p));
}
Promise.all(promises).then(function () { return console.log(((p.key) + " finished")); });
});
});
Object.values(TASK_PRIORITY).forEach(function (p) {
var button = document.getElementById(("terminate-" + (p.key.toLowerCase())));
if (!button) {
return;
}
button.addEventListener('click', function () {
taskRunner.terminate(p);
});
});
var button = document.getElementById('enroll-worker');
button.addEventListener('click', function () {
taskRunner.enroll(getWorkerTask()).then(function () { return console.log('worker finished'); });
});
button = document.getElementById('terminate-all');
button.addEventListener('click', function () {
taskRunner.terminateAll();
});
button = document.getElementById('enroll-abort');
button.addEventListener('click', function () {
var promises = [];
var size = randomInt(500, 1000);
for (var i = 0; i < size; i++) {
var task = getTask();
promises.push(taskRunner.enroll(task, TASK_PRIORITY.ESSENTIAL));
task.status = TASK_STATUS.ABORT;
}
Promise.all(promises).then(function () { return console.log("Aborted finished"); });
});
function getTask() {
return new Task(function () {
sleep(randomInt(1, 4));
});
}
function getWorkerTask() {
return new WorkerTask(function (params, done) {
var delay = 3000;
var start = new Date().getTime();
console.time('worker');
while (new Date().getTime() < start + delay) { ; }
console.timeEnd('worker');
done();
});
}
}
init();
window.DEBUG = {
taskRunner: taskRunner
};
</script>
</body>
</html>