Layout and statistics improvements

@@ -25,17 +25,13 @@
         }
         }
 
 
         .stats-column {
         .stats-column {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-content: center;
-            margin-right: 3em;
+            flex: 0 0 200px;
         }
         }
 
 
         .container {
         .container {
             display: flex;
             display: flex;
             flex-direction: row;
             flex-direction: row;
-            margin: auto;
+            margin-top: 20px;
         }
         }
 
 
         .footer {
         .footer {
@@ -65,6 +61,20 @@
         </div>
         </div>
         <canvas id="memChart" width="400" height="100"></canvas>
         <canvas id="memChart" width="400" height="100"></canvas>
     </div>
     </div>
+    <div class="container">
+        <div class="stats-column">
+            <h5>Requests per second</h5>
+            <h1 id="rpsStat">1.45</h1>
+        </div>
+        <canvas id="rpsChart" width="400" height="100"></canvas>
+    </div>
+    <div class="Status Codes">
+        <div class="stats-column">
+            <h5>Response status codes</h5>
+            <h1 id="codeStat">OK</h1>
+        </div>
+        <canvas id="codeChart" width="400" height="100"></canvas>
+    </div>
     <div class="footer">
     <div class="footer">
         <p>Powered by Socket.io</p>
         <p>Powered by Socket.io</p>
     </div>
     </div>
@@ -135,12 +145,13 @@
     });
     });
 
 
     socket.on('stats', function (data) {
     socket.on('stats', function (data) {
+        console.log(data);
         cpuStat.textContent = data.osStats[data.osStats.length - 1].cpu.toFixed(1) + '%';
         cpuStat.textContent = data.osStats[data.osStats.length - 1].cpu.toFixed(1) + '%';
         cpuChart.data.datasets[0].data = data.osStats.map((point) => point.cpu);
         cpuChart.data.datasets[0].data = data.osStats.map((point) => point.cpu);
         cpuChart.data.labels = data.osStats.map((point) => point.timestamp);
         cpuChart.data.labels = data.osStats.map((point) => point.timestamp);
         cpuChart.update();
         cpuChart.update();
 
 
-        memStat.textContent = (data.osStats[data.osStats.length - 1].memory / 1024 / 1024).toFixed(1) + 'MB';
+        memStat.textContent = data.osStats[data.osStats.length - 1].memory.toFixed(1) + 'MB';
         memChart.data.datasets[0].data = data.osStats.map((point) => point.memory);
         memChart.data.datasets[0].data = data.osStats.map((point) => point.memory);
         memChart.data.labels = data.osStats.map((point) => point.timestamp);
         memChart.data.labels = data.osStats.map((point) => point.timestamp);
         memChart.update();
         memChart.update();

@@ -14,19 +14,22 @@
     retention: 100,
     retention: 100,
   };
   };
 
 
-  const gatherOsMetrics = (io) => {
+  const gatherOsMetrics = (io, config) => {
     pidusage.stat(process.pid, (err, stat) => {
     pidusage.stat(process.pid, (err, stat) => {
       stat.timestamp = Date.now();
       stat.timestamp = Date.now();
+      // Convert from B to MB
+      stat.memory = stat.memory / 1024 / 1024;
+
       osStats.push(stat);
       osStats.push(stat);
+      if (osStats.length >= config.retention) osStats.shift();
+
       sendMetrics(io);
       sendMetrics(io);
     });
     });
   };
   };
 
 
   const sendMetrics = (io) => {
   const sendMetrics = (io) => {
-     osStats.slice(Math.max(osStats.length - defaultConfig.retention, 1));
-
     io.emit('stats', {
     io.emit('stats', {
-      osStats: osStats.slice(Math.max(osStats.length - defaultConfig.retention, 1)),
+      osStats,
       responseTimes
       responseTimes
     });
     });
   };
   };
@@ -50,11 +53,7 @@
 
 
     const io = require('socket.io')(config.socketPort);
     const io = require('socket.io')(config.socketPort);
 
 
-    setInterval(() => gatherOsMetrics(io), config.interval * 1000);
-
-    io.on('connection', (socket) => {
-
-    });
+    setInterval(() => gatherOsMetrics(io, config), config.interval * 1000);
 
 
     return (req, res, next) => {
     return (req, res, next) => {
       const startTime = process.hrtime();
       const startTime = process.hrtime();
@@ -70,7 +69,6 @@
             responseTime,
             responseTime,
             timestamp: Date.now()
             timestamp: Date.now()
           });
           });
-
         });
         });
 
 
         next();
         next();