One thing that has always bothered me about monitoring systems is that they all look the same, boring and drab. Endless tables with eye melting colours when everything goes wrong. Obviously these have all been born from the NOC's of the world where fun and happiness are banned.
Look at all those employee's, look at how much fun they're having! Wait a minute...
But why does it have to be that way for everyone else? I know at my work we don't have some elaborate NOC like AT&T do, we have one old Mac on a shelf which displays the output of some monitoring software. It looks, ok I guess, but there's always the danger of a client in our office, and it's not exactly the most client friendly display since it is showing our downtime for the past day/week/month. So why do we use it? No choice really, there's nothing out there which is nice, or rather, that we have the complete freedom to change.
So what are the options?
- Keep looking for some software that doesnt look like it was made 10 years ago
- Make your own!
- Stop acting like an idiot, deal with it
Since i'm a developer, let's face it, i'll go for the second option. But what now? Building the code to monitor services is easy, but the interface is the real problem, how'd you make something that's client friendly, yet still able to make it obvious enough that something's gone wrong and that someone should probably do something before the phones start ringing.
Well, since we have the entire screen of the monitor to play with, why not use it all? So let's recap...
- Look good
- Client friendly
- Visual alerts
- Minimal text
- Convey multiple data sets of different value ranges
- Full screen
- FUN
Ok the last one might be a bit of a hard task but let's give it a go.
So the white drab tables are out, and since we all live in the web 2.0 fancy flashy age, let's make it slightly animated just for kicks. For starters let's take a nice big image and set that as the background...
Now that's a nice pleasant landscape, green grass... blue skies... the perfect outlook. So let's try to keep it like that, we'll have none of this weather changing thunder and lightning crap (at least for the time being, it does sound like nice idea, if not a little Disney like).
With that, now we need something to visually indicate something were monitoring since we can't use any text. Let's go with...
Aww, a pretty balloon! Don't we all remember these from those happy fun times long ago. Where there was cake, and fizzy drinks, pass the parcel... yeah... anyway! Balloons are fun happy things that we don't tend to associate with things going wrong, so it's perfect for being client friendly since when everythings working all they'll see are balloons.
So once we take several colours of balloon we can use colours to either associate with particular systems, or types of system. So say, green for mySQL servers, red for routers etc etc. Now placing this flat on our lovely landscape just won't cut it, it's not natural and would just look plain stupid, as we need to let balloons do what they do best! Float!
Now quite clearly we can't just let them float all over the place, since then we won't know what's going on at all. So let's just say these balloons all have the perfect ratio of gases to keep them at a certain height...
Tada! Ahh bliss, ok, so we give them some animation so they gently (note, really gently, not like some force 5 storm is raging just off screen) enough so that they slowly move to the left and right. So now we have a landscape that has some balloons, fantastic, but right now pretty useless, since well, nothing happens.
But that's good, this would be the default state for the system, just a nice image, some balloons, and thats it. We don't need to display anything more at this point, and to anyone who were to go past the monitor, they'd probably think that it was a nice screensaver, bonus!
With this now, how can we show something failing, or not performing up to par. Well since all the balloons are starting at the top as a default state, we can simply just let the balloons float towards the floor if something is wrong. Since there's no scales here, you could really do whatever you wanted, for example, if a site was responding slowly, you could move the balloon half way down, or a percentage of the way down depending on just how bad it really is.
Add in a comedy sound effect to get peoples attention such as a balloon having air let out and we have a much more fun sytem than we did before. Now you could take it one step further from just a lower placement of the balloon to something like this...
Obviously this might be a little too much info (needless to say that tooltip is a bit too big), and it's almost certainly breaking the minimal text rule, but this is just an example. You could just cut it down to being just the name, since then you could just login and check the system as you normally would.
I think this is all quite easily achieveable and actually quite a nice way of looking at things. I do plan to create this system mainly just to make it a reality rather than it's current state, which is a few images and some javascript for animation. I can't really imagine it taking much effort to create a fully fledged system in the back to manage this. Each balloon would just need to poll an API every so often for updates and current status. But if it doesn't work, hey then it doesn't work, but no one could acuse me of not trying at least!
So hopefully soon i'll be able to get something in a working state for people to see and ultimately use for themselves. I'll try to post updates on here about it, but incase I end up getting writers block, keep checking my GitHub account, the code will be freely available on there for everyone...
...just as soon as I come up with a good name for it anyway... :) Suggestions welcome!