public/js/admin_console.js in documentcloud-cloud-crowd-0.1.0 vs public/js/admin_console.js in documentcloud-cloud-crowd-0.1.1
- old
+ new
@@ -20,54 +20,66 @@
// Images to preload
PRELOAD_IMAGES : ['/images/server_error.png'],
// All options for drawing the system graphs.
GRAPH_OPTIONS : {
- xaxis : {mode : 'time', timeformat : '%M:%S'},
- yaxis : {tickDecimals : 0},
- legend : {show : false},
- grid : {backgroundColor : '#7f7f7f', color : '#555', tickColor : '#666', borderWidth : 2}
+ xaxis : {mode : 'time', timeformat : '%M:%S'},
+ yaxis : {tickDecimals : 0},
+ legend : {show : false},
+ grid : {backgroundColor : '#7f7f7f', color : '#555', tickColor : '#666', borderWidth : 2}
},
JOBS_COLOR : '#db3a0f',
- WORKERS_COLOR : '#a1003d',
+ NODES_COLOR : '#1870ab',
+ WORKERS_COLOR : '#45a4e5',
WORK_UNITS_COLOR : '#ffba14',
// Starting the console begins polling the server.
initialize : function() {
this._jobsHistory = [];
+ this._nodesHistory = [];
this._workersHistory = [];
this._workUnitsHistory = [];
- this._histories = [this._jobsHistory, this._workersHistory, this._workUnitsHistory];
+ this._histories = [this._jobsHistory, this._nodesHistory, this._workersHistory, this._workUnitsHistory];
this._queue = $('#jobs');
this._workerInfo = $('#worker_info');
this._disconnected = $('#disconnected');
$(window).bind('resize', Console.renderGraphs);
- $('#workers .worker').live('click', Console.getWorkerInfo);
+ $('#nodes .worker').live('click', Console.getWorkerInfo);
+ $('#workers_legend').css({background : this.WORKERS_COLOR});
+ $('#nodes_legend').css({background : this.NODES_COLOR});
this.getStatus();
$.each(this.PRELOAD_IMAGES, function(){ var i = new Image(); i.src = this; });
},
// Request the lastest status of all jobs and workers, re-render or update
// the DOM to reflect.
getStatus : function() {
$.ajax({url : '/status', dataType : 'json', success : function(resp) {
Console._jobs = resp.jobs;
- Console._workers = resp.workers;
+ Console._nodes = resp.nodes;
Console._workUnitCount = resp.work_unit_count;
+ Console._workerCount = Console.countWorkers();
Console.recordDataPoint();
if (Console._disconnected.is(':visible')) Console._disconnected.fadeOut(Console.ANIMATION_SPEED);
$('#queue').toggleClass('no_jobs', Console._jobs.length <= 0);
Console.renderJobs();
- Console.renderWorkers();
+ Console.renderNodes();
Console.renderGraphs();
setTimeout(Console.getStatus, Console.POLL_INTERVAL);
}, error : function(request, status, errorThrown) {
if (!Console._disconnected.is(':visible')) Console._disconnected.fadeIn(Console.ANIMATION_SPEED);
setTimeout(Console.getStatus, Console.POLL_INTERVAL);
}});
},
+ // Count the total number of workers in the current list of nodes.
+ countWorkers : function() {
+ var sum = 0;
+ for (var i=0; i < this._nodes.length; i++) sum += this._nodes[i].workers.length;
+ return sum;
+ },
+
// Render an individual job afresh.
renderJob : function(job) {
this._queue.append('<div class="job" id="job_' + job.id + '" style="width:' + job.width + '%; background: #' + job.color + ';"><div class="completion ' + (job.percent_complete <= 0 ? 'zero' : '') + '" style="width:' + job.percent_complete + '%;"></div><div class="percent_complete">' + job.percent_complete + '%</div><div class="job_id">#' + job.id + '</div></div>');
},
@@ -103,34 +115,49 @@
jobEl[0] ? Console.updateJob(this, jobEl) : Console.renderJob(this);
});
},
// Re-render all workers from scratch each time.
- renderWorkers : function() {
+ renderNodes : function() {
var header = $('#sidebar_header');
- $('.has_workers', header).html(this._workers.length + " Active Worker Daemons");
- header.toggleClass('no_workers', this._workers.length <= 0);
- $('#workers').html($.map(this._workers, function(w) {
- return '<div class="worker ' + w.status + '" rel="' + w.name + '">' + w.name + '</div>';
+ var nc = this._nodes.length, wc = this._workerCount;
+ $('.has_nodes', header).html(nc + " Node" + (nc != 1 ? 's' : '') + " / " + wc + " Worker" + (wc != 1 ? 's' : ''));
+ header.toggleClass('no_nodes', this._nodes.length <= 0);
+ $('#nodes').html($.map(this._nodes, function(node) {
+ var html = "";
+ html += '<div class="node">' + node.host + '</div>';
+ html += $.map(node.workers, function(pid) {
+ var name = pid + '@' + node.host;
+ return '<div class="worker" rel="' + name + '">' + name + '</div>';
+ }).join('');
+ return html;
}).join(''));
},
// Record the current state and re-render all graphs.
recordDataPoint : function() {
var timestamp = (new Date()).getTime();
this._jobsHistory.push([timestamp, this._jobs.length]);
- this._workersHistory.push([timestamp, this._workers.length]);
+ this._nodesHistory.push([timestamp, this._nodes.length]);
+ this._workersHistory.push([timestamp, this._workerCount]);
this._workUnitsHistory.push([timestamp, this._workUnitCount]);
$.each(this._histories, function() {
if (this.length > Console.MAX_DATA_POINTS) this.shift();
});
},
// Convert our recorded data points into a format Flot can understand.
renderGraphs : function() {
- $.plot($('#jobs_graph'), [{label : 'Jobs in Queue', color : Console.JOBS_COLOR, data : Console._jobsHistory}], Console.GRAPH_OPTIONS);
- $.plot($('#workers_graph'), [{label : 'Active Workers', color : Console.WORKERS_COLOR, data : Console._workersHistory}], Console.GRAPH_OPTIONS);
- $.plot($('#work_units_graph'), [{label : 'Work Units in Queue', color : Console.WORK_UNITS_COLOR, data : Console._workUnitsHistory}], Console.GRAPH_OPTIONS);
+ $.plot($('#work_units_graph'), [
+ {label : 'Work Units in Queue', color : Console.WORK_UNITS_COLOR, data : Console._workUnitsHistory}
+ ], Console.GRAPH_OPTIONS);
+ $.plot($('#jobs_graph'), [
+ {label : 'Jobs in Queue', color : Console.JOBS_COLOR, data : Console._jobsHistory}
+ ], Console.GRAPH_OPTIONS);
+ $.plot($('#workers_graph'), [
+ {label : 'Nodes', color : Console.NODES_COLOR, data : Console._nodesHistory},
+ {label : 'Workers', color : Console.WORKERS_COLOR, data : Console._workersHistory}
+ ], Console.GRAPH_OPTIONS);
},
// Request the Worker info from the central server.
getWorkerInfo : function(e) {
e.stopImmediatePropagation();
\ No newline at end of file