Nagios – Improve User Experience with SSI and Javascript


Hello everyone, today I want to show you a little improvement I found for this previous post. (Btw This post has the same prerequisites. So have a look at my posts Nagios – Use UTC and Nagios – Change date format too.) The problem with my previous solution was that you needed either Google Chrome or Mozilla Firefox with the Tampermonkey/Greasemonkey plugin to make it work. (And it would not work in Internet Explorer) And you needed to do this for every user who wanted this solution.

Ok. So here is the new solution. We will edit the Nagios web interface so that it will show date and time values in relative time on all browsers for all users.

Ok. Let´s get down to business 🙂 (Btw I did this on Ubuntu 14.04.2)

Prerequisites:

You need to download the following scripts first to make my RelativeTime.js Script work:

Now create a new folder in “/usr/local/nagios/share/js” to store your custom Javascript files: (I called mine custom)

sudo mkdir /usr/local/nagios/share/js/custom

Place moment.js and wgxpath.install.js into your “custom” folder.

And add the following script to your “custom” folder:

<code>function ConvertToRelativeTime()
{
wgxpath.install();
textNodes = document.evaluate("//text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

var regexString = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
var searchRE = new RegExp(regexString);

for(var i=0;i<textNodes.snapshotLength;i++)
{
var node = textNodes.snapshotItem(i);
node.data = node.data.replace(searchRE, moment.utc(node.data).fromNow());
}
}

document.addEventListener("DOMContentLoaded", function(event){
ConvertToRelativeTime();
});
</code>

(Remove the

<code>

and

</code>

tag.)

The script will look for UTC ISO8601 date time values and will replace them with relative date time values. Ok. Now go to “/usr/local/nagios/share/ssi” and create a new file called “common-header.ssi“. (If you create a file called “common-header.ssi” or “common-footer.ssi” it will add a header or footer to all cgi files. If for example you create a file called “status-header.ssi” it will add a header to the status.cgi file. Example here: http://nagios.fm4dd.com/pnp4nagios/docs/view/en_US/webfe)

<code><script type="text/javascript" src="/nagios/js/custom/moment.js"></script>
<script type="text/javascript" src="/nagios/js/custom/wgxpath.install.js"></script>
<script type="text/javascript" src="/nagios/js/custom/RelativeTime.js"></script>
</code>

(Remove the

<code>

and

</code>

tag.)

Now run the following commands to restart the Apache webserver and the Nagios service to apply the changes:

sudo service apache2 restart
sudo service nagios restart

Here is a picture how your web interface will look before you apply the script:

nagios_before_ssi

Here is a picture how your web interface will look after you applied the script:

nagios_after_ssi

And here is a picture after you applied the script in Internet Explorer:

nagios_after_ssi_internet_explorer

Here is some important information how I made my script work in Internet Explorer:

Important:

If you are using Internet Explorer please keep in mind that “XPathResult” will not work without solutions like “Wicked Good XPath“. And make sure that you are not using Internet Explorers Compatibility Mode otherwise the “DOMContentLoaded” function I use in my RelativeTime.js script will not work.

xpathresult_undefined_internet_explorer

internet_explorer_compatibility_mode

Well, that´s it. Now Nagios should display all date time values in relative time. I hope you liked my post and I hope to see you again next time 🙂

As always you can download my code from here.

Sources:

http://nagiosbook.org/html/ch13s02.html

http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery

http://stackoverflow.com/questions/23560438/xpathresult-is-undefined-in-ie11

http://stackoverflow.com/questions/15743049/xpath-incompatible-with-internet-explorer

https://github.com/google/wicked-good-xpath

http://google-opensource.blogspot.co.at/2012/09/wicked-good-xpath-faster-javascript.html

http://iswwwup.com/t/393167235ec7/javascript-wicked-good-xpath-evaluate-xpathresult-contains.html

http://nagios.fm4dd.com/pnp4nagios/docs/view/en_US/webfe

Advertisements
Tagged

One thought on “Nagios – Improve User Experience with SSI and Javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: