Add server monitoring graphs

This commit is contained in:
DeathByDenim 2022-02-06 20:34:02 -05:00
parent 231569c8c6
commit b172dbe1bb
6 changed files with 108 additions and 2 deletions

View File

@ -32,7 +32,7 @@ apt install --assume-yes \
python3-dev apt virtualenv python3-virtualenv libjpeg-dev zlib1g-dev \
fuse hedgewars g++ gcc curl firewalld automake autoconf libtool \
libcurl3-dev libc-ares-dev zlib1g-dev libncurses-dev make python3-aiohttp \
nginx-core certbot python3-certbot-nginx sudo
nginx-core certbot python3-certbot-nginx sudo python3-psutil
# Create the user for running the game servers
if ! getent passwd ${systemuser}; then
@ -60,4 +60,7 @@ cp console2web/console2web.py /usr/bin/console2web
"$(dirname "$0")"/scripts/deploy_teeworlds.sh
"$(dirname "$0")"/scripts/deploy_unvanquished.sh
"$(dirname "$0")"/scripts/deploy_xonotic.sh
# Deploy web interface stuff
"$(dirname "$0")"/scripts/deploy_monitoring.sh
"$(dirname "$0")"/scripts/deploy_webserver.sh

View File

@ -0,0 +1,22 @@
#!/bin/bash
git clone https://github.com/DeathByDenim/d3-serverstats.git
cd d3-serverstats
cp serverstats.py /usr/bin/
cat > /etc/systemd/system/serverstats.service <<EOF
[Unit]
Description=Server monitoring
After=network.target
[Service]
ExecStart=/usr/bin/serverstats.py
Restart=on-failure
User=${systemuser}
[Install]
WantedBy=multi-user.target
EOF
systemctl daemon-reload
systemctl enable --now serverstats

View File

@ -38,7 +38,7 @@ patch /etc/nginx/sites-available/default <<EOF
# Default server configuration
#
server {
@@ -121,6 +126,30 @@
@@ -121,6 +130,30 @@
try_files \$uri \$uri/ =404;
}
@ -65,6 +65,10 @@ patch /etc/nginx/sites-available/default <<EOF
+ proxy_set_header Connection "Upgrade";
+ proxy_set_header Host \$host;
+ }
+
+ location /monitoring/ {
+ proxy_pass http://localhost:9000/;
+ }
+
# pass PHP scripts to FastCGI server
#

View File

@ -0,0 +1,14 @@
.cpu {
stroke: hotpink;
stroke-width: 3px;
}
.mem {
stroke: darkgreen;
stroke-width: 3px;
}
.graph {
}
.graphframe {
stroke: black;
fill: none;
}

View File

@ -4,7 +4,10 @@
<meta charset="utf-8">
<title>Game server</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/serverstats.css">
<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="js/serverstats.js" charset="utf-8"></script>
</head>
<body>
<nav class="container">
@ -47,6 +50,24 @@
<noscript>
Live stuff requires JavaScript unfortunately
</noscript>
<h6>CPU</h6>
<div class="graph">
<svg id="cpugraph" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect class="graphframe" x="0" y="0" width="301" height="100" />
</svg>
</div>
<h6>Memory</h6>
<div class="graph">
<svg id="memgraph" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect class="graphframe" x="0" y="0" width="301" height="100" />
</svg>
</div>
<script>
d3.select('#cpugraph').attr('viewBox', '0 0 310 100');
d3.select('#memgraph').attr('viewBox', '0 0 310 100');
update();
setInterval(update, 5000);
</script>
</div>
</div>
</div>

42
website/js/serverstats.js Normal file
View File

@ -0,0 +1,42 @@
let heightScale = d3.scaleLinear()
.domain([0,100])
.range([100,0]);
let timeScale = d3.scaleLinear()
.domain([0,60])
.range([5,305]);
function updateGraph(data, svgid, property_class, property) {
d3.select(svgid)
.selectAll('line')
.data(data, function(d) {return d.t})
.join(
function(enter) {
return enter
.append('line')
.attr('x1', function(d,i){return timeScale(i)})
.attr('x2', function(d,i){return timeScale(i)})
.attr('y1', function(d,i){return heightScale(0)})
.attr('y2', 100)
.attr('class', property_class);
},
function(update) {
return update
},
function(exit) {
return exit.remove();
}
)
.transition()
.ease(d3.easeLinear)
.duration(5000)
.attr('x1', function(d,i){return timeScale(i-1)})
.attr('x2', function(d,i){return timeScale(i-1)})
.attr('y1', function(d,i){return heightScale(d[property])})
}
function update() {
d3.json('https://play.jarno.ca/monitoring/all').then(function(data){
updateGraph(data, '#memgraph', 'mem', 'm');
updateGraph(data, '#cpugraph', 'cpu', 'c');
});
}