aboutsummaryrefslogtreecommitdiffstats
path: root/web/nms.gathering.org/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'web/nms.gathering.org/index.html')
-rw-r--r--web/nms.gathering.org/index.html196
1 files changed, 1 insertions, 195 deletions
diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index b5ef88e..f2776e8 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -70,16 +70,12 @@
<li class="divider"> </li>
<li class="dropdown-header">View</li>
<li><a href="#" onclick="toggleNightMode()">Toggle Night Mode</a></li>
- <li><a href="#" onclick="showBlurBox()">Tweak Night Mode blur</a></li>
- <li><a href="#" onclick='showLayer("layerVisibility");'>Set layer visibility</a></li>
<li class="divider"> </li>
<li class="dropdown-header">Map scale</li>
<li><a href="#"><label id="scaler-text" for='scaler'></label><input type="range" id="scaler" name="points" min="0.2" max="3" step="0.01" onchange="scaleChange()" /></a></li>
<li class="divider"> </li>
<li class="dropdown-header">Help</li>
- <li><a href="#" onclick="toggleLayer('aboutData');">About TG15 data</a></li>
<li><a href="#" onclick="toggleLayer('aboutBox');" >About NMS</a></li>
- <li><a href="#" onclick="toggleLayer('aboutPerformance');" >About Performance</a></li>
<li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li>
<li><a onclick="showTimerDebug(); hideSwitch();" style="cursor: pointer;" >Debug timers</a></li>
</ul>
@@ -107,113 +103,6 @@
<div class="row-fluid">
<div class="span12">
- <div id="aboutData" class="col-md-4" style="position: absolute; display:none; z-index: 130;">
- <div id="abotData" class="panel panel-default">
- <div class="panel-heading">
- <h3 class="panel-title">About the TG15 data
- <button type="button" class="close" aria-label="Close" onclick="document.getElementById('aboutData').style.display = 'none';" style="float: right">
- <span aria-hidden="true">&times;</span>
- </button>
- </h3>
- </div>
- <div class="panel-body">
- <p>The data you see from The Gathering 2015 will seem
- "broken up". This is not because we don't have data from
- the first day, but because the backend was re-written on
- day 1/2 and this web app only uses the new API.</p>
- <p>NMS was set up on March 30th (Monday). Data started
- pouring in on the same day. </p>
- <p>Ping data is available for the entire event with 1
- second resolution. We "lost" data from the 30th because we
- re-inserted the switches (We have the ping data, but not
- the mapping between switch ID number and actual
- switch).</p>
- <p>DHCP data is available only for the last detected DHCP
- ack (no history, except extensive text-based logs)</p>
- <p>Uplink status is available for most of the event, but
- not exposed here. We only expose traffic-based uplink state
- here, which, again, is based on the new API.</p>
- <p>Traffic status was temporarily bugged, but is available
- from late on day 2.</p>
- <p>Temperature data is available from day 2.</p>
- <p>Plans are being made to ensure that we don't have gaps
- like these in the future.</p>
- <p>It is also worth mentioning that things like switch
- positions are not logged historically, so you see the final
- position on the map.</p>
- </div>
- </div>
- </div>
- <div id="aboutPerformance" class="col-md-4" style="position: absolute; display:none; z-index: 130;">
- <div class="panel panel-default">
- <div class="panel-heading">
- <h3 class="panel-title">Performance
- <button type="button" class="close" aria-label="Close" onclick="document.getElementById('aboutPerformance').style.display = 'none';" style="float: right">
- <span aria-hidden="true">&times;</span>
- </button>
- </h3>
- </div>
- <table class="table">
- <tr>
- <td>Outstanding AJAX requests</td>
- <td id="outstandingAJAX"></td>
- </tr>
- <tr>
- <td>Overflowed AJAX requests</td>
- <td id="overflowAJAX"></td>
- </tr>
- </table>
- <div class="panel-body">
- <p>NMS performance is surprisingly complex. It's split into
- several parts and dealt with differently.</p>
- <p>Poller performance is a matter of efficiently collecting
- data and is mostly handled in the Perl code (and ensuring
- we use sensible database schemas).</p>
- <p>Backend performance for the GUI is mostly about not
- killing the database server. We do NOT try to protect
- against malicious clients directly, since this is a
- management system not public-facing, but Varnish is used to
- cache requests. To be able to do that properly, we need use
- absolute time when reviewing past events (so "2015-04-02
- 17:30:00", not "2 hours ago"). We've also tried to minimize
- the stupidity in the queries. There's still work to be done
- here, though, as we need to split up a few large backend
- requests (port-state.pl).</p>
- <p>Front-end performance is mostly about drawing things
- sensibly and not completely bombing the memory usage. And
- about gracefully handling slow backends This will affect
- you. For example, if you are reviewing past events and the
- DB is struggling, we'll simply skip a backend request if we
- have too many outstanding requests, that means you may jump
- from "17:00" to "18:30" instead of going through
- "17:30" and "18:00" too. This is working as intended. It
- also means that you can happily spam the forward/backward
- keyboard bindings to jump 18 hours forward: You'll overflow
- the extra AJAX requests for individual requests, but you'll
- land at the right time when you let go. But there could be
- a 1 second delay (or more if the backend really struggles)
- since you'll have to rely on the periodic backend requests
- instead of the explicit ones triggered on hitting a
- button.</p>
- <p>Note that the counters on top are updated on a timer,
- but this timer is set up at the same time as everything
- else, which means that it's likely to update at the same
- time as we fire off AJAX requests, so the 'outstanding ajax
- requests' counter might either show almost constantly 3 or
- 0 depending on what timer happens to fire first. This does
- NOT mean that NMS has 3 requests all the time, just that
- we're checking right after we fire off AJAX requests every
- time.</p>
- <p>NMS also tries to handle drawing OK, which is why things
- are split into different HTML5 canvases. Blur and text are
- particularly expensive, but there's no reason to re-paint
- that all the time, etc).</p>
- <p>The basic performance experiments are done on TG15 data
- using a laptop and a VM with 6GB of memory, so it should
- hold up quite well on "proper" hardware.</p>
- </div>
- </div>
- </div>
<div id="aboutKeybindings" class="col-md-4" style="position: absolute; display:none; z-index: 130;">
<div class="panel panel-default">
<div class="panel-heading">
@@ -408,28 +297,6 @@
</div>
</div>
</div>
- <div id="blurManic" class="panel panel-default" style="display: none; position: absolute; z-index: 100;">
- <div class="panel-heading">
- <h1 class="panel-title">Blur tweaks
- <button type="button" class="close" aria-labe="Close" onclick="document.getElementById('blurManic').style.display = 'none';" style="float: right;">
- <span aria-hidden="true">&times;</span>
- </button>
- </h1>
- </div>
- <div class="panel-body">
- <div class="form">
- <div class="form-group">
- <label for="shadowBlur">Blur strength</label>
- <input type="number" id="shadowBlur" class="form-control">
- </div>
- <div class="form-group">
- <label for="shadowColor">Blur color</label>
- <input type="color" id="shadowColor" class="form-control">
- </div>
- <button type="button" class="btn btn-default" onclick="applyBlur();">Apply</button>
- </div>
- </div>
- </div>
</div>
<div id="debugTimers" class="panel panel-default" style="display: none; position: absolute; z-index: 100;">
<div class="panel-heading">
@@ -447,68 +314,6 @@
</div>
<table id="timerTable"> </table>
</div>
- <div id="layerVisibility" class="panel panel-default" style="display: none; position: absolute; z-index: 100;">
- <div class="panel-heading">
- <h1 class="panel-title">Set layer visibility
- <button type="button" class="close" aria-labe="Close" onclick="document.getElementById('layerVisibility').style.display = 'none';" style="float: right;">
- <span aria-hidden="true">&times;</span>
- </button>
- </h1>
- </div>
- <div class="panel-body">
- <table id="visibilityTable" class="table">
- <tr>
- <td>Background</td>
- <td>
- <button onclick='hideLayer("bgCanvas");'>Hide</button>
- <button onclick='showLayer("bgCanvas");'>Show</button>
- </td>
- </tr>
- <tr>
- <td>Linknets</td>
- <td>
- <button onclick='hideLayer("linkCanvas");'>Hide</button>
- <button onclick='showLayer("linkCanvas");'>Show</button>
- </td>
- </tr>
- <tr>
- <td>Blur</td>
- <td>
- <button onclick='hideLayer("blurCanvas");'>Hide</button>
- <button onclick='showLayer("blurCanvas");'>Show</button>
- </td>
- </tr>
- <tr>
- <td>Switches</td>
- <td>
- <button onclick='hideLayer("switchCanvas");'>Hide</button>
- <button onclick='showLayer("switchCanvas");'>Show</button>
- </td>
- </tr>
- <tr>
- <td>Text</td>
- <td>
- <button onclick='hideLayer("textCanvas");'>Hide</button>
- <button onclick='showLayer("textCanvas");'>Show</button>
- </td>
- </tr>
- <tr>
- <td>TextInfo</td>
- <td>
- <button onclick='hideLayer("textInfoCanvas");'>Hide</button>
- <button onclick='showLayer("textInfoCanvas");'>Show</button>
- </td>
- </tr>
- <tr>
- <td>Timestamp</td>
- <td>
- <button onclick='hideLayer("topCanvas");'>Hide</button>
- <button onclick='showLayer("topCanvas");'>Show</button>
- </td>
- </tr>
- </table>
- </div>
- </div>
<canvas id="bgCanvas" width="1920" height="1032" style="position: absolute; z-index: 1;"> </canvas>
<canvas id="linkCanvas" width="1920" height="1032" style="position: absolute; z-index: 10;"> </canvas>
@@ -527,6 +332,7 @@
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/nms-data.js"></script>
+ <script type="text/javascript" src="js/nms-map.js"></script>
<script type="text/javascript" src="js/nms.js"></script>
<script type="text/javascript" src="js/nms-color-util.js"></script>
<script type="text/javascript" src="js/nms-map-handlers.js"></script>