Adding LibreNMS graphs to my blog

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.

#!/bin/bash
header='X-Auth-Token: LOL-not-showing-you-this'
python3 gen_date_png.py

curl -H "$header" https://MYLIBRENMSIP/api/v0/devices/AMS1BR1/device_ping_perf --output /home/MYUSER/temp_charts/AMS1BR1_ping.png

curl -H "$header" https://MYLIBRENMSIP/api/v0/devices/OSR1BR2/ports/tun2/port_bits --output  /home/MYUSER/temp_charts/OSR1BR2_tun2.png

ssh MYUSER@MYSRV "rm -rf /home/MYUSER/site/assets/img/graphs/"
scp -r /home/MYUSER/temp_charts/ MYUSER@MYSRV:/home/MYUSER/site/assets/img/graphs/

I just use cron to run it every 10 minutes.

*/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:

from PIL import Image, ImageDraw, ImageFont
from datetime import datetime

# Get current date and time in UTC
now_utc = datetime.utcnow()

# Create a new image with a white background
image = Image.new('RGB', (800, 200), 'white')
draw = ImageDraw.Draw(image)

# Choose a font and size (increased font size)
font = ImageFont.load_default()
font_size = 144

# Define the text to be written
text = "Graphs last updated on:\n" + now_utc.strftime("%Y-%m-%d %H:%M:%S UTC")

# Calculate text position to center it in the image
text_width, text_height = draw.textsize(text, font=font)
x = (image.width - text_width) / 2
y = (image.height - text_height) / 2

# Add text to the image
draw.text((x, y), text, font=font, fill=(0, 0, 0))

# Save the image as a PNG file
image.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.

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.