1 |
9573d170
|
Scott Ullrich
|
<?php
|
2 |
5b237745
|
Scott Ullrich
|
/*
|
3 |
c5d81585
|
Renato Botelho
|
* status_graph.php
|
4 |
191cb31d
|
Stephen Beaver
|
*
|
5 |
c5d81585
|
Renato Botelho
|
* part of pfSense (https://www.pfsense.org)
|
6 |
38809d47
|
Renato Botelho do Couto
|
* Copyright (c) 2004-2013 BSD Perimeter
|
7 |
|
|
* Copyright (c) 2013-2016 Electric Sheep Fencing
|
8 |
0284d79e
|
jim-p
|
* Copyright (c) 2014-2020 Rubicon Communications, LLC (Netgate)
|
9 |
c5d81585
|
Renato Botelho
|
* All rights reserved.
|
10 |
191cb31d
|
Stephen Beaver
|
*
|
11 |
c5d81585
|
Renato Botelho
|
* originally based on m0n0wall (http://m0n0.ch/wall)
|
12 |
|
|
* Copyright (c) 2003-2004 Manuel Kasper <mk@neon1.net>.
|
13 |
|
|
* All rights reserved.
|
14 |
191cb31d
|
Stephen Beaver
|
*
|
15 |
0f3f6cc9
|
Jared Dillard
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
16 |
|
|
* you may not use this file except in compliance with the License.
|
17 |
|
|
* You may obtain a copy of the License at
|
18 |
191cb31d
|
Stephen Beaver
|
*
|
19 |
0f3f6cc9
|
Jared Dillard
|
* http://www.apache.org/licenses/LICENSE-2.0
|
20 |
191cb31d
|
Stephen Beaver
|
*
|
21 |
0f3f6cc9
|
Jared Dillard
|
* Unless required by applicable law or agreed to in writing, software
|
22 |
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
23 |
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
24 |
|
|
* See the License for the specific language governing permissions and
|
25 |
|
|
* limitations under the License.
|
26 |
191cb31d
|
Stephen Beaver
|
*/
|
27 |
5b237745
|
Scott Ullrich
|
|
28 |
6b07c15a
|
Matthew Grooms
|
##|+PRIV
|
29 |
|
|
##|*IDENT=page-status-trafficgraph
|
30 |
5230f468
|
jim-p
|
##|*NAME=Status: Traffic Graph
|
31 |
6b07c15a
|
Matthew Grooms
|
##|*DESCR=Allow access to the 'Status: Traffic Graph' page.
|
32 |
|
|
##|*MATCH=status_graph.php*
|
33 |
8e95a671
|
jim-p
|
##|*MATCH=bandwidth_by_ip.php*
|
34 |
8a2f80b2
|
jim-p
|
##|*MATCH=graph.php*
|
35 |
|
|
##|*MATCH=ifstats.php*
|
36 |
6b07c15a
|
Matthew Grooms
|
##|-PRIV
|
37 |
|
|
|
38 |
c81ef6e2
|
Phil Davis
|
require_once("guiconfig.inc");
|
39 |
179ab6b3
|
Luiz Otavio O Souza
|
require_once("ipsec.inc");
|
40 |
5b237745
|
Scott Ullrich
|
|
41 |
dd8a6d75
|
Stephen Jones
|
if (is_array($config["traffic_graphs"])){
|
42 |
|
|
$pconfig = $config["traffic_graphs"];
|
43 |
|
|
}
|
44 |
94556105
|
Scott Ullrich
|
// Get configured interface list
|
45 |
61ab4cd3
|
Scott Ullrich
|
$ifdescrs = get_configured_interface_with_descr();
|
46 |
abe98adb
|
Phil Davis
|
if (ipsec_enabled()) {
|
47 |
98128ad6
|
Phil Davis
|
$ifdescrs['enc0'] = gettext("IPsec");
|
48 |
abe98adb
|
Phil Davis
|
}
|
49 |
|
|
|
50 |
9f5d14ce
|
jim-p
|
foreach (array('server', 'client') as $mode) {
|
51 |
120f3169
|
Renato Botelho do Couto
|
if (!is_array($config['openvpn']["openvpn-{$mode}"])) {
|
52 |
|
|
continue;
|
53 |
|
|
}
|
54 |
|
|
foreach ($config['openvpn']["openvpn-{$mode}"] as $id => $setting) {
|
55 |
|
|
if (isset($setting['disable'])) {
|
56 |
|
|
continue;
|
57 |
9f5d14ce
|
jim-p
|
}
|
58 |
120f3169
|
Renato Botelho do Couto
|
$ifdescrs['ovpn' . substr($mode, 0, 1) . $setting['vpnid']] =
|
59 |
|
|
gettext("OpenVPN") . " " . $mode . ": " .
|
60 |
|
|
htmlspecialchars($setting['description']);
|
61 |
9f5d14ce
|
jim-p
|
}
|
62 |
|
|
}
|
63 |
235c051f
|
jim-p
|
|
64 |
|
|
$ifdescrs = array_merge($ifdescrs, interface_ipsec_vti_list_all());
|
65 |
43a0ac8a
|
Scott Ullrich
|
|
66 |
dd8a6d75
|
Stephen Jones
|
if (!empty($_POST)) {
|
67 |
|
|
// update view if settings are changed or saved
|
68 |
|
|
$curif = $_POST['if'];
|
69 |
50b2f6ab
|
Scott Ullrich
|
$found = false;
|
70 |
6c07db48
|
Phil Davis
|
foreach ($ifdescrs as $descr => $ifdescr) {
|
71 |
b406c78a
|
Ermal
|
if ($descr == $curif) {
|
72 |
|
|
$found = true;
|
73 |
|
|
break;
|
74 |
|
|
}
|
75 |
|
|
}
|
76 |
|
|
if ($found === false) {
|
77 |
6f3d2063
|
Renato Botelho
|
header("Location: status_graph.php");
|
78 |
50b2f6ab
|
Scott Ullrich
|
exit;
|
79 |
|
|
}
|
80 |
dd8a6d75
|
Stephen Jones
|
$cursort = $_POST['sort'];
|
81 |
|
|
$curfilter = $_POST['filter'];
|
82 |
|
|
$curhostipformat = $_POST['hostipformat'];
|
83 |
|
|
$curbackgroundupdate = $_POST['backgroundupdate'];
|
84 |
|
|
$curinvert = $_POST['invert'];
|
85 |
|
|
$cursmoothing = $_POST['smoothfactor'];
|
86 |
15c2e494
|
joshuasign
|
$curmode = $_POST['mode'];
|
87 |
120f3169
|
Renato Botelho do Couto
|
|
88 |
dd8a6d75
|
Stephen Jones
|
// Save data to config
|
89 |
|
|
if (isset($_POST['save'])) {
|
90 |
|
|
$pconfig = array();
|
91 |
|
|
$pconfig["if"] = $curif;
|
92 |
|
|
$pconfig["sort"] = $cursort;
|
93 |
|
|
$pconfig["filter"] = $curfilter;
|
94 |
|
|
$pconfig["hostipformat"] = $curhostipformat;
|
95 |
|
|
$pconfig["backgroundupdate"] = $curbackgroundupdate;
|
96 |
|
|
$pconfig["smoothfactor"] = $cursmoothing;
|
97 |
|
|
$pconfig["invert"] = $curinvert;
|
98 |
15c2e494
|
joshuasign
|
$pconfig["mode"] = $curmode;
|
99 |
dd8a6d75
|
Stephen Jones
|
$config["traffic_graphs"] = array();
|
100 |
|
|
$config["traffic_graphs"] = $pconfig;
|
101 |
|
|
write_config("Traffic Graphs settings updated");
|
102 |
|
|
}
|
103 |
50b2f6ab
|
Scott Ullrich
|
} else {
|
104 |
dd8a6d75
|
Stephen Jones
|
// default settings from config
|
105 |
|
|
if (is_array($pconfig)) {
|
106 |
|
|
$curif = $pconfig['if'];
|
107 |
|
|
$cursort = $pconfig['sort'];
|
108 |
|
|
$curfilter = $pconfig['filter'];
|
109 |
|
|
$curhostipformat = $pconfig['hostipformat'];
|
110 |
|
|
$curbackgroundupdate = $pconfig['backgroundupdate'];
|
111 |
|
|
$cursmoothing = $pconfig['smoothfactor'];
|
112 |
|
|
$curinvert = $pconfig['invert'];
|
113 |
15c2e494
|
joshuasign
|
$curmode = $pconfig['mode'];;
|
114 |
42b0c921
|
Phil Davis
|
} else {
|
115 |
dd8a6d75
|
Stephen Jones
|
// initialize when no config details are present
|
116 |
|
|
if (empty($ifdescrs["wan"])) {
|
117 |
120f3169
|
Renato Botelho do Couto
|
/*
|
118 |
|
|
* Handle the case when WAN has been disabled. Use the
|
119 |
|
|
* first key in ifdescrs.
|
120 |
|
|
*/
|
121 |
dd8a6d75
|
Stephen Jones
|
reset($ifdescrs);
|
122 |
|
|
$curif = key($ifdescrs);
|
123 |
|
|
} else {
|
124 |
|
|
$curif = "wan";
|
125 |
|
|
}
|
126 |
|
|
$cursort = "";
|
127 |
|
|
$curfilter = "";
|
128 |
|
|
$curhostipformat = "";
|
129 |
|
|
$curbackgroundupdate = "";
|
130 |
|
|
$cursmoothing = 0;
|
131 |
|
|
$curinvert = "";
|
132 |
15c2e494
|
joshuasign
|
$curmode = "";
|
133 |
76165eac
|
Phil Davis
|
}
|
134 |
50b2f6ab
|
Scott Ullrich
|
}
|
135 |
769cdf3b
|
Bill Marquette
|
|
136 |
e31aa678
|
sbeaver
|
function iflist() {
|
137 |
|
|
global $ifdescrs;
|
138 |
|
|
|
139 |
|
|
$iflist = array();
|
140 |
|
|
|
141 |
|
|
foreach ($ifdescrs as $ifn => $ifd) {
|
142 |
|
|
$iflist[$ifn] = $ifd;
|
143 |
|
|
}
|
144 |
|
|
|
145 |
|
|
return($iflist);
|
146 |
|
|
}
|
147 |
|
|
|
148 |
abe98adb
|
Phil Davis
|
$pgtitle = array(gettext("Status"), gettext("Traffic Graph"));
|
149 |
f0a3b883
|
Scott Ullrich
|
|
150 |
4df96eff
|
Scott Ullrich
|
include("head.inc");
|
151 |
|
|
|
152 |
dd8a6d75
|
Stephen Jones
|
$form = new Form();
|
153 |
a4af095c
|
Renato Botelho
|
$form->addClass('auto-submit');
|
154 |
e31aa678
|
sbeaver
|
|
155 |
5f88f964
|
k-paulius
|
$section = new Form_Section('Graph Settings');
|
156 |
5b237745
|
Scott Ullrich
|
|
157 |
e00f69c8
|
Stephen Jones
|
$group = new Form_Group('Traffic Graph');
|
158 |
a4af095c
|
Renato Botelho
|
|
159 |
|
|
$group->add(new Form_Select(
|
160 |
e31aa678
|
sbeaver
|
'if',
|
161 |
a4af095c
|
Renato Botelho
|
null,
|
162 |
e31aa678
|
sbeaver
|
$curif,
|
163 |
|
|
iflist()
|
164 |
a4af095c
|
Renato Botelho
|
))->setHelp('Interface');
|
165 |
e31aa678
|
sbeaver
|
|
166 |
a4af095c
|
Renato Botelho
|
$group->add(new Form_Select(
|
167 |
e31aa678
|
sbeaver
|
'sort',
|
168 |
a4af095c
|
Renato Botelho
|
null,
|
169 |
e31aa678
|
sbeaver
|
$cursort,
|
170 |
|
|
array (
|
171 |
b50d30c3
|
Stephen Beaver
|
'in' => gettext('Bandwidth In'),
|
172 |
|
|
'out' => gettext('Bandwidth Out')
|
173 |
e31aa678
|
sbeaver
|
)
|
174 |
a4af095c
|
Renato Botelho
|
))->setHelp('Sort by');
|
175 |
e31aa678
|
sbeaver
|
|
176 |
a4af095c
|
Renato Botelho
|
$group->add(new Form_Select(
|
177 |
e31aa678
|
sbeaver
|
'filter',
|
178 |
a4af095c
|
Renato Botelho
|
null,
|
179 |
e31aa678
|
sbeaver
|
$curfilter,
|
180 |
|
|
array (
|
181 |
b50d30c3
|
Stephen Beaver
|
'local' => gettext('Local'),
|
182 |
|
|
'remote'=> gettext('Remote'),
|
183 |
|
|
'all' => gettext('All')
|
184 |
e31aa678
|
sbeaver
|
)
|
185 |
a4af095c
|
Renato Botelho
|
))->setHelp('Filter');
|
186 |
e31aa678
|
sbeaver
|
|
187 |
a4af095c
|
Renato Botelho
|
$group->add(new Form_Select(
|
188 |
e31aa678
|
sbeaver
|
'hostipformat',
|
189 |
a4af095c
|
Renato Botelho
|
null,
|
190 |
e31aa678
|
sbeaver
|
$curhostipformat,
|
191 |
|
|
array (
|
192 |
120f3169
|
Renato Botelho do Couto
|
'' => gettext('IP Address'),
|
193 |
b50d30c3
|
Stephen Beaver
|
'hostname' => gettext('Host Name'),
|
194 |
|
|
'descr' => gettext('Description'),
|
195 |
|
|
'fqdn' => gettext('FQDN')
|
196 |
e31aa678
|
sbeaver
|
)
|
197 |
a4af095c
|
Renato Botelho
|
))->setHelp('Display');
|
198 |
|
|
|
199 |
15c2e494
|
joshuasign
|
$group->add(new Form_Select(
|
200 |
120f3169
|
Renato Botelho do Couto
|
'mode',
|
201 |
|
|
null,
|
202 |
|
|
$curmode,
|
203 |
|
|
array (
|
204 |
|
|
'rate' => gettext('rate (standard)'),
|
205 |
|
|
'iftop' => gettext('iftop (experimental)')
|
206 |
|
|
)
|
207 |
15c2e494
|
joshuasign
|
))->setHelp('Mode');
|
208 |
120f3169
|
Renato Botelho do Couto
|
|
209 |
e00f69c8
|
Stephen Jones
|
$section->add($group);
|
210 |
|
|
|
211 |
|
|
$group2 = new Form_Group('Controls');
|
212 |
|
|
|
213 |
|
|
$group2->add(new Form_Select(
|
214 |
fe5c31bb
|
PiBa-NL
|
'backgroundupdate',
|
215 |
|
|
null,
|
216 |
|
|
$curbackgroundupdate,
|
217 |
|
|
array (
|
218 |
|
|
'false' => gettext('Clear graphs when not visible.'),
|
219 |
120f3169
|
Renato Botelho do Couto
|
'true' => gettext('Keep graphs updated on inactive tab. ' .
|
220 |
|
|
'(increases cpu usage)'),
|
221 |
fe5c31bb
|
PiBa-NL
|
)
|
222 |
|
|
))->setHelp('Background updates');
|
223 |
|
|
|
224 |
e00f69c8
|
Stephen Jones
|
$group2->add(new Form_Select(
|
225 |
|
|
'invert',
|
226 |
|
|
null,
|
227 |
|
|
$curinvert,
|
228 |
|
|
array (
|
229 |
|
|
'true' => gettext('On'),
|
230 |
|
|
'false' => gettext('Off'),
|
231 |
|
|
)
|
232 |
|
|
))->setHelp('Invert in/out');
|
233 |
|
|
|
234 |
|
|
$group2->add(new Form_Input(
|
235 |
|
|
'smoothfactor',
|
236 |
|
|
null,
|
237 |
|
|
'range',
|
238 |
|
|
$cursmoothing,
|
239 |
|
|
array (
|
240 |
|
|
'min' => 0,
|
241 |
|
|
'max' => 5,
|
242 |
|
|
'step' => 1
|
243 |
|
|
)
|
244 |
|
|
|
245 |
|
|
))->setHelp('Graph Smoothing');
|
246 |
|
|
|
247 |
|
|
$section->add($group2);
|
248 |
e31aa678
|
sbeaver
|
|
249 |
|
|
$form->add($section);
|
250 |
|
|
print $form;
|
251 |
|
|
|
252 |
d3fd2bbe
|
PiBa-NL
|
$realif = get_real_interface($curif);
|
253 |
e31aa678
|
sbeaver
|
?>
|
254 |
849d3a37
|
Jared Dillard
|
|
255 |
d8837d57
|
PiBa-NL
|
<script src="/vendor/d3/d3.min.js?v=<?=filemtime('/usr/local/www/vendor/d3/d3.min.js')?>"></script>
|
256 |
|
|
<script src="/vendor/nvd3/nv.d3.js?v=<?=filemtime('/usr/local/www/vendor/nvd3/nv.d3.js')?>"></script>
|
257 |
|
|
<script src="/vendor/visibility/visibility-1.2.3.min.js?v=<?=filemtime('/usr/local/www/vendor/visibility/visibility-1.2.3.min.js')?>"></script>
|
258 |
849d3a37
|
Jared Dillard
|
|
259 |
|
|
<link href="/vendor/nvd3/nv.d3.css" media="screen, projection" rel="stylesheet" type="text/css">
|
260 |
|
|
|
261 |
|
|
<script type="text/javascript">
|
262 |
|
|
|
263 |
52229047
|
PiBa-NL
|
|
264 |
849d3a37
|
Jared Dillard
|
//<![CDATA[
|
265 |
|
|
events.push(function() {
|
266 |
|
|
|
267 |
|
|
var InterfaceString = "<?=$curif?>";
|
268 |
d3fd2bbe
|
PiBa-NL
|
var RealInterfaceString = "<?=$realif?>";
|
269 |
120f3169
|
Renato Botelho do Couto
|
window.graph_backgroundupdate = $('#backgroundupdate').val() === "true";
|
270 |
e00f69c8
|
Stephen Jones
|
window.smoothing = $('#smoothfactor').val();
|
271 |
52229047
|
PiBa-NL
|
window.interval = 1;
|
272 |
e00f69c8
|
Stephen Jones
|
window.invert = $('#invert').val() === "true";
|
273 |
52229047
|
PiBa-NL
|
window.size = 8;
|
274 |
|
|
window.interfaces = InterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
|
275 |
|
|
window.realinterfaces = RealInterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
|
276 |
849d3a37
|
Jared Dillard
|
|
277 |
52229047
|
PiBa-NL
|
graph_init();
|
278 |
|
|
graph_visibilitycheck();
|
279 |
849d3a37
|
Jared Dillard
|
|
280 |
|
|
});
|
281 |
|
|
//]]>
|
282 |
|
|
</script>
|
283 |
|
|
|
284 |
d8837d57
|
PiBa-NL
|
<script src="/js/traffic-graphs.js?v=<?=filemtime('/usr/local/www/js/traffic-graphs.js')?>"></script>
|
285 |
849d3a37
|
Jared Dillard
|
|
286 |
8fd9052f
|
Colin Fleming
|
<script type="text/javascript">
|
287 |
|
|
//<![CDATA[
|
288 |
f0a3b883
|
Scott Ullrich
|
|
289 |
fe5c31bb
|
PiBa-NL
|
var graph_interfacenames = <?php
|
290 |
|
|
foreach ($ifdescrs as $ifname => $ifdescr) {
|
291 |
|
|
$iflist[$ifname] = $ifdescr;
|
292 |
|
|
}
|
293 |
|
|
echo json_encode($iflist);
|
294 |
|
|
?>;
|
295 |
abe98adb
|
Phil Davis
|
function updateBandwidth() {
|
296 |
607b1c39
|
Sjon Hortensius
|
$.ajax(
|
297 |
|
|
'/bandwidth_by_ip.php',
|
298 |
|
|
{
|
299 |
|
|
type: 'get',
|
300 |
|
|
data: $(document.forms[0]).serialize(),
|
301 |
|
|
success: function (data) {
|
302 |
|
|
var hosts_split = data.split("|");
|
303 |
|
|
|
304 |
|
|
$('#top10-hosts').empty();
|
305 |
|
|
|
306 |
|
|
//parse top ten bandwidth abuser hosts
|
307 |
abe98adb
|
Phil Davis
|
for (var y=0; y<10; y++) {
|
308 |
607b1c39
|
Sjon Hortensius
|
if ((y < hosts_split.length) && (hosts_split[y] != "") && (hosts_split[y] != "no info")) {
|
309 |
|
|
hostinfo = hosts_split[y].split(";");
|
310 |
|
|
|
311 |
|
|
$('#top10-hosts').append('<tr>'+
|
312 |
|
|
'<td>'+ hostinfo[0] +'</td>'+
|
313 |
3bd74348
|
bruno
|
'<td>'+ hostinfo[1] +' <?=gettext("Bits/sec");?></td>'+
|
314 |
|
|
'<td>'+ hostinfo[2] +' <?=gettext("Bits/sec");?></td>'+
|
315 |
607b1c39
|
Sjon Hortensius
|
'</tr>');
|
316 |
|
|
}
|
317 |
|
|
}
|
318 |
|
|
},
|
319 |
|
|
});
|
320 |
f0a3b883
|
Scott Ullrich
|
}
|
321 |
|
|
|
322 |
abe98adb
|
Phil Davis
|
events.push(function() {
|
323 |
|
|
$('form.auto-submit').on('change', function() {
|
324 |
607b1c39
|
Sjon Hortensius
|
$(this).submit();
|
325 |
|
|
});
|
326 |
f0a3b883
|
Scott Ullrich
|
|
327 |
889f9ee0
|
heper
|
setInterval('updateBandwidth()', 3000);
|
328 |
e31aa678
|
sbeaver
|
|
329 |
607b1c39
|
Sjon Hortensius
|
updateBandwidth();
|
330 |
|
|
});
|
331 |
8fd9052f
|
Colin Fleming
|
//]]>
|
332 |
f0a3b883
|
Scott Ullrich
|
</script>
|
333 |
5b237745
|
Scott Ullrich
|
<?php
|
334 |
9573d170
|
Scott Ullrich
|
|
335 |
872ce0dd
|
Ermal Luçi
|
/* link the ipsec interface magically */
|
336 |
abe98adb
|
Phil Davis
|
if (ipsec_enabled()) {
|
337 |
98128ad6
|
Phil Davis
|
$ifdescrs['enc0'] = gettext("IPsec");
|
338 |
abe98adb
|
Phil Davis
|
}
|
339 |
c1abd446
|
Seth Mos
|
|
340 |
5b237745
|
Scott Ullrich
|
?>
|
341 |
607b1c39
|
Sjon Hortensius
|
<div class="panel panel-default">
|
342 |
|
|
<div class="panel-heading">
|
343 |
3d7a8696
|
k-paulius
|
<h2 class="panel-title"><?=gettext("Traffic Graph");?></h2>
|
344 |
e31aa678
|
sbeaver
|
</div>
|
345 |
607b1c39
|
Sjon Hortensius
|
<div class="panel-body">
|
346 |
|
|
<div class="col-sm-6">
|
347 |
849d3a37
|
Jared Dillard
|
<div id="traffic-chart-<?=$curif?>" class="d3-chart traffic-widget-chart">
|
348 |
|
|
<svg></svg>
|
349 |
|
|
</div>
|
350 |
607b1c39
|
Sjon Hortensius
|
</div>
|
351 |
|
|
<div class="col-sm-6">
|
352 |
|
|
<table class="table table-striped table-condensed">
|
353 |
|
|
<thead>
|
354 |
|
|
<tr>
|
355 |
abe98adb
|
Phil Davis
|
<th><?=(($curhostipformat == "") ? gettext("Host IP") : gettext("Host Name or IP")); ?></th>
|
356 |
607b1c39
|
Sjon Hortensius
|
<th><?=gettext("Bandwidth In"); ?></th>
|
357 |
|
|
<th><?=gettext("Bandwidth Out"); ?></th>
|
358 |
|
|
</tr>
|
359 |
|
|
</thead>
|
360 |
|
|
<tbody id="top10-hosts">
|
361 |
|
|
<!-- to be added by javascript -->
|
362 |
|
|
</tbody>
|
363 |
|
|
</table>
|
364 |
|
|
</div>
|
365 |
e57c91a2
|
Renato Botelho
|
</div>
|
366 |
8ab3e9ed
|
Erik Kristensen
|
</div>
|
367 |
c10cb196
|
Stephen Beaver
|
<?php include("foot.inc");
|