Skip to content
Permalink
Browse files

webui: Re-implemented tracked connections table without using a Table…

… object

The new implementation is much faster at rendering long tables, and also
benefits from a number of additional enhancements:

 o Popup on IP address that shows a hostname (if local client known to networkmap)
 o Popup on Application that shows the class name
 o Long IPv6 addresses use a smaller font to better fit (the popup still shows
   the original address in case it's too hard to read the smaller version)

Table is still sortable by clicking on column headers.
  • Loading branch information...
RMerl committed Mar 13, 2019
1 parent 29d312c commit 54755feb1cfbeb16304b87f3e1908927e0dfbc38
Showing with 115 additions and 69 deletions.
  1. +115 −69 release/src/router/www/QoS_Stats.asp
@@ -12,26 +12,16 @@
<link rel="stylesheet" type="text/css" href="index_style.css">
<link rel="stylesheet" type="text/css" href="form_style.css">
<link rel="stylesheet" type="text/css" href="usp_style.css">
<link rel="stylesheet" type="text/css" href="/js/table/table.css">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/chart.min.js"></script>
<script type="text/javascript" src="/state.js"></script>
<script type="text/javascript" src="/help.js"></script>
<script type="text/javascript" src="/general.js"></script>
<script type="text/javascript" src="/popup.js"></script>
<script type="text/javascript" src="/js/table/table.js"></script>
<script type="text/javascript" src="/client_function.js"></script>

<style>
.tableApi_table th {
height: 22px;
text-align: left;
}
.tableApi_table td {
text-align: left;
}
.data_tr {
height: 32px;
}
span.cat0{
background-color:#B3645B;
}
@@ -95,6 +85,8 @@ if (qos_mode == 2) {
var pie_obj_ul, pie_obj_dl;
var refreshRate;
var timedEvent = 0;
var sortdir = 0;
var sortfield = 5;
var color = ["#B3645B","#B98F53","#C6B36A","#849E75","#2B6692","#7C637A","#4C8FC0", "#6C604F"];
@@ -182,83 +174,137 @@ function compIPV6(input) {
function draw_conntrack_table(){
var i, label;
var i, qosclass;
var tracklen;
var code;
var clientObj, clientName, clientName2;
genClientList();
tracklen = bwdpi_conntrack.length;
code = '<table cellpadding="4" class="FormTable_table"><thead><tr><td colspan="6">Tracked connections (total: ' + tracklen + ')</td></tr></thead>' +
'<tr><th width="5%" id="track_header_0" style="cursor: pointer;" onclick="setsort(0); draw_conntrack_table()">Proto</th>' +
'<th width="28%" id="track_header_1" style="cursor: pointer;" onclick="setsort(1); draw_conntrack_table()">Local IP</th>' +
'<th width="6%" id="track_header_2" style="cursor: pointer;" onclick="setsort(2); draw_conntrack_table()">Port</th>' +
'<th width="28%" id="track_header_3" style="cursor: pointer;" onclick="setsort(3); draw_conntrack_table()">Remote IP</th>' +
'<th width="6%" id="track_header_4" style="cursor: pointer;" onclick="setsort(4); draw_conntrack_table()">Port</th>' +
'<th width="27%" id="track_header_5" style="cursor: pointer;" onclick="setsort(5); draw_conntrack_table()">Application</th></tr>';
if (tracklen > 500) {
document.getElementById('refreshrate').value = "0";
refreshRate = 0;
document.getElementById('toomanyconns').style.display = "";
document.getElementById('refreshrate').disabled = true;
}
for (i=0; i < tracklen; i++) {
label = bwdpi_conntrack[i][5];
if (label.length > 27)
size = "style=\"font-size: 75%;\"";
else
size = "";
bwdpi_conntrack.sort(table_sort);
bwdpi_conntrack[i][5] = "<span title=\"" + label +"\" class=\"catrow cat" + get_qos_class(bwdpi_conntrack[i][7], bwdpi_conntrack[i][6]) + "\"" + size + ">" + label + "</span>";
if (bwdpi_conntrack[i][1].indexOf(":") >= 0) {
// Generate table
for (i = 0; i < tracklen; i++){
// Compress IPv6
if (bwdpi_conntrack[i][1].indexOf(":") >= 0)
bwdpi_conntrack[i][1] = compIPV6(bwdpi_conntrack[i][1]);
}
if (bwdpi_conntrack[i][3].indexOf(":") >= 0) {
else
bwdpi_conntrack[i][1] = bwdpi_conntrack[i][1];
if (bwdpi_conntrack[i][3].indexOf(":") >= 0)
bwdpi_conntrack[i][3] = compIPV6(bwdpi_conntrack[i][3]);
}
else
bwdpi_conntrack[i][3] = bwdpi_conntrack[i][3];
// Get QoS Class for popup
qosclass = get_qos_class(bwdpi_conntrack[i][7], bwdpi_conntrack[i][6]);
// Retrieve hostname from networkmap
clientObj = clientFromIP(bwdpi_conntrack[i][1]);
if (clientObj)
clientName = (clientObj.nickName == "") ? clientObj.hostname : clientObj.nickName;
else
clientName = bwdpi_conntrack[i][1];
clientObj = clientFromIP(bwdpi_conntrack[i][3]);
if (clientObj)
clientName2 = (clientObj.nickName == "") ? clientObj.hostname : clientObj.nickName;
else
clientName2 = bwdpi_conntrack[i][3];
// Output row
code += "<tr><td>" + bwdpi_conntrack[i][0] + "</td>";
code += "<td title=\"" + clientName + "\"" + (bwdpi_conntrack[i][1].length > 36 ? "style=\"font-size: 80%;\"" : "") +">" +
bwdpi_conntrack[i][1] + "</td>";
code += "<td>" + bwdpi_conntrack[i][2] + "</td>";
code += "<td title=\"" + clientName2 + "\"" + (bwdpi_conntrack[i][3].length > 36 ? "style=\"font-size: 80%;\"" : "") + ">" +
bwdpi_conntrack[i][3] + "</td>";
code += "<td>" + bwdpi_conntrack[i][4] + "</td>";
code += "<td><span title=\"" + category_title[qosclass] + "\" class=\"catrow cat" +
qosclass + "\"" + (bwdpi_conntrack[i][5].length > 27 ? "style=\"font-size: 75%;\"" : "") + ">" +
bwdpi_conntrack[i][5] + "</span></td></tr>";
}
// Remove cat and appid cols
var tabledata = bwdpi_conntrack.map(function(val){
return val.slice(0, -2);
});
code += "</tbody></table>";
document.getElementById('tracked_connections').innerHTML = code;
document.getElementById('track_header_' + sortfield).style.boxShadow = "rgb(255, 204, 0) 0px " + (sortdir == 1 ? "1" : "-1") + "px 0px 0px inset";
}
function setsort(newfield) {
if (newfield != sortfield) {
sortdir = 0;
sortfield = newfield;
} else {
sortdir = (sortdir ? 0 : 1);
}
}
var tableStruct = {
data: tabledata,
container: "tableContainer",
title: "Tracked connections (total: "+tracklen+")",
header: [
{
"title" : "Proto",
"sort" : "str",
"width" : "5%"
},
{
"title" : "Source",
"sort" : "ip",
"width" : "28%"
},
{
"title" : "SPort",
"sort" : "num",
"width" : "6%"
},
{
"title" : "Destination",
"sort" : "ip",
"width" : "28%"
},
{
"title" : "DPort",
"sort" : "num",
"width" : "6%"
},
{
"title" : "Application",
"sort" : "str",
"defaultSort" : "increase",
"width" : "27%"
}
]
}
if(tableStruct.data.length) {
tableApi.genTableAPI(tableStruct);
}
function table_sort(a, b){
var aa, bb;
switch (sortfield) {
case 0: // Proto
case 1: // Local IP
case 3: // Remote IP
if (sortdir) {
aa = full_IPv6(a[sortfield].toString());
bb = full_IPv6(b[sortfield].toString());
if (aa == bb) return 0;
else if (aa > bb) return -1;
else return 1;
} else {
aa = full_IPv6(a[sortfield].toString());
bb = full_IPv6(b[sortfield].toString());
if (aa == bb) return 0;
else if (aa > bb) return 1;
else return -1;
}
break;
case 2: // Local Port
case 4: // Remote Port
if (sortdir)
return parseInt(b[sortfield]) - parseInt(a[sortfield]);
else
return parseInt(a[sortfield]) - parseInt(b[sortfield]);
break;
case 5: // Label
if (sortdir) {
aa = a[sortfield];
bb = b[sortfield];
if(aa == bb) return 0;
else if(aa > bb) return -1;
else return 1;
} else {
aa = a[sortfield];
bb = b[sortfield];
if(aa == bb) return 0;
else if(aa > bb) return 1;
else return -1;
}
break;
}
}
@@ -469,7 +515,7 @@ function draw_chart(data_array, ctx, pie) {
</tr>
</table>
<br>
<div id="tableContainer" style="margin-top:-10px;"></div>
<div id="tracked_connections">
<br>
<div class="apply_gen" style="padding-top: 25px;"><input type="button" onClick="location.href=location.href" value="<#CTL_refresh#>" class="button_gen"></div>
</td>

0 comments on commit 54755fe

Please sign in to comment.
You can’t perform that action at this time.