Drag-and-Drop Graph Trees (CDND 0.1b)
Moderators: Developers, Moderators
-
- Posts: 15
- Joined: Thu Mar 01, 2012 9:56 am
Drag-and-Drop Graph Trees (CDND 0.1b)
[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:
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 )
The main dialog appears as follows, with the source tree (available graphs) on the right, and the graph tree(s) on the left.
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
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.
Edit: The context menu will look a little different from the above, since the screen caps were taken with 0.1a
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:
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 )
The main dialog appears as follows, with the source tree (available graphs) on the right, and the graph tree(s) on the left.
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
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.
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.
-
- Posts: 15
- Joined: Thu Mar 01, 2012 9:56 am
Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)
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 468 times
Last edited by cjfournier on Thu Nov 27, 2014 12:11 pm, edited 5 times in total.
Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)
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!!!
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!!!
-
- Posts: 15
- Joined: Thu Mar 01, 2012 9:56 am
Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)
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... ), 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.)
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... ), 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.)
-
- Posts: 15
- Joined: Thu Mar 01, 2012 9:56 am
Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)
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.
$_SESSION["dhtml_tree"] = '1';
Looked at 'graph_view.php' one more time and noticed the toggle -- I've added the fix to the tarball.
Re: Drag-and-Drop Graph Trees (CDND 0.1alpha, WIP...)
Confirmed, that does seem to have fixed it! Nicely done!
-
- Posts: 15
- Joined: Thu Mar 01, 2012 9:56 am
Re: Drag-and-Drop Graph Trees (CDND 0.1b)
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?
Re: Drag-and-Drop Graph Trees (CDND 0.1b)
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
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 (40.11 KiB) Viewed 15814 times
-
- Posts: 15
- Joined: Thu Mar 01, 2012 9:56 am
Re: Drag-and-Drop Graph Trees (CDND 0.1b)
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.
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.
Re: Drag-and-Drop Graph Trees (CDND 0.1b)
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 (14.29 KiB) Viewed 15799 times
-
- Posts: 15
- Joined: Thu Mar 01, 2012 9:56 am
Re: Drag-and-Drop Graph Trees (CDND 0.1b)
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?
Re: Drag-and-Drop Graph Trees (CDND 0.1b)
Ah, yes it's due to my devices. Thank you very much for all the help and this plugin is very nice.
-
- Posts: 15
- Joined: Thu Mar 01, 2012 9:56 am
Re: Drag-and-Drop Graph Trees (CDND 0.1b)
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.
Re: Drag-and-Drop Graph Trees (CDND 0.1b)
is there new version announced?
Who is online
Users browsing this forum: No registered users and 0 guests