135/netdisco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Device Neighbor Map can have max depth and VLAN filter

Browse Source
This commit is contained in:
Oliver Gorwits
2013-12-29 16:23:46 +00:00
parent aae7880311
commit 6079c7dfed
9 changed files with 99 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Netdisco/share/public/css/netdisco.css
View File

@@ -395,18 +395,6 @@ td > form.nd_inline-form {
display: none;
}
/* question mark image with popover for netmap instructions */
#nd_netmap-help {
position: fixed;
top: 160px;
right: 7px;
z-index: 1;
color: #555;
font-size: 20px;
cursor: pointer;
display: none;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* style customization for many items which appear in the sidebar */
@@ -416,6 +404,11 @@ td > form.nd_inline-form {
margin-bottom: 12px;
}
/* labels in simple sidebars */
.nd_sidebar-label {
margin-left: 7px;
}
/* fixup for prepended checkbox in sidebar */
.nd_searchcheckbox {
width: 121px;
@@ -567,6 +560,11 @@ form .clearfix.success input {
padding-top: 3px !important;
}
.nd_netmap-sidebar {
margin-top: 40px;
margin-left: -9px;
}
.icons-ul {
margin-left: 22px;
}

20
Netdisco/share/views/ajax/device/netmap.tt
View File

@@ -3,10 +3,6 @@
var winHeight = window.innerHeight;
var winWidth = window.innerWidth;
var tree = d3.layout.tree()
.size([360, winHeight])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
// links in the initial tree drawing use this generator
var treeLink = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
@@ -60,7 +56,10 @@ function to_class(name) { return 'nd_' + name.replace(/\./g, "_") }
// handler for clicking on a circle - redirect to that device's netmap
function circleClick(d) {
window.location = '[% uri_for('/device') %]?tab=netmap&q=' + d.fullname;
window.location = '[% uri_for('/device') %]?tab=netmap'
+ '&q=' + d.fullname
+ '&depth=[% params.depth | uri %]'
+ '&vlan=[% params.vlan | uri %]';
}
// handler for mouseover on a circle - show that device's real neighbors
@@ -92,7 +91,15 @@ $.getJSON('[% uri_for('/ajax/data/device/alldevicelinks') %]', function(data) {
neighbors_data = data;
// draw the tree
d3.json("[% uri_for('/ajax/data/device/netmap') %]?&q=[% params.q | uri %]", function(error, root) {
d3.json("[% uri_for('/ajax/data/device/netmap') %]?"
+ '&q=[% params.q | uri %]'
+ '&depth=[% params.depth | uri %]'
+ '&vlan=[% params.vlan | uri %]', function(error, root) {
var tree = d3.layout.tree()
// magic number "8" for scaling (network depth). seems to make things look right for me.
.size([360, (winHeight / 8 * (root['scale'] || 0))])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var nodes = tree.nodes(root),
links = tree.links(nodes);
@@ -171,4 +178,5 @@ $.getJSON('[% uri_for('/ajax/data/device/alldevicelinks') %]', function(data) {
}); // jquery getJSON for all connections
// vim: ft=javascript
</script>

11
Netdisco/share/views/device.tt
View File

@@ -1,16 +1,5 @@
<i class="nd_sidebar-toggle icon-wrench icon-large" id="nd_sidebar-toggle-img-out"
rel="tooltip" data-placement="left" data-offset="5" data-title="Show Sidebar"></i>
<i class="icon-question-sign icon-large" id="nd_netmap-help" rel="popover"
data-title="Neighbor Map Controls"
data-html="true"
data-content="
<ul>
<li>Click and drag to pan</li>
<li>Mouse-wheel scroll to zoom</li>
<li>Hover to hightlight neighbors</li>
<li>Click to view device's map</li>
</ul>"
data-placement='left' data-trigger='click'></i>
<div class="container-fluid">
<div class="nd_sidebar nd_sidebar-pinned">
<div class="well">

7
Netdisco/share/views/js/common.js
View File

@@ -95,7 +95,12 @@
$('#nd_sidebar-reset-link').attr('href', uri_base + '/device?tab=[% tab.tag %]&reset=on&' +
$('#ports_form')
.find('input[name="q"],input[name="f"],input[name="partial"],input[name="invert"]')
.serialize())
.serialize());
[% ELSIF tab.tag == 'netmap' %]
// form reset icon on netmap tab
$('#nd_sidebar-reset-link').attr('href', uri_base + '/device?tab=[% tab.tag %]&reset=on&' +
$('#netmap_form').find('input[name="q"]').serialize());
[% END %]
do_search(event, '[% tab.tag %]');

8
Netdisco/share/views/js/device.js
View File

@@ -19,14 +19,6 @@
// changes, and only reset when they submit or cancel the change
var dirty = false;
// show or hide netmap help button
if (tab == 'netmap') {
$('#nd_netmap-help').show();
}
else {
$('#nd_netmap-help').hide();
}
// activate modals, tooltips and popovers
$('.nd_modal').modal({show: false});
$("[rel=tooltip]").tooltip({live: true});

24
Netdisco/share/views/sidebar/device/netmap.tt Normal file
View File

@@ -0,0 +1,24 @@
<span class="nd_sidebar-title"><em>Neighbor Map Controls</em></span>
<input name="q" value="[% params.q | html_entity %]" type="hidden"/>
<div class="clearfix nd_netmap-sidebar">
<ul class="muted">
<li>Click and drag to pan</li>
<li>Scroll to zoom</li>
<li>Hover shows neighbors</li>
<li>Click to center device</li>
</ul>
<em class="muted nd_sidebar-label">Draw to Depth:</em><br/>
<input id="nd_port-query" placeholder="" type="number"
name="depth" value="[% params.depth | html_entity %]" type="text"
rel="tooltip" data-placement="left" data-offset="5" data-title="Max Depth"/>
<em class="muted nd_sidebar-label">Filter by VLAN:</em><br/>
<input id="nd_port-query" placeholder="" type="number"
name="vlan" value="[% params.vlan | html_entity %]" type="text"
rel="tooltip" data-placement="left" data-offset="5" data-title="VLAN"/>
</div>
<button id="[% tab.id %]_submit" type="submit" class="btn btn-info">
<i class="icon-pencil icon-large pull-left nd_navbar-icon"></i> Redraw Map</button>