summaryrefslogtreecommitdiffhomepage
path: root/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js
diff options
context:
space:
mode:
Diffstat (limited to 'applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js')
-rw-r--r--applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js266
1 files changed, 156 insertions, 110 deletions
diff --git a/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js
index 1b654d7bca..dcb2c4e707 100644
--- a/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js
+++ b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw/display.js
@@ -333,25 +333,25 @@ return view.extend({
'data-col': 'ip',
'data-tooltip': _('Source IP')
}, (mac !== '00:00:00:00:00:00') ? mac : _('other')),
- E('a', {
+ [ rec.conns, E('a', {
'href': '#' + rec.mac,
'data-col': 'layer7',
'data-tooltip': _('Protocol')
- }, '%1000.2m'.format(rec.conns)),
- '%1024.2mB'.format(rec.rx_bytes),
- '%1000.2mP'.format(rec.rx_pkts),
- '%1024.2mB'.format(rec.tx_bytes),
- '%1000.2mP'.format(rec.tx_pkts)
+ }, '%1000.2m'.format(rec.conns)) ],
+ [ rec.rx_bytes, '%1024.2mB'.format(rec.rx_bytes) ],
+ [ rec.rx_pkts, '%1000.2mP'.format(rec.rx_pkts) ],
+ [ rec.tx_bytes, '%1024.2mB'.format(rec.tx_bytes) ],
+ [ rec.tx_pkts, '%1000.2mP'.format(rec.tx_pkts) ]
]);
trafData.push({
value: rec.rx_bytes + rec.tx_bytes,
- label: ["%s: %%.2mB".format(key), cell]
+ label: ["%s: %%1024.2mB".format(key), cell]
});
connData.push({
value: rec.conns,
- label: ["%s: %%.2m".format(key), cell]
+ label: ["%s: %%1000.2m".format(key), cell]
});
rx_total += rec.rx_bytes;
@@ -359,13 +359,7 @@ return view.extend({
conn_total += rec.conns;
}
- cbi_update_table('#host-data', rows, E('em', [
- _('No data recorded yet.'), ' ',
- E('a', {
- 'href': '#',
- 'click': ui.createHandlerFn(this, 'handleCommit')
- }, _('Force reload…'))
- ]));
+ cbi_update_table('#host-data', rows, E('em', _('No data recorded yet.')));
this.pie('traf-pie', trafData);
this.pie('conn-pie', connData);
@@ -395,21 +389,21 @@ return view.extend({
rows.push([
cell,
- '%1000m'.format(rec.conns),
- '%1024.2mB'.format(rec.rx_bytes),
- '%1000.2mP'.format(rec.rx_pkts),
- '%1024.2mB'.format(rec.tx_bytes),
- '%1000.2mP'.format(rec.tx_pkts)
+ [ rec.conns, '%1000m'.format(rec.conns) ],
+ [ rec.rx_bytes, '%1024.2mB'.format(rec.rx_bytes) ],
+ [ rec.rx_pkts, '%1000.2mP'.format(rec.rx_pkts) ],
+ [ rec.tx_bytes, '%1024.2mB'.format(rec.tx_bytes) ],
+ [ rec.tx_pkts, '%1000.2mP'.format(rec.tx_pkts) ]
]);
rxData.push({
value: rec.rx_bytes,
- label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
+ label: ["%s: %%1024.2mB".format(rec.layer7 || _('other')), cell]
});
txData.push({
value: rec.tx_bytes,
- label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
+ label: ["%s: %%1024.2mB".format(rec.layer7 || _('other')), cell]
});
if (rec.layer7) {
@@ -419,10 +413,7 @@ return view.extend({
}
}
- cbi_update_table('#layer7-data', rows, E('em', [
- _('No data recorded yet.'), ' ',
- E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
- ]));
+ cbi_update_table('#layer7-data', rows, E('em', _('No data recorded yet.')));
this.pie('layer7-rx-pie', rxData);
this.pie('layer7-tx-pie', txData);
@@ -510,37 +501,59 @@ return view.extend({
rows.push([
this.formatHostname(dns),
mac,
- [ E('span', _('IPv4')),
- E('span', _('IPv6')) ],
- [ E('span', rec4 ? '%1024.2mB'.format(rec4.rx_bytes) : '-'),
- E('span', rec6 ? '%1024.2mB'.format(rec6.rx_bytes) : '-') ],
- [ E('span', rec4 ? '%1000.2mP'.format(rec4.rx_pkts) : '-'),
- E('span', rec6 ? '%1000.2mP'.format(rec6.rx_pkts) : '-') ],
- [ E('span', rec4 ? '%1024.2mB'.format(rec4.tx_bytes) : '-'),
- E('span', rec6 ? '%1024.2mB'.format(rec6.tx_bytes) : '-') ],
- [ E('span', rec4 ? '%1000.2mP'.format(rec4.tx_pkts) : '-'),
- E('span', rec6 ? '%1000.2mP'.format(rec6.tx_pkts) : '-') ]
+ [
+ 0,
+ E([], [
+ E('span', _('IPv4')),
+ E('span', _('IPv6'))
+ ])
+ ],
+ [
+ (rec4 ? rec4.rx_bytes : 0) + (rec6 ? rec6.rx_bytes : 0),
+ E([], [
+ E('span', rec4 ? '%1024.2mB'.format(rec4.rx_bytes) : '-'),
+ E('span', rec6 ? '%1024.2mB'.format(rec6.rx_bytes) : '-')
+ ])
+ ],
+ [
+ (rec4 ? rec4.rx_pkts : 0) + (rec6 ? rec6.rx_pkts : 0),
+ E([], [
+ E('span', rec4 ? '%1000.2mP'.format(rec4.rx_pkts) : '-'),
+ E('span', rec6 ? '%1000.2mP'.format(rec6.rx_pkts) : '-')
+ ])
+ ],
+ [
+ (rec4 ? rec4.tx_bytes : 0) + (rec6 ? rec6.tx_bytes : 0),
+ E([], [
+ E('span', rec4 ? '%1024.2mB'.format(rec4.tx_bytes) : '-'),
+ E('span', rec6 ? '%1024.2mB'.format(rec6.tx_bytes) : '-')
+ ])
+ ],
+ [
+ (rec4 ? rec4.tx_pkts : 0) + (rec6 ? rec6.tx_pkts : 0),
+ E([], [
+ E('span', rec4 ? '%1000.2mP'.format(rec4.tx_pkts) : '-'),
+ E('span', rec6 ? '%1000.2mP'.format(rec6.tx_pkts) : '-')
+ ])
+ ]
]);
}
- cbi_update_table('#ipv6-data', rows, E('em', [
- _('No data recorded yet.'), ' ',
- E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
- ]));
+ cbi_update_table('#ipv6-data', rows, E('em', _('No data recorded yet.')));
var shareData = [], hostsData = [];
if (rx4_total > 0 || tx4_total > 0)
shareData.push({
value: rx4_total + tx4_total,
- label: ["IPv4: %.2mB"],
+ label: ["IPv4: %1024.2mB"],
color: 'hsl(140, 100%, 50%)'
});
if (rx6_total > 0 || tx6_total > 0)
shareData.push({
value: rx6_total + tx6_total,
- label: ["IPv6: %.2mB"],
+ label: ["IPv6: %1024.2mB"],
color: 'hsl(180, 100%, 50%)'
});
@@ -595,11 +608,11 @@ return view.extend({
dom.content(tooltip, [
E('div', { 'class': 'head' }, [
E('div', { 'class': 'pie' }, [
- E('label', _('Download')),
+ E('label', _('Download', 'Traffic counter')),
E('canvas', { 'id': 'bubble-pie1', 'width': 100, 'height': 100 })
]),
E('div', { 'class': 'pie' }, [
- E('label', _('Upload')),
+ E('label', _('Upload', 'Traffic counter')),
E('canvas', { 'id': 'bubble-pie2', 'width': 100, 'height': 100 })
]),
E('div', { 'class': 'kpi' }, [
@@ -609,14 +622,14 @@ return view.extend({
])
])
]),
- E('div', { 'class': 'table' }, [
- E('div', { 'class': 'tr table-titles' }, [
- E('div', { 'class': 'th' }, label || col),
- E('div', { 'class': 'th' }, _('Conn.')),
- E('div', { 'class': 'th' }, _('Down. (Bytes)')),
- E('div', { 'class': 'th' }, _('Down. (Pkts.)')),
- E('div', { 'class': 'th' }, _('Up. (Bytes)')),
- E('div', { 'class': 'th' }, _('Up. (Pkts.)')),
+ E('table', { 'class': 'table' }, [
+ E('tr', { 'class': 'tr table-titles' }, [
+ E('th', { 'class': 'th' }, label || col),
+ E('th', { 'class': 'th' }, _('Conn.')),
+ E('th', { 'class': 'th' }, _('Down. (Bytes)')),
+ E('th', { 'class': 'th' }, _('Down. (Pkts.)')),
+ E('th', { 'class': 'th' }, _('Up. (Bytes)')),
+ E('th', { 'class': 'th' }, _('Up. (Pkts.)')),
])
])
]);
@@ -629,11 +642,11 @@ return view.extend({
rows.push([
cell,
- '%1000.2m'.format(rec.conns),
- '%1024.2mB'.format(rec.rx_bytes),
- '%1000.2mP'.format(rec.rx_pkts),
- '%1024.2mB'.format(rec.tx_bytes),
- '%1000.2mP'.format(rec.tx_pkts)
+ [ rec.conns, '%1000.2m'.format(rec.conns) ],
+ [ rec.rx_bytes, '%1024.2mB'.format(rec.rx_bytes) ],
+ [ rec.rx_pkts, '%1000.2mP'.format(rec.rx_pkts) ],
+ [ rec.tx_bytes, '%1024.2mB'.format(rec.tx_bytes) ],
+ [ rec.tx_pkts, '%1000.2mP'.format(rec.tx_pkts) ]
]);
rxData.push({
@@ -841,21 +854,28 @@ return view.extend({
])
]),
- E('div', { 'class': 'table', 'id': 'host-data' }, [
- E('div', { 'class': 'tr table-titles' }, [
- E('div', { 'class': 'th left hostname' }, [ _('Host') ]),
- E('div', { 'class': 'th right' }, [ _('MAC') ]),
- E('div', { 'class': 'th right' }, [ _('Connections') ]),
- E('div', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
- E('div', { 'class': 'th right' }, [ _('Download (Packets)') ]),
- E('div', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
- E('div', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
+ E('table', { 'class': 'table', 'id': 'host-data' }, [
+ E('tr', { 'class': 'tr table-titles' }, [
+ E('th', { 'class': 'th left hostname' }, [ _('Host') ]),
+ E('th', { 'class': 'th right' }, [ _('MAC') ]),
+ E('th', { 'class': 'th right' }, [ _('Connections') ]),
+ E('th', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
+ E('th', { 'class': 'th right' }, [ _('Download (Packets)') ]),
+ E('th', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
+ E('th', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
]),
- E('div', { 'class': 'tr placeholder' }, [
- E('div', { 'class': 'td' }, [
+ E('tr', { 'class': 'tr placeholder' }, [
+ E('td', { 'class': 'td' }, [
E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
])
])
+ ]),
+ E('div', { 'class': 'right' }, [
+ E('button', {
+ 'class': 'cbi-button',
+ 'click': ui.createHandlerFn(this, 'handleCommit')
+ }, _('Force reload…')
+ )
])
]),
@@ -881,20 +901,27 @@ return view.extend({
])
]),
- E('div', { 'class': 'table', 'id': 'layer7-data' }, [
- E('div', { 'class': 'tr table-titles' }, [
- E('div', { 'class': 'th left' }, [ _('Application') ]),
- E('div', { 'class': 'th right' }, [ _('Connections') ]),
- E('div', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
- E('div', { 'class': 'th right' }, [ _('Download (Packets)') ]),
- E('div', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
- E('div', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
+ E('table', { 'class': 'table', 'id': 'layer7-data' }, [
+ E('tr', { 'class': 'tr table-titles' }, [
+ E('th', { 'class': 'th left' }, [ _('Application') ]),
+ E('th', { 'class': 'th right' }, [ _('Connections') ]),
+ E('th', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
+ E('th', { 'class': 'th right' }, [ _('Download (Packets)') ]),
+ E('th', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
+ E('th', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
]),
- E('div', { 'class': 'tr placeholder' }, [
- E('div', { 'class': 'td' }, [
+ E('tr', { 'class': 'tr placeholder' }, [
+ E('td', { 'class': 'td' }, [
E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
])
])
+ ]),
+ E('div', { 'class': 'right' }, [
+ E('button', {
+ 'class': 'cbi-button',
+ 'click': ui.createHandlerFn(this, 'handleCommit')
+ }, _('Force reload…')
+ )
])
]),
@@ -920,49 +947,68 @@ return view.extend({
])
]),
- E('div', { 'class': 'table', 'id': 'ipv6-data' }, [
- E('div', { 'class': 'tr table-titles' }, [
- E('div', { 'class': 'th left' }, [ _('Host') ]),
- E('div', { 'class': 'th right' }, [ _('MAC') ]),
- E('div', { 'class': 'th double right hide-xs' }, [ _('Family') ]),
- E('div', { 'class': 'th double right' }, [ _('Download (Bytes)') ]),
- E('div', { 'class': 'th double right' }, [ _('Download (Packets)') ]),
- E('div', { 'class': 'th double right' }, [ _('Upload (Bytes)') ]),
- E('div', { 'class': 'th double right' }, [ _('Upload (Packets)') ]),
+ E('table', { 'class': 'table', 'id': 'ipv6-data' }, [
+ E('tr', { 'class': 'tr table-titles' }, [
+ E('th', { 'class': 'th left' }, [ _('Host') ]),
+ E('th', { 'class': 'th right' }, [ _('MAC') ]),
+ E('th', { 'class': 'th double right hide-xs' }, [ _('Family') ]),
+ E('th', { 'class': 'th double right' }, [ _('Download (Bytes)') ]),
+ E('th', { 'class': 'th double right' }, [ _('Download (Packets)') ]),
+ E('th', { 'class': 'th double right' }, [ _('Upload (Bytes)') ]),
+ E('th', { 'class': 'th double right' }, [ _('Upload (Packets)') ]),
]),
- E('div', { 'class': 'tr placeholder' }, [
- E('div', { 'class': 'td' }, [
+ E('tr', { 'class': 'tr placeholder' }, [
+ E('td', { 'class': 'td' }, [
E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
])
])
+ ]),
+ E('div', { 'class': 'right' }, [
+ E('button', {
+ 'class': 'cbi-button',
+ 'click': ui.createHandlerFn(this, 'handleCommit')
+ }, _('Force reload…')
+ )
])
]),
E('div', { 'class': 'cbi-section', 'data-tab': 'export', 'data-tab-title': _('Export') }, [
- E('ul', [
- E('li', [
- E('a', {
- 'href': '#',
- 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'mac', '-rx,-tx')
- }, [ _('CSV, grouped by MAC') ])
+ E('div', { 'class': 'cbi-section-node cbi-sction-node-tabbed' }, [
+ E('div', { 'class': 'cbi-value' }, [
+ E('label', { 'class': 'cbi-value-title' }, _('Grouped by MAC (CSV)')),
+ E('div', { 'class': 'cbi-value-field' }, [
+ E('button', {
+ 'class': 'cbi-button',
+ 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'mac', '-rx,-tx')
+ }, [ _('Export') ])
+ ])
]),
- E('li', [
- E('a', {
- 'href': '#',
- 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'ip', '-rx,-tx')
- }, [ _('CSV, grouped by IP') ])
+ E('div', { 'class': 'cbi-value' }, [
+ E('label', { 'class': 'cbi-value-title' }, _('Grouped by IP (CSV)')),
+ E('div', { 'class': 'cbi-value-field' }, [
+ E('button', {
+ 'class': 'cbi-button',
+ 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'ip', '-rx,-tx')
+ }, [ _('Export') ])
+ ])
]),
- E('li', [
- E('a', {
- 'href': '#',
- 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'layer7', '-rx,-tx')
- }, [ _('CSV, grouped by protocol') ])
+ E('div', { 'class': 'cbi-value' }, [
+ E('label', { 'class': 'cbi-value-title' }, _('Grouped by protocol (CSV)')),
+ E('div', { 'class': 'cbi-value-field' }, [
+ E('button', {
+ 'class': 'cbi-button',
+ 'click': ui.createHandlerFn(this, 'handleDownload', 'csv', 'layer7', '-rx,-tx')
+ }, [ _('Export') ])
+ ])
]),
- E('li', [
- E('a', {
- 'href': '#',
- 'click': ui.createHandlerFn(this, 'handleDownload', 'json', null, null)
- }, [ _('JSON dump') ])
+ E('div', { 'class': 'cbi-value' }, [
+ E('label', { 'class': 'cbi-value-title' }, _('Dump (JSON)')),
+ E('div', { 'class': 'cbi-value-field' }, [
+ E('button', {
+ 'class': 'cbi-button',
+ 'click': ui.createHandlerFn(this, 'handleDownload', 'json', null, null)
+ }, [ _('Export') ])
+ ])
])
])
])
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-20 05:39:33 +0000