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

tidy and refactor

Browse Source
This commit is contained in:
Oliver Gorwits
2017-12-30 14:55:00 +00:00
parent 79f22a47b3
commit e5b96b0781
2 changed files with 191 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
View File

@@ -98,7 +98,6 @@ ajax '/ajax/data/device/netmap' => require_login sub {
]) : ())
}, {
columns => [qw/left_ip speed right_ip/],
'+select' => [\'row_number() over()'], '+as' => ['row_number'],
result_class => 'DBIx::Class::ResultClass::HashRefInflator',
});
@@ -118,7 +117,6 @@ ajax '/ajax/data/device/netmap' => require_login sub {
FROMID => $link->{left_ip},
TOID => $link->{right_ip},
SPEED => $link->{speed},
ID => $link->{row_number},
};
++$ok_dev{$link->{left_ip}};

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

@@ -1,5 +1,233 @@
<script>
// ***********************************************
// ************ retrieve network map *************
// ***********************************************
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
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(12)
.minZoomFactor(0.1)
.maxZoomFactor(10)
.labelDistance(2)
.linkDistance(120)
.charge(-550)
.gravity(0.3);
graph['nd2'] = {};
graph['nd2']['centernode'] = mapdata['centernode'];
graph['nd2']['dragging'] = false;
// ***************************************
// *********** fullscreen icon ***********
// ***************************************
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);
});
// *****************************************************
// *********** link labels which track links ***********
// *****************************************************
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);
}
@@ -44,7 +272,9 @@ function resizeGraphContainer() {
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) + ")")
"translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")");
d3.select("#nd2_fullscreen-netmap-container").attr("transform",
"translate(" + (graph.width() - 17) + ",17)");
}, 500)
}
@@ -52,191 +282,5 @@ $('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
$('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
$(window).on("resize", resizeGraphContainer);
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 arc2 = 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', arc2);
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);
}
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
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(12)
.minZoomFactor(0.1)
.maxZoomFactor(10)
.labelDistance(2)
.linkDistance(120)
.charge(-550)
.gravity(0.3);
graph['nd2'] = {};
graph['nd2']['centernode'] = mapdata['centernode'];
graph['nd2']['dragging'] = false;
graph.inspect().main.force.on('end.setupfornetdisco', 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.nodes.on('mouseup.dragall', function(n) {
graph['nd2']['dragging'] = false;
});
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;
});
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.force.on('start.nd2spinner', function() {
d3.select("#nd2_netmap-spinner").call(spin);
});
graph.inspect().main.force.on('end.setupfornetdisco', null);
});
graph.inspect().main.force.on('tick.movelinklabel', function() {
graph.inspect().dom.svg.selectAll('text.nd_netmap-linklabel')
.attr('x', function(d) {
var text = d3.select(this);
var sx = graph.nodeDataById(text.attr('data-source')).x;
var tx = graph.nodeDataById(text.attr('data-target')).x;
return ((sx + tx) / 2);
})
.attr('y', function(d) {
var text = d3.select(this);
var sy = graph.nodeDataById(text.attr('data-source')).y;
var ty = graph.nodeDataById(text.attr('data-target')).y;
return ((sy + ty) / 2);
});
});
graph.inspect().dom.svg
.append("svg:text")
.attr("id", "nd2_fullscreen-netmap")
.attr("class", "link")
.attr("x", (graph.width() - 17))
.attr("y", 17)
.attr("text-anchor", "start")
.attr("font-family", "FontAwesome")
.text(function() { return '\uf065' })
.on("click", function() {
requestFullScreen(document.getElementById('netmap_pane'));
});
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.start(mapdata);
d3.select("#nd2_netmap-spinner").call(spin);
graph.inspect().main.links.each(function(l) {
var link = d3.select(this);
var data = link.datum();
graph.inspect().dom.svg.select('g.graph')
.append('svg:text')
.attr('class', 'nd_netmap-linklabel')
.attr('x', function(d) { return data.source.x; })
.attr('y', function(d) { return data.source.y; })
.attr('data-source', function(d) { return data.source.ID; })
.attr('data-target', function(d) { return data.target.ID; })
.attr('text-anchor', 'middle')
[% ".attr('fill', 'black')" IF params.showspeed %]
.text(function(d) { return data.SPEED; });
});
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);
}
});
});
// vim: ft=javascript
</script>