OpenWrt/openwrt-luci
1
0
Fork 0
mirror of https://github.com/openwrt/luci synced 2025-01-07 03:27:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

luci-mod-status: add simple filtering for connections

Browse Source 
This commit adds a simple filtering input text into the connections status page. You can type some filtering like:
- '100.15' -> Will show only connections that include this '100.15' onto the IP.
- 'UDP 100.15' -> Will show only UDP connections that include this '100.15' onto the IP.
- ':443' -> Will show only connections that use the port 443 as source or destination.

You can use a part of the IP or part of the name if the DNS resolution button is enabled.

It's a very simple filter that can grow in the future if it deserves some interest, maybe adding some regular expression support.

Signed-off-by: Miguel Angel Mulero Martinez <migmul@gmail.com>
This commit is contained in:
Miguel Angel Mulero Martinez 2024-12-23 16:17:29 +01:00 committed by Paul Donald
parent 235ec08a6a
commit 6404f3a300
1 changed files with 63 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
modules/luci-mod-status/htdocs/luci-static/resources/view/status/connections.js
View File

@ -27,7 +27,8 @@ var callNetworkRrdnsLookup = rpc.declare({
var graphPolls = [],
pollInterval = 3,
dns_cache = {},
enableLookups = false;
enableLookups = false,
filterText = '';
var recheck_lookup_queue = {};
@ -130,12 +131,27 @@ return view.extend({
var src = dns_cache[c.src] || (c.layer3 == 'ipv6' ? '[' + c.src + ']' : c.src);
var dst = dns_cache[c.dst] || (c.layer3 == 'ipv6' ? '[' + c.dst + ']' : c.dst);
const network = c.layer3.toUpperCase();
const protocol = c.layer4.toUpperCase();
const source ='%h'.format(c.hasOwnProperty('sport') ? (src + ':' + c.sport) : src);
const destination = '%h'.format(c.hasOwnProperty('dport') ? (dst + ':' + c.dport) : dst);
const transfer = [ c.bytes, '%1024.2mB (%d %s)'.format(c.bytes, c.packets, _('Pkts.')) ];
if (filterText) {
let filterTextExpressions = filterText.split(' ');
if (filterTextExpressions.some((element) => element.toUpperCase() !== network && element.toUpperCase() !== protocol
&& !(c.src.includes(element) || source.includes(element))
&& !(c.dst.includes(element) || destination.includes(element)))) {
continue;
}
}
rows.push([
c.layer3.toUpperCase(),
c.layer4.toUpperCase(),
'%h'.format(c.hasOwnProperty('sport') ? (src + ':' + c.sport) : src),
'%h'.format(c.hasOwnProperty('dport') ? (dst + ':' + c.dport) : dst),
[ c.bytes, '%1024.2mB (%d %s)'.format(c.bytes, c.packets, _('Pkts.')) ]
network,
protocol,
source,
destination,
transfer,
]);
}
@ -359,23 +375,48 @@ return view.extend({
])
]),
E('div', { 'class': 'right' }, [
E('button', {
'class': 'btn cbi-button cbi-button-apply toggle-lookups',
'click': function(ev) {
if (!enableLookups) {
ev.currentTarget.classList.add('spinning');
ev.currentTarget.disabled = true;
enableLookups = true;
}
else {
ev.currentTarget.firstChild.data = _('Enable DNS lookups');
enableLookups = false;
}
E('br'),
this.blur();
}
}, [ enableLookups ? _('Disable DNS lookups') : _('Enable DNS lookups') ])
E('div', {
id: 'settings-row',
style: 'display: flex',
}, [
E('span', {
class: 'filter',
style: 'flex: auto',
}, [
E('input', {
id: 'filter-connections',
type: 'text',
placeholder: '192.168.1.15 / UDP 1.15 / :443',
class: 'cbi-input-text',
style: 'width: 100%',
keyup: function(ev) {
filterText = this.value;
}
})
]),
E('span', {
class: 'right',
style: 'flex: auto',
}, [
E('button', {
'class': 'btn cbi-button cbi-button-apply toggle-lookups',
'click': function(ev) {
if (!enableLookups) {
ev.currentTarget.classList.add('spinning');
ev.currentTarget.disabled = true;
enableLookups = true;
}
else {
ev.currentTarget.firstChild.data = _('Enable DNS lookups');
enableLookups = false;
}
this.blur();
}
}, [ enableLookups ? _('Disable DNS lookups') : _('Enable DNS lookups') ])
]),
]),
E('br'),