I use a map display of the office in Checkmk NagVis, with mainly client machines to get a general overview of their status. I used a similar map outside of NagVis, which shows placement of users, network outlets in the wall, etc. Thought it be nice if they could be combined, but turn on/off information layers when needed. Like how mapping services like OSM, Google offers too.
NagVis doesn’t have anything like that out of the box. So what to do to get similar functionality?
Didn’t want to interfere with code on the server and since I am currently the complete IT department, fixing it client side felt just fine. So went for a CSS approach with Stylus.
Stylus is a userstyles editor and manager. Stylus injects its own CSS into targeted pages and therefore makes you able to override the present design of a webpage. It has a Chrome, Firefox and Opera add-on.
I used Stylus with Chrome and Firefox in the past before. In short, you need to identify the CSS elements you want to influence and give an alternative CSS.
For example to hide a banner that promotes stuff. MS was nagging too much to use Edge when you visit MS sites with another browser than MS prefers. Injecting the CSS #epb{display:none} for URLs on the domain microsoft.com was enough to get rid of it. They still use the banner with same id, but to promote other less annoying stuff.
Back to NagVis, inspecting CSS elements, they sadly don’t offer the use of custom CSS classes to trigger whole groups of elements. They do assign an object id, hex code with string length of 6, that gets rendered into a CSS div element with same ID.
Object ID config in /omd/sites/[sitename]/etc/nagvis/maps/[mapname].cfg
define textbox {
context_menu=0
text=<font size="1" color="#FF0099">© 2x cat6 1x power<br></font>
x=478
y=49
w=100
h=20
object_id=37997d
border_color=transparent
}
Inspecting ID in Firefox Web Developer Tools (or use similar tool of Chrome)
So ‘just’ get the IDs you want in an ‘information layer’ to display them on/off with Stylus.
I used Notepad++ with copy of /omd/sites/[sitename]/etc/nagvis/maps/[mapname].cfg and did some regex magic.
I am no regex wizard, just an apprentice. Very likely regex can be optimized, but following works for me. (-:
In my example all network patch text boxes start with copyright sign ©, following filters all those text box config parts. In Notepad++ bookmarked all the lines with regex find define textbox \{[\s\S]*?©[\s\S]*?object_id=([[:alnum:]]{6})[\s\S]*?\}
I don’t want to worry about the other config parts, so copied bookmarked lines to a new file.
In new file, find and replace regex, find define textbox \{[\s\S]*?©[\s\S]*?object_id=([[:alnum:]]{6})[\s\S]*?\} replace #$1,
This grabs the object IDs and puts them in CSS ID format.
But CSS doesn’t allow an ID to start with a digit, so it needs to be escaped based on its Unicode base point.
Another find and replace regex, find ^(#)(\d){1} replace $1\\3$2 There is a space at the end on purpose.
This would give a list something like this:
#c15c52,
#\30 f313a,
#\31 5f233,
#\33 7997d,
#\31 7dfa1,
#\33 77b36,
Last line of the list, find , replace with {display:none} and CSS is ready for Stylus.
Using browser with Stylus add-on installed, visit NagVis map. URL ends with [mapname] same as cfg file, using this in Stylus.
Clicking on Stylus icon in browser, make a new Stylus rule, URLs matching the regexp (.*[mapname]$).
Paste your CSS code in there, using mine:
#c15c52,
#\30 f313a,
#\31 5f233,
#\33 7997d,
#\31 7dfa1,
#\33 77b36 {display:none}
Give it a name and save it.
Test it…
When Stylus rule is disabled, all network patch text boxes are still visible.
When rule is enabled, that info is hidden. Goody (-:
If you want this functionality in multiple clients, you need Stylus and rules set up per client / browser.
Enjoy!