Monitoring Servers at Saffron
Creating our own server monitoring panel.

At Saffron, 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.




System administration

Visual diagnostics

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.

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.

Design first

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.

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 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.SAFFRON.SO",
  address: "",
  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:

We had a lot of fun working on this project and we look forward to adding to it — let us know what you think!