Initial work on traffic graph.

This commit is contained in:
Ylian Saint-Hilaire 2021-05-05 17:08:50 -07:00
parent 56d0f2aafc
commit b349b83ef1
2 changed files with 49 additions and 2 deletions

View File

@ -1665,6 +1665,7 @@ function CreateMeshCentralServer(config, args) {
} }
// Start collecting server stats every 5 minutes // Start collecting server stats every 5 minutes
obj.trafficStats = obj.webserver.getTrafficStats();
setInterval(function () { setInterval(function () {
obj.serverStatsCounter++; obj.serverStatsCounter++;
var hours = 720; // Start with all events lasting 30 days. var hours = 720; // Start with all events lasting 30 days.
@ -1676,6 +1677,10 @@ function CreateMeshCentralServer(config, args) {
var expire = new Date(); var expire = new Date();
expire.setTime(expire.getTime() + (60 * 60 * 1000 * hours)); expire.setTime(expire.getTime() + (60 * 60 * 1000 * hours));
// Get traffic data
var trafficStats = obj.webserver.getTrafficDelta(obj.trafficStats);
obj.trafficStats = trafficStats.current;
var data = { var data = {
time: new Date(), time: new Date(),
expire: expire, expire: expire,
@ -1686,7 +1691,8 @@ function CreateMeshCentralServer(config, args) {
cu: Object.keys(obj.webserver.wssessions).length, cu: Object.keys(obj.webserver.wssessions).length,
us: Object.keys(obj.webserver.wssessions2).length, us: Object.keys(obj.webserver.wssessions2).length,
rs: obj.webserver.relaySessionCount rs: obj.webserver.relaySessionCount
} },
traffic: trafficStats.delta
}; };
if (obj.mpsserver != null) { if (obj.mpsserver != null) {
data.conn.am = 0; data.conn.am = 0;

View File

@ -1023,6 +1023,8 @@
<select id=p40type onchange=updateServerTimelineStats()> <select id=p40type onchange=updateServerTimelineStats()>
<option value=0>Connections</option> <option value=0>Connections</option>
<option value=1>Memory</option> <option value=1>Memory</option>
<option value=3>Inbound Traffic</option>
<option value=4>Outbound Traffic</option>
</select>&nbsp; </select>&nbsp;
<select id=p40time onchange=updateServerTimelineHours()> <select id=p40time onchange=updateServerTimelineHours()>
<option value=3>Last 3 hours</option> <option value=3>Last 3 hours</option>
@ -14381,6 +14383,7 @@
maintainAspectRatio: false, maintainAspectRatio: false,
elements: { line: { cubicInterpolationMode: 'monotone' } }, elements: { line: { cubicInterpolationMode: 'monotone' } },
scales: { scales: {
y: { stacked: true },
xAxes: [{ type: 'time', time: { tooltipFormat: 'll HH:mm' }, display: true, scaleLabel: { display: false, labelString: '' } }], xAxes: [{ type: 'time', time: { tooltipFormat: 'll HH:mm' }, display: true, scaleLabel: { display: false, labelString: '' } }],
yAxes: [{ type: 'linear', display: true, scaleLabel: { display: true, labelString: '' } }] yAxes: [{ type: 'linear', display: true, scaleLabel: { display: true, labelString: '' } }]
} }
@ -14497,7 +14500,45 @@
data.datasets[2].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].mem.heapTotal / (1024 * 1024) }); data.datasets[2].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].mem.heapTotal / (1024 * 1024) });
data.datasets[3].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].mem.rss / (1024 * 1024) }); data.datasets[3].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].mem.rss / (1024 * 1024) });
} }
} /*else if (chartType == 2) { // Database } else if ((chartType == 3) || (chartType == 4)) { // Inbound/Outbound traffic
serverTimelineConfig.options.scales.yAxes[0].scaleLabel.labelString = "Megabytes";
data = {
labels: [pastDate(0), timeAfter],
datasets: [
{ label: "Agent", data: [], backgroundColor: 'rgba(158, 151, 16, .1)', borderColor: 'rgb(158, 151, 16)', fill: true, steppedLine: true },
{ label: "CIRA", data: [], backgroundColor: 'rgba(16, 84, 158, .1)', borderColor: 'rgb(16, 84, 158)', fill: true, steppedLine: true },
{ label: "LMS", data: [], backgroundColor: 'rgba(255, 99, 132, .1)', borderColor: 'rgb(255, 99, 132)', fill: true, steppedLine: true },
{ label: "HTTP", data: [], backgroundColor: 'rgba(39, 158, 16, .1)', borderColor: 'rgb(39, 158, 16)', fill: true, steppedLine: true }
]
};
for (var i = 0; i < serverTimelineStats.length; i++) {
if (serverTimelineStats[i].traffic == null) continue;
if ((serverTimelineStats[i].s != null) && (servers.indexOf(serverTimelineStats[i].s) == -1)) {
servers.push(serverTimelineStats[i].s);
if (serverAutoSelect) { selectedServer = serverTimelineStats[i].s; serverAutoSelect = false; }
}
if (serverTimelineStats[i].s == null) { serverEmptyExists = true; }
if (serverTimelineStats[i].s != selectedServer) { continue; }
if (serverTimelineStats[i].first == true) {
data.datasets[0].data.push({ x: serverTimelineStats[i].time - 1, y: NaN });
data.datasets[1].data.push({ x: serverTimelineStats[i].time - 1, y: NaN });
data.datasets[2].data.push({ x: serverTimelineStats[i].time - 1, y: NaN });
data.datasets[3].data.push({ x: serverTimelineStats[i].time - 1, y: NaN });
}
if (chartType == 3) {
data.datasets[0].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].traffic.AgentCtrlIn ? (serverTimelineStats[i].traffic.AgentCtrlIn / (1024 * 1024)) : 0 });
data.datasets[1].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].traffic.CIRAIn ? (serverTimelineStats[i].traffic.CIRAIn / (1024 * 1024)) : 0 });
data.datasets[2].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].traffic.LMSIn ? (serverTimelineStats[i].traffic.LMSIn / (1024 * 1024)) : 0 });
data.datasets[3].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].traffic.httpIn ? (serverTimelineStats[i].traffic.httpIn / (1024 * 1024)) : 0 });
} else if (chartType == 4) {
data.datasets[0].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].traffic.AgentCtrlOut ? (serverTimelineStats[i].traffic.AgentCtrlOut / (1024 * 1024)) : 0 });
data.datasets[1].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].traffic.CIRAOut ? (serverTimelineStats[i].traffic.CIRAOut / (1024 * 1024)) : 0 });
data.datasets[2].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].traffic.LMSOut ? (serverTimelineStats[i].traffic.LMSOut / (1024 * 1024)) : 0 });
data.datasets[3].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].traffic.httpOut ? (serverTimelineStats[i].traffic.httpOut / (1024 * 1024)) : 0 });
}
}
}
/*else if (chartType == 2) { // Database
serverTimelineConfig.options.scales.yAxes[0].scaleLabel.labelString = 'Records'; serverTimelineConfig.options.scales.yAxes[0].scaleLabel.labelString = 'Records';
data = { data = {
labels: [pastDate(0), timeAfter], labels: [pastDate(0), timeAfter],