New Feature: Detailed Traffic History Graphs for Each Peer

[eduardogsilva]

Hello everyone,

I’m excited to announce a new feature in wireguard_webadmin that allows you to view comprehensive traffic history graphs for each individual peer. This enhancement uses rrdtool to store traffic data in a lightweight and efficient manner—without the need for any additional complex services.

What’s New

• Traffic Graphs per Peer:
  Each peer now has its own traffic history graph displaying detailed statistics over time.

• Efficient Data Storage with rrdtool:
  I chose rrdtool for its ability to efficiently archive time-series data, ensuring optimal performance even with extensive historical data.

• Traffic Data Collection:
  Traffic is collected at 5-minute intervals, providing a good level of granularity for monitoring usage trends.

• Initial Data Availability:
  New graphs might take up to 15 minutes to display relevant data for the first time.

• Interface Traffic Computation:
  I’m also computing the total traffic for each instance’s interface, although this data isn’t displayed in the UI yet.

Upgrade Notes

• Update docker-compose.yml:
  Before upgrading, please update your docker-compose.yml file as indicated in the upgrade instructions.

• Configure TIMEZONE:
  It’s highly recommended to edit the .env file and set the TIMEZONE variable correctly (see .env.example for guidance).

• Follow Upgrade Instructions:
  Please refer to the [upgrade instructions] in the README to ensure a smooth transition.

I’m eager to hear your feedback on this new functionality.

Cheers!

[xgusto]

That's great news.
I just updated compose yml and deployed ver. 0.9901.
However, I don't see any options for client monitoring anywhere.

[eduardogsilva]

Hello @xgusto, it's not included in the main peer list. Click to edit the peer, and the graph will appear. It may take between 10 and 15 minutes for valid information to be displayed on the graphs. This delay is due to how rrdtool works, along with a specific setting designed to prevent graph spikes under certain conditions. I should also note that rrdtool is an extremely robust tool; in the past, I even implemented a traffic billing solution for a vSat ISP's clients using Cacti, rrdtool, and a series of bash scripts.

I plan to create dynamic graphs for the peer list in the coming days. Additionally, I need to develop a dedicated peer detail view instead of going straight into edit mode. There's still a lot of work to be done.

Cheers!

[xgusto]

I expected the graph to appear directly in the peer list.

I plan to create dynamic graphs for the peer list in the coming days. Additionally, I need to develop a dedicated peer detail view instead of going straight into edit mode. There's still a lot of work to be done.

I think we all wish for that.
Thank you for your work.

[eduardogsilva]

@xgusto I could draw the rrd graphs on the peer list, but, I believe that it may have some impact on bigger installations where the peer list is way longer.
Also, the rrdtool graphs are not really "fun". they are "static", and take at least 5 minutes to update. The objective here is to have an historical and persistent information.

My idea for the peer list, is to use the same js routine that update the "transfer" information, to feed a small chartjs graph on each peer.

This graph would be always empty on the page load, but will receive a new data point every X seconds (defined on the web refresh interval setting). The default is 20 seconds.

I'm also looking for extra help to improve wireguard_webadmin. 😉

Cheers!

[xgusto]

I'd love to help, but I'm not a developer.
Maybe I would add another button for each peer (see red circle).
If I clicked on the button, a pop up window with a graph would open.

[eduardogsilva]

Hello! I've made something similar to this.
Clicking on the device name, will now take you to a quick preview including the traffic graph and other information.

Cheers!

[dyvyak]

Hi, i tried tu update as follows:
I replaced original docker-compose.yml
wget -O docker-compose.yml https://raw.githubusercontent.com/eduardogsilva/wireguard_webadmin/main/docker-compose.yml
I made adjustments to ports i'm using.
then i ran docker compose down, containers was removed. the docker compose up -d , containers started but when i open webadmin page i get 502 Bad Gateway
nginx/1.27.3 . Am i doing something wrong?

[eduardogsilva]

@dyvyak, implementing the "current bandwidth" as counters is actually quite simple; all the necessary information is already available. I'll just perform the required calculations and leave a cliffhanger for implementing the real-time JS graphs in the future.

[eduardogsilva]

@dyvyak take a look on the current version: 0,9955 :D

[dyvyak]

Nice 👍 . One question, why do you limit web refresh interval to at least 10 seconds? For small deployments(like mine) it can do refresh more often. I tried to make speed test over vpn, which took 9 seconds and refresh occured one second later after download finished. :)

[dyvyak]

And also possibility to switch between MB / Mbps would be nice :D

[eduardogsilva]

@dyvyak I reduced the minimum web refresh interval to 5 seconds.
I believe that smaller values can lead to potential issues. So I will keep like this while I work on other features and maybe come back later for checking this again.
I also improved the Throughput display to use Mbps and Kbps only. Smaller values on both scales, will have 2 decimal digits.

Cheers!