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

new network map (neighbors) implementation

Browse Source 
also link to manual topology from device ports
fix tooltip reinit on datatables paging

Squashed commit of the following:

commit 85d52ed174
Merge: 66e35366 07446ed7
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 31 08:59:19 2017 +0000

    Merge branch 'master' into og-newnetmap

commit 66e353669d
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 31 00:16:49 2017 +0000

    add docs link

commit 809f1ede76
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 31 00:11:29 2017 +0000

    node links to other devices

commit 187e1ea803
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 23:58:56 2017 +0000

    add node infostring

commit 6453f99b28
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 23:41:19 2017 +0000

    link infostrings!

commit f3ba260142
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 22:42:09 2017 +0000

    maxnoderadius is now based on dynamic size calc

commit 0af415e391
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 22:33:22 2017 +0000

    fix to get aggregate ports in matching order on left and right side

commit 3f36121a4c
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 22:07:28 2017 +0000

    initial aggregate link summing

commit e5b96b0781
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 14:55:00 2017 +0000

    tidy and refactor

commit 79f22a47b3
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 13:42:58 2017 +0000

    get rid of d3 v3/v4 and only have v3

commit 18c3f16c8f
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 12:54:45 2017 +0000

    fullscreen exit now works

commit 93f8181fc8
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 30 08:58:04 2017 +0000

    implement show link speeds on links

commit 72961f172d
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Thu Dec 28 23:51:26 2017 +0000

    add speed to retrieved devicelinks

commit ae5496310e
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Dec 26 11:21:12 2017 +0000

    remove annealing on label change

commit 885cb92bd3
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Dec 26 11:15:21 2017 +0000

    reorder options

commit 015a1debe0
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Dec 26 11:11:01 2017 +0000

    fix d3-force debug link messing up svg text elements

commit 10ccaa78b1
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Dec 26 10:52:47 2017 +0000

    show ips functionality; improvement to maximise icon; bugfix d3-force label wrap

commit 71a1a20909
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Mon Dec 25 13:21:23 2017 +0000

    move labels on neighbor view

commit 9578215349
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Mon Dec 25 13:13:13 2017 +0000

    force running spinner

commit 6618fba548
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 23:13:33 2017 +0000

    fix neighbors pinning

commit 938848551e
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 18:12:04 2017 +0000

    implement dynamic sizing option

commit e4b19be5d7
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 13:25:00 2017 +0000

    zoom to device on neighbor show; do not save positions on neighbor show

commit 58b576b464
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 13:10:48 2017 +0000

    better neighbors/save interaction

commit 2c77660f2f
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 13:03:46 2017 +0000

    fix labels on checkboxes to be clickable

commit 2c2dc62cda
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 12:50:26 2017 +0000

    prevent save positions when in neighbor view mode

commit 78c558b5be
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 12:37:51 2017 +0000

    add tooltip to show why host groups radio is disabled

commit 7000d4b0eb
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 12:12:29 2017 +0000

    allow port control role to edit manual topology

commit 547d2934cb
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 12:09:40 2017 +0000

    working save/restore node positions with groups

commit bf7e231ffe
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 24 10:09:26 2017 +0000

    node colors!

commit e23594b041
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 23 23:42:17 2017 +0000

    wooo device group selection is working

commit b1b22c9811
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 23 22:31:23 2017 +0000

    send full query str from netmap for json

commit 9a13bb7f9b
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 23 22:06:24 2017 +0000

    implement host_group_displaynames and fix vlan save bug

commit 35ed34ed2f
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 23 17:52:14 2017 +0000

    when neighbors only can restrict the links search

commit f9e5ec02ab
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 23 17:44:41 2017 +0000

    tweak mapshow

commit 9f9971ff4e
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 23 00:47:17 2017 +0000

    better sidebar look and layout

commit 1def41da67
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Thu Dec 21 23:54:44 2017 +0000

    sidebar with many options!!

commit 4203cbb225
Merge: 7c12df6b 7db65932
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Thu Dec 21 20:14:55 2017 +0000

    Merge branch 'master' into og-newnetmap

commit 7c12df6b83
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Thu Dec 21 00:13:03 2017 +0000

    refresh tooltips when the datatables table is updated

commit 081b89d5dc
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Wed Dec 20 23:59:15 2017 +0000

    shortcut from device port to manual topology

commit 9520438960
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Wed Dec 20 23:34:44 2017 +0000

    tighten the sql for neighbor links

commit d6b0275931
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Wed Dec 20 23:26:22 2017 +0000

    tweak layout again

commit 9e5e2f0ed5
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Wed Dec 20 23:18:57 2017 +0000

    fullscreen mode for netmap

commit aba359d2a9
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Wed Dec 20 22:05:51 2017 +0000

    save and load netmap positions for same device groups

commit b7cd0251ff
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Dec 19 23:24:47 2017 +0000

    basic positions upload

commit 786115ebda
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Dec 19 22:13:16 2017 +0000

    working group drag

commit 91f98d4f33
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Mon Dec 18 23:00:16 2017 +0000

    drag all selected nodes

commit ba48eee5f7
Merge: 60412cd6 7f8e3edf
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Mon Dec 18 20:14:20 2017 +0000

    Merge branch 'master' into og-newnetmap

commit 60412cd6e6
Merge: 39ca1491 7dc79f72
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 17 20:23:41 2017 +0000

    Merge branch 'master' into og-newnetmap

commit 39ca1491b0
Merge: 69622582 c8806bea
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 17 19:52:49 2017 +0000

    Merge branch 'master' into og-newnetmap

commit 6962258223
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 17 19:52:26 2017 +0000

    bleed versions

commit 444e82b8a3
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 16 15:33:41 2017 +0000

    use d3 v4 only

commit 01cd7a908d
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Dec 16 15:22:08 2017 +0000

    two d3 connected

commit 854f37fc94
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Thu Dec 14 21:34:49 2017 +0000

    more fiddling with d3

commit 61a3a9e06d
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Thu Dec 14 19:15:21 2017 +0000

    working worker

commit ebadebe69a
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Thu Dec 14 07:57:55 2017 +0000

    borken worker

commit c327b28513
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Wed Dec 13 13:45:03 2017 +0000

    fix node center

commit 33bd9d39da
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Wed Dec 13 01:14:50 2017 +0000

    improvements to graphing

commit 6178bf2298
Merge: 1c627eaf 925940c9
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Dec 12 23:44:48 2017 +0000

    Merge branch 'master' into og-newnetmap

commit 1c627eaf3c
Merge: 77ca8f96 000cbaa1
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Tue Dec 12 23:38:00 2017 +0000

    Merge branch 'master' into og-newnetmap

commit 77ca8f96e1
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Mon Dec 11 00:09:08 2017 +0000

    working rendering using d3-force plugin

commit 187265fc03
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sun Dec 10 23:19:23 2017 +0000

    initial work on moving to d3-force-apex-plugin - json data
This commit is contained in:
Oliver Gorwits
2017-12-31 09:13:01 +00:00
parent 07446ed7d6
commit d332eaf293
27 changed files with 6685 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
share/views/ajax/admintask/orphaned.tt
View File

@@ -75,7 +75,7 @@
<tbody>
[% FOREACH row IN network %]
<tr>
<td><a href="[% uri_for('/device') %]?tab=netmap&q=[% row.ip | uri %]">
<td><a href="[% uri_for('/device') %]?tab=netmap&q=[% row.ip | uri %]&firstsearch=on">
[% row.dns || row.name || row.ip | html_entity %]</a></td>
<td>
[% IF row.location %]

4
share/views/ajax/admintask/topology.tt
View File

@@ -12,13 +12,13 @@
<tr>
<td class="nd_center-cell">
<div class="input-append">
<input data-form="add" class="nd_topo_dev nd_topo_dev1" name="dev1" type="text">
<input data-form="add" class="nd_topo_dev nd_topo_dev1" name="dev1" type="text" value="[% params.dev1 | html_entity %]">
<span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
</div>
</td>
<td class="nd_center-cell">
<div class="input-append">
<input data-form="add" class="nd_topo_port nd_topo_dev1" name="port1" type="text">
<input data-form="add" class="nd_topo_port nd_topo_dev1" name="port1" type="text" value="[% params.port1 | html_entity %]">
<span class="add-on nd_topo_port_caret"><i class="icon-caret-down icon-large"></i></span>
</div>
</td>

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

@@ -1,187 +1,287 @@
<div id="netmap_pane_tooltip" class="net_gobrechts_d3_force_tooltip" style="top: 0px; left: 0px;"></div>
<script>
var winHeight = window.innerHeight;
var winWidth = window.innerWidth;
// ***********************************************
// ************ retrieve network map *************
// ***********************************************
// 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]; });
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
// actual device neighbor links use this generator
var neighLink = d3.svg.diagonal.radial();
jQuery(document).ready(function() {
window.graph = netGobrechtsD3Force('netmap_pane')
// .debug(true)
.width( parseInt(jQuery('#netmap_pane').parent().css('width')) )
.height( window.innerHeight - 100 )
.showSelfLinks(true)
.wrapLabels(true)
.lassoMode(true)
.dragMode(true)
.zoomMode(true)
.pinMode(true)
[% '.showLegend(false)' IF NOT params.colorgroups %]
.showLinkDirection(false)
.colorScheme('color20')
.preventLabelOverlappingOnForceEnd(
(mapdata['newnodes'] && ('[% params.mapshow %]' == 'neighbors'))
? true : false
)
.nodeEventToStopPinMode('none')
.showTooltips(true)
.tooltipPosition('svgTopLeft')
.nodeEventToOpenLink('dblclick')
.nodeLinkTarget('none')
.minNodeRadius(4)
.maxNodeRadius(4 + (mapdata['numsizes'] || 0))
.minZoomFactor(0.1)
.maxZoomFactor(10)
.labelDistance(2)
.linkDistance(120)
.charge(-550)
.gravity(0.3);
// store x,y for all circles on the map
var loc = {};
// store actual links between all nodes
var neighbors_data = {};
graph['nd2'] = {};
graph['nd2']['centernode'] = mapdata['centernode'];
graph['nd2']['dragging'] = false;
// main SVG background, with support for pan/zoom
var svg = d3.select("#netmap_pane").append("svg")
.attr("width", winWidth - 50)
.attr("height", winHeight - 100)
.attr("pointer-events", "all")
.append('g')
.call(d3.behavior.zoom().on("zoom", redraw))
.append("g")
.attr("transform", "translate(" + winHeight / 2 + "," + winHeight / 2 + ")");
// ***************************************
// *********** fullscreen icon ***********
// ***************************************
// this is the image background
// XXX there must be a way to discover the radial tree's size?
svg.append('rect')
.attr("x", (0 - (winHeight * 2)))
.attr('width', "400%")
.attr("y", (0 - (winHeight * 2)))
.attr('height', "400%")
.attr('fill', 'white');
// handle pan and zoom
function redraw() {
svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ "scale(" + d3.event.scale + ")"
+ "translate(" + (winHeight / 2) + "," + (winHeight / 2) + ")");
}
// save the x,y of an element into the loc dictionary
function recordLocation(d,i) {
var rect = this.getBoundingClientRect();
loc[d.ip] = {
'x': (rect.left + ((rect.right - rect.left) / 2))
,'y': (rect.top + ((rect.bottom - rect.top) / 2))
};
}
// convert a device ip to a valid CSS class name
function to_class(ip) { return 'nd_' + ip.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.ip
+ '&depth=[% params.depth | uri %]'
+ '&vlan=[% params.vlan | uri %]';
}
// handler for mouseover on a circle - show that device's real neighbors
function circleOver(d) {
$('.link').hide();
$('path.' + to_class(d.ip)).show();
$(this).css('cursor', 'pointer');
$.each(neighbors_data[d.ip], function(idx, target) {
if (! (target in loc)) { return true }
$('circle.' + to_class(target)).css('fill', '#e96cfa');
});
}
// handler for mouseout on a circle - hide real neighbours and show treeLinks
function circleOut(d) {
$.each(neighbors_data[d.ip], function(idx, target) {
if (! (target in loc)) { return true }
$('circle.' + to_class(target)).css('fill', '#fff');
});
$(this).css('cursor', 'auto');
$('path.' + to_class(d.ip)).hide();
$('.link').show();
}
// load all device connections into neighbors_data dictionary
$.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 %]'
+ '&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);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", treeLink);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });
// begin to draw...
d3.select("#nd_waiting").remove();
node.append("circle")
.attr("r", 4.5)
// circle has class name of its device, so we can show/hide it
.attr("class", function(d) { return to_class(d.ip) })
// store the x,y of every circle we've just drawn
.each(recordLocation)
// handlers for mouse interaction with the circles
.on("click", circleClick)
.on("mouseover", circleOver)
.on("mouseout", circleOut);
node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.text(function(d) { return d.name; });
// reorient text on the root node
svg.select(".node")
.attr("transform", function(d) {
return d.x < 180 ? "rotate(0)translate(0)" : "rotate(180)translate(0)"; });
// key (ip) of the root node in our locations store
var rootname = svg.select(".node").data()[0].ip;
// reformatted neighbors_data for the real neighbor links
var neighbors = [];
// need to build neighbors array only after we have built loc dictionary,
// after drawing the circles and storing their x,y
$.each(neighbors_data, function(key, val) {
if (! (key in loc)) { return true }
$.each(val, function(idx, ip) {
if (! (ip in loc)) { return true }
neighbors.push({
'source': {
'ip': key
,'x': loc[key]['x']
,'y': loc[key]['y']
}
,'target': {
'ip': ip
,'x': loc[ip]['x']
,'y': loc[ip]['y']
}
});
graph.inspect().dom.svg
.append("g")
.attr("id", "nd2_fullscreen-netmap-container")
.attr("transform", "translate(" + (graph.width() - 17) + ",17)")
.append("svg:text")
.attr("id", "nd2_fullscreen-netmap")
.attr("class", "link")
.attr("text-anchor", "start")
.attr("font-family", "FontAwesome")
.text('\uf065')
.on("click", function() {
requestFullScreen(document.getElementById('netmap_pane'));
});
// **************************************************
// *********** force running spinner icon ***********
// **************************************************
graph.inspect().dom.svg
.append("g")
.attr("id", "nd2_netmap-spinner-container")
.attr("transform", "translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")")
.append("path")
.attr("id", "nd2_netmap-spinner");
graph.inspect().main.force.on('start.nd2spinner', function() {
d3.select("#nd2_netmap-spinner").call(spin);
});
// insert Netdisco neighbor links below circles but above tree links
svg.selectAll(".neighbor")
.data(neighbors)
.enter().insert("path", ".node")
// add class name of source device, so we can show/hide the link
// (also "neighbor" class)
.attr("class", function(d) { return ("neighbor " + to_class( d.source.ip )) })
.attr("d", neighLink)
.attr("transform", "translate(-" + loc[rootname]['x'] + ",-" + loc[rootname]['y'] + ")");
});
// *****************************************************
// *********** link labels which track links ***********
// *****************************************************
}); // jquery getJSON for all connections
graph.inspect().main.force.on('tick.movelinklabel', function() {
graph.inspect().dom.svg.selectAll('text.nd_netmap-linklabel')
.attr('x', function(d) {
var sx = graph.nodeDataById($(this).attr('data-source'));
var tx = graph.nodeDataById($(this).attr('data-target'));
if (!(sx && tx)) { return 0 }
return ((sx.x + tx.x) / 2);
})
.attr('y', function(d) {
var sy = graph.nodeDataById($(this).attr('data-source'));
var ty = graph.nodeDataById($(this).attr('data-target'));
if (!(sy && ty)) { return 0 }
return ((sy.y + ty.y) / 2);
});
});
graph.inspect().main.force.on('start.movelinklabel', function() {
mapdata['data']['links'].forEach(function(link) {
graph.inspect().dom.svg.select('g.graph')
.append('svg:text')
.attr('class', 'nd_netmap-linklabel')
.attr('data-source', link['FROMID'])
.attr('data-target', link['TOID'])
.attr('text-anchor', 'middle')
[% ".attr('fill', 'black')" IF params.showspeed %]
.text(link['SPEED']);
});
graph.inspect().main.force.on('start.movelinklabel', null);
});
// **********************************************************
// ********* node lasso and group-dragging support **********
// **********************************************************
graph.inspect().main.force.on('start.draggednode', function() {
graph.inspect().main.nodes.on('mousedown.dragall', function(n) {
if (this.nodeName !== 'circle') { return }
graph['nd2']['dragging'] = true;
graph['nd2']['dragStartX'] = n.x;
graph['nd2']['dragStartY'] = n.y;
graph['nd2']['draggedNode'] = n.index;
console.log(graph['nd2']);
});
graph.inspect().main.nodes.on('mousemove.dragall', function(draggedNode) {
var evt = window.event;
if (!("buttons" in evt) || (evt.buttons !== 1)) { return }
if (!(graph['nd2']['dragging']) || !(graph['nd2']['draggedNode'])) { return }
if (draggedNode.index !== graph['nd2']['draggedNode']) { return }
var dx = (draggedNode.x - graph['nd2']['dragStartX']),
dy = (draggedNode.y - graph['nd2']['dragStartY']);
graph['nd2']['dragStartX'] += dx;
graph['nd2']['dragStartY'] += dy;
graph.inspect().main.nodes
.filter(function(n) { return (n.selected && (n.index !== draggedNode.index)) })
.each(function(n) {
n.x += dx; n.y += dy;
n.px += dx; n.py += dy;
});
});
graph.inspect().main.nodes.on('mouseup.dragall', function(n) {
graph['nd2']['dragging'] = false;
});
graph.inspect().main.force.on('start.draggednode', null);
});
// ********************************************************
// ********* save new node positions back to DB ***********
// ********************************************************
graph.inspect().main.force.on('end.savepositions', function() {
graph.inspect().main.nodes.each(function(n) { n.fixed = true });
if (mapdata['newnodes'] && ('[% params.mapshow %]' != 'neighbors')) {
$.post(
'[% uri_for('/ajax/data/device/netmappositions') %]'
,$("#nd_vlan-entry, #nd_devgrp-select, input[name='mapshow']").serialize()
+ '&positions=' + JSON.stringify(graph.positions())
);
}
graph.inspect().main.force.on('end.savepositions', null);
});
// *****************************
// ********* DO IT!! ***********
// *****************************
graph.start(mapdata);
// about a second after render starts, zoom in a bit
if ('[% params.mapshow %]' == 'neighbors') {
setTimeout(function() {
if ('[% params.dynamicsize %]' == 'on') {
graph.zoomToFit();
} else {
var node = graph.nodeDataById( graph['nd2']['centernode'] );
graph.zoomSmooth(node.x, node.y, node.radius * 125);
}
}, 1500);
}
}); // document.onReady
}); // getJSON
// ***********************************************
// ******** force engine status spinner *********
// ***********************************************
var radius = 12;
var tau = 2 * Math.PI;
var arc = d3.svg.arc()
.innerRadius(radius * 0.5)
.outerRadius(radius * 0.8)
.startAngle(0)
.endAngle(0.33 * tau);
var circle = d3.svg.arc()
.innerRadius(radius * 0.5)
.outerRadius(radius * 0.8)
.startAngle(0)
.endAngle(tau);
function spin(selection, duration) {
duration = duration || 1500;
if (! graph.inspect().status.forceRunning) {
d3.select('#nd2_netmap-spinner').style('fill', '#CCFFCC').attr('d', circle);
return;
}
d3.select('#nd2_netmap-spinner').style('fill', '#FFE4B5').attr('d', arc);
selection.transition()
.ease("linear")
.duration(duration)
.attrTween("transform", function() {
return d3.interpolateString("rotate(0)", "rotate(360)");
});
setTimeout(function() { spin(selection, duration); }, duration);
}
// ***********************************************
// ************ full screen handling *************
// ***********************************************
function isFullScreen() {
return (document.webkitFullscreenElement || document.mozFullScreenElement || document.fullscreenElement);
}
function requestFullScreen(elt) {
if (isFullScreen()) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
else {
if (elt.requestFullscreen) {
elt.requestFullscreen();
} else if (elt.msRequestFullscreen) {
elt.msRequestFullscreen();
} else if (elt.mozRequestFullScreen) {
elt.mozRequestFullScreen();
} else if (elt.webkitRequestFullscreen) {
elt.webkitRequestFullscreen();
}
}
}
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
resizeGraphContainer();
$('#nd2_fullscreen-netmap').text(function() {
return (isFullScreen() ? '\uf066' : '\uf065');
});
});
// custom resize function as there is no event to fire and we need
// to react to the sidebar.
function resizeGraphContainer() {
setTimeout(function(){
var netmap_pane = jQuery('#netmap_pane');
graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
graph.height( window.innerHeight - 100 ).resume();
d3.select("#nd2_netmap-spinner-container").attr("transform",
"translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")");
d3.select("#nd2_fullscreen-netmap-container").attr("transform",
"translate(" + (graph.width() - 17) + ",17)");
}, 500)
}
$('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
$('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
$(window).on("resize", resizeGraphContainer);
// vim: ft=javascript
</script>
<div id="nd_waiting" class="span2 alert"><i class="icon-spinner icon-spin"></i> Waiting for results...</div>

8
share/views/ajax/device/ports.tt
View File

@@ -345,6 +345,14 @@
[% END %]
[% END %]
[% END %]
[% IF user_can_port_control AND params.c_admin %]
<a class="nd_log-icon"
href="[% uri_for('/admin/topology') %]?dev1=[% device.ip | uri %]&port1=[% row.port | uri %]">
<i class="icon-bolt"
rel="tooltip" data-placement="top" data-offset="3"
data-animation="" data-title="Manual Topology"></i>
[% END %]
</a>
</td>
[% END %]