Revision e31aa678
Added by sbeaver about 10 years ago
| usr/local/www/status_graph.php | ||
|---|---|---|
| 32 | 32 |
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE |
| 33 | 33 |
POSSIBILITY OF SUCH DAMAGE. |
| 34 | 34 |
*/ |
| 35 |
/*
|
|
| 36 |
pfSense_MODULE: routing
|
|
| 35 |
/* |
|
| 36 |
pfSense_MODULE: routing
|
|
| 37 | 37 |
*/ |
| 38 | 38 |
|
| 39 | 39 |
##|+PRIV |
| ... | ... | |
| 72 | 72 |
} |
| 73 | 73 |
} |
| 74 | 74 |
|
| 75 |
if ($_GET['if']) {
|
|
| 76 |
$curif = $_GET['if'];
|
|
| 75 |
if ($_POST['if']) {
|
|
| 76 |
$curif = $_POST['if'];
|
|
| 77 | 77 |
$found = false; |
| 78 | 78 |
foreach($ifdescrs as $descr => $ifdescr) {
|
| 79 | 79 |
if ($descr == $curif) {
|
| ... | ... | |
| 95 | 95 |
$curif = "wan"; |
| 96 | 96 |
} |
| 97 | 97 |
} |
| 98 |
if ($_GET['sort']) {
|
|
| 99 |
$cursort = $_GET['sort'];
|
|
| 98 |
if ($_POST['sort']) {
|
|
| 99 |
$cursort = $_POST['sort'];
|
|
| 100 | 100 |
} else {
|
| 101 | 101 |
$cursort = ""; |
| 102 | 102 |
} |
| 103 |
if ($_GET['filter']) {
|
|
| 104 |
$curfilter = $_GET['filter'];
|
|
| 103 |
if ($_POST['filter']) {
|
|
| 104 |
$curfilter = $_POST['filter'];
|
|
| 105 | 105 |
} else {
|
| 106 | 106 |
$curfilter = ""; |
| 107 | 107 |
} |
| 108 |
if ($_GET['hostipformat']) {
|
|
| 109 |
$curhostipformat = $_GET['hostipformat'];
|
|
| 108 |
if ($_POST['hostipformat']) {
|
|
| 109 |
$curhostipformat = $_POST['hostipformat'];
|
|
| 110 | 110 |
} else {
|
| 111 | 111 |
$curhostipformat = ""; |
| 112 | 112 |
} |
| 113 | 113 |
|
| 114 |
function iflist() {
|
|
| 115 |
global $ifdescrs; |
|
| 116 |
|
|
| 117 |
$iflist = array(); |
|
| 118 |
|
|
| 119 |
foreach ($ifdescrs as $ifn => $ifd) {
|
|
| 120 |
$iflist[$ifn] = $ifd; |
|
| 121 |
} |
|
| 122 |
|
|
| 123 |
return($iflist); |
|
| 124 |
} |
|
| 125 |
|
|
| 114 | 126 |
$pgtitle = array(gettext("Status"),gettext("Traffic Graph"));
|
| 115 | 127 |
|
| 116 | 128 |
include("head.inc");
|
| 117 | 129 |
|
| 118 |
?> |
|
| 130 |
require('classes/Form.class.php');
|
|
| 131 |
|
|
| 132 |
$form = new Form(false); |
|
| 133 |
$form->addClass('auto-submit');
|
|
| 134 |
|
|
| 135 |
$section = new Form_Section('Graph settings');
|
|
| 119 | 136 |
|
| 120 |
<body link="#0000CC" vlink="#0000CC" alink="#0000CC"> |
|
| 121 |
<?php include("fbegin.inc"); ?>
|
|
| 137 |
$group = new Form_Group('Options');
|
|
| 138 |
|
|
| 139 |
$group->add(new Form_Select( |
|
| 140 |
'if', |
|
| 141 |
'', |
|
| 142 |
$curif, |
|
| 143 |
iflist() |
|
| 144 |
))->setHelp('Interface');
|
|
| 145 |
|
|
| 146 |
$group->add(new Form_Select( |
|
| 147 |
'sort', |
|
| 148 |
'', |
|
| 149 |
$cursort, |
|
| 150 |
array ( |
|
| 151 |
'in' => 'Bw In', |
|
| 152 |
'out' => 'BW Out' |
|
| 153 |
) |
|
| 154 |
))->setHelp('Sort by');
|
|
| 155 |
|
|
| 156 |
$group->add(new Form_Select( |
|
| 157 |
'filter', |
|
| 158 |
'', |
|
| 159 |
$curfilter, |
|
| 160 |
array ( |
|
| 161 |
'local' => 'Local', |
|
| 162 |
'remote' => 'Remote', |
|
| 163 |
'all' => 'All' |
|
| 164 |
) |
|
| 165 |
))->setHelp('Filter');
|
|
| 166 |
|
|
| 167 |
$group->add(new Form_Select( |
|
| 168 |
'hostipformat', |
|
| 169 |
' ', |
|
| 170 |
$curhostipformat, |
|
| 171 |
array ( |
|
| 172 |
'' => 'IP Address', |
|
| 173 |
'hostname' => 'Host Name', |
|
| 174 |
'fqdn' => 'FQDN' |
|
| 175 |
) |
|
| 176 |
))->setHelp('Display');
|
|
| 177 |
|
|
| 178 |
$section->add($group); |
|
| 179 |
|
|
| 180 |
$form->add($section); |
|
| 181 |
print $form; |
|
| 182 |
|
|
| 183 |
?> |
|
| 122 | 184 |
|
| 123 | 185 |
<script type="text/javascript"> |
| 124 | 186 |
//<![CDATA[ |
| 125 | 187 |
function updateBandwidth(){
|
| 126 |
var hostinterface = jQuery("#if").val();
|
|
| 188 |
var hostinterface = jQuery("#if").val();
|
|
| 127 | 189 |
var sorting = jQuery("#sort").val();
|
| 128 | 190 |
var filter = jQuery("#filter").val();
|
| 129 | 191 |
var hostipformat = jQuery("#hostipformat").val();
|
| 130 |
bandwidthAjax(hostinterface, sorting, filter, hostipformat);
|
|
| 192 |
bandwidthAjax(hostinterface, sorting, filter, hostipformat);
|
|
| 131 | 193 |
} |
| 132 | 194 |
|
| 133 | 195 |
function bandwidthAjax(hostinterface, sorting, filter, hostipformat) {
|
| 134 | 196 |
uri = "bandwidth_by_ip.php?if=" + hostinterface + "&sort=" + sorting + "&filter=" + filter + "&hostipformat=" + hostipformat; |
| 197 |
|
|
| 135 | 198 |
var opt = {
|
| 136 |
// Use GET
|
|
| 137 |
type: 'get',
|
|
| 138 |
error: function(req) {
|
|
| 139 |
/* XXX: Leave this for debugging purposes: Handle 404
|
|
| 140 |
if(req.status == 404)
|
|
| 141 |
alert('Error 404: location "' + uri + '" was not found.');
|
|
| 199 |
// Use GET
|
|
| 200 |
type: 'get',
|
|
| 201 |
error: function(req) {
|
|
| 202 |
/* XXX: Leave this for debugging purposes: Handle 404
|
|
| 203 |
if(req.status == 404)
|
|
| 204 |
alert('Error 404: location "' + uri + '" was not found.');
|
|
| 142 | 205 |
*/ |
| 143 |
/* Handle other errors
|
|
| 144 |
else
|
|
| 145 |
alert('Error ' + req.status + ' -- ' + req.statusText + ' -- ' + uri);
|
|
| 206 |
/* Handle other errors
|
|
| 207 |
else
|
|
| 208 |
alert('Error ' + req.status + ' -- ' + req.statusText + ' -- ' + uri);
|
|
| 146 | 209 |
*/ |
| 147 |
},
|
|
| 210 |
},
|
|
| 148 | 211 |
success: function(data) {
|
| 149 | 212 |
updateBandwidthHosts(data); |
| 150 |
}
|
|
| 213 |
}
|
|
| 151 | 214 |
} |
| 152 | 215 |
jQuery.ajax(uri, opt); |
| 153 | 216 |
} |
| 154 | 217 |
|
| 155 | 218 |
function updateBandwidthHosts(data){
|
| 156 |
var hosts_split = data.split("|");
|
|
| 157 |
d = document;
|
|
| 158 |
//parse top ten bandwidth abuser hosts
|
|
| 159 |
for (var y=0; y<10; y++){
|
|
| 160 |
if ((y < hosts_split.length) && (hosts_split[y] != "") && (hosts_split[y] != "no info")) {
|
|
| 219 |
var hosts_split = data.split("|");
|
|
| 220 |
d = document;
|
|
| 221 |
//parse top ten bandwidth abuser hosts
|
|
| 222 |
for (var y=0; y<10; y++){
|
|
| 223 |
if ((y < hosts_split.length) && (hosts_split[y] != "") && (hosts_split[y] != "no info")) {
|
|
| 161 | 224 |
hostinfo = hosts_split[y].split(";");
|
| 162 | 225 |
|
| 163 | 226 |
//update host ip info |
| ... | ... | |
| 181 | 244 |
//hide rows that contain no data |
| 182 | 245 |
jQuery(rowid).show(1000); |
| 183 | 246 |
} |
| 184 |
}
|
|
| 185 |
else
|
|
| 186 |
{
|
|
| 187 |
var rowid = "#host" + y;
|
|
| 188 |
if (jQuery(rowid).css('display') != "none"){
|
|
| 189 |
//hide rows that contain no data
|
|
| 190 |
jQuery(rowid).fadeOut(2000);
|
|
| 191 |
}
|
|
| 192 |
}
|
|
| 193 |
}
|
|
| 194 |
|
|
| 195 |
setTimeout('updateBandwidth()', 1000);
|
|
| 247 |
}
|
|
| 248 |
else
|
|
| 249 |
{
|
|
| 250 |
var rowid = "#host" + y;
|
|
| 251 |
if (jQuery(rowid).css('display') != "none"){
|
|
| 252 |
//hide rows that contain no data
|
|
| 253 |
jQuery(rowid).fadeOut(2000);
|
|
| 254 |
}
|
|
| 255 |
}
|
|
| 256 |
}
|
|
| 257 |
|
|
| 258 |
setTimeout('updateBandwidth()', 1000);
|
|
| 196 | 259 |
} |
| 197 | 260 |
//]]> |
| 198 | 261 |
</script> |
| ... | ... | |
| 200 | 263 |
<?php |
| 201 | 264 |
|
| 202 | 265 |
/* link the ipsec interface magically */ |
| 203 |
if (isset($config['ipsec']['enable']) || isset($config['ipsec']['client']['enable']))
|
|
| 266 |
if (isset($config['ipsec']['enable']) || isset($config['ipsec']['client']['enable'])) |
|
| 204 | 267 |
$ifdescrs['enc0'] = "IPsec"; |
| 205 | 268 |
|
| 206 | 269 |
?> |
| 207 |
<form name="form1" action="status_graph.php" method="get" style="padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #999999"> |
|
| 208 |
<?=gettext("Interface"); ?>:
|
|
| 209 |
<select id="if" name="if" class="formselect" style="z-index: -10;" onchange="document.form1.submit()"> |
|
| 270 |
|
|
| 271 |
<div id="niftyOutter" class="panel panel-default"> |
|
| 272 |
<div id="col1" style="float: left; width: 46%; padding: 5px; position: relative;"> |
|
| 273 |
<object data="graph.php?ifnum=<?=htmlspecialchars($curif);?>&ifname=<?=rawurlencode($ifdescrs[htmlspecialchars($curif)]);?>"> |
|
| 274 |
<param name="id" value="graph" /> |
|
| 275 |
<param name="type" value="image/svg+xml" /> |
|
| 276 |
<param name="width" value="<? echo $width; ?>" /> |
|
| 277 |
<param name="height" value="<? echo $height; ?>" /> |
|
| 278 |
<param name="pluginspage" value="http://www.adobe.com/svg/viewer/install/auto" /> |
|
| 279 |
</object> |
|
| 280 |
</div> |
|
| 281 |
<div id="col2" style="float: right; width: 48%; padding: 5px; position: relative;"> |
|
| 282 |
<table width="100%" border="0" cellspacing="0" cellpadding="0" summary="status"> |
|
| 283 |
<tr> |
|
| 284 |
<td ><?=(($curhostipformat=="") ? gettext("Host IP") : gettext("Host Name or IP")); ?></td>
|
|
| 285 |
<td><?=gettext("Bandwidth In"); ?></td>
|
|
| 286 |
<td><?=gettext("Bandwidth Out"); ?></td>
|
|
| 287 |
</tr> |
|
| 288 |
|
|
| 210 | 289 |
<?php |
| 211 |
foreach ($ifdescrs as $ifn => $ifd) {
|
|
| 212 |
echo "<option value=\"$ifn\""; |
|
| 213 |
if ($ifn == $curif) echo " selected=\"selected\""; |
|
| 214 |
echo ">" . htmlspecialchars($ifd) . "</option>\n"; |
|
| 215 |
} |
|
| 290 |
for($idx=0; $idx<10; $idx++) { ?>
|
|
| 291 |
<tr id="host<?=$idx?>" > |
|
| 292 |
<td id="hostip<?=$idx?>"> |
|
| 293 |
</td> |
|
| 294 |
<td id="bandwidthin<?=$idx?>"> |
|
| 295 |
</td> |
|
| 296 |
<td id="bandwidthout<?=$idx?>"> |
|
| 297 |
</td> |
|
| 298 |
</tr> |
|
| 299 |
<?php |
|
| 300 |
} |
|
| 216 | 301 |
?> |
| 217 |
</select> |
|
| 218 |
, Sort by: |
|
| 219 |
<select id="sort" name="sort" class="formselect" style="z-index: -10;" onchange="document.form1.submit()"> |
|
| 220 |
<option value="">Bw In</option> |
|
| 221 |
<option value="out"<?php if ($cursort == "out") echo " selected=\"selected\"";?>>Bw Out</option> |
|
| 222 |
</select> |
|
| 223 |
, Filter: |
|
| 224 |
<select id="filter" name="filter" class="formselect" style="z-index: -10;" onchange="document.form1.submit()"> |
|
| 225 |
<option value="local"<?php if ($curfilter == "local") echo " selected=\"selected\"";?>>Local</option> |
|
| 226 |
<option value="remote"<?php if ($curfilter == "remote") echo " selected=\"selected\"";?>>Remote</option> |
|
| 227 |
<option value="all"<?php if ($curfilter == "all") echo " selected=\"selected\"";?>>All</option> |
|
| 228 |
</select> |
|
| 229 |
, Display: |
|
| 230 |
<select id="hostipformat" name="hostipformat" class="formselect" style="z-index: -10;" onchange="document.form1.submit()"> |
|
| 231 |
<option value="">IP Address</option> |
|
| 232 |
<option value="hostname"<?php if ($curhostipformat == "hostname") echo " selected";?>>Host Name</option> |
|
| 233 |
<option value="fqdn"<?php if ($curhostipformat == "fqdn") echo " selected=\"selected\"";?>>FQDN</option> |
|
| 234 |
</select> |
|
| 235 |
</form> |
|
| 236 |
<p> </p> |
|
| 237 |
<div id="niftyOutter"> |
|
| 238 |
<div id="col1" style="float: left; width: 46%; padding: 5px; position: relative;"> |
|
| 239 |
<object data="graph.php?ifnum=<?=htmlspecialchars($curif);?>&ifname=<?=rawurlencode($ifdescrs[htmlspecialchars($curif)]);?>"> |
|
| 240 |
<param name="id" value="graph" /> |
|
| 241 |
<param name="type" value="image/svg+xml" /> |
|
| 242 |
<param name="width" value="<? echo $width; ?>" /> |
|
| 243 |
<param name="height" value="<? echo $height; ?>" /> |
|
| 244 |
<param name="pluginspage" value="http://www.adobe.com/svg/viewer/install/auto" /> |
|
| 245 |
</object> |
|
| 246 |
</div> |
|
| 247 |
<div id="col2" style="float: right; width: 48%; padding: 5px; position: relative;"> |
|
| 248 |
<table width="100%" border="0" cellspacing="0" cellpadding="0" summary="status"> |
|
| 249 |
<tr> |
|
| 250 |
<td class="listtopic" valign="top"><?=(($curhostipformat=="") ? gettext("Host IP") : gettext("Host Name or IP")); ?></td>
|
|
| 251 |
<td class="listtopic" valign="top"><?=gettext("Bandwidth In"); ?></td>
|
|
| 252 |
<td class="listtopic" valign="top"><?=gettext("Bandwidth Out"); ?></td>
|
|
| 253 |
</tr> |
|
| 254 |
<tr id="host0" style="display:none"> |
|
| 255 |
<td id="hostip0" class="vncell"> |
|
| 256 |
</td> |
|
| 257 |
<td id="bandwidthin0" class="listr"> |
|
| 258 |
</td> |
|
| 259 |
<td id="bandwidthout0" class="listr"> |
|
| 260 |
</td> |
|
| 261 |
</tr> |
|
| 262 |
<tr id="host1" style="display:none"> |
|
| 263 |
<td id="hostip1" class="vncell"> |
|
| 264 |
</td> |
|
| 265 |
<td id="bandwidthin1" class="listr"> |
|
| 266 |
</td> |
|
| 267 |
<td id="bandwidthout1" class="listr"> |
|
| 268 |
</td> |
|
| 269 |
</tr> |
|
| 270 |
<tr id="host2" style="display:none"> |
|
| 271 |
<td id="hostip2" class="vncell"> |
|
| 272 |
</td> |
|
| 273 |
<td id="bandwidthin2" class="listr"> |
|
| 274 |
</td> |
|
| 275 |
<td id="bandwidthout2" class="listr"> |
|
| 276 |
</td> |
|
| 277 |
</tr> |
|
| 278 |
<tr id="host3" style="display:none"> |
|
| 279 |
<td id="hostip3" class="vncell"> |
|
| 280 |
</td> |
|
| 281 |
<td id="bandwidthin3" class="listr"> |
|
| 282 |
</td> |
|
| 283 |
<td id="bandwidthout3" class="listr"> |
|
| 284 |
</td> |
|
| 285 |
</tr> |
|
| 286 |
<tr id="host4" style="display:none"> |
|
| 287 |
<td id="hostip4" class="vncell"> |
|
| 288 |
</td> |
|
| 289 |
<td id="bandwidthin4" class="listr"> |
|
| 290 |
</td> |
|
| 291 |
<td id="bandwidthout4" class="listr"> |
|
| 292 |
</td> |
|
| 293 |
</tr> |
|
| 294 |
<tr id="host5" style="display:none"> |
|
| 295 |
<td id="hostip5" class="vncell"> |
|
| 296 |
</td> |
|
| 297 |
<td id="bandwidthin5" class="listr"> |
|
| 298 |
</td> |
|
| 299 |
<td id="bandwidthout5" class="listr"> |
|
| 300 |
</td> |
|
| 301 |
</tr> |
|
| 302 |
<tr id="host6" style="display:none"> |
|
| 303 |
<td id="hostip6" class="vncell"> |
|
| 304 |
</td> |
|
| 305 |
<td id="bandwidthin6" class="listr"> |
|
| 306 |
</td> |
|
| 307 |
<td id="bandwidthout6" class="listr"> |
|
| 308 |
</td> |
|
| 309 |
</tr> |
|
| 310 |
<tr id="host7" style="display:none"> |
|
| 311 |
<td id="hostip7" class="vncell"> |
|
| 312 |
</td> |
|
| 313 |
<td id="bandwidthin7" class="listr"> |
|
| 314 |
</td> |
|
| 315 |
<td id="bandwidthout7" class="listr"> |
|
| 316 |
</td> |
|
| 317 |
</tr> |
|
| 318 |
<tr id="host8" style="display:none"> |
|
| 319 |
<td id="hostip8" class="vncell"> |
|
| 320 |
</td> |
|
| 321 |
<td id="bandwidthin8" class="listr"> |
|
| 322 |
</td> |
|
| 323 |
<td id="bandwidthout8" class="listr"> |
|
| 324 |
</td> |
|
| 325 |
</tr> |
|
| 326 |
<tr id="host9" style="display:none"> |
|
| 327 |
<td id="hostip9" class="vncell"> |
|
| 328 |
</td> |
|
| 329 |
<td id="bandwidthin9" class="listr"> |
|
| 330 |
</td> |
|
| 331 |
<td id="bandwidthout9" class="listr"> |
|
| 332 |
</td> |
|
| 333 |
</tr> |
|
| 334 |
</table> |
|
| 302 |
|
|
| 303 |
</table> |
|
| 335 | 304 |
</div> |
| 336 | 305 |
<div style="clear: both;"></div> |
| 337 | 306 |
</div> |
| 338 |
<p><span class="red"><strong><?=gettext("Note"); ?>:</strong></span> <?=gettext("the"); ?> <a href="http://www.adobe.com/svg/viewer/install/" target="_blank"><?=gettext("Adobe SVG Viewer"); ?></a>, <?=gettext("Firefox 1.5 or later or other browser supporting SVG is required to view the graph"); ?>.</p>
|
|
| 339 | 307 |
|
| 340 |
<?php include("fend.inc"); ?>
|
|
| 308 |
<div class="alert alert-warning"> |
|
| 309 |
<strong><?=gettext("Note: "); ?>:</strong><?=gettext("the "); ?><a href="http://www.adobe.com/svg/viewer/install/" target="_blank"><?=gettext("Adobe SVG Viewer"); ?></a>, <?=gettext("Firefox 1.5 or later or other browser supporting SVG is required to view the graph"); ?>.</p>
|
|
| 341 | 310 |
|
| 342 |
<script type="text/javascript"> |
|
| 343 |
//<![CDATA[ |
|
| 344 |
jQuery(document).ready(updateBandwidth); |
|
| 345 |
//]]> |
|
| 311 |
<script> |
|
| 312 |
events.push(function(){
|
|
| 313 |
$('.auto-submit').on('change', function(){
|
|
| 314 |
$(this).submit(); |
|
| 315 |
}); |
|
| 316 |
}); |
|
| 317 |
|
|
| 318 |
events.push(function(){
|
|
| 319 |
jQuery(document).ready(updateBandwidth); |
|
| 320 |
}); |
|
| 346 | 321 |
</script> |
| 347 |
</body> |
|
| 348 |
</html>
|
|
| 322 |
|
|
| 323 |
<?php include("foot.inc"); ?>
|
|
Also available in: Unified diff
status_graph.php conversion complete
Tis page has a very clever presentation that I did not want to loose.
So one table remains.
Otherwise tit has been converted to Form.class, old classes and names
removed, javascript updated to use event.push, GET converted to POST
etc.