1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
<!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">
<title>NMS2</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">
<!-- 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]-->
</head>
<body id="body">
<nav class="navbar navbar-default navbar-static-top">
<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>
<a class="navbar-brand" href="#">NMS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Map mode<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#uplink" onclick="setUpdater(handler_uplinks)">Uplink map</a></li>
<li><a href="#temp" onclick="setUpdater(handler_temp)">Temperature map</a></li>
<li><a href="#ping" onclick="setUpdater(handler_ping)">Ping map</a></li>
<li><a href="#traffic" onclick="setUpdater(handler_traffic)">Traffic map</a></li>
<li><a href="#disco" onclick="setUpdater(handler_disco)">DISCO</a></li>
<li class="divider"> </li>
<li><a href="#" onclick="toggleNightMode()" title="Add 'nightMode' anywhere in the url to auto-enable">Toggle Night Mode</a></li>
<li class="divider"> </li>
<li><a href="#" onclick="document.getElementById('nowPickerBox').style.display = 'block';">Travel in time</a></li>
<li><a href="#" onclick="startReplay();" title="Replay from opening 30 minutes per second">Replay TG</a></li>
<li class="divider"> </li>
<li class="dropdown-header">Map scale</li>
<li><input type="range" id="scaler" name="points" min="0.5" max="3" step="0.01" onchange="scaleChange()" /></li>
<li><a href="#">Scale: <div id="scaler-text"></div></a></li>
<li class="divider"> </li>
<li><a onclick="document.getElementById('aboutBox').style.display = 'block';">About</a></li>
</ul>
</li>
<li><p id="updater_name" class="navbar-text"></p></li>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p id="speed" class="navbar-text" title="Client port speed"></p></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="nowPickerBox" class="panel" style="position: fixed; display:none; background: white; border: 1px solid #000000; z-index: 130;" >
<input type="text" class="form-control" placeholder="YYYY-MM-DD hh:mm:ss" id="nowPicker" value="" />
<button class="btn btn-default" onclick="changeNow();">Travel</button>
<button class="btn" style="float: right;" onclick="document.getElementById('nowPickerBox').style.display = 'none';">Cancel</button>
</div>
<div id="info-switch-parent" class="panel" style="display: none; background: silver; position: fixed; z-index: 120;">
<table class="table" id="info-switch-table"></table>
</div>
<div id="aboutBox" class="panel" style="display: none; background: white; position: fixed; border: 1px solid #000000; z-index: 100;">
<button onclick="document.getElementById('aboutBox').style.display = 'none';" class="btn" style="float: right;">X</button>
<h1>Welcome to NMS</h1>
<h3>Cool stuff:</h3>
<ul>
<li>Everything is always there (but the frontend is a bit
sluggish atm).</li>
<li>Click a switch for more info</li>
<li>Rewind: You can check out state at a specific time or
replay from the beginning of the event</li>
<li>Night mode, now with blur.</li>
<li>Auto-scaling the viewport/canvas</li>
<li>Total client speed (up right)</li>
<li>An about-page that's full of bullet points!</li>
</ul>
<h3>Todo list front end:</h3>
<ul>
<li>Fill out this list and text</li>
<li>Polish time travel UI</li>
<li>Lock scale</li>
<li>Clean up various global variables</li>
<li>Split blur into separate canvas (canvas is there, it's just
not used)</li>
<li>Add DHCP map</li>
<li>Add magic map (combined map of sorts)</li>
<li>Add better control panel stuff</li>
<li>Overhaul general UI for a proper bootstrap-approved look.</li>
<li>Fix legend display</li>
<li>Better dialog-boxes (Both this and various others)</li>
<li>Add switch-box to review state on individual ports</li>
<li>Moving switches around (like ping.html + edit)</li>
<li>More?</li>
</ul>
<h3>Todo for backend:</h3>
<ul>
<li>Fix horrible SQL :D</li>
<li>Close SQL injections (IT'S WIDE OPEN BECAUSE WHY NOT THAT'S NEVER A PROBLEM)</li>
<li>Fix SNMP-fetcher so it gets ifXTable and at least ifOperStatus from ifTable. Possibly other tweaks.</li>
<li>Support for adding switches through an API, not just pure SQL.</li>
<li>Integrate with FAP</li>
<li>Clean up old interfaces</li>
<li>Review various agents/tools</li>
<li>Improve cache headers</li>
</ul>
</div>
<canvas id="bgCanvas" width="1920" height="1032" style="position: fixed; z-index: 1;"> </canvas>
<canvas id="linkCanvas" width="1920" height="1032" style="position: fixed; z-index: 10;"> </canvas>
<canvas id="blurCanvas" width="1920" height="1032" style="position: fixed; z-index: 20;"> </canvas>
<canvas id="switchCanvas" width="1920" height="1032" style="position: fixed; z-index: 30;"> </canvas>
<canvas id="textCanvas" width="1920" height="1032" style="position: fixed; z-index: 40;"> </canvas>
<canvas id="topCanvas" width="1920" height="1032" style="position: fixed; z-index: 50; cursor: pointer;" onclick="canvasClick(event)">
</canvas>
<div style="display:none;"><img id="source" src="img/tg15-salkart-full.png" ></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="info-legend-box">
<button id="legend-1"></button> <button id="legend-2"></button> <button id="legend-3"></button> <button id="legend-4"></button> <button id="legend-5"></button>
</div>
</div>
</div>
</div><!--/.fluid-container-->
<script src="js/jquery.min.js" type="text/javascript">
<ascript src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/nms.js"></script>
<script type="text/javascript">
updatePorts();
updatePing();
window.addEventListener('resize',resizeEvent,true);
document.addEventListener('load',resizeEvent,true);
setInterval(updatePorts,5000);
setInterval(updateInfo,5000);
setInterval(updatePing,1000);
setInterval(updateMap,1000);
setInterval(updateSpeed,3000);
url = document.URL;
if (/#ping/.exec(url)) {
setUpdater(handler_ping);
}else if (/#uplink/.exec(url)) {
setUpdater(handler_uplinks);
} else if (/#temp/.exec(url)) {
setUpdater(handler_temp);
} else if (/#traffic/.exec(url)) {
setUpdater(handler_traffic);
} else if (/#disco/.exec(url)) {
setUpdater(handler_disco);
} else {
setUpdater(handler_ping);
}
if (/nightMode/.exec(url)) {
toggleNightMode();
}
</script>
</body>
</html>
|
