Over the weekend I had the idea to add a tab onto my blog, to show some of the statistics I collect within my network

As I already run LibreNMS it was just a matter of creating a script on one of my Virtual Machines that will collect the graphs using LibreNMS API and then push them to my web server that runs Caddy.

Pulling the graphs

Here is (a simplified version) of the the main script graph_monitor.sh, that will pull the graphs from my LibreNMS instance, put them all into a temporary directory, then SSH into my web server and copy them over.

 1#!/bin/bash
 2header='X-Auth-Token: LOL-not-showing-you-this'
 3python3 gen_date_png.py
 4
 5curl -H "$header" https://MYLIBRENMSIP/api/v0/devices/AMS1BR1/device_ping_perf --output /home/MYUSER/temp_charts/AMS1BR1_ping.png
 6
 7curl -H "$header" https://MYLIBRENMSIP/api/v0/devices/OSR1BR2/ports/tun2/port_bits --output  /home/MYUSER/temp_charts/OSR1BR2_tun2.png
 8
 9ssh MYUSER@MYSRV "rm -rf /home/MYUSER/site/assets/img/graphs/"
10scp -r /home/MYUSER/temp_charts/ MYUSER@MYSRV:/home/MYUSER/site/assets/img/graphs/

I just use cron to run it every 10 minutes.

1*/10 * * * * /home/MYUSER/graph_monitor.sh

Date image

Obviously I was too lazy to figure out how to get an image with the current date and time for what was a quick fun weekend project. So I did the logical thing and asked ChatGPT to do it for me - the contents of gen_date_png.py were AI-generated, it is below:

 1from PIL import Image, ImageDraw, ImageFont
 2from datetime import datetime
 3
 4# Get current date and time in UTC
 5now_utc = datetime.utcnow()
 6
 7# Create a new image with a white background
 8image = Image.new('RGB', (800, 200), 'white')
 9draw = ImageDraw.Draw(image)
10
11# Choose a font and size (increased font size)
12font = ImageFont.load_default()
13font_size = 144
14
15# Define the text to be written
16text = "Graphs last updated on:\n" + now_utc.strftime("%Y-%m-%d %H:%M:%S UTC")
17
18# Calculate text position to center it in the image
19text_width, text_height = draw.textsize(text, font=font)
20x = (image.width - text_width) / 2
21y = (image.height - text_height) / 2
22
23# Add text to the image
24draw.text((x, y), text, font=font, fill=(0, 0, 0))
25
26# Save the image as a PNG file
27image.save('/home/MYUSER/temp_charts/current_datetime.png')

It's not looking pretty, the default font doesn't seem to take in the size. But it works and I will fix it in the future.

Last update time

Cache issue

Even though I altered my Caddyfile with Cache-Control header no-store it seems the graphs are still being cached client-side, requiring CTRL+F5 to refresh.

Again - hopefully will fix in the future.