Drag-and-Drop Graph Trees (CDND 0.1b)

Announcements concerning Plugins for Cacti

Moderators: Moderators, Developers

Post Reply
Author
Message
cjfournier
Posts: 15
Joined: Thu Mar 01, 2012 9:56 am

Drag-and-Drop Graph Trees (CDND 0.1b)

#1 Post by cjfournier » Fri Nov 07, 2014 1:14 pm

[Edit, Aug 27, 2015: Anyone considering this plug-in should wait a couple of days -- I have the next version ready to go, and it contains several new features and fixes. It is also being renamed 'TreeDnD', so keep an eye out for it! - CF]

I thought I would make my drag-and-drop graph tree plugin available. While it still needs a little finessing, my feeling is that it's a workable product. Even though similar functionality is going to appear in a future release, I thought it would be a good learning opportunity.

As forewarning, it installs like a standard plug-in, but the back-end is a Perl CGI. This will likely require some additional server tweaking (installing Perl if it isn't there, as well as configuring Apache to handle CGIs, etc.) -- That said, it's not a seamless integration with Cacti (like most other plugins), but this will be an objective.

It also purposely omits some functionality that exists with the original 'Graph Tree' handler -- Namely, the 'host' and 'sort' options. On the former, it was a convenience function that saved having to add multiple graphs to a branch. With DnD, the same is done by simply dragging the host to the target branch on a tree (and the graphs go along with it.) With regard to sorting, the source tree is mostly sorted (some finessing required), but obviously being able to quickly move stuff around eliminates this need.

In any case, here we go: Drop the tarball into the plugins directory, and extract. Make sure Perl, and the requisite libraries are installed (and again, make sure Apache has ExecCGI and an 'addHanlder' for CGI scripts.) Try running 'cdnd.cgi' from the command line, and if it complains about something obvious, it need be fixed (again, most likely library installs.)

Enable the plugin as per usual:
plugin_enabled.png
plugin_enable
plugin_enabled.png (50.07 KiB) Viewed 7447 times
On the Management Menu, you'll now see 'Graph Trees (DnD)' -- As option, there is a setting on the 'Misc' settings tab to re-write the Management menu (I mostly did this for myself :) )
settings.png
settings.png (28.72 KiB) Viewed 7447 times
The main dialog appears as follows, with the source tree (available graphs) on the right, and the graph tree(s) on the left.
main.png
main.png (104.35 KiB) Viewed 7447 times
I might suggest trying this out on a non-production server first. The plugin uses the 'Fancytree' jquery library -- while this has excellent targeting cues, it takes a little getting used to.

There are a couple of very important points to make:

- Changes are not atomic -- All changes require a 'commit', before any data is touched

- Existing tree data in the database will be wiped on every commit. In other words, whatever is in the web page gets pushed to the database.

The inherent flexibility of DnD allows for very quick changes to tree structures, while making updates to the database each and every time could prove taxing (and potentially, delayed response via the interface.) My thought was that a 'commit' practice allows for a little more buffering. On the second point, it would be very challenging to try and merge every single change into existing tree data (in the db) -- Since what's on the screen represents the desired configuration anyway, a commit just deletes existing graph tree data in the database, and replaces it with the new.

Warning: As I mentioned before, I purposely chose not to include accommodation for 'host' mode - If you have any of these in your existing trees and do a 'commit', they will get vaporized (and appear as funny, half-formed entities in the tree.)

Since I do not want to be responsible for mangling anyone's existing trees, I also included an auto-backup feature with every commit. This generates pure (My)SQL that would restore the graph tree data prior to it being summarily replaced. If there is a want/need to restore, simply feed the data into 'mysql' from the command line.

While it's supposed to include keyboard shortcuts, I'm still working on that one -- In the interim, adding headers and/or branch/node delete is done via context menu (right-mouse click.)

Edit: 0.1b has working hot-keys, since the issue turned out to be issue with jQuery-UI 1.11.1
cacti_cdnd_9.png
cacti_cdnd_9.png (111.11 KiB) Viewed 7447 times
Upon any change, the 'Commit' button will begin flashing as reminder that a push is required. Upon committing changes, there should be indication of success and a reference to the backup's name.
cacti_cdnd_10.png
cacti_cdnd_10.png (193.24 KiB) Viewed 7447 times

Edit: The context menu will look a little different from the above, since the screen caps were taken with 0.1a
Last edited by cjfournier on Thu Aug 27, 2015 7:42 am, edited 3 times in total.

cjfournier
Posts: 15
Joined: Thu Mar 01, 2012 9:56 am

Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)

#2 Post by cjfournier » Fri Nov 07, 2014 1:27 pm

And finally, here is the plugin (Note: This is a rev bump with some fixes/updates)
Attachments
cdnd-0.1b.tgz
(2.05 MiB) Downloaded 308 times
Last edited by cjfournier on Thu Nov 27, 2014 12:11 pm, edited 5 times in total.

ChrisHem
Posts: 6
Joined: Wed Mar 24, 2010 8:24 am

Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)

#3 Post by ChrisHem » Wed Nov 12, 2014 3:06 pm

Awesome job! By far exceeds what I was considering doing on my own! :)

I installed the plugin as you described, and made sure the perl module was working (had to install 2 packages, no big deal).
Installed & Enabled the plugin in Cacti, and went running off to the Graph Trees (DND) view.

Made a few changes to my existing config, clicked commit, and went over to the Graphs tab...
Aaaaannd all my graphs are gone. (Clarification: the graphs themselves still exist, as do the data sources. But when I'm in the Graph Tree View, I see the folders, but none of the graphs.)

Now, I waited a few minutes and started perusing the Graphs again, and bloop, they came back. Is there some sort of time delay on the refresh?
Or maybe it has to wait a polling period before it refreshes the Graphs view?

Thanks again for making Cacti SO MUCH FRIENDLIER!!! :)

cjfournier
Posts: 15
Joined: Thu Mar 01, 2012 9:56 am

Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)

#4 Post by cjfournier » Thu Nov 13, 2014 9:31 am

Yeah, sorry about the scare -- I have a minor warning about that in the 'readme'. I've observed the same behavior, but I have yet to fully understand what's happening; The tree(s)/graph data are all fine, while I caught that 'graph_view.php' has a caching mechanism built into it. I suspect this occurs because the script summarily replaces the tree data, and in some instances (if you re-order top-level trees, for example), it recalculates the OIDs. If the 'cache' says start at tree '2', when it's been renumbered to '3' -- No graphs. At least, that's what I think is happening. It doesn't occur every time, and as you observed, if you wait/open another browser, everything is fine.

There's still some tweaking to do: Getting the hotkeys piece of the library working, better sorting on the source tree (good, but not perfect -- It sorts on interface numbers, mostly... :D ), and de-highlighting multi-drop nodes (they show up as green following the drop, but doesn't affect operation.)

I'm also still getting acquainted with Martin Wendt's excellent Fancytree library, in those few moments when I'm not busy as a network engineer. I'd be keen to see the graphs tab use Fancytree in conjunction with the 'filter' extension, to help with faster tree navigation. I also think it'd be great if each header listed the number of graphs at that specific level. ;)

BTW, here's a (Fancytree) tip: You can double-click tree names and headers to go into edit mode (instead of using the context menu.)

cjfournier
Posts: 15
Joined: Thu Mar 01, 2012 9:56 am

Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)

#5 Post by cjfournier » Thu Nov 13, 2014 12:19 pm

Fixed the caching issue with one minor tweak: Added the following to the start of the 'cdnd.php' file, after the ~include auth bit:

$_SESSION["dhtml_tree"] = '1';

Looked at 'graph_view.php' one more time and noticed the toggle -- I've added the fix to the tarball. :D

ChrisHem
Posts: 6
Joined: Wed Mar 24, 2010 8:24 am

Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)

#6 Post by ChrisHem » Thu Nov 13, 2014 12:26 pm

Confirmed, that does seem to have fixed it! Nicely done!

cjfournier
Posts: 15
Joined: Thu Mar 01, 2012 9:56 am

Re: Drag-and-Drop Graph Trees (CDND 0.1b)

#7 Post by cjfournier » Thu Dec 11, 2014 11:33 am

I see a few downloads but no reports of any issues. I just deployed on a virgin install of 0.8.8c, and caught that the frames are jumping out of the native UI. While I look into this, are there any other significant issues/difficulties getting this working?

tippyp
Posts: 5
Joined: Mon Sep 15, 2014 10:50 am

Re: Drag-and-Drop Graph Trees (CDND 0.1b)

#8 Post by tippyp » Thu Mar 26, 2015 11:05 am

Hi,

I'm trying to test the drag and drop plugin. I got it installed but I'm getting an error message. Has anyone seen this error before?

The requisite perl libraries are installed:
- CGI
- DBI (w/mysql)
- JSON
- Sort::Key::OID

./cdnd.cgi
Content-Type: application/json; charset=ISO-8859-1
Attachments
cdnd.JPG
cdnd.JPG (40.11 KiB) Viewed 6584 times

cjfournier
Posts: 15
Joined: Thu Mar 01, 2012 9:56 am

Re: Drag-and-Drop Graph Trees (CDND 0.1b)

#9 Post by cjfournier » Fri Mar 27, 2015 8:51 am

I suspect Apache isn't allowing/configured to execute the CGI script -- Try invoking it directly through a browser, i.e. http://<yourhost>/plugins/cdnd/cdnd.cgi

This shoud dump a bunch of JSON listing the source nodes and graphs. If it doesn't, revisit your Apache config and make sure you have an 'AddHandler' for CGI scripts and the 'ExecCGI' option for the directory.

tippyp
Posts: 5
Joined: Mon Sep 15, 2014 10:50 am

Re: Drag-and-Drop Graph Trees (CDND 0.1b)

#10 Post by tippyp » Fri Mar 27, 2015 12:31 pm

Thanks, I got the graph tree to display but still seeing an error message for the Filter. Am I still missing some configurations, please help.
Attachments
dndfilter.JPG
dndfilter.JPG (14.29 KiB) Viewed 6569 times

cjfournier
Posts: 15
Joined: Thu Mar 01, 2012 9:56 am

Re: Drag-and-Drop Graph Trees (CDND 0.1b)

#11 Post by cjfournier » Mon Mar 30, 2015 7:44 am

Hmm -- Do you have any devices configured in your Cacti instance? The right hand pane lists your devices and their associated graphs, while the filter text box simply provides a quick search method (in other words, it hides entries that don't match the filter text.) I can see it throwing error if there aren't any devices configured. Are you using Cacti 0.8.8b?

tippyp
Posts: 5
Joined: Mon Sep 15, 2014 10:50 am

Re: Drag-and-Drop Graph Trees (CDND 0.1b)

#12 Post by tippyp » Mon Mar 30, 2015 9:17 am

Ah, yes it's due to my devices. Thank you very much for all the help and this plugin is very nice.

cjfournier
Posts: 15
Joined: Thu Mar 01, 2012 9:56 am

Re: Drag-and-Drop Graph Trees (CDND 0.1b)

#13 Post by cjfournier » Mon Mar 30, 2015 10:02 am

It's a work in progress, and definitely needs a few tweaks. I will make sure the next version provides a better status message when there are no devices. ;)

voyager
Posts: 20
Joined: Sat Jun 14, 2014 11:01 am

Re: Drag-and-Drop Graph Trees (CDND 0.1b)

#14 Post by voyager » Mon Feb 15, 2016 1:48 am

is there new version announced?

Post Reply