Computer Aquarium

Visualize the network traffic of your cloud computing fleet

Comment 1

What it does

The Computer Aquarium is a Python web app that will monitor the number of packets sent within your Google Cloud VPC. When it notices some packets have been sent, it will push a websocket message to anyone visiting the website. This websocket message tells the UI how to move the fish around the fish tank.

  • When traffic enters your VPC from the outside world, the fish "feed" on the traffic by moving to the top of the tank.
  • When traffic flows between two VMs, the fish representing those two VMs move closer together.
  • When traffic flows out of your VPC, the fish move towards the walls of the tank.

Applications

Companies often purchase big TVs and place in the developer spaces to show metrics. They commonly use products like Grafana to graph CPU, RAM, network traffic, etc.

But charts can be complex and boring to look at. There are many more ways to visualize compute metrics, one of which is creating a "computer aquarium". Additionally, Grafana is difficult to configure whereas this project only needs VPC Flow logs to be enabled and pushed to a pub/sub topic.

How I built it

  1. I deployed a VPC with 8 VMs on Google Cloud
  2. I created ansible playbooks to configure each VM to randomly send traffic to other VMs
  3. I created a Python webserver that listens to Google Cloud Pub/Sub for VPC Flow logs
  4. I designed a UI using Matter.js which displays the fish with realistic physics (so they bounce around the tank)

What I learned

How to configure VPC Flow Logs, how to use pub/sub, how to create good ansible-playbooks, how to serve files over the same port that's being using for websocket handling.

What's next for Computer Aquarium

  • Better UI: Matter.js supports drawing sprites, so I could label the fish and actually make them fish-shaped.
  • Efficiency: If your VPC sees a lot of traffic (>1000 rps) then the UI might slow down as it calculates thousands of forces and collisions.

Inspiration

Loosely based on https://xkcd.com/350/

Share this project:

Updates

posted an update —

The design of the webpage was a pretty rough proof-of-concept since I was short on time, so I just pushed an update that does the following things:

  • Stylized the page to use a consistent color scheme (no more blue fish in the blue fish tank)
  • Added a legend so you can tell which fish is which VM
  • Turned off the "bounciness" of the fish to make the aquarium less flashy, but easier to interpret (per one judge's request)

And on the backend, I also did the following:

  • Changed pub/sub message retention time to 10 minutes instead of 7 days. By now I had generated 2.4 MILLION pub/sub messages that absolutely do not need to be saved (!!!)

Log in or sign up for Devpost to join the conversation.