New Relic Wallboard
New Relic is a very good tool to monitor you servers and applications with a bunch of metrics och features. If you landed on this page you probably already use it so I want go into any more details on it. There are things I love about it and things I hate about it, the way it is with most tools you come across in your day to day work.
For monitoring we use the Health Map filtered to Hosts and related applications which gives us a great overview of the overall condition of the servers and the web applications running on them. Currently there is no customization for the sorting or the layout and no kiosk mode for a proper wallboard. When building a good wallboard for your support or NOC you want to add additional information and be conservative with the real estate, you want to fit all the information on one big screen so you get all the information you need in one glance. This is where New Relic doesn’t deliver as good as it does on other parts.
So this quick article will be about going from this:
To a proper wallboard like this:
Plattform
To run the wallboard I got a Raspberry Pi and hooked it up to a big wall monitor. The Raspberry Pi it self is running standard Raspbian with desktop installed. I will not go into details on how to set this up, there are plenty of articles on my blog and the internet about this. But there is some custom things I did to it to make sure it worked good as a wallboard.
Disable the screensaver
To make sure that the wallboard doesn’t shuts off or displays your photo album instead of your wallboard you need to disable the screen saver. You have this under the main menu:
If these settings aren’t available install screensaver manager.
[bash]sudo apt-get install xscreensaver[/bash]
Install VNC
For easy management install VNC so you can remote manage the wallboard without having a keyboard and mouse plugged in all the time.
[bash]
sudo apt-get install x11vnc
x11vnc -storepassword
[/bash]
Then configure it to autostart.
[bash]
mkdir /home/pi/.config/autostart
nano /home/pi/.config/autostart/x11vnc.desktop
[/bash]
Into the config file paste this:
[bash]
[Desktop Entry]
Encoding=UTF-8
Type=Application
Name=X11VNC
Comment=
Exec=x11vnc -forever -usepw -display :0 -ultrafilexfer
StartupNotify=false
Terminal=false
Hidden=false
[/bash]
Restart the Pi to verify that the autostart works. Now you can connect to the Pi via VNC with the password you configured.
Browser configuration
At this point you can run the New Relic Health Map as is if you like. Just hit F11 in the Chrome browser to go fullscreen. But you want to display additional information, right? The big problem I ran into setting this up was that New Relic Health Maps doesn’t want to run in iframes. Instead of trying that to work and then inject CSS into the iframe to fix the layout I decided to use the New Relic Health Map as a base for the whole thing. To be able to manipulate the layout I installed a chrome extension named CSS and Javascript Injection. This plugin allows me to inject any CSS and Javascript into the page after it’s loaded.
CSS magic
By using the Inspect feature in Chrome I came up with this CSS to get rid of everything but the “server cubes”. The second line just set’s the zoom level of the cubes to make them all fit on one page.
[css]
.AAAKAG-nr-css-App-header, .prt-ControlBar, .prt-EntityListHeader, .AAAKAG-nr-css-App-footer { display:none;}
#root {zoom:71%}
[/css]
Now we have only the “server cubes” showing but now I want to inject the rest of the information.
Inject an iframe
The rest of the information we want to display is generated from a few different systems. One internal for installation bookings, jira and also the local tram and buss times outside the office. All this is generated on a webpage on an internal webserver. I will not go into detail about that setup but how we actually inject the information at the top of the page. Since New Relic uses jQuery we can attach to that to load additional information. So in the Javascript tab of the plugin I have this:
[js]
$( document ).ready(function() {
$(‘https://supportwallboard.company.com/‘)
.prependTo(‘body’);
});
[/js]
To get the iframe to display properly I also add this line of CSS.
[css]
#suppinfo {width:100%; height:60px;}
[/css]
I load this from a https source to prevent any warnings or blocking by the browser. The webpage loaded in the iframe will reload it’s information via jQuery json requests every minute to prevent flickering. The New Relic Health Map will reload it’s information the same way it always does.
Now all we need to do is hit F11 and the wallboard is up and running!
Tips and tricks
The solution above is simple and easy but it took some testing and thinking to figure out this approach. I few things I found along the way that will help make the day to day use of the wallboard easier.
- Check the “keep me logged in for two weeks” on the New Relic login page.
- Create a separate login in New Relic for the wallboard with very limited rights, then save the credentials in the wallboard browser.
- If you build a custom page for the top iframe put a clock in the top right corner and load the time from the server with the json requests. This is a simple way to see if the information doesn’t load and have gone stale.
- Talking to several API’s on the server side of the iframe ignore all errors and just continue in the code otherwise one API error will mess up the whole information strip. Instead catch all errors, log them and set a bool flag on the json response named error = true. I use that to turn the clock in the top right corner red if there is any errors. Then I can go in and check the logs while all the none error information loads as it should.
Hackviking aka Kristofer Källsbo 