Help save net neutrality! Learn more.

SVGs of a network in eaglemode

  • Mark McCorkle

    Mark McCorkle - 2011-07-15

    It just hit me that I could design very complex SVG files (both by hand and programmatically) that have images and text details for each of the entities in my (overly complex) network of physical / virtual / and  hosted "cloud" servers and services. 

    Then it hit me that I could draw a server (again programatically) with all of his discoverable metrics on things like network, memory, cpu, and disk usage.  I'm playing with this idea over the weekend to see if it will actually do me (or others) any good to see their machines with all the physical and virtual resources visually together.  I'll be using color and scale to highlight metrics that are above the normal for that metric - so that when you zoom down to a group of servers, the largest server will be the one with a "swollen" resource.  Zooming down to that server's internals, you'll see the individual metrics that are being stressed more than normal as larger than all the other metrics of the other resources. 

    So, for an example, if you have 3 servers, server1, server2, server3, and each has 1 cpu, 1GB of ram, and a single 1TB disk, and the cpu load on server2 is much higher than the load on the other boxes, the view will look like the following:

    Then if you drill down a little lower, you will see the actual metrics of the cpu load like this:

    The other view, which I'm still working out how I will draw it, is one that gives you all your servers over time - perhaps in a file reel like view where each frame of the film will be a slice in time.  Since I can get all this information from any standard linux distro by install the the sysstat package and looking at raw sar data, gathering and parsing that into these SVGs. 

    Are there any limitations to the svg plugin with EagleMode 0.82 that I should watch out for? 

  • Oliver Hamann

    Oliver Hamann - 2011-07-15

    Very nice examples!

    … to your question: yes, unfortunately, there are two limitations:

    Deep zooming (= large scaling) is not displayed correctly. I think the reason is that librsvg converts object coordinates to integer before clipping, and thereby it comes to integer overflows.

    When zooming into objects with color gradients, the rendering gets slow or even extremly slow. It is so bad that the plugin process may hang for a long time without updating any SVG display - you see "wait" or the hour glas in all SVG files, It seems like librsvg renders objects with color grandients completely in memory or functional, before clipping. => Maybe you should remove those nice color gradients. Just try it out.

  • Mark McCorkle

    Mark McCorkle - 2011-07-15

    I'm on an Intel dual core 2.2Ghz Thinkpad with an Intel graphics card, and the behavior for the very slight zooming that I'm doing at this point is very usable.  I did a quick screencap showing off EagleMode plus my little nagios plugin and the rendering of the svg outputted from my svg drawing app.  I'll email you the URL as I don't know how to remove private information from the video and I'm too lazy to look it up right now, as I'm more interested in focusing on functionality than on "how do I edit videos and blur our IP addresses" today :-D

  • Oliver Hamann

    Oliver Hamann - 2011-07-16

    Thanks for the video! It is in fact more expressive than screenshots. First, the "camera-follows-mouse" feature of the recording irritated me a little. But I can imagine that the functionality of the nagios plugin is already in a quite usable state. Do you have a plan how to integrate the SVG pictures so that individual servers can be commanded? I am afraid this is impossible with the current state of emTreeDump (except you create one SVG picture per server).

  • Mark McCorkle

    Mark McCorkle - 2011-07-17

    Oh yeah, that camera following the mouse was just so that I didn't have to change my screen resolution.  I'm kind of new at this whole capture video of my desktop thing.  I'll figure out a way to avoid that when I make a real video to share.  I might be able to add in some obfuscation data into my code that generates the treedump file. 

    As for the state of the whole set of code, it is missing a few major features, like grouping the hosts by hostgroup (a data structure from Nagios), and I want to be able to execute whatever nagios check generates an error live (via your very handy command button), and then I think I can say its ready to see some use out in the wild. 

    As for the svg graphics, SVG itself does have an "a" tag, just like html ( but I don't think the SVG plugin honors that (or at least it doesn't on my machine right now). The SVGs will be broken up into a few different views:
    1) view of all the machines grouped together (the screenshots above with server1, server2, and server3)
    2) viewed as a detail view of each machine (to replace the image of a web page that I'm showing here:
    3) viewed per host as a time line

    I'm still working on how to visualize number 3, but I know where I'm getting the data, and I think I'll use the tmpConvert method you provide to keep the user from doing it carelessly (it will require keys for your server, and copying all the sar data from there to your local host for svg rendering).

    Once I'm done with all that, I think I'll call this my .1 release of all these pieces and package them up to share. 

  • Oliver Hamann

    Oliver Hamann - 2011-07-18

    Indeed, the SVG plugin does not support the A tag. It would also be difficult to implement, because the base library (librsvg) even does not support it.

  • Mark McCorkle

    Mark McCorkle - 2011-07-18

    I browsed through the bugzilla for librsvg, and I don't see where anyone has reported the missing a tag ( - so that might not be something worth following for now.  Even a ready only view of the data in the SVG format will be useful, so I'll likely forge on, but I'll see if I can find someone to contact over at the gnome project to suggest they add that to librsvg.  Will it be a large effort on your part if they add it? 

  • Oliver Hamann

    Oliver Hamann - 2011-07-20

    I think the effort will not be too large. Ideally, librsvg would have a function which takes the coordinates of a point, and which returns the URL of the A tag (if there is one) and maybe the coordinates of a highlight rectangle.

    Then we could define a special URL which executes a command like in emTreeDump.

    But a problem would be security: It may be too insecure if a simple mouse click in a document executes any command in user space. The user should be asked if he trusts the document. And Eagle Mode should remember the document by a cryptographic checksum for not asking every time again. This may take a little more development effort.

    But for a first quick solution the SVG commands could be disabled by default, and there could be an environemnt variable for enabling by advanced users (trust all or none…).


Log in to post a comment.