This is a simple project built over a few days to test out tech I was unfamiliar or not terribly well versed in. The idea was to create a modular visualization of log data (HTTP 200s, 5XXs, honeypot hits) and git commits, and offer some basic alerts when something goes wrong.

A simple Node.js server is pumping out fake log data in JSON format over a websocket via socket.io. This page is capturing that data and triggering page level events for every log item so that several loosely coupled modules can interact with them.

An Object Oriented Javascript library is capturing log events and storing them in its buffers. Every few seconds it draws onto a hidden canvas and then creates a PNG data URI. The PNG is appended to the 'real time' list. The idea here was to avoid having a long living canvas that had to be resized, as well as minimizing the amount of state kept within the library.

A React component is listening for honeypot requests and keeping track of the hits by IP address, geolocating them and displaying on the Google Map. The hit locations grow on the map, and the user has the ability to block each IP address. That library is here.

In addition to log events the Node server emits commit events that are displayed along the real time graph. If error levels increase significantly, the user can look to see if there's a causal relationship.

The log data is also output at the bottom of the page.

Source code available at github.com/ejmalone/yad.