From b349b83ef1cbbac55f3477efb613836f3fdcb162 Mon Sep 17 00:00:00 2001
From: Ylian Saint-Hilaire <ysainthilaire@hotmail.com>
Date: Wed, 5 May 2021 17:08:50 -0700
Subject: [PATCH] Initial work on traffic graph.

---
 meshcentral.js           |  8 +++++++-
 views/default.handlebars | 43 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/meshcentral.js b/meshcentral.js
index 689ae3f7..1198c106 100644
--- a/meshcentral.js
+++ b/meshcentral.js
@@ -1665,6 +1665,7 @@ function CreateMeshCentralServer(config, args) {
                 }
 
                 // Start collecting server stats every 5 minutes
+                obj.trafficStats = obj.webserver.getTrafficStats();
                 setInterval(function () {
                     obj.serverStatsCounter++;
                     var hours = 720; // Start with all events lasting 30 days.
@@ -1676,6 +1677,10 @@ function CreateMeshCentralServer(config, args) {
                     var expire = new Date();
                     expire.setTime(expire.getTime() + (60 * 60 * 1000 * hours));
 
+                    // Get traffic data
+                    var trafficStats = obj.webserver.getTrafficDelta(obj.trafficStats);
+                    obj.trafficStats = trafficStats.current;
+
                     var data = {
                         time: new Date(),
                         expire: expire,
@@ -1686,7 +1691,8 @@ function CreateMeshCentralServer(config, args) {
                             cu: Object.keys(obj.webserver.wssessions).length,
                             us: Object.keys(obj.webserver.wssessions2).length,
                             rs: obj.webserver.relaySessionCount
-                        }
+                        },
+                        traffic: trafficStats.delta
                     };
                     if (obj.mpsserver != null) {
                         data.conn.am = 0;
diff --git a/views/default.handlebars b/views/default.handlebars
index 5dcbb62f..0bca783b 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -1023,6 +1023,8 @@
                         <select id=p40type onchange=updateServerTimelineStats()>
                             <option value=0>Connections</option>
                             <option value=1>Memory</option>
+                            <option value=3>Inbound Traffic</option>
+                            <option value=4>Outbound Traffic</option>
                         </select>&nbsp;
                         <select id=p40time onchange=updateServerTimelineHours()>
                             <option value=3>Last 3 hours</option>
@@ -14381,6 +14383,7 @@
                 maintainAspectRatio: false,
                 elements: { line: { cubicInterpolationMode: 'monotone' } },
                 scales: {
+                    y: { stacked: true },
                     xAxes: [{ type: 'time', time: { tooltipFormat: 'll HH:mm' }, display: true, scaleLabel: { display: false, 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[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';
                 data = {
                     labels: [pastDate(0), timeAfter],