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

sidebar with many options!!

Browse Source
This commit is contained in:
Oliver Gorwits
2017-12-21 23:54:44 +00:00
parent 4203cbb225
commit 1def41da67
10 changed files with 1491 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
share/views/ajax/device/netmap.tt
View File

@@ -29,11 +29,15 @@ function resizeGraphContainer() {
}, 500)
}
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, function(mapdata) {
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]',{
q: '[% params.q %]'
,vlan: '[% params.vlan %]'
,mapshow: '[% params.mapshow %]'
}, function(mapdata) {
jQuery(document).ready(function() {
window.graph = netGobrechtsD3Force('netmap_pane')
.debug(true)
// .debug(true)
.lassoMode(true)
.dragMode(true)
.nodeEventToOpenLink('click')
@@ -58,6 +62,10 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
jQuery(window).on("resize", resizeGraphContainer);
graph['nd2'] = {};
graph['nd2']['centernode'] = mapdata['v3']['centernode'];
graph['nd2']['dragging'] = false;
graph.inspect().main.force.on('end.setupfornetdisco', function() {
graph.inspect().main.nodes.each(function(n) { n.fixed = true });
@@ -68,8 +76,6 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
);
}
graph['nd2'] = {};
graph['nd2']['dragging'] = false;
graph.inspect().main.nodes.on('mouseup.dragall', function(n) {
graph['nd2']['dragging'] = false;
});
@@ -125,13 +131,6 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
.on("click", function() {
requestFullScreen(document.getElementById('netmap_pane'));
});
// center on our selected device
// graph.inspect().main.force.on('end.centernode', function() {
// var node = graph.nodeDataById( mapdata['v3']['centernode'] );
// graph.zoomSmooth(node.x, node.y, node.radius * 200);
// graph.inspect().main.force.on('end.centernode', null);
// });
});
});

31
share/views/js/device.js
View File

@@ -100,6 +100,37 @@
$("[rel=tooltip]").tooltip({live: true});
});
// netmap pin/release controls
$('#nd_netmap-releaseall').on('click', function(event) {
event.preventDefault();
graph.releaseFixedNodes().resume();
});
$('#nd_netmap-releaseonly').on('click', function(event) {
event.preventDefault();
graph.inspect().main.nodes
.filter(function(n) { return n.selected })
.each(function(n) { n.fixed = false });
graph.resume();
});
$('#nd_netmap-pinonly').on('click', function(event) {
event.preventDefault();
graph.inspect().main.nodes
.filter(function(n) { return n.selected })
.each(function(n) { n.fixed = true });
});
$('#nd_netmap-save').on('click', function(event) {
event.preventDefault();
$.post(
'[% uri_for('/ajax/data/device/netmappositions') %]'
,'positions=' + JSON.stringify(graph.positions())
);
});
$('#nd_netmap-zoomtodevice').on('click', function(event) {
event.preventDefault();
var node = graph.nodeDataById( graph['nd2']['centernode'] );
graph.zoomSmooth(node.x, node.y, node.radius * 100);
});
// activity for admin tasks in device details
$('#details_pane').on('click', '.nd_adminbutton', function(event) {
// stop form from submitting normally

2
share/views/layouts/main.tt
View File

@@ -18,6 +18,7 @@
<!-- <script type="text/javascript" src="[% uri_base %]/javascripts/jquery.cookie.js"></script> -->
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-deserialize.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/bootstrap.min.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/bootstrap-switch.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/underscore.min.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery.qtip.min.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/d3.min.js"></script>
@@ -49,6 +50,7 @@
[% END %]
<link rel="stylesheet" href="[% uri_base %]/css/bootstrap.min.css"/>
<link rel="stylesheet" href="[% uri_base %]/css/bootstrap-switch.css"/>
<link rel="stylesheet" href="[% uri_base %]/css/jquery.qtip.min.css"/>
<link rel="stylesheet" href="[% uri_base %]/css/smoothness/jquery-ui.custom.min.css"/>
<link rel="stylesheet" href="[% uri_base %]/css/font-awesome.min.css"/>

86
share/views/sidebar/device/netmap.tt
View File

@@ -5,20 +5,90 @@
<ul class="muted nd_netmap-sidebar-help">
<li>Click and drag to pan</li>
<li>Scroll to zoom</li>
<li>Hover shows neighbors</li>
<li>Click to center device</li>
</ul>
</div>
<em class="muted nd_sidebar-label">Draw to Depth:</em><br/>
<input id="nd_port-query" placeholder="" type="number"
name="depth" value="[% params.depth || 8 | html_entity %]" type="text"
rel="tooltip" data-placement="left" data-offset="5" data-title="Max Depth"/>
<button id="nd_netmap-releaseall" class="btn btn-info">
<i class="icon-unlock icon-large pull-left nd_navbar-icon"></i>
Release All</button>
<button id="nd_netmap-releaseonly" class="btn btn-info">
<i class="icon-unlock icon-large pull-left nd_navbar-icon"></i>
Release Selected</button>
<button id="nd_netmap-pinonly" class="btn btn-info">
<i class="icon-lock icon-large pull-left nd_navbar-icon"></i>
Pin Selected</button>
<button id="nd_netmap-save" class="btn btn-info">
<i class="icon-save icon-large pull-left nd_navbar-icon"></i>
Save Positions</button>
<div class="clearfix nd_netmap-sidebar">
<em class="muted nd_sidebar-label">Show only Devices:</em><br/>
</div>
<input class="nd_bs-sw" type="radio" name="mapshow" value="neighbors"
data-on-text="" data-off-text="" data-size="small"
data-on-color="success" data-off-color="default"
data-label-text="Neighbors" data-handle-width="74" data-label-width="90">
<input class="nd_bs-sw" type="radio" name="mapshow" value="groups" checked
data-on-text="" data-off-text="" data-size="small"
data-on-color="success" data-off-color="default"
data-label-text="Groups" data-handle-width="74" data-label-width="90">
<div class="clearfix">
<select class="nd_side-select" size="[% devgrp_list.size > 5 ? 5 : devgrp_list.size %]"
multiple="on" name="devgrp"
rel="tooltip" data-placement="left" data-offset="5" data-title="Device Groups"/>
[% FOREACH opt IN devgrp_list %]
<option[% ' selected="selected"' IF os_lkp.exists(opt) %]>[% opt | html_entity %]</option>
[% END %]
<option value="__ALL__" selected="selected">All Devices</option>
</select>
</div>
<input class="nd_bs-sw" type="checkbox" data-label-text="Mgmt IPs"
data-on-text="Show" data-off-text="Hide" data-size="small" disabled="true"
data-handle-width="74" data-label-width="90">
<input class="nd_bs-sw" type="checkbox" data-label-text="Link Speed"
data-on-text="Show" data-off-text="Hide" data-size="small" disabled="true"
data-handle-width="74" data-label-width="90">
<div class="clearfix nd_netmap-sidebar">
<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.tag %]_submit" type="submit" class="btn btn-info">
<i class="icon-pencil icon-large pull-left nd_navbar-icon"></i> Redraw Map</button>
<div class="clearfix input-prepend">
<label class="add-on">
<input type="checkbox" id="colorgroups"
name="colorgroups"[% ' checked="checked"' IF vars.sidebar_defaults.device_netmap.colorgroups %]/>
</label>
<label class="nd_checkboxlabel" for="colorgroups">
<span class="nd_searchcheckbox uneditable-input">Color Groups</span>
</label>
</div>
<div class="clearfix input-prepend">
<label class="add-on">
<input type="checkbox" id="dynamicsize" disabled
name="dynamicsize"[% ' checked="checked"' IF vars.sidebar_defaults.device_netmap.dynamicsize %]/>
</label>
<label class="nd_checkboxlabel" for="dynamicsize">
<span class="nd_searchcheckbox uneditable-input">Dynamic Size</span>
</label>
</div>
<button id="nd_netmap-zoomtodevice" class="btn btn-info">
<i class="icon-search icon-large pull-left nd_navbar-icon"></i>
Zoom to this Device</button>
<button id="[% tab.tag %]_submit" type="submit" class="btn btn-info">
<i class="icon-pencil icon-large pull-left nd_navbar-icon"></i>
Redraw Map</button>
<script type="text/javascript">
$('.nd_bs-sw').bootstrapSwitch();
</script>