It is using Glance extension module (you can send custom HTML by setting up a local web api like Flask) The graph are HTML SVG tags which are basic drawing you just have to input the x,y coordinates of your graph (I copied Glance market chart) For networking data collection and monitoring I’ve setup my own rules and scripts but it is doable with others network monitoring tools if they let you access data easily
Yes the full recipe is:
Glance is cool I love the style and it is well implemented so you can easily add custom HTML and CSS which is what I did to do this custom monitoring. Data are gathered from iptables counters that periodically reset, the hardest and most interesting part was to understand networking and to track packet through applications based on if they were port binded or reverse proxyed (I use Caddy for web facing app I want access to without a VPN). I’ll definitively check more advanced solution, I just needed to do it manually first to actually understand what I’m doing (which took me like 2 weeks until I finally found this gem on ArchLinux wiki https://www.frozentux.net/iptables-tutorial/iptables-tutorial.html)
How i do it:
Wireguard for VPN endpoint on the pi and device that I have root on, secure, fast to setup and doesn’t add a lot of overhead
For access outside of VPN:
You might have to pay for a domain name if you dont have a static IP, which is relatively cheap.
You can manually allow trusted IP to access the service in your firewall which nullify surface of attack if done perfectly but is really an hassle to setup and maintain. I’m looking to setup Keycloack for a strong pre-auth that I can share between services and that is also lightweight (Authentik is not lightweight, Authelia seems to be i’d like to try it aswell) This coupled with firewall rules and/or fail2ban like service should be more than enough for a private server I think.