Skip to content

Commit 5012bbb

Browse files
ivanvsivanvs
committed
Show page for data monitoring with real data
1 parent d10d8ca commit 5012bbb

File tree

5 files changed

+625
-0
lines changed

5 files changed

+625
-0
lines changed

‎src/index.ts‎

Whitespace-only changes.

‎src/public/index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>{{title}}</title>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
8+
<style>
9+
{
10+
{
11+
{
12+
style
13+
}
14+
}
15+
}
16+
</style>
17+
</head>
18+
19+
<body class="{{bodyClasses}}">
20+
<div class="content">
21+
<div class="header">
22+
<b>{{title}}</b>
23+
<div id="span-controls" class="span-controls">
24+
</div>
25+
</div>
26+
<div class="container cpu">
27+
<div class="stats-column">
28+
<h5>CPU Usage</h5>
29+
<h1 id="cpuStat">- %</h1>
30+
</div>
31+
<div class="chart-container">
32+
<canvas id="cpuChart" width="400" height="100"></canvas>
33+
</div>
34+
</div>
35+
<div class="container mem">
36+
<div class="stats-column">
37+
<h5>Memory Usage</h5>
38+
<h1 id="memStat">- %</h1>
39+
</div>
40+
<div class="chart-container">
41+
<canvas id="memChart" width="200" height="100"></canvas>
42+
</div>
43+
</div>
44+
<div class="container load">
45+
<div class="stats-column">
46+
<h5>One Minute Load Avg</h5>
47+
<h1 id="loadStat">-</h1>
48+
</div>
49+
<div class="chart-container">
50+
<canvas id="loadChart" width="200" height="100"></canvas>
51+
</div>
52+
</div>
53+
<div class="container responseTime">
54+
<div class="stats-column">
55+
<h5>Response Time</h5>
56+
<h1 id="responseTimeStat">-</h1>
57+
</div>
58+
<div class="chart-container">
59+
<canvas id="responseTimeChart" width="200" height="100"></canvas>
60+
</div>
61+
</div>
62+
<div class="container rps">
63+
<div class="stats-column">
64+
<h5>Requests per Second</h5>
65+
<h1 id="rpsStat">-</h1>
66+
</div>
67+
<div class="chart-container">
68+
<canvas id="rpsChart" width="200" height="100"></canvas>
69+
</div>
70+
</div>
71+
<div class="container statusCodes">
72+
<div class="stats-column">
73+
<h5>Status Codes</h5>
74+
<h6 class="status-code status-code-2xx">2xx</h6>
75+
<h6 class="status-code status-code-3xx">3xx</h6>
76+
<h6 class="status-code status-code-4xx">4xx</h6>
77+
<h6 class="status-code status-code-5xx">5xx</h6>
78+
</div>
79+
<div class="chart-container">
80+
<canvas id="statusCodesChart" width="200" height="100"></canvas>
81+
</div>
82+
</div>
83+
<div class="container healthChecks">
84+
{{#each healthCheckResults}}
85+
<div class="health-check-row">
86+
<div class="health-check-title-column">
87+
<h5><a href="{{path}}">{{path}}</a></h5>
88+
</div>
89+
<div class="health-check-status-container {{status}}">
90+
<h1>{{status}}</h1>
91+
</div>
92+
</div>
93+
{{/each}}
94+
</div>
95+
<div class="footer">
96+
<p>Made with &#9829; with Socket.io & Chart.js</p>
97+
</div>
98+
</div>
99+
<script>
100+
var port = '{{port}}';
101+
{ { { script } } }
102+
</script>
103+
</body>
104+
105+
</html>

0 commit comments

Comments
 (0)