Fix race condition, add graph toggles
This commit is contained in:
Cryptkeeper
parent
c87a377621
commit
649d8abd33
94
app.js
94
app.js
@ -122,6 +122,52 @@ function startMainLoop() {
|
||||
}, config.rates.upateMojangStatus);
|
||||
}
|
||||
|
||||
function startServices() {
|
||||
server.start(function() {
|
||||
// Track how many people are currently connected.
|
||||
server.io.on('connect', function(client) {
|
||||
// If we haven't sent out at least one round of pings, disconnect them for now.
|
||||
if (Object.keys(networkHistory).length < config.servers.length) {
|
||||
client.disconnect();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// We're good to connect them!
|
||||
connectedClients += 1;
|
||||
|
||||
logger.log('info', 'Accepted connection: %s, total clients: %d', client.request.connection.remoteAddress, connectedClients);
|
||||
|
||||
setTimeout(function() {
|
||||
// Send them our previous data, so they have somewhere to start.
|
||||
client.emit('updateMojangServices', mojang.toMessage());
|
||||
|
||||
// Remap our associative array into just an array.
|
||||
var networkHistoryKeys = Object.keys(networkHistory);
|
||||
|
||||
networkHistoryKeys.sort();
|
||||
|
||||
// Send each individually, this should look cleaner than waiting for one big array to transfer.
|
||||
for (var i = 0; i < networkHistoryKeys.length; i++) {
|
||||
client.emit('add', [networkHistory[networkHistoryKeys[i]]]);
|
||||
}
|
||||
|
||||
// Send them the big 24h graph.
|
||||
client.emit('historyGraph', graphData);
|
||||
}, 1);
|
||||
|
||||
// Attach our listeners.
|
||||
client.on('disconnect', function(client) {
|
||||
connectedClients -= 1;
|
||||
|
||||
logger.log('info', 'Client disconnected, total clients: %d', connectedClients);
|
||||
});
|
||||
});
|
||||
|
||||
startMainLoop();
|
||||
});
|
||||
}
|
||||
|
||||
if (config.logToDatabase) {
|
||||
// Setup our database.
|
||||
db.setup();
|
||||
@ -132,51 +178,11 @@ if (config.logToDatabase) {
|
||||
graphData = util.convertPingsToGraph(data);
|
||||
|
||||
logger.log('info', 'Queried and parsed ping history in %sms', util.getCurrentTimeMs() - timestamp);
|
||||
|
||||
startServices();
|
||||
});
|
||||
} else {
|
||||
logger.warn('Database logging is not enabled. You can enable it by setting "logToDatabase" to true in config.json. This requires sqlite3 to be installed.');
|
||||
|
||||
startServices();
|
||||
}
|
||||
|
||||
server.start(function() {
|
||||
// Track how many people are currently connected.
|
||||
server.io.on('connect', function(client) {
|
||||
// If we haven't sent out at least one round of pings, disconnect them for now.
|
||||
if (Object.keys(networkHistory).length < config.servers.length) {
|
||||
client.disconnect();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// We're good to connect them!
|
||||
connectedClients += 1;
|
||||
|
||||
logger.log('info', 'Accepted connection: %s, total clients: %d', client.request.connection.remoteAddress, connectedClients);
|
||||
|
||||
setTimeout(function() {
|
||||
// Send them our previous data, so they have somewhere to start.
|
||||
client.emit('updateMojangServices', mojang.toMessage());
|
||||
|
||||
// Remap our associative array into just an array.
|
||||
var networkHistoryKeys = Object.keys(networkHistory);
|
||||
|
||||
networkHistoryKeys.sort();
|
||||
|
||||
// Send each individually, this should look cleaner than waiting for one big array to transfer.
|
||||
for (var i = 0; i < networkHistoryKeys.length; i++) {
|
||||
client.emit('add', [networkHistory[networkHistoryKeys[i]]]);
|
||||
}
|
||||
|
||||
// Send them the big 24h graph.
|
||||
client.emit('historyGraph', graphData);
|
||||
}, 1);
|
||||
|
||||
// Attach our listeners.
|
||||
client.on('disconnect', function(client) {
|
||||
connectedClients -= 1;
|
||||
|
||||
logger.log('info', 'Client disconnected, total clients: %d', connectedClients);
|
||||
});
|
||||
});
|
||||
|
||||
startMainLoop();
|
||||
});
|
||||
@ -179,9 +179,11 @@ h3 {
|
||||
}
|
||||
|
||||
/* The big graph */
|
||||
#big-graph, #big-graph-controls {
|
||||
width: 1000px;
|
||||
margin: 15px auto 0 auto;
|
||||
}
|
||||
|
||||
#big-graph {
|
||||
height: 500px;
|
||||
width: 800px;
|
||||
margin: 15px auto 0 auto;
|
||||
padding-left: 500px;
|
||||
}
|
||||
@ -35,6 +35,7 @@
|
||||
</div>
|
||||
|
||||
<div id="big-graph"></div>
|
||||
<div id="big-graph-controls"></div>
|
||||
|
||||
<div id="server-container" class="container"></div>
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ var bigChartOptions = {
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
tickSize: 1000,
|
||||
tickSize: 2000,
|
||||
tickLength: 10,
|
||||
tickFormatter: function(value) {
|
||||
return formatNumber(value);
|
||||
@ -64,7 +64,6 @@ var bigChartOptions = {
|
||||
var lastMojangServiceUpdate;
|
||||
|
||||
var graphs = {};
|
||||
var lastLatencyEntries = {};
|
||||
var lastPlayerEntries = {};
|
||||
|
||||
// Generate (and set) the HTML that displays Mojang status.
|
||||
@ -140,20 +139,7 @@ function updateServerStatus(lastEntry) {
|
||||
newStatus += playerDifference + ')</span>';
|
||||
}
|
||||
|
||||
/*if (lastLatencyEntries[info.name]) {
|
||||
newStatus += '<br />';
|
||||
|
||||
var latencyDifference = lastLatencyEntries[info.name] - result.latency;
|
||||
|
||||
if (latencyDifference >= 0) {
|
||||
newStatus += '+';
|
||||
}
|
||||
|
||||
newStatus += latencyDifference + 'ms';
|
||||
}*/
|
||||
|
||||
lastPlayerEntries[info.name] = result.players.online;
|
||||
lastLatencyEntries[info.name] = result.latency;
|
||||
|
||||
div.html(newStatus);
|
||||
} else {
|
||||
@ -196,42 +182,6 @@ function sortServers() {
|
||||
}
|
||||
}
|
||||
|
||||
function safeName(name) {
|
||||
return name.replace(/ /g, '');
|
||||
}
|
||||
|
||||
function handlePlotHover(event, pos, item) {
|
||||
if (item) {
|
||||
var text = getTimestamp(item.datapoint[0] / 1000) + '\
|
||||
<br />\
|
||||
' + formatNumber(item.datapoint[1]) + ' Players';
|
||||
|
||||
if (item.series && item.series.label) {
|
||||
text = item.series.label + '<br />' + text;
|
||||
}
|
||||
|
||||
renderTooltip(item.pageX + 5, item.pageY + 5, text);
|
||||
} else {
|
||||
hideTooltip();
|
||||
}
|
||||
}
|
||||
|
||||
function convertGraphData(rawData) {
|
||||
var data = [];
|
||||
|
||||
var keys = Object.keys(rawData);
|
||||
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
data.push({
|
||||
data: rawData[keys[i]],
|
||||
yaxis: 1,
|
||||
label: keys[i]
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
var socket = io.connect({
|
||||
reconnect: true,
|
||||
@ -243,7 +193,8 @@ $(document).ready(function() {
|
||||
var sortServersTask;
|
||||
|
||||
var historyPlot;
|
||||
var historyData;
|
||||
var displayedGraphData;
|
||||
var hiddenGraphData = [];
|
||||
|
||||
socket.on('connect', function() {
|
||||
$('#tagline-text').text('Loading...');
|
||||
@ -262,7 +213,6 @@ $(document).ready(function() {
|
||||
$('#tagline-text').text('Disconnected! Refresh?');
|
||||
|
||||
lastPlayerEntries = {};
|
||||
lastLatencyEntries = {};
|
||||
graphs = {};
|
||||
|
||||
$('#server-container').html('');
|
||||
@ -271,21 +221,34 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
socket.on('historyGraph', function(rawData) {
|
||||
historyData = rawData;
|
||||
displayedGraphData = rawData;
|
||||
|
||||
historyPlot = $.plot('#big-graph', convertGraphData(rawData), bigChartOptions);
|
||||
|
||||
$('#big-graph').bind('plothover', handlePlotHover);
|
||||
|
||||
var keys = Object.keys(rawData);
|
||||
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
$('#big-graph-controls').append('<input type="checkbox" class="graph-control" id="graph-controls" data-target-network="' + keys[i] + '" checked=checked> ' + keys[i] + '</input> ');
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('updateHistoryGraph', function(rawData) {
|
||||
if (historyData[rawData.ip].length > 24 * 60) {
|
||||
historyData[rawData.ip].shift();
|
||||
var targetGraphData = displayedGraphData[rawData.ip];
|
||||
|
||||
// If it's not in our display group, push it to the hidden group instead so it can be restored and still be up to date.
|
||||
if (!targetGraphData) {
|
||||
targetGraphData = hiddenGraphData[rawData.ip];
|
||||
}
|
||||
|
||||
historyData[rawData.ip].push([rawData.timestamp, rawData.players]);
|
||||
if (targetGraphData.length > 24 * 60) {
|
||||
targetGraphData.shift();
|
||||
}
|
||||
|
||||
historyPlot.setData(convertGraphData(historyData));
|
||||
targetGraphData.push([rawData.timestamp, rawData.players]);
|
||||
|
||||
historyPlot.setData(convertGraphData(displayedGraphData));
|
||||
historyPlot.setupGrid();
|
||||
|
||||
historyPlot.draw();
|
||||
@ -311,10 +274,8 @@ $(document).ready(function() {
|
||||
|
||||
if (lastEntry.error) {
|
||||
lastPlayerEntries[info.name] = 0;
|
||||
lastLatencyEntries[info.name] = 0;
|
||||
} else if (lastEntry.result) {
|
||||
lastPlayerEntries[info.name] = lastEntry.result.players.online;
|
||||
lastLatencyEntries[info.name] = lastEntry.result.latency;
|
||||
}
|
||||
|
||||
$('<div/>', {
|
||||
@ -414,4 +375,25 @@ $(document).ready(function() {
|
||||
scrollTop: target.offset().top
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$(document).on('click', '.graph-control', function(e) {
|
||||
var serverIp = $(this).attr('data-target-network');
|
||||
var checked = $(this).attr('checked');
|
||||
|
||||
// Restore it, or delete it - either works.
|
||||
if (!this.checked) {
|
||||
hiddenGraphData[serverIp] = displayedGraphData[serverIp];
|
||||
|
||||
delete displayedGraphData[serverIp];
|
||||
} else {
|
||||
displayedGraphData[serverIp] = hiddenGraphData[serverIp];
|
||||
|
||||
delete hiddenGraphData[serverIp];
|
||||
}
|
||||
|
||||
historyPlot.setData(convertGraphData(displayedGraphData));
|
||||
historyPlot.setupGrid();
|
||||
|
||||
historyPlot.draw();
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,6 +10,10 @@ function getTimestamp(ms, timeOnly) {
|
||||
return date.toLocaleTimeString();
|
||||
}
|
||||
|
||||
function safeName(name) {
|
||||
return name.replace(/ /g, '');
|
||||
}
|
||||
|
||||
function renderTooltip(x, y, html) {
|
||||
tooltip.html(html).css({
|
||||
top: y,
|
||||
@ -25,6 +29,51 @@ function formatNumber(x) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
|
||||
function handlePlotHover(event, pos, item) {
|
||||
if (item) {
|
||||
var text = getTimestamp(item.datapoint[0] / 1000) + '\
|
||||
<br />\
|
||||
' + formatNumber(item.datapoint[1]) + ' Players';
|
||||
|
||||
if (item.series && item.series.label) {
|
||||
text = item.series.label + '<br />' + text;
|
||||
}
|
||||
|
||||
renderTooltip(item.pageX + 5, item.pageY + 5, text);
|
||||
} else {
|
||||
hideTooltip();
|
||||
}
|
||||
}
|
||||
|
||||
function convertGraphData(rawData) {
|
||||
var data = [];
|
||||
|
||||
var keys = Object.keys(rawData);
|
||||
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
data.push({
|
||||
data: rawData[keys[i]],
|
||||
yaxis: 1,
|
||||
label: keys[i],
|
||||
color: stringToColor(keys[i])
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function stringToColor(base) {
|
||||
var hash;
|
||||
|
||||
for (var i = 0, hash = 0; i < base.length; i++) {
|
||||
hash = base.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
|
||||
color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
|
||||
|
||||
return '#' + Array(6 - color.length + 1).join('0') + color;
|
||||
}
|
||||
|
||||
function msToTime(timer) {
|
||||
var milliseconds = timer % 1000;
|
||||
timer = (timer - milliseconds) / 1000;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user