express-status-monitor
Version:
Realtime Monitoring for Express-based Node applications
115 lines (114 loc) • 3.77 kB
HTML
<html>
<head>
<title>{{title}}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
<style>
{{{style}}}
</style>
</head>
<body class="{{bodyClasses}}">
<div class="content">
<div class="header">
<b>{{title}}</b>
<div id="span-controls" class="span-controls"></div>
</div>
<div class="container cpu">
<div class="stats-column">
<h5>CPU Usage</h5>
<h1 id="cpuStat">- %</h1>
</div>
<div class="chart-container">
<canvas id="cpuChart" width="400" height="100"></canvas>
</div>
</div>
<div class="container mem">
<div class="stats-column">
<h5>Memory Usage</h5>
<h1 id="memStat">- %</h1>
</div>
<div class="chart-container">
<canvas id="memChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container heap-size">
<div class="stats-column">
<h5>Heap Usage</h5>
<h1 id="heapStat">- %</h1>
</div>
<div class="chart-container">
<canvas id="heapChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container load">
<div class="stats-column">
<h5>One Minute Load Avg</h5>
<h1 id="loadStat">-</h1>
</div>
<div class="chart-container">
<canvas id="loadChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container eventLoop">
<div class="stats-column">
<h5>Spent in Event Loop</h5>
<h1 id="eventLoopStat">ms</h1>
</div>
<div class="chart-container">
<canvas id="eventLoopChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container responseTime">
<div class="stats-column">
<h5>Response Time</h5>
<h1 id="responseTimeStat">-</h1>
</div>
<div class="chart-container">
<canvas id="responseTimeChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container rps">
<div class="stats-column">
<h5>Requests per Second</h5>
<h1 id="rpsStat">-</h1>
</div>
<div class="chart-container">
<canvas id="rpsChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container statusCodes">
<div class="stats-column">
<h5>Status Codes</h5>
<h6 class="status-code status-code-2xx">2xx</h6>
<h6 class="status-code status-code-3xx">3xx</h6>
<h6 class="status-code status-code-4xx">4xx</h6>
<h6 class="status-code status-code-5xx">5xx</h6>
</div>
<div class="chart-container">
<canvas id="statusCodesChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container healthChecks">
{{#each healthCheckResults}}
<div class="health-check-row">
<div class="health-check-title-column">
<h5><a href="{{path}}">{{path}}</a></h5>
</div>
<div class="health-check-status-container {{status}}">
<h1>{{status}}</h1>
</div>
</div>
{{/each}}
</div>
<div class="footer">
<p>Status page made by <a href="https://dynobase.dev">Dynobase</a> with ♥ with Socket.io & Chart.js</p>
</div>
</div>
<script>
var port = '{{port}}';
var socketPath = '{{socketPath}}';
{{{script}}}
</script>
</body>
</html>