diff options
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 168 |
1 files changed, 52 insertions, 116 deletions
diff --git a/web/index.html b/web/index.html index 63a9bd0..ca97ad0 100644 --- a/web/index.html +++ b/web/index.html @@ -20,84 +20,7 @@ <!-- Date-picker styles --> <link href="css/jquery.datetimepicker.css" rel="stylesheet"> - <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> - <!--[if lt IE 9]> - <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> - <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> - <![endif]--> - <style type="text/css"> - canvas { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - outline: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */ - } - tr.mgmt_v4_addr { - font-weight: 700; - } - h1.map-mode-title { - font-weight: 700; - font-size: 55px; - color: black; - display: block; - position: absolute; - z-index: 55; - text-shadow: 4px 4px 5px white; - } - .gondul-public .gondul-is-private { - display: none; - } - .vertical h1.map-mode-title { - left: 30px; - bottom: 0px; - position: absolute; - transform-origin: 0px 0% 0px; - transform: rotate(-90deg); - } - .nightmode h1.map-mode-title { - color: white; - text-shadow: 4px 4px 5px black; - } - .logbook { - background-color: rgba(255,255,255,0.7); - color: black; - } - .nightmode .logbook { - background-color: rgba(0,0,0,0.7); - color: white; - } - .tvmode #topCanvas { - display: none; - } - div.map-mode-legend { - position: fixed; - bottom: 5%; - right: 5%; - z-index: 999; - } - #admin { - display: none; - } - #oplog { - display: none; - } - .vertical div.map-mode-legend { - top: -10px; - right: 30px; - position: absolute; - transform-origin: 100% 100% 0; - transform: rotate(-90deg); - height: 40px; - } - div.map-mode-legend button { - font-size: 20px; - font-weight: 700; - } - </style> + <link href="css/nms.css" rel="stylesheet"> </head> <body id="body"> @@ -121,18 +44,20 @@ <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> - <li><a href="#ping" onclick="setUpdater(handler_ping)">Ping map</a></li> - <li><a href="#uplink" onclick="setUpdater(handler_uplinks)">Uplink map</a></li> - <li><a href="#dhcp" onclick="setUpdater(handler_dhcp)">DHCP map</a></li> - <li><a href="#temp" onclick="setUpdater(handler_temp)">Temperature map</a></li> - <li><a href="#traffic" onclick="setUpdater(handler_traffic)">Traffic map</a></li> + <li class="gondul-is-private"><a href="#health" onclick="setUpdater(handler_health)">Health</a></li> + <li><a href="#ping" onclick="setUpdater(handler_ping)">Ping</a></li> + <li><a href="#uplink" onclick="setUpdater(handler_uplinks)">Uplink</a></li> + <li><a href="#dhcp" onclick="setUpdater(handler_dhcp)">DHCP</a></li> + <li><a href="#temp" onclick="setUpdater(handler_temp)">Temperature</a></li> + <li><a href="#traffic" onclick="setUpdater(handler_traffic)">Traffic</a></li> <li><a href="#traffictot" onclick="setUpdater(handler_traffic_tot)">Total switch traffic</a></li> - <li class="gondul-is-private"><a href="#snmp" onclick="setUpdater(handler_snmp)">SNMP map</a></li> - <li class="gondul-is-private"><a href="#cpu" onclick="setUpdater(handler_cpu)">CPU map</a></li> + <li class="gondul-is-private"><a href="#snmp" onclick="setUpdater(handler_snmp)">SNMP</a></li> + <li class="gondul-is-private"><a href="#cpu" onclick="setUpdater(handler_cpu)">CPU</a></li> <li><a href="#disco" onclick="setUpdater(handler_disco)">DISCO</a></li> <li class="divider"> </li> - <li><a href="#" onclick="toggleLayer('nowPickerBox');startNowPicker();">Travel in time</a></li> - <li><a href="#" onclick="nms.playback.startReplay('2016-03-21T09:00:00','2016-03-27T12:00:00');" title="Replay from opening 120 minutes per second">Replay TG</a></li> + <li class="dropdown-header">Time</li> + <li><a href="#" onclick="toggleLayer('nowPickerBox');nmsTime.startNowPicker();">Travel in time</a></li> + <li><a href="#" onclick="nmsTime.replayEvent();" title="Replay from opening 120 minutes per second">Replay event</a></li> <li class="divider"> </li> <li class="dropdown-header">View</li> <li><a href="#" onclick="toggleNightMode()">Toggle Night Mode</a></li> @@ -155,8 +80,9 @@ </li> <div class="navbar-form navbar-left"> <div class="input-group input-group-sm"> - <input id="searchbox" type="text" class="form-control" placeholder="Filter" oninput="nmsInfoBox._search()" /> + <input id="searchbox" type="text" class="form-control" placeholder="Filter" oninput="nmsSearch.search()" /> <span class="input-group-btn"> + <button id="searchbox-x" class="btn btn-default" type="button" onclick="nmsSearch.reset();">X</button> <button id="searchbox-help" class="btn btn-default" type="button" onclick="nmsInfoBox.showWindow('searchHelp');">?</button> <button id="searchbox-submit" class="btn btn-default" type="button" onclick="nmsInfoBox.showWindow('switchInfo',document.getElementById('searchbox').value);">Go!</button> </span> @@ -173,6 +99,7 @@ </div> <button id="logbox-submit" class="btn btn-default" type="button" onclick="nmsOplog.commit();">Log</button> </div> + <p onclick="nmsOplog.getUser(true);" id="logbook-name" class="navbar-text navbar-right"></p> </div><!--/.nav-collapse --> </div> @@ -180,19 +107,25 @@ <div class="container-fluid" id="admin"> - <div class="row-fluid" id="admin-row"> - </div> + <div class="row-fluid" id="admin-row"> + <div> + <p>Add linknet</p> + <input id="admin-input-linknet1" type="text" placeholder="Switch 1" /> + <input id="admin-input-linknet2" type="text" placeholder="Switch 2" /> + <button class="btn btn-primary" onclick="nmsAdmin.addLinknet()">Add</button> + </div> + <hr> + </div> </div> <div class="container-fluid" id="oplog"> - <div class="row-fluid" id="oplog-row"> + <div class="row-fluid" id="oplog-row"> <div id="oplog-parent" class="logbook"> - <table id="oplog-table" class="table table-condensed"> - </table> + <table id="oplog-table" class="table table-condensed"> + </table> </div> - </div> + </div> </div> <div class="container-fluid" id="map"> - <div class="row-fluid"> <div class="span12"> <div id="aboutKeybindings" class="col-md-4" style="position: absolute; display:none; z-index: 130;"> @@ -234,6 +167,10 @@ <td>View DHCP map</td> </tr> <tr> + <td>4</td> + <td>View super-map</td> + </tr> + <tr> <td>5</td> <td>View temperature map</td> </tr> @@ -287,40 +224,37 @@ <div id="nowPickerBox" style="position: absolute; display: none; z-index: 130;" class="col-sm-6 col-md-5"> <div class="panel panel-default"> <div class="panel-heading"> - <h3 class="panel-title">Time travel - <button type="button" class="close" aria-labe="Close" onclick="document.getElementById('nowPickerBox').style.display = 'none';" style="float: right;"> - <span aria-hidden="true">×</span> - </button> - </h3> + <h3 class="panel-title">Time travel + <button type="button" class="close" aria-labe="Close" onclick="document.getElementById('nowPickerBox').style.display = 'none';" style="float: right;"> + <span aria-hidden="true">×</span> + </button> + </h3> </div> <div class="panel-body row"> <div class="col-sm-12"> <div class="form-group"> <input type="text" class="form-control" placeholder="YYYY-MM-DDThh:mm:ss" id="nowPicker"> <div class="button-group"> - <button class="btn btn-primary" onclick="nms.playback.setNow(document.getElementById('nowPicker').dataset.iso);hideLayer('nowPickerBox');">Travel</button> - <button class="btn btn-danger" onclick="startNowPicker(Date.now());nms.playback.setNow(false);nms.playback.play();">Back to reality</button> + <button class="btn btn-primary" onclick="nmsTime.setNow(document.getElementById('nowPicker').dataset.iso);hideLayer('nowPickerBox');">Travel</button> + <button class="btn btn-danger" onclick="nmsTime.realTime();hideLayer('nowPickerBox');">Back to reality</button> <button class="btn btn-info" data-toggle="button" onclick="toggleLayer('nowPickerInfo');">Info</button> </div> </div> </div> <div id="nowPickerInfo" class="col-sm-12" style="display:none;"> - <p>Some features do not have time travel support (comment - spotting and DHCP map at the moment). We also lack - compatible SNMP data for the first day or so, so you'll - only have ping data for the first day of TG15.</p> - <p>It could take some time to load a specific point in time - for the first time. See "About performance" under the help - menu for more information.</p> - <p>You can also step backwards and forwards in time, stop - and start replay and go back to real time using keyboard - shortcuts. See the help menu for an overview of keyboard - shortcuts.</p> + <p>Time travel allows you to see the state of the network at a + given time, and even fast forward or rewind on the fly with + keyboard shortcuts (See the 'keyboard shortcuts' help + section).</p> + <p>Some features might not work perfectly with time travel, but + you should get a pretty good idea of what went on.</p> + <p>While we have more detailed data, time travel is limited to + five minute intervals by default for performance reasons.</p> </div> </div> </div> </div> - <div id="info-box-container" class="col-md-5 hidden" style="position: absolute; z-index: 120;"> + <div id="info-box-container" class="col-sm-8 col-md-6 col-lg-5 hidden" style="position: absolute; z-index: 120;"> </div> </div> @@ -349,7 +283,7 @@ </div> </div> - <div style="display:none;"><img id="source" src="img/tg16-salkart-clean-big.png" ></div> + <div style="display:none;"><img id="source" src="img/dx16-salkart.png" ></div> </div> </div><!--/.fluid-container--> <script src="js/jquery.min.js" type="text/javascript"></script> @@ -363,9 +297,11 @@ <script type="text/javascript" src="js/nms-ui.js"></script> <script type="text/javascript" src="js/nms-admin-pane.js"></script> <script type="text/javascript" src="js/nms-oplog.js"></script> + <script type="text/javascript" src="js/nms-search.js"></script> + <script type="text/javascript" src="js/nms-time.js"></script> <script src="js/jquery.datetimepicker.full.js" type="text/javascript"></script> <script type="text/javascript"> -initNMS(); + initNMS(); </script> </body> </html> |