Better UX on the Nagios web interface using the corewindow parameter

If you now open /nagios/index.php?corewindow=nagios/tac.cgi the index file will open the Tactical Overview screen. Nice!

Functionality restored using the default installation. Perfect!

But can we improve things?

While looking for documentation for the corewindow parameter, I stumbled over Custom CGI Headers and Footers on the Nagios documentation. It seems the CGIs can load files and embed them in the HTML page...

This is brilliant. We can use some low key JavaScript logic to automatically update the browser location bar to add the corewindow parameter with the right link to the CGI.
This way, the location bar will always show a link to the specific view we're looking at right now and can be easily copy and pasted. No more right-click->frames->copy-frame-link dance.

This means we can create a file /usr/share/nagios/html/ssi/common-header.ssi drop some Javascript in there that handles the updates of the location bar and we're done. Awesome. The code needed is super simple:

<script>
        /*
         * Update the browser location bar to ensure ?corewindow= always contains the URI
         * to the current page.
         *
         * This allows a reload to reload the same page rather than going back to the main
         * frameset.
         */

        // Get the current URL of the parent window (assuming the frame is nested within it)
        var parentUrl = window.parent.location.href;

        // Get the path of the file from the current URL of the frame
        var filePath = window.location.pathname;

        // Remove the first slash from the path name
        filePath = filePath.substring(1);

        // Get any query string parameters passed to the file
        var queryString = window.location.search;

        // Remove any existing corewindow parameter from the query string
        queryString = queryString.replace(/(?:&|\?)corewindow=[^&]*&?/g, '');

        // Construct the new query string with corewindow as the first parameter
        var newQueryString = 'corewindow=' + filePath;

        // Append any existing query string parameters
        if (queryString) {
            // Emcode only the '?' and the '&' component of the path.
            newQueryString += encodeURIComponent('?') +
                queryString.substring(1).split('&').join('%26');
        }

        // Construct the updated URL with the new query string
        var updatedUrl = parentUrl.split('?')[0] + '?' + newQueryString;

        // Replace the URL of the parent window with the updated URL
        window.parent.history.replaceState(null, null, updatedUrl);
</script>

And done, now clicking inside the Nagios interface will update the location bar to URLs such as https://nagios.example.com/nagios/?corewindow=nagios/cgi-bin/extinfo.cgi%3Ftype=2%26host=filer-cluster%26service=fs_%2Fdev%2Fvg%2Barc_vol_000%2Flv%2Bn%2Blvarc_vol_00000 which is a link that opens the fs_/dev/vg+arc_vol_000/lv+n+lvarc_vol_00000 service on the filer-cluster host. Easy to share. Perfect.

Unfortunately, this solution is as close to perfect as we can build it using the shipped functionality, but it's not 100% perfect.

• This only works for .cgi files. The main.php file will not load the SSI file and thus it won't update the URL.
  Not problematic in the grand scheme of things but a minor nitpic.
• Not all .cgis actuall load the SSI files. The map.cgi doesn't.
  Also not super problematic because the map is not really used by us. But YMMV.

Further reading:
Other people also have been using the SSI functionality to embed funky Javascript functionality. https://theezitguy.wordpress.com/2015/08/16/nagios-improve-user-experience-with-ssi-and-javascript/ is a good example.