Skip to content

Jabis Sev贸n / esm

Go to a project
Toggle navigation
Toggle navigation pinning
8693ffe9 by Rafal Wilinski
Options

:thermometer: Add back support for response times

1 parent f4d86a89
Inline Side-by-side
Showing 2 changed files with 69 additions and 6 deletions
index.html
......@@ -32,6 +32,7 @@
display: flex;
flex-direction: row;
margin-top: 20px;
height: 100px;
}
.footer {
......@@ -42,11 +43,28 @@
right: 0;
bottom: 0;
}
.span-controls {
float: right;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div style="width: 400px; margin: auto">
<h3>Express Status</h3>
<div class="header">
<span><b>Express Status</b></span>
<div class="span-controls">
<span>1M</span>
<span>15M</span>
<span>1H</span>
<span>24H</span>
</div>
</div>
<div class="container">
<div class="stats-column">
<h5>CPU Usage</h5>
......@@ -68,6 +86,13 @@
</div>
<canvas id="loadChart" width="400" height="100"></canvas>
</div>
<div class="container">
<div class="stats-column">
<h5>Response Time</h5>
<h1 id="responseTimeStat">-</h1>
</div>
<canvas id="responseTimeChart" width="400" height="100"></canvas>
</div>
<div class="footer">
<p>Made with &#9829; with Socket.io & Chart.js</p>
</div>
......@@ -103,6 +128,13 @@
pointRadius: 0,
}];
var responseTimeDataset = [{
label: 'Response Time',
data: [],
lineTension: 0.2,
pointRadius: 0,
}];
var defaultOptions = {
scales: {
yAxes: [{
......@@ -128,10 +160,12 @@
var cpuStat = document.getElementById('cpuStat');
var memStat = document.getElementById('memStat');
var loadStat = document.getElementById('loadStat');
var responseTimeStat = document.getElementById('responseTimeStat');
var cpuChartCtx = document.getElementById("cpuChart");
var memChartCtx = document.getElementById("memChart");
var loadChartCtx = document.getElementById("loadChart");
var responseTimeChartCtx = document.getElementById("responseTimeChart");
var cpuChart = new Chart(cpuChartCtx, {
type: 'line',
......@@ -160,6 +194,14 @@
options: defaultOptions
});
var responseTimeChart = new Chart(responseTimeChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: responseTimeDataset,
},
options: defaultOptions
});
socket.on('stats', function (data) {
console.log(data);
......@@ -177,6 +219,11 @@
loadChart.data.datasets[0].data = data.os.map(function(point) { return point.load[0]; });
loadChart.data.labels = data.os.map(function(point) { return point.timestamp; });
loadChart.update();
responseTimeStat.textContent = data.responses[data.responses.length - 1].mean.toFixed(2) + 'ms';
responseTimeChart.data.datasets[0].data = data.responses.map(function(point) { return point.mean; });
responseTimeChart.data.labels = data.responses.map(function(point) { return point.timestamp; });
responseTimeChart.update();
});
</script>
</body>
......
index.js
......@@ -15,17 +15,33 @@
}]
};
Array.prototype.last = function() {
return this[this.length - 1];
};
const gatherOsMetrics = (io, span) => {
const defaultResponse = {
'2': 0,
'3': 0,
'4': 0,
'5': 0,
count: 0,
mean: 0,
timestamp: Date.now()
};
pidusage.stat(process.pid, (err, stat) => {
stat.timestamp = Date.now();
// Convert from B to MB
stat.memory = stat.memory / 1024 / 1024;
stat.load = os.loadavg();
stat.timestamp = Date.now();
span.os.push(stat);
if (!span.responses[0] || span.responses.last().timestamp + (span.interval * 1000) < Date.now()) span.responses.push(defaultResponse);
if (span.os.length >= span.retention) span.os.shift();
if (span.responses[0] && span.responses.length >= span.retention) span.responses.shift();
sendMetrics(io, span);
});
......@@ -80,10 +96,10 @@
config.spans.forEach((span) => {
const last = span.responses[span.responses.length - 1];
if (last !== undefined &&
span.responses[span.responses.length - 1].timestamp / 1000 + span.interval > Date.now() / 1000) {
span.responses[span.responses.length - 1][category]++;
span.responses[span.responses.length - 1].mean = responseTime;
span.responses[span.responses.length - 1].count++;
span.responses.last().timestamp / 1000 + span.interval > Date.now() / 1000) {
span.responses.last()[category]++;
span.responses.last().mean = responseTime;
span.responses.last().count++;
} else {
span.responses.push({
'2': category === 2 ? 1 : 0,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!