Using Bootstrap Theme

For quite a while I have been using the basic jquery objects to build up a somewhat spartan RoseNMS. With the newer versions of TurboGears using bootstrap for the underlying CSS framework I thought there were plenty of bootstrap related themes, surely I can find one that suits.  The theme had to have enough examples to fit a Network Management System, rather than just a blog statistics page like most seem to do. It also had to have a license I could use as it forms part of RoseNMS.

After some searching, I have chosen the Gentelella bootstrap theme by colorlib. This is a nice clean theme that has plenty of example features which I can build into RoseNMS items.  It wasn’t just a matter of loading the theme and off you go; the various components needed to be converted into ToscaWidgets 2 widgets to be useful.

The Dashboard

Once you have logged in, the first page you will find is the dashboard. This page is supposed to give you a quick overview of what your network devices and servers are doing.  While the static image below cannot show it, the overview tiles at the top and the status doughnut graph are animated with a cute bounce when they appear.

Dashboard early 2016
Dashboard with overview and status widgets

One thing that may not be obvious, but the tile on the bottom-right shows the status of the threads that are used by RoseNMS. By using threads it means that one component of RoseNMS doesn’t block another.  As this is my development platform, the number of events is very small, which doesn’t show a pretty set of looping lines unfortunately.

Attribute Page

When you want to find more information about an attribute of a host, the attribute page appears. This is still early days with the page but shows some details about the attribute on the left, a graph on the right and the list of events at the bottom. The graph currently is not coloured and is a boring grey on grey but this will be a shade of blue and green once it is complete.

Attribute Status
Attribute Status


Besides the obvious change in the look of the graphs, these have undergone a lot of work. Currently I’m using the chart.js javascript charting library. These are nice looking but look good with beizer curves (so the curves are not 100% accurate) and they don’t auto-scale correctly, so the chart above has 1,000,000 bps rather than 1Mbps. I can either put the scaling code into the python back-end or change javascript libraries. What you cannot see from the graph or the dashboard is that the storage system used for them has changed from rrdtool to influxdb, but that’s for another post.

One Reply to “Using Bootstrap Theme”

Leave a Reply

Your email address will not be published. Required fields are marked *