| 3241 |
rexy |
1 |
<!DOCTYPE html>
|
|
|
2 |
<html lang="en">
|
|
|
3 |
<head>
|
|
|
4 |
<meta charset="utf-8">
|
|
|
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
6 |
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
7 |
<title>nfsen-ng</title>
|
|
|
8 |
<script src="js/jquery.min.js"></script>
|
|
|
9 |
<script src="js/popper.min.js"></script>
|
|
|
10 |
<script src="js/bootstrap.min.js"></script>
|
|
|
11 |
<script src="js/ion.rangeSlider.min.js"></script>
|
|
|
12 |
<script src="js/dygraph.min.js"></script>
|
|
|
13 |
<script src="js/footable.min.js"></script>
|
|
|
14 |
<link rel="stylesheet" type="text/css" href="css/dygraph.css" />
|
|
|
15 |
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="css/ion.rangeSlider.css" />
|
|
|
17 |
<link rel="stylesheet" type="text/css" href="css/footable.bootstrap.min.css" />
|
|
|
18 |
<link rel="stylesheet" type="text/css" href="css/nfsen-ng.css" />
|
|
|
19 |
</head>
|
|
|
20 |
|
|
|
21 |
<body class="p-2">
|
|
|
22 |
<header>
|
|
|
23 |
<a class="position-absolute link-secondary" style="text-decoration: none;" href="https://github.com/mbolli/nfsen-ng" target="_blank">
|
|
|
24 |
nfsen-ng <span id="version"></span>
|
|
|
25 |
</a>
|
|
|
26 |
<ul id="viewList" class="nav nav-tabs justify-content-end" role="tablist">
|
|
|
27 |
<li role="presentation" class="nav-item align-self-center">
|
|
|
28 |
<a href="#" class="reload px-3"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16">
|
|
|
29 |
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5"/>
|
|
|
30 |
</svg></a>
|
|
|
31 |
</li>
|
|
|
32 |
<li role="presentation" class="nav-item">
|
|
|
33 |
<a class="nav-link active" data-view="graphs" href="#">Graphs <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-graph-up" viewBox="0 0 16 16">
|
|
|
34 |
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07"/>
|
|
|
35 |
</svg>
|
|
|
36 |
</a>
|
|
|
37 |
</li>
|
|
|
38 |
<li role="presentation" class="nav-item">
|
|
|
39 |
<a class="nav-link" data-view="flows" href="#">Flows <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
|
|
|
40 |
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0"/>
|
|
|
41 |
<path d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z"/>
|
|
|
42 |
<path fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5"/>
|
|
|
43 |
</svg>
|
|
|
44 |
</a>
|
|
|
45 |
</li>
|
|
|
46 |
<li role="presentation" class="nav-item">
|
|
|
47 |
<a class="nav-link" data-view="statistics" href="#">Statistics <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-columns" viewBox="0 0 16 16">
|
|
|
48 |
<path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 0 .5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2A.5.5 0 0 1 .5 2h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2A.5.5 0 0 1 .5 4h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2A.5.5 0 0 1 .5 6h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2A.5.5 0 0 1 .5 8h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
|
|
|
49 |
</svg>
|
|
|
50 |
</a>
|
|
|
51 |
</li>
|
|
|
52 |
<li role="presentation" class="nav-item">
|
|
|
53 |
<a class="nav-link" data-view="config" href="#">Config ⚙️
|
|
|
54 |
</a>
|
|
|
55 |
</li>
|
|
|
56 |
</ul>
|
|
|
57 |
</header>
|
|
|
58 |
<div id="filterContainer" class="container-fluid tab-content">
|
|
|
59 |
<form autocomplete="off">
|
|
|
60 |
<div id="filter" class="filter row align-items-start bg-light border-bottom py-3" style="flex-direction: row">
|
|
|
61 |
<div class="date_selection col-12 p-3 mb-4 border-bottom">
|
|
|
62 |
<div class="mb-3">
|
|
|
63 |
<input type="text" name="date_range" id="date_range"/>
|
|
|
64 |
</div>
|
|
|
65 |
|
|
|
66 |
<div class="float-end">
|
|
|
67 |
<div class="btn-group" id="date_slot" data-bs-toggle="buttons">
|
|
|
68 |
<input type="radio" class="btn-check" name="range" data-unit="h" id="dateSlotH" value="3600000">
|
|
|
69 |
<label class="btn btn-outline-primary" for="dateSlotH">1 hour</label>
|
|
|
70 |
<input type="radio" class="btn-check" name="range" data-unit="d" id="dateSlotD" value="86400000">
|
|
|
71 |
<label class="btn btn-outline-primary" for="dateSlotD">24 hours</label>
|
|
|
72 |
<input type="radio" class="btn-check" name="range" data-unit="w" id="dateSlotW" value="604800000">
|
|
|
73 |
<label class="btn btn-outline-primary" for="dateSlotW">Week</label>
|
|
|
74 |
<input type="radio" class="btn-check" name="range" data-unit="m" id="dateSlotM" value="2592000000">
|
|
|
75 |
<label class="btn btn-outline-primary" for="dateSlotM">Month</label>
|
|
|
76 |
<input type="radio" class="btn-check" name="range" data-unit="y" id="dateSlotY" value="31536000000">
|
|
|
77 |
<label class="btn btn-outline-primary" for="dateSlotY">Year</label>
|
|
|
78 |
</div>
|
|
|
79 |
|
|
|
80 |
<div class="btn-group" id="date_slot_nav">
|
|
|
81 |
<button type="button" class="btn btn-outline-primary prev" disabled><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
|
|
|
82 |
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
|
|
|
83 |
</svg></button>
|
|
|
84 |
<button type="button" class="btn btn-outline-primary next" disabled><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
|
|
|
85 |
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
|
|
|
86 |
</svg></button>
|
|
|
87 |
</div>
|
|
|
88 |
|
|
|
89 |
<div class="btn-group" id="date_syncing" data-view="graphs">
|
|
|
90 |
<button type="button" class="btn btn-outline-primary sync-date" disabled>Copy from graph <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
|
|
|
91 |
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>
|
|
|
92 |
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>
|
|
|
93 |
</svg></button>
|
|
|
94 |
</div>
|
|
|
95 |
</div>
|
|
|
96 |
</div>
|
|
|
97 |
|
|
|
98 |
<div class="d-none col-xs-6 col-sm-2" data-view="config">
|
|
|
99 |
<ul>
|
|
|
100 |
<li>
|
|
|
101 |
Config <a href="../api/config">/api/config</a>
|
|
|
102 |
</li>
|
|
|
103 |
<li>
|
|
|
104 |
Theme
|
|
|
105 |
<a href="javascript:window.localStorage.setItem('theme', 'light')">Light</a>
|
|
|
106 |
<a href="javascript:window.localStorage.setItem('theme', 'dark')">Dark</a>
|
|
|
107 |
</li>
|
|
|
108 |
|
|
|
109 |
<script>
|
|
|
110 |
var theme = window.localStorage.getItem("theme");
|
|
|
111 |
var styleId = document.styleSheets.length - 1;
|
|
|
112 |
var ruleId = 2;
|
|
|
113 |
switch (theme)
|
|
|
114 |
{
|
|
|
115 |
case "light": document.styleSheets[styleId].rules[ruleId].style.filter="invert(0.0)"; break;;
|
|
|
116 |
case "dark": document.styleSheets[styleId].rules[ruleId].style.filter="invert(0.9)"; break;;
|
|
|
117 |
}
|
|
|
118 |
</script>
|
|
|
119 |
</div>
|
|
|
120 |
|
|
|
121 |
<div id="filterDisplay" class="d-none col-xs-6 col-sm-2" data-view="graphs">
|
|
|
122 |
<p class="h6">Display</p>
|
|
|
123 |
|
|
|
124 |
<div class="form-group">
|
|
|
125 |
<select id="filterDisplaySelect" class="form-control form-select">
|
|
|
126 |
<option value="sources">Sources</option>
|
|
|
127 |
<option value="protocols">Protocols</option>
|
|
|
128 |
<option value="ports">Ports</option>
|
|
|
129 |
</select>
|
|
|
130 |
</div>
|
|
|
131 |
</div>
|
|
|
132 |
|
|
|
133 |
<div id="filterPorts" class="d-none col-xs-6 col-sm-2 col-md-1" data-view="graphs" data-display="ports">
|
|
|
134 |
<p class="h6">Ports</p>
|
|
|
135 |
|
|
|
136 |
<div class="form-group">
|
|
|
137 |
<select id="filterPortsSelect" multiple class="form-control form-select"></select>
|
|
|
138 |
</div>
|
|
|
139 |
</div>
|
|
|
140 |
|
|
|
141 |
<div id="filterSources" class="d-none col-xs-6 col-sm-3 col-md-2" data-view="graphs flows statistics" data-display="sources protocols ports">
|
|
|
142 |
<p class="h6">Sources</p>
|
|
|
143 |
|
|
|
144 |
<div class="form-group">
|
|
|
145 |
<select id="filterSourcesSelect" multiple class="form-control form-select">
|
|
|
146 |
<option value="any">Any</option>
|
|
|
147 |
</select>
|
|
|
148 |
</div>
|
|
|
149 |
</div>
|
|
|
150 |
|
|
|
151 |
<div id="filterProtocols" class="d-none col-xs-12 col-sm-6 col-md-4 col-lg-3" data-view="graphs" data-display="sources protocols ports">
|
|
|
152 |
<p class="h6">Protocols</p>
|
|
|
153 |
|
|
|
154 |
<div id="filterProtocolButtons" class="btn-group btn-group-md" data-bs-toggle="buttons">
|
|
|
155 |
<input type="radio" class="btn-check" name="protocol[]" value="any" id="filterProtocolAny">
|
|
|
156 |
<label class="btn btn-outline-primary" for="filterProtocolAny">Any</label>
|
|
|
157 |
<input type="radio" class="btn-check" name="protocol[]" value="tcp" id="filterProtocolTcp">
|
|
|
158 |
<label class="btn btn-outline-primary" for="filterProtocolTcp">TCP</label>
|
|
|
159 |
<input type="radio" class="btn-check" name="protocol[]" value="udp" id="filterProtocolUdp">
|
|
|
160 |
<label class="btn btn-outline-primary" for="filterProtocolUdp">UDP</label>
|
|
|
161 |
<input type="radio" class="btn-check" name="protocol[]" value="icmp" id="filterProtocolIcmp">
|
|
|
162 |
<label class="btn btn-outline-primary" for="filterProtocolIcmp">ICMP</label>
|
|
|
163 |
<input type="radio" class="btn-check" name="protocol[]" value="other" id="filterProtocolOther">
|
|
|
164 |
<label class="btn btn-outline-primary" for="filterProtocolOther">Others</label>
|
|
|
165 |
</div>
|
|
|
166 |
</div>
|
|
|
167 |
|
|
|
168 |
<div id="filterTypes" class="d-none col-xs-12 col-sm-6 col-md-3 col-lg-2" data-view="graphs" data-display="sources protocols ports">
|
|
|
169 |
<p class="h6">Data Type</p>
|
|
|
170 |
|
|
|
171 |
<div class="btn-group btn-group-md" data-bs-toggle="buttons">
|
|
|
172 |
<input type="radio" class="btn-check" name="datatype" value="traffic" id="dataTypeTraffic" checked>
|
|
|
173 |
<label class="btn btn-outline-primary" for="dataTypeTraffic">Traffic</label>
|
|
|
174 |
<input type="radio" class="btn-check" name="datatype" value="packets" id="dataTypePackets">
|
|
|
175 |
<label class="btn btn-outline-primary" for="dataTypePackets">Packets</label>
|
|
|
176 |
<input type="radio" class="btn-check" name="datatype" value="flows" id="dataTypeFlows">
|
|
|
177 |
<label class="btn btn-outline-primary" for="dataTypeFlows">Flows</label>
|
|
|
178 |
</div>
|
|
|
179 |
</div>
|
|
|
180 |
|
|
|
181 |
<div id="trafficUnit" class="d-none col-xs-6 col-sm-3 col-md-2 col-lg-2" data-view="graphs" data-display="sources protocols ports">
|
|
|
182 |
<p class="h6">Traffic unit</p>
|
|
|
183 |
|
|
|
184 |
<div class="btn-group btn-group-md" data-bs-toggle="buttons">
|
|
|
185 |
<input type="radio" class="btn-check" name="trafficUnit" value="bits" id="trafficUnitBits" checked>
|
|
|
186 |
<label class="btn btn-outline-primary" for="trafficUnitBits">Bits</label>
|
|
|
187 |
<input type="radio" class="btn-check" name="trafficUnit" value="bytes" id="trafficUnitBytes">
|
|
|
188 |
<label class="btn btn-outline-primary" for="trafficUnitBytes">Bytes</label>
|
|
|
189 |
</div>
|
|
|
190 |
</div>
|
|
|
191 |
|
|
|
192 |
<div id="filterFlowsLimit" class="d-none col-xs-6 col-sm-2 col-md-2 col-lg-1" data-view="flows">
|
|
|
193 |
<p class="h6">Limit Flows</p>
|
|
|
194 |
|
|
|
195 |
<div class="form-group">
|
|
|
196 |
<select id="flowsFilterLimitSelection" class="form-control form-select">
|
|
|
197 |
<option value="20">20</option>
|
|
|
198 |
<option value="50" >50</option>
|
|
|
199 |
<option value="100" >100</option>
|
|
|
200 |
<option value="500" >500</option>
|
|
|
201 |
<option value="1000" >1000</option>
|
|
|
202 |
<option value="10000" >10000</option>
|
|
|
203 |
</select>
|
|
|
204 |
</div>
|
|
|
205 |
</div>
|
|
|
206 |
|
|
|
207 |
<div id="filterStatisticsTop" class="d-none col-xs-6 col-sm-2 col-md-2 col-lg-1" data-view="statistics">
|
|
|
208 |
<p class="h6">Top records</p>
|
|
|
209 |
<div class="form-group">
|
|
|
210 |
<select id="statsFilterTopSelection" class="form-control form-select">
|
|
|
211 |
<option value="10" selected>10</option>
|
|
|
212 |
<option value="20">20</option>
|
|
|
213 |
<option value="50">50</option>
|
|
|
214 |
<option value="100">100</option>
|
|
|
215 |
<option value="200">200</option>
|
|
|
216 |
<option value="500">500</option>
|
|
|
217 |
</select>
|
|
|
218 |
</div>
|
|
|
219 |
</div>
|
|
|
220 |
|
|
|
221 |
|
|
|
222 |
<div id="filterNfdump" class="d-none col-xs-12 col-sm-7 col-md-5" data-view="graphs flows statistics">
|
|
|
223 |
|
|
|
224 |
<p class="h6">NFDUMP filter <span aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="right" title="The filter syntax is similar to the well known pcap library used by tcpdump. All keywords are case-independent. Example: dst port 80"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
|
|
|
225 |
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
|
|
|
226 |
</svg></span></p>
|
|
|
227 |
|
|
|
228 |
<div class="form-group">
|
|
|
229 |
<textarea class="form-control" id="filterNfdumpTextarea" rows="3" autocomplete="on"></textarea>
|
|
|
230 |
</div>
|
|
|
231 |
|
|
|
232 |
<div class="btn-group">
|
|
|
233 |
<div id="filterFilters" class="form-group">
|
|
|
234 |
<label class="form-control" >Filters</label>
|
|
|
235 |
<select id="filterFiltersSelect" class="form-control form-select" title="Filters" style="">
|
|
|
236 |
<option value="" disabled selected>Select your filter</option>
|
|
|
237 |
</select>
|
|
|
238 |
</div>
|
|
|
239 |
|
|
|
240 |
<button id="filterFiltersButtonRemove" type="button" class="btn btn-outline-primary" >Delete filter (server)</button>
|
|
|
241 |
<button id="filterFiltersButtonSave" type="button" class="btn btn-outline-primary" >Save filter (server)</button>
|
|
|
242 |
</div>
|
|
|
243 |
|
|
|
244 |
</div>
|
|
|
245 |
|
|
|
246 |
<div id="filterFlowAggregation" class="col">
|
|
|
247 |
<div class="d-none" data-view="flows">
|
|
|
248 |
|
|
|
249 |
<p class="h6">Global Aggregation</p>
|
|
|
250 |
<div class="btn-group btn-group-md" data-bs-toggle="buttons" id="filterFlowAggregationGlobal">
|
|
|
251 |
<input type="checkbox" class="btn-check" name="bidirectional" id="filterFlowAggregationGlobalBi">
|
|
|
252 |
<label class="btn btn-outline-primary" for="filterFlowAggregationGlobalBi">Bi-directional</label>
|
|
|
253 |
|
|
|
254 |
<input data-disable-on="bi-directional" type="checkbox" class="btn-check" name="proto" id="filterFlowAggregationGlobalProto">
|
|
|
255 |
<label class="btn btn-outline-primary" for="filterFlowAggregationGlobalProto">Protocol</label>
|
|
|
256 |
</div>
|
|
|
257 |
|
|
|
258 |
</div>
|
|
|
259 |
<div class="d-none" data-view="flows">
|
|
|
260 |
<p class="h6">Port Aggregation</p>
|
|
|
261 |
<div class="btn-group btn-group-md" data-bs-toggle="buttons" id="filterFlowAggregationPort">
|
|
|
262 |
<input data-disable-on="bi-directional" type="checkbox" class="btn-check" name="srcport" id="filterFlowAggregationPortSrc">
|
|
|
263 |
<label class="btn btn-outline-primary" for="filterFlowAggregationPortSrc">Source port</label>
|
|
|
264 |
|
|
|
265 |
<input data-disable-on="bi-directional" type="checkbox" class="btn-check" name="dstport" id="filterFlowAggregationPortDst">
|
|
|
266 |
<label class="btn btn-outline-primary" for="filterFlowAggregationPortDst">Destination port</label>
|
|
|
267 |
</div>
|
|
|
268 |
</div>
|
|
|
269 |
|
|
|
270 |
<div class="d-none" data-view="flows">
|
|
|
271 |
<p class="h6">IP Aggregation</p>
|
|
|
272 |
<div class="row">
|
|
|
273 |
<div class="col-xs-6 col-sm-6">
|
|
|
274 |
<label>Source</label><br>
|
|
|
275 |
<div class="form-group">
|
|
|
276 |
<select data-disable-on="bi-directional" data-kind="source" name="srcip" id="filterFlowAggregationSourceAddressSelect" class="form-control form-select float-start" style="width: 70%">
|
|
|
277 |
<option value="none">No aggregation</option>
|
|
|
278 |
<option value="srcip">IP</option>
|
|
|
279 |
<option value="srcip4">IPv4 subnets</option>
|
|
|
280 |
<option value="srcip6">IPv6 subnets</option>
|
|
|
281 |
</select>
|
|
|
282 |
<div id="sourceCIDRPrefixDiv" class="d-none float-start" style="width:30%">
|
|
|
283 |
<input data-disable-on="bi-directional" id="sourceCIDRPrefix" placeholder="24" name="srcipprefix" type="text" class="form-control">
|
|
|
284 |
</div>
|
|
|
285 |
</div>
|
|
|
286 |
</div>
|
|
|
287 |
|
|
|
288 |
<div class="col-xs-6 col-sm-6">
|
|
|
289 |
<label>Destination</label>
|
|
|
290 |
<div class="form-group">
|
|
|
291 |
<select data-disable-on="bi-directional" data-kind="destination" name="dstip" id="filterFlowAggregationDestinationAddressSelect" class="form-control form-select float-start" style="width: 70%">
|
|
|
292 |
<option value="none">No aggregation</option>
|
|
|
293 |
<option value="dstip">IP</option>
|
|
|
294 |
<option value="dstip4">IPv4 subnets</option>
|
|
|
295 |
<option value="dstip6">IPv6 subnets</option>
|
|
|
296 |
</select>
|
|
|
297 |
<div id="destinationCIDRPrefixDiv" class="d-none float-start" style="width:30%">
|
|
|
298 |
<input data-disable-on="bi-directional" id="destinationCIDRPrefix" placeholder="24" name="dstipprefix" type="text" class="form-control">
|
|
|
299 |
</div>
|
|
|
300 |
</div>
|
|
|
301 |
</div>
|
|
|
302 |
</div>
|
|
|
303 |
</div><!-- flowsFilterAggregationDiv -->
|
|
|
304 |
</div>
|
|
|
305 |
|
|
|
306 |
<div id="statsLimitDiv" class="d-none col-xs-6 col-sm-6 col-md-2" data-view="statistics">
|
|
|
307 |
<p class="h6">Data Limit</p>
|
|
|
308 |
<div class="form-group">
|
|
|
309 |
<select id="statsLimitSelect" class="form-control form-select" data-view="statistics" disabled>
|
|
|
310 |
<option value="none">No limit</option>
|
|
|
311 |
<option value="">Packets</option>
|
|
|
312 |
<option value="">Bytes</option>
|
|
|
313 |
</select>
|
|
|
314 |
</div>
|
|
|
315 |
</div>
|
|
|
316 |
|
|
|
317 |
<div id="filterStatsProperties" class="d-none col-xs-6 col-sm-6 col-md-4 col-lg-2" data-view="statistics">
|
|
|
318 |
|
|
|
319 |
<p class="h6">Statistic properties</p>
|
|
|
320 |
|
|
|
321 |
<div class="form-group">
|
|
|
322 |
<label for="statsFilterForSelection">Statistic for</label>
|
|
|
323 |
<select id="statsFilterForSelection" class="form-control form-select">
|
|
|
324 |
<option value="record" selected>Flow Records</option>
|
|
|
325 |
<option value="ip">Any IP address</option>
|
|
|
326 |
<option value="srcip">Src IP address</option>
|
|
|
327 |
<option value="dstip">Dst IP address</option>
|
|
|
328 |
<option value="port">Any port</option>
|
|
|
329 |
<option value="srcport">Src port</option>
|
|
|
330 |
<option value="dstport">Dst port</option>
|
|
|
331 |
<option value="if">Any interface</option>
|
|
|
332 |
<option value="inif">IN interface</option>
|
|
|
333 |
<option value="outif">OUT interface</option>
|
|
|
334 |
<option value="as">Any AS</option>
|
|
|
335 |
<option value="srcas">Src AS</option>
|
|
|
336 |
<option value="dstas">Dst AS</option>
|
|
|
337 |
<option value="nhip">Next Hop IP</option>
|
|
|
338 |
<option value="nhbip">Next Hop BGP IP</option>
|
|
|
339 |
<option value="router">Router IP</option>
|
|
|
340 |
<option value="proto">Proto</option>
|
|
|
341 |
<option value="dir">Direction</option>
|
|
|
342 |
<option value="srctos">Src TOS</option>
|
|
|
343 |
<option value="dsttos">Dst TOS</option>
|
|
|
344 |
<option value="tos">Tos</option>
|
|
|
345 |
<option value="mask">Any Mask Bits</option>
|
|
|
346 |
<option value="srcmask">Src Mask Bits</option>
|
|
|
347 |
<option value="dstmask">Dst Mask Bits</option>
|
|
|
348 |
<option value="vlan">Any VLAN ID</option>
|
|
|
349 |
<option value="srcvlan">Src VLAN ID</option>
|
|
|
350 |
<option value="dstvlan">Dst VLAN ID</option>
|
|
|
351 |
<option value="srcmac">Src MAC</option>
|
|
|
352 |
<option value="dstmac">Dst MAC</option>
|
|
|
353 |
<option value="inmac">IN MAC</option>
|
|
|
354 |
<option value="outmac">OUT MAC</option>
|
|
|
355 |
<option value="insrcmac">IN src MAC</option>
|
|
|
356 |
<option value="outdstmac">OUT dst MAC</option>
|
|
|
357 |
<option value="indstmac">IN dst MAC</option>
|
|
|
358 |
<option value="outsrcmac">OUT src MAC</option>
|
|
|
359 |
<option value="mpls1">MPLS Label 1</option>
|
|
|
360 |
<option value="mpls2">MPLS Label 2</option>
|
|
|
361 |
<option value="mpls3">MPLS Label 3</option>
|
|
|
362 |
<option value="mpls4">MPLS Label 4</option>
|
|
|
363 |
<option value="mpls5">MPLS Label 5</option>
|
|
|
364 |
<option value="mpls6">MPLS Label 6</option>
|
|
|
365 |
<option value="mpls7">MPLS Label 7</option>
|
|
|
366 |
<option value="mpls8">MPLS Label 8</option>
|
|
|
367 |
<option value="mpls9">MPLS Label 9</option>
|
|
|
368 |
<option value="mpls10">MPLS Label 10</option>
|
|
|
369 |
</select>
|
|
|
370 |
</div>
|
|
|
371 |
|
|
|
372 |
<div class="form-group">
|
|
|
373 |
<label for="statsFilterOrderBySelection">Order by</label>
|
|
|
374 |
<select id="statsFilterOrderBySelection" class="form-control form-select">
|
|
|
375 |
<option value="flows" selected>Flows</option>
|
|
|
376 |
<option value="packets">Packets</option>
|
|
|
377 |
<option value="bytes">Bytes</option>
|
|
|
378 |
<option value="pps">Packets per second</option>
|
|
|
379 |
<option value="bps">Bits per second</option>
|
|
|
380 |
<option value="bpp">Bytes per packet</option>
|
|
|
381 |
</select>
|
|
|
382 |
</div>
|
|
|
383 |
|
|
|
384 |
</div><!-- statsFilterPropertiesDiv -->
|
|
|
385 |
|
|
|
386 |
<div id="filterOutput" class="hidden col-xs-12 col-sm-6 col-md-4 col-lg-4" data-view="flows statistics">
|
|
|
387 |
|
|
|
388 |
<p class="h6">Output</p>
|
|
|
389 |
<div class="row">
|
|
|
390 |
<div class="form-group col-xs-6 col-sm-6">
|
|
|
391 |
<label for="filterOutputSelection">Output type</label>
|
|
|
392 |
<select id="filterOutputSelection" name="filterOutputSelection" class="form-control form-select">
|
|
|
393 |
<option value="line">Line</option>
|
|
|
394 |
<option value="long">Long</option>
|
|
|
395 |
<option value="extended">Extended</option>
|
|
|
396 |
<option value="full">Full</option>
|
|
|
397 |
<option value="custom">Custom</option>
|
|
|
398 |
</select>
|
|
|
399 |
</div>
|
|
|
400 |
|
|
|
401 |
<div class="form-group col-xs-6 col-sm-6">
|
|
|
402 |
<label>Other options</label>
|
|
|
403 |
<br>
|
|
|
404 |
<div class="" id="flowsFilterOther" data-bs-toggle="buttons">
|
|
|
405 |
<input type="checkbox" class="btn-check" name="ordertstart" value="true" id="flowsFilterOtherOrderTstart">
|
|
|
406 |
<label class="btn btn-outline-primary" data-view="flows" for="flowsFilterOtherOrderTstart">Order by tstart</label>
|
|
|
407 |
</div>
|
|
|
408 |
</div>
|
|
|
409 |
</div>
|
|
|
410 |
|
|
|
411 |
<div id="customListOutputFormat" class="form-group hidden">
|
|
|
412 |
<label for="customListOutputFormatValue">Custom output format
|
|
|
413 |
<span aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="right" title="Specify output format in nfdump-style. E.g. %ts %tr %pr"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
|
|
|
414 |
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
|
|
|
415 |
</svg></span></label>
|
|
|
416 |
<input id="customListOutputFormatValue" type="text" class="form-control">
|
|
|
417 |
</div>
|
|
|
418 |
</div>
|
|
|
419 |
|
|
|
420 |
<div id="filterCommands" class="hidden col-xs-12 col-sm-6 col-md-3" data-view="flows statistics">
|
|
|
421 |
<p class="h6">Commands</p>
|
|
|
422 |
<div class="btn-group btn-group-md" data-bs-toggle="buttons">
|
|
|
423 |
<button type="button" class="btn btn-outline-primary submit">Process data</button>
|
|
|
424 |
<button type="button" class="btn btn-success csv">Get CSV</button>
|
|
|
425 |
<button type="button" class="btn btn-outline-primary reset">Reset filters</button>
|
|
|
426 |
</div>
|
|
|
427 |
</div>
|
|
|
428 |
</div><!-- statsFilterDiv -->
|
|
|
429 |
</form>
|
|
|
430 |
|
|
|
431 |
</div><!-- filterDiv -->
|
|
|
432 |
|
|
|
433 |
<div id="error"></div>
|
|
|
434 |
|
|
|
435 |
<div id="contentDiv">
|
|
|
436 |
|
|
|
437 |
<div id="graphsContentDiv" data-view="graphs" class="content container-fluid">
|
|
|
438 |
|
|
|
439 |
<div class="col-sm-12 my-4">
|
|
|
440 |
<div id="flowDiv" style="width: 100%;"></div>
|
|
|
441 |
</div>
|
|
|
442 |
|
|
|
443 |
<div id="graphOptions" class="row">
|
|
|
444 |
<div class="col-xs-6 col-sm-3">
|
|
|
445 |
<p class="h6">Graph Scale</p>
|
|
|
446 |
<div class="btn-group" role="group" id="graph_linlog">
|
|
|
447 |
<input type="radio" class="btn-check" name="scale" autocomplete="off" value="linear" checked id="graph_linlog_linear">
|
|
|
448 |
<label for="graph_linlog_linear" class="btn btn-outline-primary">Linear</label>
|
|
|
449 |
|
|
|
450 |
<input id="graph_linlog_log" type="radio" class="btn-check" name="scale" autocomplete="off" value="logarithmic">
|
|
|
451 |
<label for="graph_linlog_log" class="btn btn-outline-primary">Logarithmic</label>
|
|
|
452 |
</div>
|
|
|
453 |
</div>
|
|
|
454 |
|
|
|
455 |
<div class="col-xs-6 col-sm-3">
|
|
|
456 |
<p class="h6">Series display</p>
|
|
|
457 |
<div class="btn-group" data-bs-toggle="buttons" id="graph_linestacked">
|
|
|
458 |
<input type="radio" class="btn-check" name="type" autocomplete="off" value="stacked" checked id="graph_linestacked_stacked">
|
|
|
459 |
<label class="btn btn-outline-primary" for="graph_linestacked_stacked">Stacked</label>
|
|
|
460 |
|
|
|
461 |
<input type="radio" class="btn-check" name="type" autocomplete="off" value="line" id="graph_linestacked_line">
|
|
|
462 |
<label class="btn btn-outline-primary" for="graph_linestacked_line">Line</label>
|
|
|
463 |
</div>
|
|
|
464 |
|
|
|
465 |
<div class="btn-group" data-bs-toggle="buttons" id="graph_lineplot">
|
|
|
466 |
<input type="radio" class="btn-check" name="lineplot" autocomplete="off" value="step" id="graph_lineplot_step" checked>
|
|
|
467 |
<label class="btn btn-outline-primary" for="graph_lineplot_step">Step plot</label>
|
|
|
468 |
|
|
|
469 |
<input type="radio" class="btn-check" name="lineplot" autocomplete="off" value="curve" id="graph_lineplot_curve">
|
|
|
470 |
<label class="btn btn-outline-primary" for="graph_lineplot_curve">Curve plot</label>
|
|
|
471 |
</div>
|
|
|
472 |
</div>
|
|
|
473 |
|
|
|
474 |
<div class="col-xs-6 col-sm-3 accordion">
|
|
|
475 |
<p class="h6" data-bs-toggle="collapse" data-bs-target="#series" role="button" aria-expanded="true">Series</p>
|
|
|
476 |
<div class="collapse show" id="series"></div>
|
|
|
477 |
</div>
|
|
|
478 |
|
|
|
479 |
<div class="col-xs-6 col-sm-3 accordion">
|
|
|
480 |
<p class="h6" data-bs-toggle="collapse" data-bs-target="#legend" role="button" aria-expanded="true">Values</p>
|
|
|
481 |
<div class="collapse show" id="legend"></div>
|
|
|
482 |
</div>
|
|
|
483 |
</div>
|
|
|
484 |
</div>
|
|
|
485 |
<div id="flowsContentDiv" data-view="flows" class="content">
|
|
|
486 |
<table class="table" data-paging="true" data-paging-limit="10" data-paging-size="50" data-filtering="true" data-sorting="true"></table>
|
|
|
487 |
</div><!-- flowsContentDiv -->
|
|
|
488 |
|
|
|
489 |
<div id="statisticsContentDiv" data-view="statistics" class="content">
|
|
|
490 |
<table class="table" data-paging="true" data-paging-limit="10" data-paging-size="50" data-filtering="true" data-sorting="true"></table>
|
|
|
491 |
</div><!-- statsContentDiv -->
|
|
|
492 |
|
|
|
493 |
</div><!-- contentDiv -->
|
|
|
494 |
|
|
|
495 |
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
|
|
|
496 |
<div class="modal-dialog">
|
|
|
497 |
<div class="modal-content">
|
|
|
498 |
<div class="modal-header">
|
|
|
499 |
<h1 class="modal-title fs-5" id="modalLabel">Modal title</h1>
|
|
|
500 |
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
501 |
</div>
|
|
|
502 |
<div class="modal-body"></div>
|
|
|
503 |
<div class="modal-loader d-none text-center">
|
|
|
504 |
<div class="spinner-border" role="status">
|
|
|
505 |
<span class="visually-hidden">Loading</span>
|
|
|
506 |
</div>
|
|
|
507 |
</div>
|
|
|
508 |
<div class="modal-footer">
|
|
|
509 |
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
|
510 |
</div>
|
|
|
511 |
</div>
|
|
|
512 |
</div>
|
|
|
513 |
</div>
|
|
|
514 |
<script src="js/nfsen-ng.js"></script>
|
|
|
515 |
</body>
|
|
|
516 |
</html>
|