diff options
| -rwxr-xr-x | web/nms.gathering.org/ping-json.pl | 10 | ||||
| -rw-r--r-- | web/nms.gathering.org/ping.html | 6 | ||||
| -rw-r--r-- | web/nms.gathering.org/ping.js | 94 | ||||
| -rwxr-xr-x | web/nms.gathering.org/switches-json.pl | 12 |
4 files changed, 104 insertions, 18 deletions
diff --git a/web/nms.gathering.org/ping-json.pl b/web/nms.gathering.org/ping-json.pl index 47b5cc2..78e795a 100755 --- a/web/nms.gathering.org/ping-json.pl +++ b/web/nms.gathering.org/ping-json.pl @@ -13,7 +13,15 @@ $q->execute(); my %json = (); while (my $ref = $q->fetchrow_hashref()) { - $json{$ref->{'switch'}} = $ref->{'latency_ms'}; + $json{'switches'}{$ref->{'switch'}} = $ref->{'latency_ms'}; } + +my $lq = $dbh->prepare("SELECT DISTINCT ON (linknet) linknet, latency1_ms, latency2_ms FROM linknet_ping WHERE updated >= NOW() - INTERVAL '15 secs' ORDER BY linknet, updated DESC;"); +$lq->execute(); +while (my $ref = $lq->fetchrow_hashref()) { + $json{'linknets'}{$ref->{'linknet'}} = [ $ref->{'latency1_ms'}, $ref->{'latency2_ms'} ]; +} + +$q->execute(); print $cgi->header(-type=>'text/json; charset=utf-8'); print JSON::XS::encode_json(\%json); diff --git a/web/nms.gathering.org/ping.html b/web/nms.gathering.org/ping.html index c9441ba..8205077 100644 --- a/web/nms.gathering.org/ping.html +++ b/web/nms.gathering.org/ping.html @@ -15,7 +15,11 @@ bottom: -14px; } </style> - <p id="playground"><img src="tg14-salkart.png" alt="" id="map" /></p> + <p id="playground"> + <svg id="lines" width="1280" height="736" style="position: absolute; top: 0; left: 0; z-index: 1"> + </svg> + <img src="tg14-salkart.png" alt="" id="map" /> + </p> <script type="text/javascript" src="ping.js"></script> </body> </html> diff --git a/web/nms.gathering.org/ping.js b/web/nms.gathering.org/ping.js index 4189573..c1b2fbe 100644 --- a/web/nms.gathering.org/ping.js +++ b/web/nms.gathering.org/ping.js @@ -1,4 +1,5 @@ var switches = []; +var linknets = []; var last_dataset = []; get_switches(); get_ping(); @@ -33,9 +34,16 @@ function draw_switches(json) { document.body.removeChild(switches[switchnum]); } switches = []; + var lines = document.getElementById("lines"); + for (var linknetnum in linknets) { + lines.removeChild(linknets[linknetnum][0]); + lines.removeChild(linknets[linknetnum][1]); + lines.removeChild(linknets[linknetnum][2]); + } + linknets = []; - for (var switchnum in json) { - var s = json[switchnum]; + for (var switchnum in json['switches']) { + var s = json['switches'][switchnum]; create_switch(switchnum, s['sysname'], parseInt(s['x']), @@ -44,28 +52,88 @@ function draw_switches(json) { parseInt(s['width']), parseInt(s['height'])); } + + for (var i = 0; i < json['linknets'].length; ++i) { + var linknet = json['linknets'][i]; + create_linknet(linknet['linknet'], linknet['switch1'], linknet['switch2']); + } + setTimeout(get_switches, 60000); really_update_ping(last_dataset); } +function create_linknet(linknetnum, switch1, switch2) { + var s1 = switches[switch1]; + var s2 = switches[switch2]; + + var s1x = parseInt(s1.style.left.replace("px", "")) + 0.5 * parseInt(s1.style.width.replace("px", "")); + var s1y = parseInt(s1.style.top.replace("px", "")) + 0.5 * parseInt(s1.style.height.replace("px", "")); + var s2x = parseInt(s2.style.left.replace("px", "")) + 0.5 * parseInt(s2.style.width.replace("px", "")); + var s2y = parseInt(s2.style.top.replace("px", "")) + 0.5 * parseInt(s2.style.width.replace("px", "")); + + var midx = 0.5 * (s1x + s2x); + var midy = 0.5 * (s1y + s2y); + + var outline = document.createElementNS("http://www.w3.org/2000/svg", "line"); + outline.setAttribute("x1", s1x); + outline.setAttribute("y1", s1y); + outline.setAttribute("x2", s2x); + outline.setAttribute("y2", s2y); + outline.style.stroke = "rgb(0, 0, 0)"; + outline.style.strokeWidth = 4; + document.getElementById("lines").appendChild(outline); + + var line1 = document.createElementNS("http://www.w3.org/2000/svg", "line"); + line1.setAttribute("x1", s1x); + line1.setAttribute("y1", s1y); + line1.setAttribute("x2", midx); + line1.setAttribute("y2", midy); + line1.style.stroke = "rgb(0, 0, 255)"; + line1.style.strokeWidth = 3; + document.getElementById("lines").appendChild(line1); + + var line2 = document.createElementNS("http://www.w3.org/2000/svg", "line"); + line2.setAttribute("x1", midx); + line2.setAttribute("y1", midy); + line2.setAttribute("x2", s2x); + line2.setAttribute("y2", s2y); + line2.style.stroke = "rgb(0, 0, 255)"; + line2.style.strokeWidth = 3; + document.getElementById("lines").appendChild(line2); + + linknets[linknetnum] = [ line1, line2, outline ]; +} + function update_ping(json) { last_dataset = json; really_update_ping(json); setTimeout(get_ping, 1000); } +function rgb_from_latency(latency_ms) { + if (latency_ms === null || latency_ms === undefined) { + return '#0000ff'; + } + + // 10ms is max + var l = latency_ms / 10.0; + if (l >= 1.0) { l = 1.0; } + l = Math.pow(l, 1.0/2.2); + l = Math.round(l * 255.0); + + return 'rgb(' + l + ', 255, 0)'; +} + function really_update_ping(json) { - for (var switchnum in switches) { - if (json[switchnum] === null || json[switchnum] === undefined) { - switches[switchnum].style.backgroundColor = '#0000ff'; - } else { - // 10ms is max - var l = json[switchnum] / 10.0; - if (l >= 1.0) { l = 1.0; } - l = Math.pow(l, 1.0/2.2); - l = Math.round(l * 255.0); - - switches[switchnum].style.backgroundColor = 'rgb(' + l + ', 255, 0)'; + if (json['switches']) { + for (var switchnum in switches) { + switches[switchnum].style.backgroundColor = rgb_from_latency(json['switches'][switchnum]); + } + } + if (json['linknets']) { + for (var linknetnum in linknets) { + linknets[linknetnum][0].style.stroke = rgb_from_latency(json['linknets'][linknetnum][0]); + linknets[linknetnum][1].style.stroke = rgb_from_latency(json['linknets'][linknetnum][1]); } } } diff --git a/web/nms.gathering.org/switches-json.pl b/web/nms.gathering.org/switches-json.pl index 67017b4..2ccb247 100755 --- a/web/nms.gathering.org/switches-json.pl +++ b/web/nms.gathering.org/switches-json.pl @@ -8,17 +8,16 @@ use nms; my $cgi = CGI->new; my $dbh = nms::db_connect(); +my %json = (); my $q = $dbh->prepare('select switch,sysname,placement,zorder from switches natural join placements'); $q->execute(); - -my %json = (); while (my $ref = $q->fetchrow_hashref()) { $ref->{'placement'} =~ /\((-?\d+),(-?\d+)\),\((-?\d+),(-?\d+)\)/; my ($x1, $y1, $x2, $y2) = ($1, $2, $3, $4); my $sysname = $ref->{'sysname'}; $sysname =~ s/\..*$//; - $json{$ref->{'switch'}} = { + $json{'switches'}{$ref->{'switch'}} = { sysname => $sysname, x => $x2, y => $y2, @@ -27,5 +26,12 @@ while (my $ref = $q->fetchrow_hashref()) { zorder => $ref->{'zorder'} }; } + +my $q = $dbh->prepare('select linknet,switch1,switch2 from linknets'); +$q->execute(); +while (my $ref = $q->fetchrow_hashref()) { + push @{$json{'linknets'}}, $ref; +} + print $cgi->header(-type=>'text/json; charset=utf-8'); print JSON::XS::encode_json(\%json); |