A peek behind the Icinga web interface

You’ve probably already seen the paparazzi shots, but the real sneak preview is here. In the lead up to the Alpha release, we’ve put a lot of work in to the web interface – so we want your thoughts on our progress and plans. So, the Icinga web interface in a nutshell:

Ajax paradigm

We believe the major advantage of an Ajax driven web interface is that refreshes are only made to the relevant page areas as opposed to the entire page. Thus program load is significantly reduced while being also much more flexible. We expect this to also lead to faster search and configuration change times.

Widget architecture

We took some inspiration from iGoogle and Apple dashboards to design the web interface with flexibility and user customisation in mind. So Icinga’s interface is a loose collection of components we call Cronks which sit in a few containers (border, north, east and centre columns) on an open layout.

Cronks can be dragged and dropped around the screen, shown, hidden, minimised, resized and customised. Essentially widgets, these mini Javascript applications interact with the server to receive data and other information on user demand. They generally display specific and minimal information, which makes them also easily extensible. We like them because they break down check results into manageable chunks to be displayed when wanted, instead of overwhelming the user with a screen full of 20 different pieces of blinking information.

So these Cronks can be dragged and dropped into panels, tabs and containers much alike gadgets on an iGoogle page or Apple dashboard, offering the user flexible control over their interface.

Growl-like pop up notifications

Similar to the Apple notifier, balloons emerge on the browser margins to directly inform the user of changes. This kind of global notification system offers multiple notifications from multiple sources – which we believe is perfect for monitoring.

ExtJS, Json and CSS

Behind all the features on screen we have endeavoured to create a flexible and open layout from the outset which has been easily achieved with CSS and ExtJS Javascript library. In our opinion, ExtJS is one of the best libraries around, offering many features, while being easily extensible and independent of external libraries. Json was naturally our choice for data exchange between the server (PHP, Agavi), framework and Cronks, being itself native Javascript.

The thinking behind the Icinga web interface was flexibility, speed and customisability. We wanted to give the user the freedom to mould their interface to suit their needs. Let us know if you think we’re on the right track in the comments.