tidy and refactor
This commit is contained in:
Oliver Gorwits
@@ -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}};
|
||||
|
||||
@@ -1,87 +1,8 @@
|
||||
<script>
|
||||
|
||||
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) + ")")
|
||||
}, 500)
|
||||
}
|
||||
|
||||
$('#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);
|
||||
}
|
||||
// ***********************************************
|
||||
// ************ retrieve network map *************
|
||||
// ***********************************************
|
||||
|
||||
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
|
||||
|
||||
@@ -121,27 +42,86 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
|
||||
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 });
|
||||
// ***************************************
|
||||
// *********** fullscreen icon ***********
|
||||
// ***************************************
|
||||
|
||||
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().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) {
|
||||
@@ -163,67 +143,38 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
|
||||
});
|
||||
});
|
||||
|
||||
graph.inspect().main.force.on('start.nd2spinner', function() {
|
||||
d3.select("#nd2_netmap-spinner").call(spin);
|
||||
graph.inspect().main.nodes.on('mouseup.dragall', function(n) {
|
||||
graph['nd2']['dragging'] = false;
|
||||
});
|
||||
|
||||
graph.inspect().main.force.on('end.setupfornetdisco', null);
|
||||
graph.inspect().main.force.on('start.draggednode', 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);
|
||||
});
|
||||
// ********************************************************
|
||||
// ********* 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);
|
||||
});
|
||||
|
||||
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");
|
||||
// *****************************
|
||||
// ********* DO IT!! ***********
|
||||
// *****************************
|
||||
|
||||
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; });
|
||||
});
|
||||
|
||||
// about a second after render starts, zoom in a bit
|
||||
if ('[% params.mapshow %]' == 'neighbors') {
|
||||
setTimeout(function() {
|
||||
if ('[% params.dynamicsize %]' == 'on') {
|
||||
@@ -234,9 +185,102 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
|
||||
}
|
||||
}, 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>
|
||||
|
||||
Reference in New Issue
Block a user