diff options
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 665 |
1 files changed, 371 insertions, 294 deletions
diff --git a/web/index.html b/web/index.html index ab1d0af..0167092 100644 --- a/web/index.html +++ b/web/index.html @@ -1,314 +1,393 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> - <meta name="description" content=""> - <meta name="author" content=""> - <link rel="icon" href="../../favicon.ico"> - + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Gondul</title> - - <!-- Bootstrap core CSS --> - <link href="css/bootstrap.min.css" rel="stylesheet"> - - <!-- Custom styles for this template --> - <link href="css/navbar-static-top.css" rel="stylesheet"> - - <!-- Date-picker styles --> - <link href="css/jquery.datetimepicker.css" rel="stylesheet"> - - <link href="css/nms.css" rel="stylesheet"> + <link + href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.4/dist/css/bootstrap.min.css" + rel="stylesheet" + crossorigin="anonymous" + /> + <link + rel="stylesheet" + href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" + /> + <link rel="stylesheet" href="css/nms.css" /> </head> - <body id="body"> - <nav class="navbar navbar-default navbar-static-top"> + <nav + id="navbar" + class="navbar navbar-expand-md sticky-top navbar-dark bg-dark mt-0 pt-0 mb-0 pb-0" + > <div class="container-fluid"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - </div> - <div id="navbar" class="navbar-collapse collapse"> - <p class="navbar-text"><span class="glyphicon glyphicon-heart" id="heartbeat" aria-hidden="true"></span></p> - <ul class="nav navbar-nav"> - <li id='map-link' class="active"><a href="#" onclick="nmsUi.setActive('map');" title="Map">M<span class="sr-only">(current)</span></a></li> - <li id='admin-link' class="gondul-is-private"><a href="#" onclick="nmsUi.setActive('admin');nmsAdmin.updateConfigPane();" title="Admin">A</a></li> - <li id='template-link' class="gondul-is-private"><a href="#" onclick="nmsUi.setActive('template');" title="Template">T</a></li> - <li id='oplog-link' class="gondul-is-private"><a href="#" onclick="nmsUi.setActive('oplog');" title="Oplog">O</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="Menu">M - <span class="caret"></span> - </a> - <ul class="dropdown-menu" role="menu"> - <li class="gondul-is-private dropdown-header">Switches</li> - <li class="gondul-is-private"><a href="#" onclick="new nmsNewSwitch().show();">Add switch</a></li> - <li class="gondul-is-private"><a href="#" onclick="new nmsNewNet().show();">Add network</a></li> - <li class="gondul-is-private"><a href="#" onclick="nmsInfoBox.showWindow('listNetwork')">List networks</a></li> - <li class="gondul-is-private"><a href="#" onclick="nmsMap.moveSet(true);">Enable switch moving</a></li> - <li class="gondul-is-private"><a href="#" onclick="nmsMap.moveSet(false);">Disable switch moving</a></li> - <li class="gondul-is-private divider"> </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="nmsUi.toggleVertical()">Toggle vertical mode</a></li> - <li class="divider"> </li> - <li class="gondul-is-private dropdown-header">Inventory lists</li> - <li class="gondul-is-private"><a href="#" onclick="nmsInfoBox.showWindow('inventoryListing','distro_name');">Distro names</a></li> - <li class="gondul-is-private"><a href="#" onclick="nmsInfoBox.showWindow('inventoryListing','sysDescr')">System description</a></li> - <li class="gondul-is-private"><a href="#" onclick="nmsInfoBox.showWindow('inventoryListing','jnxBoxSerialNo')">Serial Numbers</a></li> - <li class="gondul-is-private divider"> </li> - <li class="dropdown-header">Help</li> - <li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li> - </ul> - </li> - <div class="navbar-form navbar-left"> - <div class="input-group input-group-sm"> - <input id="searchbox" type="text" class="form-control" size="8" 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="nmsSearch.runSearch();">Go!</button> - </span> - </div> - </div> - <p class="navbar-text" id="dhcp-summary">(...)</p> - <div class="navbar-text" id="navbar-graph-div"> - <img id="navbar-graph" style="display:none" title="Blue: Average latency. Green: Total traffic. Time frame: last 60 minutes."/> - </div> - </li> - </ul> - </div><!--/.nav-collapse --> + <span class="navbar-text"> + <i + id="heartbeat" + aria-hidden="true" + class="navbar-brand bi bi-heart-fill" + ></i> + </span> + <button + class="navbar-toggler" + type="button" + data-bs-toggle="collapse" + data-bs-target="#navbarSupportedContent" + aria-controls="navbarSupportedContent" + aria-expanded="false" + aria-label="Toggle navigation" + > + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + <ul class="navbar-nav me-2 mb-lg-0"> + <li id="map-link" class="nav-item active"> + <a + class="nav-link active" + aria-current="page" + href="#" + onclick="nmsUi.setActive('map');" + >Map</a + > + </li> + <li id="oplog-link" class="nav-item"> + <a class="nav-link" href="#" onclick="nmsUi.setActive('oplog');" + >Oplog</a + > + </li> + <li class="nav-item dropdown"> + <a + class="nav-link" + href="#" + id="navbarDropdown" + role="button" + data-bs-toggle="dropdown" + aria-expanded="false" + > + <i class="bi bi-menu-button-wide"></i> + </a> + <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> + <li class="gondul-is-private"> + <a + href="#" + class="dropdown-item" + onclick="nmsInfoBox.showWindow('searchResults')" + >List devices</a + > + </li> + <li class="gondul-is-private"> + <a + href="#" + class="dropdown-item" + onclick="nmsInfoBox.showWindow('listNetwork')" + >List networks</a + > + </li> + <li class="gondul-is-private"> + <a + href="#" + class="dropdown-item" + onclick="nmsMap.moveSet(true);" + >Enable switch moving</a + > + </li> + <li class="gondul-is-private"> + <a + href="#" + class="dropdown-item" + onclick="nmsMap.moveSet(false);" + >Disable switch moving</a + > + </li> + <li class="gondul-is-private"> + <hr class="dropdown-divider" /> + </li> + <li class="gondul-is-private dropdown-header">Time</li> + <li class="gondul-is-private dropdown-header">View</li> + <li class="gondul-is-private dropdown-header"> + Inventory lists + </li> + <li class="gondul-is-private dropdown-header">Help</li> + <li> + <a + href="#" + class="dropdown-item" + onclick="toggleLayer('aboutKeybindings');" + >Keyboard Shortcuts</a + > + </li> + <li> + <a + href="#" + class="dropdown-item" + onclick="nmsInfoBox.showWindow('debug');" + >Debug</a + > + </li> + </ul> + </li> + </ul> + <form class="form-inline"> + <div class="input-group input-group-sm"> + <input + id="searchbox" + type="text" + class="form-control" + placeholder="Filter" + aria-label="Filter" + oninput="nmsSearch.search()" + /> + <button + id="searchbox-help" + class="btn btn-secondary btn-sm" + type="button" + onclick="nmsInfoBox.showWindow('searchHelp');" + > + ? + </button> + <button + id="searchbox-submit" + class="btn btn-secondary btn-sm" + type="submit" + onclick="nmsSearch.runSearch();" + > + <i class="bi bi-search"></i> + </button> + </div> + </form> + </div> </div> </nav> - - <div class="container-fluid" id="admin"> - <div class="row-fluid" id="admin-row"> - <div> - <p>Add linknet</p> - <div class="form-inline"> - <div class="form-group"> - <input id="admin-input-linknet1" class="form-control" type="text" placeholder="Switch 1" /> - <input id="admin-input-linknet2" class="form-control" type="text" placeholder="Switch 2" /> - <button class="btn btn-primary" onclick="nmsAdmin.addLinknet()">Add</button> - </div> - </div> - </div> - <hr> - </div> - </div> <div class="container-fluid" id="oplog"> - <div class="row-fluid" id="oplog-row"> - <div id="oplog-parent" class="logbook"> - <table id="oplog-table" class="table table-condensed"> - </table> - </div> - </div> - </div> - <div class="container-fluid" id="template"> - <div class="row-fluid" id="template-row"> - <div class="span3 col-lg-6"> - <textarea id="template-input" class="form-control" cols="80" rows="25"></textarea> - <div class="form-inline"> - https://gondul.tg.lol/api/templates/ - <div class="form-group"> - <select onchange="nmsTemplate.fromFile(this.value)" class="form-control" id="nmsTemplate-select"> - <option value="">Select template</option> - </select> - </div> - <div class="form-group"> - <label for="template-query-params">Query parameters</label> - <input type="text" class="form-control" id="template-query-params" value="?a=r1.ring:ge-1/0/2.0:mgmt+irb.666" /> - </div> - <div class="form-group"> - <button onclick="nmsTemplate.test()" class="btn btn-primary">Test</button> - </div> - </div> - </div> - <div class="span3 col-lg-6"> - <textarea id="template-output" class="form-control" readonly cols="80" rows="25"></textarea> - </div> + <div class="row" id="oplog-row"> + <div id="oplog-parent" class="logbook"> + <table id="oplog-table" class="table table-sm"></table> + </div> </div> </div> + <div class="container-fluid" id="map"> - <div class="row-fluid"> - <div class="span12" id="metaContainer"> - <div id="aboutKeybindings" 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">Keyboard Shortcuts - <button type="button" class="close" aria-label="Close" onclick="document.getElementById('aboutKeybindings').style.display = 'none';" style="float: right"> - <span aria-hidden="true">×</span> - </button> - </h3> - </div> - <table class="table table-condensed"> - <tr> - <th>Key</th> - <th>Description</th> - </tr> - <tr> - <td>?</td> - <td>Toggle this help window</td> - </tr> - <tr> - <td>-</td> - <td>Toggle navigation bar</td> - </tr> - <tr> - <td>n</td> - <td>Toggle night mode</td> - </tr> - <tr> - <td>1</td> - <td>View super-map/health map</td> - </tr> - <tr> - <td>2</td> - <td>View uplink map</td> - </tr> - <tr> - <td>3</td> - <td>View DHCP map</td> - </tr> - <tr> - <td>4</td> - <td>View Ping map</td> - </tr> - <tr> - <td>5</td> - <td>View temperature map</td> - </tr> - <tr> - <td>6</td> - <td>View uplink traffic map</td> - </tr> - <tr> - <td>7</td> - <td>View total switch traffic map</td> - </tr> - <tr> - <td>8</td> - <td>View SNMP map</td> - </tr> - <tr> - <td>9</td> - <td>View CPU map</td> - </tr> - <tr> - <td>0</td> - <td>View Disco map</td> - </tr> - <tr> - <td>c</td> - <td>Toggle linknet connections</td> - </tr> - <tr> - <td>h</td> - <td>Step 1 hour back in time</td> - </tr> - <tr> - <td>j</td> - <td>Step 5 minutes back in time</td> - </tr> - <tr> - <td>k</td> - <td>Step 5 minutes forward in time</td> - </tr> - <tr> - <td>l</td> - <td>Step 1 hour forward in time</td> - </tr> - <tr> - <td>o</td> - <td>Toggle the ops log</td> - </tr> - <tr> - <td>p</td> - <td>Toggle playback (1 hour per second)</td> - </tr> - <tr> - <td>r</td> - <td>Return to real time</td> - </tr> - </table> - </div> - </div> - <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> - </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="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 class="row"> + <div id="genericPanelContainer"> + <div id="info-box-container" class="d-none"></div> + </div> + <div class="span12" id="metaContainer"> + <div id="aboutKeybindings" class="d-none"> + <div + class="modal" + tabindex="-1" + aria-hidden="true" + style="display: block" + > + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-5">Keyboard Shortcuts</h1> + <button + type="button" + class="btn-close" + onclick="toggleLayer('aboutKeybindings');" + aria-label="Close" + ></button> + </div> + <div class="modal-body"> + <table class="table table-sm"> + <tr> + <th>Key</th> + <th>Description</th> + </tr> + <tr> + <td>?</td> + <td>Toggle this help window</td> + </tr> + <tr> + <td>-</td> + <td>Toggle navigation bar</td> + </tr> + <tr> + <td>n</td> + <td>Toggle night mode</td> + </tr> + <tr> + <td>1</td> + <td>View super-map/health map</td> + </tr> + <tr> + <td>2</td> + <td>View uplink map</td> + </tr> + <tr> + <td>3</td> + <td>View DHCP map</td> + </tr> + <tr> + <td>4</td> + <td>View Ping map</td> + </tr> + <tr> + <td>5</td> + <td>View temperature map</td> + </tr> + <tr> + <td>6</td> + <td>View uplink traffic map</td> + </tr> + <tr> + <td>7</td> + <td>View total switch traffic map</td> + </tr> + <tr> + <td>8</td> + <td>View SNMP map</td> + </tr> + <tr> + <td>9</td> + <td>View CPU map</td> + </tr> + <tr> + <td>0</td> + <td>View Disco map</td> + </tr> + <tr> + <td>c</td> + <td>Toggle linknet connections</td> + </tr> + <tr> + <td>h</td> + <td>Step 1 hour back in time</td> + </tr> + <tr> + <td>j</td> + <td>Step 5 minutes back in time</td> + </tr> + <tr> + <td>k</td> + <td>Step 5 minutes forward in time</td> + </tr> + <tr> + <td>l</td> + <td>Step 1 hour forward in time</td> + </tr> + <tr> + <td>o</td> + <td>Toggle the ops log</td> + </tr> + <tr> + <td>p</td> + <td>Toggle playback (1 hour per second)</td> + </tr> + <tr> + <td>r</td> + <td>Return to real time</td> + </tr> + </table> + </div> + </div> </div> </div> </div> - <div id="nowPickerInfo" class="col-sm-12" style="display:none;"> - <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> + + <h1 id="map-mode-title" class="map-mode-title ms-2 mt-2"></h1> + <div class="map-mode-legend mb-4"> + <button class="btn btn-default btn-sm" id="legend-1"></button> + <button class="btn btn-default btn-sm" id="legend-2"></button> + <button class="btn btn-default btn-sm" id="legend-3"></button> + <button class="btn btn-default btn-sm" id="legend-4"></button> + <button class="btn btn-default btn-sm" id="legend-5"></button> </div> - </div> - </div> - </div> - <div id="genericPanelContainer" style="max-width: 60%; position: absolute; display: grid; grid-template-coumns: repeat(auto-fit,minmax(30%,100%));grid-gap: 10px; z-index: 120;"> - <div id="info-box-container" class="hidden" style="grid-column: 1 / auto; max-width: 800px; min-width: 700px;"> </div> - </div> - </div> - <h1 id="map-mode-title" class="map-mode-title"></h1> - <div class="map-mode-legend form-group"> - <button class="btn btn-default btn-sm" id="legend-1"></button> - <button class="btn btn-default btn-sm" id="legend-2"></button> - <button class="btn btn-default btn-sm" id="legend-3"></button> - <button class="btn btn-default btn-sm" id="legend-4"></button> - <button class="btn btn-default btn-sm" id="legend-5"></button> - </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; display: none;"> </canvas> - <canvas id="blurCanvas" width="1920" height="1032" style="position: absolute; z-index: 20;"> </canvas> - <canvas id="switchCanvas" width="1920" height="1032" style="position: absolute; z-index: 30;"> </canvas> - <canvas id="textCanvas" width="1920" height="1032" style="position: absolute; z-index: 40;"> </canvas> - <canvas id="textInfoCanvas" width="1920" height="1032" style="position: absolute; z-index: 45;"> </canvas> - <canvas id="topCanvas" width="1920" height="1032" style="position: absolute; z-index: 50;"> </canvas> - <canvas id="inputCanvas" width="1920" height="1032" style="position: absolute; z-index: 60; cursor: pointer;" onmousedown="nmsMap.canvasClick(event)"> </canvas> - <canvas id="hiddenCanvas" width="1000" height="10" style="display: none; position: absolute; z-index: 1000 "></canvas> - <div class="logbook logbook-mini gondul-is-private" style="position: absolute; right: 10px; width: 20%; z-index: 70; float: right;"> - <div id="oplog-parent-mini" class="logbook" style="border-color: transparent;"> - </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; display: none" + > + </canvas> + <canvas + id="blurCanvas" + width="1920" + height="1032" + style="position: absolute; z-index: 20" + > + </canvas> + <canvas + id="switchCanvas" + width="1920" + height="1032" + style="position: absolute; z-index: 30" + > + </canvas> + <canvas + id="textCanvas" + width="1920" + height="1032" + style="position: absolute; z-index: 40" + > + </canvas> + <canvas + id="textInfoCanvas" + width="1920" + height="1032" + style="position: absolute; z-index: 45" + > + </canvas> + <canvas + id="topCanvas" + width="1920" + height="1032" + style="position: absolute; z-index: 50" + > + </canvas> + <canvas + id="inputCanvas" + width="1920" + height="1032" + style="position: absolute; z-index: 60; cursor: pointer" + onmousedown="nmsMap.canvasClick(event)" + > + </canvas> + <canvas + id="hiddenCanvas" + width="1000" + height="10" + style="display: none; position: absolute; z-index: 1000" + ></canvas> - <div style="display:none;"><img id="source" src="img/floor.png" ></div> + <div + class="logbook logbook-mini pt-2 gondul-is-private" + style=" + position: absolute; + right: 10px; + width: 20%; + z-index: 70; + float: right; + font-size: 0.8rem !important; + " + > + <div id="oplog-parent-mini" class="logbook"></div> + </div> + <div style="display: none"> + <img id="source" src="img/floor.png" /> + </div> + </div> </div> - </div><!--/.fluid-container--> - <script src="js/jquery.min.js" type="text/javascript"></script> - <script src="js/bootstrap.min.js" type="text/javascript"></script> - <script src="js/moment.min.js" type="text/javascript"></script> - <script src="js/Chart.min.js" type="text/javascript"></script> + </div> + + <script + src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.4/dist/js/bootstrap.bundle.min.js" + crossorigin="anonymous" + ></script> + + <script type="text/javascript" src="js/nms-fetch.js"></script> + <script type="text/javascript" src="js/nms-ui-boxes.js"></script> <script type="text/javascript" src="js/nms-data.js"></script> <script type="text/javascript" src="js/nms-map.js"></script> @@ -317,20 +396,18 @@ <script type="text/javascript" src="js/nms-color-util.js"></script> <script type="text/javascript" src="js/nms-map-handlers.js"></script> <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 type="text/javascript" src="js/nms-dhcp.js"></script> <script type="text/javascript" src="js/nms-template.js"></script> - <script type="text/javascript" src="js/nms-draw-chart.js"></script> <script type="text/javascript" src="js/nms-types.js"></script> <script type="text/javascript" src="js/nms-ui-switch.js"></script> <script type="text/javascript" src="js/nms-ui-switch-summary.js"></script> <script type="text/javascript" src="js/nms-nightmode.js"></script> - <script src="js/jquery.datetimepicker.full.js" type="text/javascript"></script> + <script type="text/javascript"> - initNMS(); + initNMS(); </script> </body> </html> |