At Phyramid, we like to build the software we need ourselves, without depending on third parties. This is important for us because we have complete control over our systems. It is also important for our clients, since they get complete privacy when it comes to their data, which is never shared with any third parties (e.g. Gmail, Dropbox etc.). We also host our own dedicated servers, utilising virtualisation in order to separate services and distribute load.

Every system administrator knows that even with an optimal architecture and load balancing systems you're exposed to downtime and server faults. Every network requires a monitoring system in order to provide relevant charts and alerts related to its status.

With 11 virtual machines (plus an external one that runs the monitoring system), we need to be instantly aware of any downtime or potential issues.

Heavy influenced by GMUNK's work , in particular the OBLIVION GFX montage shown below, we decided to use his visuals as the basis for our server monitoring panel's UI.

After experimenting with Nagios and Zabbix , we decided that Zabbix might be the best solution for us. The only issue is that self-hosted server monitoring solutions usually aren't the nicest things to look at. Even though the only people that use our internal software are our employees, we think it's important to have interfaces that represent and advance our business vision.

After playing around with these visual ideas, here's what we came up with:

Naturally, the starting point for this design was a very strict grid. To achieve this on the web, we tried to keep our vertical rhythm as precise as possible. All vertical sizes were defined using rems, where 1 rem represents a grid unit (the distance between two points). Additionally, while the server containers are rigid, they flow across the page to expand to the full width of the screen.

An essential part of this very futuristic look is a sense of complexity and visual intricacy. Despite this, we tried to make everything functional — everything should express something useful.

After installing Zabbix, we used the RESTful API it provides to access the server data. Here's what the Zabbix data looks like:

We extracted the information we needed from this rather large (~500K) response, and ended up with something usable which we could display using various gauges:

9: {...}, 10: { hostname: "ZABBIX.PHYRAMID.COM", address: "127.0.0.1", status: "online", kernel: "Linux ness 3.13.0-29-generic #53-Ubuntu", indexes: { cpu: { full-bars: 0, empty-bars: 10, value: "LOAD 0.0300/CPU" }, memory: { full-bars: 6, empty-bars: 4, value: "0.29GB/0.57GB", }, disk: { full-bars: 2, empty-bars: 8, value: "2.12GB/7.75GB" } } },

The backend was quickly built using express and a wrapper around request.js to facilitate fetching data from the Zabbix API.

And here's what we ended up with.

It suits our needs pretty well, and is quite nice to look at. We just needed a place to display it. So we bought a TV. Here's what it looks like now: