diff options
Diffstat (limited to 'applications')
18 files changed, 1206 insertions, 1184 deletions
diff --git a/applications/luci-app-aria2/luasrc/view/aria2/overview_status.htm b/applications/luci-app-aria2/luasrc/view/aria2/overview_status.htm index 34b7b3c641..a06d2015ff 100644 --- a/applications/luci-app-aria2/luasrc/view/aria2/overview_status.htm +++ b/applications/luci-app-aria2/luasrc/view/aria2/overview_status.htm @@ -67,7 +67,7 @@ function openWebUI(path) { var pathName = window.document.location.pathname; var pos = curWwwPath.indexOf(pathName); var localhostPath = curWwwPath.substring(0, pos); - var url = "http:" + localhostPath.substring(window.location.protocol.length) + "/" + path; + var url = localhostPath + "/" + path; window.open(url) }; //]]> diff --git a/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css new file mode 100644 index 0000000000..dd24e5dffc --- /dev/null +++ b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css @@ -0,0 +1,173 @@ +#chartjs-tooltip { + opacity: 0; + position: absolute; + background: rgba(0, 0, 0, .7); + color: white; + padding: 3px; + border-radius: 3px; + transition: all .1s ease; + pointer-events: none; + transform: translate(-50%, 0); + z-index: 20000; +} + +#chartjs-tooltip.above { + transform: translate(-50%, -100%); +} + +#chartjs-tooltip.above:before { + border: solid; + border-color: #111 transparent; + border-color: rgba(0, 0, 0, .8) transparent; + border-width: 8px 8px 0 8px; + bottom: 1em; + content: ""; + display: block; + left: 50%; + top: 100%; + position: absolute; + z-index: 99; + transform: translate(-50%, 0); +} + +.pie label { + font-weight: bold; + font-size: 14px; + display: block; + margin-bottom: 10px; + text-align: center; +} + +.kpi ul { + list-style: none; +} + +.kpi li { + margin: 10px; + display: none; +} + +.kpi big { + font-weight: bold; +} + +.head { + text-align: center; + position: relative; + display: flex; + flex-wrap: wrap; + white-space: normal; +} + +.head .pie { + min-width: 200px; + padding: 5px; + flex: 1 1 30%; +} + +.cbi-tooltip .head .pie { + min-width: 100px; +} + +.head .kpi { + padding: 5px; + font-size: smaller; + text-align: left; + align-self: center; + flex: 1 0 33%; + min-width: 150px; + display: flex; + justify-content: center; +} + +.head .kpi ul { + margin: 0; +} + +.table .th, +.table .td { + padding: 1px 3px !important; + border: 1px solid #ddd; +} + +.table .td > a { + display: block; +} + +.table .placeholder .td { + border: none; +} + +.table .td.double { + padding: 0 !important; +} + +.table .td.double > span { + display: block; + padding: 1px 3px; +} + +.table .td.double > span:first-child { + border-bottom: 1px solid #ddd; +} + +.cbi-tooltip { + box-shadow: 0 0 5px #000; +} + +@media screen and (max-width: 992px) { + .table .tr { + margin-bottom: 10px; + } + + .table .th, + .table .td, .table .td.double { + padding: 1px 3px !important; + flex-basis: 50%; + } + + .table .td, .table .td::before, + .table .th, .table .th::before { + text-align: left !important; + font-size: 14px; + border: none; + } + + #host-data .td.hostname { + flex-basis: 100%; + } + + #ipv6-data .td.double > span { + padding: 0; + border-bottom: none; + } + + #ipv6-data .td.double > span:first-child::before { + content: "IPv4: "; + font-style: italic; + font-size: 13px; + } + + #ipv6-data .td.double > span:last-child::before { + content: "IPv6: "; + font-style: italic; + font-size: 13px; + } + + .cbi-tooltip { + width: 100%; + pointer-events: auto; + box-shadow: 0 0 10px 5px #000; + border-radius: 0; + } + + .cbi-tooltip .table .th, + .cbi-tooltip .table .td { + flex-basis: 16%; + min-width: 100px; + } + + .head .kpi { + font-size: 14px; + } +} diff --git a/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.js b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.js new file mode 100644 index 0000000000..e5ae69b3a7 --- /dev/null +++ b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.js @@ -0,0 +1,684 @@ +var chartRegistry = {}, + trafficPeriods = [], + trafficData = { columns: [], data: [] }, + hostNames = {}, + ouiData = []; + + +function off(elem) +{ + var val = [0, 0]; + do { + if (!isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) { + val[0] += elem.offsetLeft; + val[1] += elem.offsetTop; + } + } + while ((elem = elem.offsetParent) != null); + return val; +} + +Chart.defaults.global.customTooltips = function(tooltip) { + var tooltipEl = document.getElementById('chartjs-tooltip'); + + if (!tooltipEl) { + tooltipEl = document.createElement('div'); + tooltipEl.setAttribute('id', 'chartjs-tooltip'); + document.body.appendChild(tooltipEl); + } + + if (!tooltip) { + if (tooltipEl.row) + tooltipEl.row.style.backgroundColor = ''; + + tooltipEl.style.opacity = 0; + return; + } + + var pos = off(tooltip.chart.canvas); + + tooltipEl.className = tooltip.yAlign; + tooltipEl.innerHTML = tooltip.text[0]; + + tooltipEl.style.opacity = 1; + tooltipEl.style.left = pos[0] + tooltip.x + 'px'; + tooltipEl.style.top = pos[1] + tooltip.y - tooltip.caretHeight - tooltip.caretPadding + 'px'; + + console.debug(tooltip.text); + + var row = findParent(tooltip.text[1], '.tr'), + hue = tooltip.text[2]; + + if (row && !isNaN(hue)) { + row.style.backgroundColor = 'hsl(%u, 100%%, 80%%)'.format(hue); + tooltipEl.row = row; + } +}; + +Chart.defaults.global.tooltipFontSize = 10; +Chart.defaults.global.tooltipTemplate = function(tip) { + tip.label[0] = tip.label[0].format(tip.value); + return tip.label; +}; + +function kpi(id, val1, val2, val3) +{ + var e = L.dom.elem(id) ? id : document.getElementById(id); + + if (val1 && val2 && val3) + e.innerHTML = _('%s, %s and %s').format(val1, val2, val3); + else if (val1 && val2) + e.innerHTML = _('%s and %s').format(val1, val2); + else if (val1) + e.innerHTML = val1; + + e.parentNode.style.display = val1 ? 'list-item' : ''; +} + +function pie(id, data) +{ + var total = data.reduce(function(n, d) { return n + d.value }, 0); + + data.sort(function(a, b) { return b.value - a.value }); + + if (total === 0) + data = [{ + value: 1, + color: '#cccccc', + label: [ _('no traffic') ] + }]; + + for (var i = 0; i < data.length; i++) { + if (!data[i].color) { + var hue = 120 / (data.length-1) * i; + data[i].color = 'hsl(%u, 80%%, 50%%)'.format(hue); + data[i].label.push(hue); + } + } + + var node = L.dom.elem(id) ? id : document.getElementById(id), + key = L.dom.elem(id) ? id.id : id, + ctx = node.getContext('2d'); + + if (chartRegistry.hasOwnProperty(key)) + chartRegistry[key].destroy(); + + chartRegistry[key] = new Chart(ctx).Doughnut(data, { + segmentStrokeWidth: 1, + percentageInnerCutout: 30 + }); + + return chartRegistry[key]; +} + +function query(filter, group, order) +{ + var keys = [], columns = {}, records = {}, result = []; + + if (typeof(group) !== 'function' && typeof(group) !== 'object') + group = ['mac']; + + for (var i = 0; i < trafficData.columns.length; i++) + columns[trafficData.columns[i]] = i; + + for (var i = 0; i < trafficData.data.length; i++) { + var record = trafficData.data[i]; + + if (typeof(filter) === 'function' && filter(columns, record) !== true) + continue; + + var key; + + if (typeof(group) === 'function') { + key = group(columns, record); + } + else { + key = []; + + for (var j = 0; j < group.length; j++) + if (columns.hasOwnProperty(group[j])) + key.push(record[columns[group[j]]]); + + key = key.join(','); + } + + if (!records.hasOwnProperty(key)) { + var rec = {}; + + for (var col in columns) + rec[col] = record[columns[col]]; + + records[key] = rec; + result.push(rec); + } + else { + records[key].conns += record[columns.conns]; + records[key].rx_bytes += record[columns.rx_bytes]; + records[key].rx_pkts += record[columns.rx_pkts]; + records[key].tx_bytes += record[columns.tx_bytes]; + records[key].tx_pkts += record[columns.tx_pkts]; + } + } + + if (typeof(order) === 'function') + result.sort(order); + + return result; +} + +function oui(mac) { + var m, l = 0, r = ouiData.length / 3 - 1; + var mac1 = parseInt(mac.replace(/[^a-fA-F0-9]/g, ''), 16); + + while (l <= r) { + m = l + Math.floor((r - l) / 2); + + var mask = (0xffffffffffff - + (Math.pow(2, 48 - ouiData[m * 3 + 1]) - 1)); + + var mac1_hi = ((mac1 / 0x10000) & (mask / 0x10000)) >>> 0; + var mac1_lo = ((mac1 & 0xffff) & (mask & 0xffff)) >>> 0; + + var mac2 = parseInt(ouiData[m * 3], 16); + var mac2_hi = (mac2 / 0x10000) >>> 0; + var mac2_lo = (mac2 & 0xffff) >>> 0; + + if (mac1_hi === mac2_hi && mac1_lo === mac2_lo) + return ouiData[m * 3 + 2]; + + if (mac2_hi > mac1_hi || + (mac2_hi === mac1_hi && mac2_lo > mac1_lo)) + r = m - 1; + else + l = m + 1; + } + + return null; +} + + +function fetchData(period) +{ + XHR.get(L.url('admin/nlbw/data'), { period: period, group_by: 'family,mac,ip,layer7', order_by: '-rx_bytes,-tx_bytes' }, function(xhr, res) { + if (res !== null && typeof(res) === 'object' && typeof(res.columns) === 'object' && typeof(res.data) === 'object') + trafficData = res; + + var addrs = query(null, ['ip'], null); + var ipAddrs = []; + + for (var i = 0; i < addrs.length; i++) + if (ipAddrs.indexOf(addrs[i].ip) < 0) + ipAddrs.push(addrs[i].ip); + + renderHostData(); + renderLayer7Data(); + renderIPv6Data(); + + XHR.get(L.url('admin/nlbw/ptr', ipAddrs.join('/')), null, function(xhr, res) { + if (res !== null && typeof(res) === 'object') + hostNames = res; + }); + }); +} + +function renderPeriods() +{ + var sel = document.getElementById('nlbw.period'); + + for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) { + var d1 = new Date(e); + var d2, pd; + + if (i) { + d2 = new Date(trafficPeriods[i - 1]); + d2.setDate(d2.getDate() - 1); + pd = '%04d-%02d-%02d'.format(d1.getFullYear(), d1.getMonth() + 1, d1.getDate()); + } + else { + d2 = new Date(); + pd = ''; + } + + var opt = document.createElement('option'); + opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) / 1000); + opt.value = pd; + opt.text = '%04d-%02d-%02d - %04d-%02d-%02d'.format( + d1.getFullYear(), d1.getMonth() + 1, d1.getDate(), + d2.getFullYear(), d2.getMonth() + 1, d2.getDate()); + + sel.appendChild(opt); + } + + sel.selectedIndex = sel.childNodes.length - 1; + sel.style.display = ''; + + sel.onchange = function(ev) { + L.hideTooltip(ev); + fetchData(sel.options[sel.selectedIndex].value); + } +} + +function renderHostDetail(tooltip) +{ + var key = this.getAttribute('href').substr(1), + col = this.getAttribute('data-col'), + label = this.getAttribute('data-tooltip'); + + var detailData = query( + function(c, r) { + return ((r[c.mac] === key || r[c.ip] === key) && + (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0)); + }, + [col], + function(r1, r2) { + return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes)); + } + ); + + var rxData = [], txData = []; + + L.dom.content(tooltip, [ + E('div', { 'class': 'head' }, [ + E('div', { 'class': 'pie' }, [ + E('label', _('Download')), + E('canvas', { 'id': 'bubble-pie1', 'width': 100, 'height': 100 }) + ]), + E('div', { 'class': 'pie' }, [ + E('label', _('Upload')), + E('canvas', { 'id': 'bubble-pie2', 'width': 100, 'height': 100 }) + ]), + E('div', { 'class': 'kpi' }, [ + E('ul', [ + E('li', _('Hostname: <big id="bubble-hostname">example.org</big>')), + E('li', _('Vendor: <big id="bubble-vendor">Example Corp.</big>')) + ]) + ]) + ]), + 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.)')), + ]) + ]) + ]); + + var rows = []; + + for (var i = 0; i < detailData.length; i++) { + var rec = detailData[i], + cell = E('div', rec[col] || _('other')); + + 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) + ]); + + rxData.push({ + label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell], + value: rec.rx_bytes + }); + + txData.push({ + label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell], + value: rec.tx_bytes + }); + } + + cbi_update_table(tooltip.lastElementChild, rows); + + pie(tooltip.querySelector('#bubble-pie1'), rxData); + pie(tooltip.querySelector('#bubble-pie2'), txData); + + var mac = key.toUpperCase(); + var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null; + + if (!name) + for (var i = 0; i < detailData.length; i++) + if ((name = hostNames[detailData[i].ip]) !== undefined) + break; + + if (mac !== '00:00:00:00:00:00') { + kpi(tooltip.querySelector('#bubble-hostname'), name); + kpi(tooltip.querySelector('#bubble-vendor'), oui(mac)); + } + else { + kpi(tooltip.querySelector('#bubble-hostname')); + kpi(tooltip.querySelector('#bubble-vendor')); + } + + var rect = this.getBoundingClientRect(), x, y; + + if ('ontouchstart' in window || window.innerWidth <= 992) { + var vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0), + scrollFrom = window.pageYOffset, + scrollTo = scrollFrom + rect.top - vpHeight * 0.5, + start = null; + + tooltip.style.top = (rect.top + rect.height + window.pageYOffset) + 'px'; + tooltip.style.left = 0; + + var scrollStep = function(timestamp) { + if (!start) + start = timestamp; + + var duration = Math.max(timestamp - start, 1); + if (duration < 100) { + document.body.scrollTop = scrollFrom + (scrollTo - scrollFrom) * (duration / 100); + window.requestAnimationFrame(scrollStep); + } + else { + document.body.scrollTop = scrollTo; + } + }; + + window.requestAnimationFrame(scrollStep); + } + else { + x = rect.left + rect.width + window.pageXOffset, + y = rect.top + window.pageYOffset; + + if ((y + tooltip.offsetHeight) > (window.innerHeight + window.pageYOffset)) + y -= ((y + tooltip.offsetHeight) - (window.innerHeight + window.pageYOffset)); + + tooltip.style.top = y + 'px'; + tooltip.style.left = x + 'px'; + } + + return false; +} + +function formatHostname(dns) +{ + if (dns === undefined || dns === null || dns === '') + return '-'; + + dns = dns.split('.')[0]; + + if (dns.length > 12) + return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12)); + + return '%h'.format(dns); +} + +function renderHostData() +{ + var trafData = [], connData = []; + var rx_total = 0, tx_total = 0, conn_total = 0; + + var hostData = query( + function(c, r) { + return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0); + }, + ['mac'], + //function(c, r) { + // return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip]; + //}, + function(r1, r2) { + return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes)); + } + ); + + var rows = []; + + for (var i = 0; i < hostData.length; i++) { + var rec = hostData[i], + mac = rec.mac.toUpperCase(), + key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip, + dns = hostInfo[mac] ? hostInfo[mac].name : null; + + var cell = E('div', formatHostname(dns)); + + rows.push([ + cell, + E('a', { + 'href': '#' + rec.mac, + 'data-col': 'ip', + 'data-tooltip': _('Source IP') + }, (mac !== '00:00:00:00:00:00') ? mac : _('other')), + 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) + ]); + + trafData.push({ + value: rec.rx_bytes + rec.tx_bytes, + label: ["%s: %%.2mB".format(key), cell] + }); + + connData.push({ + value: rec.conns, + label: ["%s: %%.2m".format(key), cell] + }); + + rx_total += rec.rx_bytes; + tx_total += rec.tx_bytes; + conn_total += rec.conns; + } + + cbi_update_table('#host-data', rows, E('em', [ + _('No data recorded yet.'), ' ', + E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…')) + ])); + + pie('traf-pie', trafData); + pie('conn-pie', connData); + + kpi('rx-total', '%1024.2mB'.format(rx_total)); + kpi('tx-total', '%1024.2mB'.format(tx_total)); + kpi('conn-total', '%1000m'.format(conn_total)); + kpi('host-total', '%u'.format(hostData.length)); +} + +function renderLayer7Data() +{ + var rxData = [], txData = []; + var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]]; + + var layer7Data = query( + null, ['layer7'], + function(r1, r2) { + return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes)); + } + ); + + var rows = []; + + for (var i = 0, c = 0; i < layer7Data.length; i++) { + var rec = layer7Data[i], + cell = E('div', rec.layer7 || _('other')); + + 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) + ]); + + rxData.push({ + value: rec.rx_bytes, + label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell] + }); + + txData.push({ + value: rec.tx_bytes, + label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell] + }); + + if (rec.layer7) { + topRx.push([rec.rx_bytes, rec.layer7]); + topTx.push([rec.tx_bytes, rec.layer7]); + topConn.push([rec.conns, rec.layer7]); + } + } + + cbi_update_table('#layer7-data', rows, E('em', [ + _('No data recorded yet.'), ' ', + E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…')) + ])); + + pie('layer7-rx-pie', rxData); + pie('layer7-tx-pie', txData); + + topRx.sort(function(a, b) { return b[0] - a[0] }); + topTx.sort(function(a, b) { return b[0] - a[0] }); + topConn.sort(function(a, b) { return b[0] - a[0] }); + + kpi('layer7-total', layer7Data.length); + kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]); + kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]); + kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]); +} + +function renderIPv6Data() +{ + var col = { }, + rx4_total = 0, + tx4_total = 0, + rx6_total = 0, + tx6_total = 0, + v4_total = 0, + v6_total = 0, + ds_total = 0, + families = { }, + records = { }; + + ipv6Data = query( + null, ['family', 'mac'], + function(r1, r2) { + return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes)); + } + ); + + for (var i = 0, c = 0; i < ipv6Data.length; i++) { + var rec = ipv6Data[i], + mac = rec.mac.toUpperCase(), + ip = rec.ip, + fam = families[mac] || 0, + recs = records[mac] || {}; + + if (rec.family == 4) { + rx4_total += rec.rx_bytes; + tx4_total += rec.tx_bytes; + fam |= 1; + } + else { + rx6_total += rec.rx_bytes; + tx6_total += rec.tx_bytes; + fam |= 2; + } + + recs[rec.family] = rec; + records[mac] = recs; + + families[mac] = fam; + } + + for (var mac in families) { + switch (families[mac]) + { + case 3: + ds_total++; + break; + + case 2: + v6_total++; + break; + + case 1: + v4_total++; + break; + } + } + + var rows = []; + + for (var mac in records) { + if (mac === '00:00:00:00:00:00') + continue; + + var dns = hostInfo[mac] ? hostInfo[mac].name : null, + rec4 = records[mac][4], + rec6 = records[mac][6]; + + rows.push([ + 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) : '-') ] + ]); + } + + cbi_update_table('#ipv6-data', rows, E('em', [ + _('No data recorded yet.'), ' ', + E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…')) + ])); + + var shareData = [], hostsData = []; + + if (rx4_total > 0 || tx4_total > 0) + shareData.push({ + value: rx4_total + tx4_total, + label: ["IPv4: %.2mB"], + color: 'hsl(140, 100%, 50%)' + }); + + if (rx6_total > 0 || tx6_total > 0) + shareData.push({ + value: rx6_total + tx6_total, + label: ["IPv6: %.2mB"], + color: 'hsl(180, 100%, 50%)' + }); + + if (v4_total > 0) + hostsData.push({ + value: v4_total, + label: [_('%d IPv4-only hosts')], + color: 'hsl(140, 100%, 50%)' + }); + + if (v6_total > 0) + hostsData.push({ + value: v6_total, + label: [_('%d IPv6-only hosts')], + color: 'hsl(180, 100%, 50%)' + }); + + if (ds_total > 0) + hostsData.push({ + value: ds_total, + label: [_('%d dual-stack hosts')], + color: 'hsl(50, 100%, 50%)' + }); + + pie('ipv6-share-pie', shareData); + pie('ipv6-hosts-pie', hostsData); + + kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total))); + kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total))); + kpi('ipv6-rx', '%1024.2mB'.format(rx6_total)); + kpi('ipv6-tx', '%1024.2mB'.format(tx6_total)); +} diff --git a/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm b/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm index 616bcc52a1..3c7af928ff 100644 --- a/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm +++ b/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm @@ -1,1031 +1,155 @@ <%# - Copyright 2017 Jo-Philipp Wich <jo@mein.io> + Copyright 2017-2018 Jo-Philipp Wich <jo@mein.io> Licensed to the public under the Apache License 2.0. -%> -<% css = [[ - - #chartjs-tooltip { - opacity: 0; - position: absolute; - background: rgba(0, 0, 0, .7); - color: white; - padding: 3px; - border-radius: 3px; - -webkit-transition: all .1s ease; - transition: all .1s ease; - pointer-events: none; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - z-index: 200; - } - - #chartjs-tooltip.above { - -webkit-transform: translate(-50%, -100%); - transform: translate(-50%, -100%); - } - - #chartjs-tooltip.above:before { - border: solid; - border-color: #111 transparent; - border-color: rgba(0, 0, 0, .8) transparent; - border-width: 8px 8px 0 8px; - bottom: 1em; - content: ""; - display: block; - left: 50%; - top: 100%; - position: absolute; - z-index: 99; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - } - - table { - border: 1px solid #999; - border-collapse: collapse; - margin: 0 0 2px !important; - } - - th, td, table table td { - border: 1px solid #999; - text-align: right; - padding: 1px 3px !important; - white-space: nowrap; - } - - tbody td { - border-bottom-color: #ccc; - } - - tbody td[rowspan] { - border-bottom-color: #999; - } - - tbody tr:last-child td { - border-bottom-color: #999; - } - - - .pie { - width: 200px; - display: inline-block; - margin: 20px; - } - - .pie label { - font-weight: bold; - font-size: 14px; - display: block; - margin-bottom: 10px; - text-align: center; - } - - .kpi { - display: inline-block; - margin: 80px 20px 20px; - vertical-align: top; - } - - .kpi ul { - list-style: none; - } - - .kpi li { - margin: 10px; - display: none; - } - - .kpi big { - font-weight: bold; - } - - #detail-bubble { - position: absolute; - opacity: 0; - visibility: hidden; - } - - #detail-bubble.in { - opacity: 1; - visibility: visible; - transition: opacity 0.5s; - } - - #detail-bubble > div { - border: 1px solid #ccc; - border-radius: 2px; - padding: 5px; - background: #fcfcfc; - } - - #detail-bubble .head { - text-align: center; - white-space: nowrap; - position: relative; - } - - #detail-bubble .head .dismiss { - top: 0; - right: 0; - width: 20px; - line-height: 20px; - text-align: center; - text-decoration: none; - font-weight: bold; - color: #000; - position: absolute; - font-size: 20px; - } - - #detail-bubble .pie { - width: 100px; - margin: 5px; - } - - #detail-bubble .kpi { - margin: 40px 5px 5px; - font-size: smaller; - text-align: left; - } - - #detail-bubble .kpi ul { - margin: 0; - } - - #bubble-arrow { - border: 1px solid #ccc; - border-width: 1px 0 0 1px; - background: #fcfcfc; - width: 15px; - height: 15px; - position: absolute; - left: 0; - top: -8px; - transform: rotate(45deg); - margin: 0 0 0 -8px; - } - - tr.active > td { - border-bottom: 2px solid red; - } - - tr.active > td.active { - border: 2px solid red; - border-bottom: none; - } - - td.detail { - border: 2px solid red; - border-top: none; - opacity: 0; - transition: opacity 0.5s; - } - - td.detail.in { - opacity: 1; - } - - th.hostname, - td.hostname { - text-align: left; - } - -]] -%> - <%+header%> -<script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js"></script> -<script type="text/javascript">//<![CDATA[ - -var chartRegistry = {}, - trafficPeriods = [], - trafficData = { columns: [], data: [] }, - hostNames = {}, - hostInfo = <%=luci.util.serialize_json(luci.sys.net.host_hints())%>, - ouiData = []; - - -function off(elem) -{ - var val = [0, 0]; - do { - if (!isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) { - val[0] += elem.offsetLeft; - val[1] += elem.offsetTop; - } - } - while ((elem = elem.offsetParent) != null); - return val; -} - -Chart.defaults.global.customTooltips = function(tooltip) { - var tooltipEl = document.getElementById('chartjs-tooltip'); - - if (!tooltipEl) { - tooltipEl = document.createElement('div'); - tooltipEl.setAttribute('id', 'chartjs-tooltip'); - document.body.appendChild(tooltipEl); - } - - if (!tooltip) { - if (tooltipEl.row) - tooltipEl.row.style.backgroundColor = ''; - - tooltipEl.style.opacity = 0; - return; - } - - var pos = off(tooltip.chart.canvas); - - tooltipEl.className = tooltip.yAlign; - tooltipEl.innerHTML = tooltip.text[0]; - - tooltipEl.style.opacity = 1; - tooltipEl.style.left = pos[0] + tooltip.x + 'px'; - tooltipEl.style.top = pos[1] + tooltip.y - tooltip.caretHeight - tooltip.caretPadding + 'px'; - - var row = tooltip.text[1], - hue = tooltip.text[2]; - - if (row && !isNaN(hue)) { - row.style.backgroundColor = 'hsl(%u, 100%%, 80%%)'.format(hue); - tooltipEl.row = row; - } -}; - -Chart.defaults.global.tooltipFontSize = 10; -Chart.defaults.global.tooltipTemplate = function(tip) { - tip.label[0] = tip.label[0].format(tip.value); - return tip.label; -}; - -function kpi(id, val1, val2, val3) -{ - var e = document.getElementById(id); - - if (val1 && val2 && val3) - e.innerHTML = '<%:%s, %s and %s%>'.format(val1, val2, val3); - else if (val1 && val2) - e.innerHTML = '<%:%s and %s%>'.format(val1, val2); - else if (val1) - e.innerHTML = val1; - - e.parentNode.style.display = val1 ? 'list-item' : ''; -} - -function pie(id, data) -{ - data.sort(function(a, b) { return b.value - a.value }); - - if (data.length === 0 || (data.length === 1 && data[0].value === 0)) - data[0] = { - value: 1, - color: '#cccccc', - label: [ '<%:no traffic%>' ] - }; - - for (var i = 0; i < data.length; i++) { - if (!data[i].color) { - var hue = 120 / (data.length-1) * i; - data[i].color = 'hsl(%u, 80%%, 50%%)'.format(hue); - data[i].label.push(hue); - } - } - - var ctx = document.getElementById(id).getContext('2d'); - - if (chartRegistry.hasOwnProperty(id)) - chartRegistry[id].destroy(); - - chartRegistry[id] = new Chart(ctx).Doughnut(data, { - segmentStrokeWidth: 1, - percentageInnerCutout: 30 - }); - - return chartRegistry[id]; -} - -function query(filter, group, order) -{ - var keys = [], columns = {}, records = {}, result = []; - - if (typeof(group) !== 'function' && typeof(group) !== 'object') - group = ['mac']; - - for (var i = 0; i < trafficData.columns.length; i++) - columns[trafficData.columns[i]] = i; - - for (var i = 0; i < trafficData.data.length; i++) { - var record = trafficData.data[i]; - - if (typeof(filter) === 'function' && filter(columns, record) !== true) - continue; - - var key; - - if (typeof(group) === 'function') { - key = group(columns, record); - } - else { - key = []; - - for (var j = 0; j < group.length; j++) - if (columns.hasOwnProperty(group[j])) - key.push(record[columns[group[j]]]); - - key = key.join(','); - } - - if (!records.hasOwnProperty(key)) { - var rec = {}; - - for (var col in columns) - rec[col] = record[columns[col]]; - - records[key] = rec; - result.push(rec); - } - else { - records[key].conns += record[columns.conns]; - records[key].rx_bytes += record[columns.rx_bytes]; - records[key].rx_pkts += record[columns.rx_pkts]; - records[key].tx_bytes += record[columns.tx_bytes]; - records[key].tx_pkts += record[columns.tx_pkts]; - } - } - - if (typeof(order) === 'function') - result.sort(order); - - return result; -} - -function oui(mac) { - var m, l = 0, r = ouiData.length / 3 - 1; - var mac1 = parseInt(mac.replace(/[^a-fA-F0-9]/g, ''), 16); - - while (l <= r) { - m = l + Math.floor((r - l) / 2); - - var mask = (0xffffffffffff - - (Math.pow(2, 48 - ouiData[m * 3 + 1]) - 1)); - - var mac1_hi = ((mac1 / 0x10000) & (mask / 0x10000)) >>> 0; - var mac1_lo = ((mac1 & 0xffff) & (mask & 0xffff)) >>> 0; - - var mac2 = parseInt(ouiData[m * 3], 16); - var mac2_hi = (mac2 / 0x10000) >>> 0; - var mac2_lo = (mac2 & 0xffff) >>> 0; - - if (mac1_hi === mac2_hi && mac1_lo === mac2_lo) - return ouiData[m * 3 + 2]; - - if (mac2_hi > mac1_hi || - (mac2_hi === mac1_hi && mac2_lo > mac1_lo)) - r = m - 1; - else - l = m + 1; - } - - return null; -} - - -function fetchData(period) -{ - XHR.get('<%=url("admin/nlbw/data")%>', { period: period, group_by: 'family,mac,ip,layer7', order_by: '-rx_bytes,-tx_bytes' }, function(xhr, res) { - if (res !== null && typeof(res) === 'object' && typeof(res.columns) === 'object' && typeof(res.data) === 'object') - trafficData = res; - - var addrs = query(null, ['ip'], null); - var ipAddrs = []; - - for (var i = 0; i < addrs.length; i++) - if (ipAddrs.indexOf(addrs[i].ip) < 0) - ipAddrs.push(addrs[i].ip); - - renderHostData(); - renderLayer7Data(); - renderIPv6Data(); - - XHR.get('<%=url("admin/nlbw/ptr")%>/' + ipAddrs.join('/'), null, function(xhr, res) { - if (res !== null && typeof(res) === 'object') - hostNames = res; - }); - }); -} - -function switchTab(tab) -{ - bubbleDismiss(); - - return cbi_t_switch('nlbw', tab); -} - -function renderPeriods() -{ - var sel = document.getElementById('nlbw.period'); - - for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) { - var d1 = new Date(e); - var d2, pd; - - if (i) { - d2 = new Date(trafficPeriods[i - 1]); - d2.setDate(d2.getDate() - 1); - pd = '%04d-%02d-%02d'.format(d1.getFullYear(), d1.getMonth() + 1, d1.getDate()); - } - else { - d2 = new Date(); - pd = ''; - } - - var opt = document.createElement('option'); - opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) / 1000); - opt.value = pd; - opt.text = '%04d-%02d-%02d - %04d-%02d-%02d'.format( - d1.getFullYear(), d1.getMonth() + 1, d1.getDate(), - d2.getFullYear(), d2.getMonth() + 1, d2.getDate()); - - sel.appendChild(opt); - } - - sel.selectedIndex = sel.childNodes.length - 1; - sel.style.display = ''; - - sel.onchange = function() { - bubbleDismiss(); - fetchData(sel.options[sel.selectedIndex].value); - } -} - -function renderHostDetail() -{ - var key = this.getAttribute('href').substr(1), - col = this.getAttribute('data-col'), - label = this.getAttribute('data-label'), - bubble = document.getElementById('detail-bubble'), - arrow = document.getElementById('bubble-arrow'), - table = document.getElementById('bubble-table'); - - bubbleDismiss(); - - var detailData = query( - function(c, r) { - return ((r[c.mac] === key || r[c.ip] === key) && - (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0)); - }, - [col], - function(r1, r2) { - return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes)); - } - ); - - var rxData = [], txData = []; - - table.innerHTML = '<tr>' + - '<th>%s</th>'.format(label || col) + - '<th><%:Conn.%></th>' + - '<th colspan="2"><%:Down. (Bytes / Pkts.)%></th>' + - '<th colspan="2"><%:Up. (Bytes / Pkts.)%></th>' + - '</tr>'; - - for (var i = 0; i < detailData.length; i++) { - var rec = detailData[i], - row = table.insertRow(-1); - - row.insertCell(-1).innerHTML = rec[col] || '<%:other%>'; - row.insertCell(-1).innerHTML = "%1000.2m".format(rec.conns); - row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes); - row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts); - row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes); - row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts); - - rxData.push({ - label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row], - value: rec.rx_bytes - }); - - txData.push({ - label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row], - value: rec.tx_bytes - }); - } - - pie('bubble-pie1', rxData); - pie('bubble-pie2', txData); - - var mac = key.toUpperCase(); - var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null; - - if (!name) - for (var i = 0; i < detailData.length; i++) - if ((name = hostNames[detailData[i].ip]) !== undefined) - break; +<link rel="stylesheet" href="<%=resource%>/view/nlbw.css" /> - if (mac !== '00:00:00:00:00:00') { - kpi('bubble-hostname', name); - kpi('bubble-vendor', oui(mac)); - } - else { - kpi('bubble-hostname'); - kpi('bubble-vendor'); - } - - var tr = this.parentNode.parentNode, - xy = off(tr), - xy2 = off(this); - - bubble.style.width = tr.offsetWidth + 'px'; - bubble.style.left = xy[0] + 'px'; - bubble.style.top = (xy[1] + tr.offsetHeight) + 'px'; - arrow.style.left = Math.floor(xy2[0] + this.offsetWidth / 2 - xy[0]) + 'px'; - - bubble.className = 'in'; - - return false; -} - -function formatHostname(dns) -{ - if (dns === undefined || dns === null || dns === '') - return '-'; - - dns = dns.split('.')[0]; - - if (dns.length > 12) - return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12)); - - return '%h'.format(dns); -} - -function renderHostData() -{ - var trafData = [], connData = []; - var rx_total = 0, tx_total = 0, conn_total = 0; - var table = document.getElementById('host-data'); - - var hostData = query( - function(c, r) { - return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0); - }, - ['mac'], - //function(c, r) { - // return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip]; - //}, - function(r1, r2) { - return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes)); - } - ); - - while (table.rows.length > 1) - table.deleteRow(1); - - for (var i = 0; i < hostData.length; i++) { - var row = table.insertRow(-1), - cell = row.insertCell(-1), - rec = hostData[i], - mac = rec.mac.toUpperCase(), - key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip, - dns = hostInfo[mac] ? hostInfo[mac].name : null; - - var link1 = document.createElement('a'); - link1.onclick = renderHostDetail; - link1.href = '#' + rec.mac; - link1.setAttribute('data-col', 'ip'); - link1.setAttribute('data-label', '<%:Source IP%>'); - link1.innerHTML = (mac !== '00:00:00:00:00:00') ? mac : '<%:other%>'; - - var link2 = document.createElement('a'); - link2.onclick = renderHostDetail; - link2.href = '#' + rec.mac; - link2.setAttribute('data-col', 'layer7'); - link2.setAttribute('data-label', '<%:Protocol%>'); - link2.innerHTML = "%1000.2m".format(rec.conns); - - cell.innerHTML = formatHostname(dns); - cell.className = 'hostname'; - - row.insertCell(-1).appendChild(link1); - row.insertCell(-1).appendChild(link2); - row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes); - row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts); - row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes); - row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts); - - trafData.push({ - value: rec.rx_bytes + rec.tx_bytes, - label: ["%s: %%.2mB".format(key), row] - }); - - connData.push({ - value: rec.conns, - label: ["%s: %%.2m".format(key), row] - }); - - rx_total += rec.rx_bytes; - tx_total += rec.tx_bytes; - conn_total += rec.conns; - } - - if (table.rows.length === 1) { - var cell = table.insertRow(-1).insertCell(-1); - - cell.setAttribute('colspan', 6); - cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>'; - } - - pie('traf-pie', trafData); - pie('conn-pie', connData); - - kpi('rx-total', '%1024.2mB'.format(rx_total)); - kpi('tx-total', '%1024.2mB'.format(tx_total)); - kpi('conn-total', '%1000m'.format(conn_total)); - kpi('host-total', '%u'.format(hostData.length)); -} - -function renderLayer7Data() -{ - var rxData = [], txData = []; - var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]]; - var table = document.getElementById('layer7-data'); - - var layer7Data = query( - null, ['layer7'], - function(r1, r2) { - return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes)); - } - ); - - while (table.rows.length > 1) - table.deleteRow(1); - - for (var i = 0, c = 0; i < layer7Data.length; i++) { - var rec = layer7Data[i], - row = table.insertRow(-1); - - rxData.push({ - value: rec.rx_bytes, - label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row] - }); - - txData.push({ - value: rec.tx_bytes, - label: ["%s: %%.2mB".format(rec.layer7 || '<%:other%>'), row] - }); - - row.insertCell(-1).innerHTML = rec.layer7 || '<%:other%>'; - row.insertCell(-1).innerHTML = "%1000m".format(rec.conns); - row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.rx_bytes); - row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.rx_pkts); - row.insertCell(-1).innerHTML = "%1024.2mB".format(rec.tx_bytes); - row.insertCell(-1).innerHTML = "%1000.2mP".format(rec.tx_pkts); - - if (rec.layer7) { - topRx.push([rec.rx_bytes, rec.layer7]); - topTx.push([rec.tx_bytes, rec.layer7]); - topConn.push([rec.conns, rec.layer7]); - } - } - - if (table.rows.length === 1) { - var cell = table.insertRow(-1).insertCell(-1); - - cell.setAttribute('colspan', 6); - cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>'; - } - - pie('layer7-rx-pie', rxData); - pie('layer7-tx-pie', txData); - - topRx.sort(function(a, b) { return b[0] - a[0] }); - topTx.sort(function(a, b) { return b[0] - a[0] }); - topConn.sort(function(a, b) { return b[0] - a[0] }); - - kpi('layer7-total', layer7Data.length); - kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]); - kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]); - kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]); -} - -function renderIPv6Data() -{ - var table = document.getElementById('ipv6-data'), - col = { }, - rx4_total = 0, - tx4_total = 0, - rx6_total = 0, - tx6_total = 0, - v4_total = 0, - v6_total = 0, - ds_total = 0, - families = { }, - records = { }; - - ipv6Data = query( - null, ['family', 'mac'], - function(r1, r2) { - return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes)); - } - ); - - for (var i = 0, c = 0; i < ipv6Data.length; i++) { - var rec = ipv6Data[i], - mac = rec.mac.toUpperCase(), - ip = rec.ip, - fam = families[mac] || 0, - recs = records[mac] || {}; - - if (rec.family == 4) { - rx4_total += rec.rx_bytes; - tx4_total += rec.tx_bytes; - fam |= 1; - } - else { - rx6_total += rec.rx_bytes; - tx6_total += rec.tx_bytes; - fam |= 2; - } - - recs[rec.family] = rec; - records[mac] = recs; - - families[mac] = fam; - } - - for (var mac in families) { - switch (families[mac]) - { - case 3: - ds_total++; - break; - - case 2: - v6_total++; - break; - - case 1: - v4_total++; - break; - } - } - - while (table.rows.length > 1) - table.deleteRow(1); - - for (var mac in records) { - if (mac === '00:00:00:00:00:00') - continue; - - var row = table.insertRow(-1), - cell1 = row.insertCell(-1), - cell2 = row.insertCell(-1), - dns = hostInfo[mac] ? hostInfo[mac].name : null, - rec4 = records[mac][4], - rec6 = records[mac][6]; - - cell1.setAttribute('rowspan', 2); - cell1.innerHTML = formatHostname(dns); - cell1.className = 'hostname'; - - cell2.setAttribute('rowspan', 2); - cell2.innerHTML = mac; - - row.insertCell(-1).innerHTML = 'IPv4'; - row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.rx_bytes) : '-'; - row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.rx_pkts) : '-'; - row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.tx_bytes) : '-'; - row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.tx_pkts) : '-'; - - row = table.insertRow(-1); - - row.insertCell(-1).innerHTML = 'IPv6'; - row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.rx_bytes) : '-'; - row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.rx_pkts) : '-'; - row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.tx_bytes) : '-'; - row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.tx_pkts) : '-'; - } - - if (table.rows.length === 1) { - var cell = table.insertRow(-1).insertCell(-1); - - cell.setAttribute('colspan', 7); - cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>'; - } - - var shareData = [], hostsData = []; - - if (rx4_total > 0 || tx4_total > 0) - shareData.push({ - value: rx4_total + tx4_total, - label: ["IPv4: %.2mB"], - color: 'hsl(140, 100%, 50%)' - }); - - if (rx6_total > 0 || tx6_total > 0) - shareData.push({ - value: rx6_total + tx6_total, - label: ["IPv6: %.2mB"], - color: 'hsl(180, 100%, 50%)' - }); - - if (v4_total > 0) - hostsData.push({ - value: v4_total, - label: ["<%:%d IPv4-only hosts%>"], - color: 'hsl(140, 100%, 50%)' - }); - - if (v6_total > 0) - hostsData.push({ - value: v6_total, - label: ["<%:%d IPv6-only hosts%>"], - color: 'hsl(180, 100%, 50%)' - }); - - if (ds_total > 0) - hostsData.push({ - value: ds_total, - label: ["<%:%d dual-stack hosts%>"], - color: 'hsl(50, 100%, 50%)' - }); - - pie('ipv6-share-pie', shareData); - pie('ipv6-hosts-pie', hostsData); - - kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total))); - kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total))); - kpi('ipv6-rx', '%1024.2mB'.format(rx6_total)); - kpi('ipv6-tx', '%1024.2mB'.format(tx6_total)); -} - -function bubbleDismiss() -{ - var bubble = document.getElementById('detail-bubble'); - - bubble.className = ''; - document.body.appendChild(bubble); - - return false; -} +<script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js"></script> +<script type="text/javascript" src="<%=resource%>/view/nlbw.js"></script> +<h2 name="content"><%:Netlink Bandwidth Monitor%></h2> -//]]></script> +<p> + <%:Select accounting period:%> + <select id="nlbw.period" style="display:none"></select> +</p> -<h2 name="content"><%:Netlink Bandwidth Monitor%></h2> +<hr /> -<div id="detail-bubble"> - <span id="bubble-arrow"></span> - <div> +<div> + <div class="cbi-section" data-tab="traffic" data-tab-title="<%:Traffic Distribution%>"> <div class="head"> - <a class="dismiss" href="#" onclick="this.blur(); return bubbleDismiss()">×</a> <div class="pie"> - <label>Download</label> - <canvas id="bubble-pie1" width="100" height="100"></canvas> + <label><%:Traffic / Host%></label> + <canvas id="traf-pie" width="200" height="200"></canvas> </div> + <div class="pie"> - <label>Upload</label> - <canvas id="bubble-pie2" width="100" height="100"></canvas> + <label><%:Connections / Host%></label> + <canvas id="conn-pie" width="200" height="200"></canvas> </div> + <div class="kpi"> <ul> - <li><%_Hostname: <big id="bubble-hostname">example.org</big>%></li> - <li><%_Vendor: <big id="bubble-vendor">Example Corp.</big>%></li> + <li><%_<big id="host-total">0</big> hosts%></li> + <li><%_<big id="rx-total">0</big> download%></li> + <li><%_<big id="tx-total">0</big> upload%></li> + <li><%_<big id="conn-total">0</big> connections%></li> </ul> </div> </div> - <table id="bubble-table"></table> + <div class="table" id="host-data"> + <div class="tr table-titles"> + <div class="th left hostname"><%:Host%></div> + <div class="th right"><%:MAC%></div> + <div class="th right"><%:Connections%></div> + <div class="th right"><%:Download (Bytes)%></div> + <div class="th right"><%:Download (Packets)%></div> + <div class="th right"><%:Upload (Bytes)%></div> + <div class="th right"><%:Upload (Packets)%></div> + </div> + <div class="tr placeholder"> + <div class="td"> + <em class="spinning"><%:Collecting data...%></em> + </div> + </div> + </div> </div> -</div> -<hr /> - -<p> - <%:Select accounting period:%> - <select id="nlbw.period" style="display:none"></select> -</p> - -<hr /> - -<ul class="cbi-tabmenu"> - <li id="tab.nlbw.traffic" class="cbi-tab"><a href="#" onclick="return switchTab('traffic')"><%:Traffic Distribution%></a></li> - <li id="tab.nlbw.layer7" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('layer7')"><%:Application Protocols%></a></li> - <li id="tab.nlbw.ipv6" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('ipv6')"><%:IPv6%></a></li> - <li id="tab.nlbw.export" class="cbi-tab-disabled"><a href="#" onclick="return switchTab('export')"><%:Export%></a></li> -</ul> + <div class="cbi-section" data-tab="layer7" data-tab-title="<%:Application Protocols%>"> + <div class="head"> + <div class="pie"> + <label><%:Download / Application%></label> + <canvas id="layer7-rx-pie" width="200" height="200"></canvas> + </div> -<div class="cbi-section" id="container.nlbw.traffic"> - <div> - <div class="pie"> - <label><%:Traffic / Host%></label> - <canvas id="traf-pie" width="200" height="200"></canvas> - </div> + <div class="pie"> + <label><%:Upload / Application%></label> + <canvas id="layer7-tx-pie" width="200" height="200"></canvas> + </div> - <div class="pie"> - <label><%:Connections / Host%></label> - <canvas id="conn-pie" width="200" height="200"></canvas> + <div class="kpi"> + <ul> + <li><%_<big id="layer7-total">0</big> different application protocols%></li> + <li><%_<big id="layer7-most-rx">0</big> cause the most download%></li> + <li><%_<big id="layer7-most-tx">0</big> cause the most upload%></li> + <li><%_<big id="layer7-most-conn">0</big> cause the most connections%></li> + </ul> + </div> </div> - - <div class="kpi"> - <ul> - <li><%_<big id="host-total">0</big> hosts%></li> - <li><%_<big id="rx-total">0</big> download%></li> - <li><%_<big id="tx-total">0</big> upload%></li> - <li><%_<big id="conn-total">0</big> connections%></li> - </ul> + <div class="table" id="layer7-data"> + <div class="tr table-titles"> + <div class="th left"><%:Application%></div> + <div class="th right"><%:Connections%></div> + <div class="th right"><%:Download (Bytes)%></div> + <div class="th right"><%:Download (Packets)%></div> + <div class="th right"><%:Upload (Bytes)%></div> + <div class="th right"><%:Upload (Packets)%></div> + </div> + <div class="tr placeholder"> + <div class="td"> + <em class="spinning"><%:Collecting data...%></em> + </div> + </div> </div> </div> - <table id="host-data"> - <tr> - <th width="10%" class="hostname"><%:Host%></th> - <th width="5%"><%:MAC%></th> - <th width="5%"><%:Connections%></th> - <th width="30%" colspan="2"><%:Download (Bytes / Packets)%></th> - <th width="30%" colspan="2"><%:Upload (Bytes / Packets)%></th> - </tr> - </table> -</div> - -<div class="cbi-section" id="container.nlbw.layer7" style="display:none"> - <div> - <div class="pie"> - <label><%:Download / Application%></label> - <canvas id="layer7-rx-pie" width="200" height="200"></canvas> - </div> - - <div class="pie"> - <label><%:Upload / Application%></label> - <canvas id="layer7-tx-pie" width="200" height="200"></canvas> - </div> - <div class="kpi"> - <ul> - <li><%_<big id="layer7-total">0</big> different application protocols%></li> - <li><%_<big id="layer7-most-rx">0</big> cause the most download%></li> - <li><%_<big id="layer7-most-tx">0</big> cause the most upload%></li> - <li><%_<big id="layer7-most-conn">0</big> cause the most connections%></li> - </ul> - </div> - </div> - <table id="layer7-data"> - <tr> - <th width="20%"><%:Application%></th> - <th width="10%"><%:Connections%></th> - <th width="30%" colspan="2"><%:Download (Bytes / Packets)%></th> - <th width="30%" colspan="2"><%:Upload (Bytes / Packets)%></th> - </tr> - </table> -</div> + <div class="cbi-section" data-tab="ipv6" data-tab-title="<%:IPv6%>"> + <div class="head"> + <div class="pie"> + <label><%:IPv4 vs. IPv6%></label> + <canvas id="ipv6-share-pie" width="200" height="200"></canvas> + </div> -<div class="cbi-section" id="container.nlbw.ipv6" style="display:none"> - <div> - <div class="pie"> - <label><%:IPv4 vs. IPv6%></label> - <canvas id="ipv6-share-pie" width="200" height="200"></canvas> - </div> + <div class="pie"> + <label><%:Dualstack enabled hosts%></label> + <canvas id="ipv6-hosts-pie" width="200" height="200"></canvas> + </div> - <div class="pie"> - <label><%:Dualstack enabled hosts%></label> - <canvas id="ipv6-hosts-pie" width="200" height="200"></canvas> + <div class="kpi"> + <ul> + <li><%_<big id="ipv6-hosts">0%</big> IPv6 support rate among hosts%></li> + <li><%_<big id="ipv6-share">0%</big> of the total traffic is IPv6%></li> + <li><%_<big id="ipv6-rx">0B</big> total IPv6 download%></li> + <li><%_<big id="ipv6-tx">0B</big> total IPv6 upload%></li> + </ul> + </div> </div> - - <div class="kpi"> - <ul> - <li><%_<big id="ipv6-hosts">0%</big> IPv6 support rate among hosts%></li> - <li><%_<big id="ipv6-share">0%</big> of the total traffic is IPv6%></li> - <li><%_<big id="ipv6-rx">0B</big> total IPv6 download%></li> - <li><%_<big id="ipv6-tx">0B</big> total IPv6 upload%></li> - </ul> + <div class="table" id="ipv6-data"> + <div class="tr table-titles"> + <div class="th left"><%:Host%></div> + <div class="th right"><%:MAC%></div> + <div class="th double right hide-xs"><%:Family%></div> + <div class="th double right"><%:Download (Bytes)%></div> + <div class="th double right"><%:Download (Packets)%></div> + <div class="th double right"><%:Upload (Bytes)%></div> + <div class="th double right"><%:Upload (Packets)%></div> + </div> + <div class="tr placeholder"> + <div class="td"> + <em class="spinning"><%:Collecting data...%></em> + </div> + </div> </div> </div> - <table id="ipv6-data"> - <tr> - <th width="10%" class="hostname"><%:Host%></th> - <th width="5%"><%:MAC%></th> - <th width="5%"><%:Family%></th> - <th width="40%" colspan="2"><%:Download (Bytes / Packets)%></th> - <th width="40%" colspan="2"><%:Upload (Bytes / Packets)%></th> - </tr> - </table> -</div> -<div class="cbi-section" id="container.nlbw.export" style="display:none"> - <ul> - <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=mac&order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li> - <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=ip&order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li> - <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=layer7&order_by=-rx,-tx"><%:CSV, grouped by protocol%></a></li> - <li><a href="<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%></a></li> - </ul> + <div class="cbi-section" data-tab="export" data-tab-title="<%:Export%>"> + <ul> + <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=mac&order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li> + <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=ip&order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li> + <li><a href="<%=url('admin/nlbw/data')%>?type=csv&group_by=layer7&order_by=-rx,-tx"><%:CSV, grouped by protocol%></a></li> + <li><a href="<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%></a></li> + </ul> + </div> </div> <script type="text/javascript">//<![CDATA[ - cbi_t_add('nlbw', 'traffic'); - cbi_t_add('nlbw', 'layer7'); - cbi_t_add('nlbw', 'ipv6'); - cbi_t_add('nlbw', 'export'); + var hostInfo = <%=luci.util.serialize_json(luci.sys.net.host_hints())%>; - XHR.get('<%=url("admin/nlbw/list")%>', null, function(xhr, res) { + XHR.get(L.url('admin/nlbw/list'), null, function(xhr, res) { if (res !== null && typeof(res) === 'object' && res.length > 0) { trafficPeriods = res; @@ -1046,6 +170,20 @@ function bubbleDismiss() }; xhr.send(null); }); + + document.addEventListener('tooltip-open', function(ev) { + renderHostDetail.call(ev.detail.target, ev.target); + }); + + if ('ontouchstart' in window) { + document.addEventListener('touchstart', function(ev) { + var tooltip = document.querySelector('.cbi-tooltip'); + if (tooltip === ev.target || tooltip.contains(ev.target)) + return; + + L.hideTooltip(ev); + }); + } //]]></script> <%+footer%> diff --git a/applications/luci-app-olsr-services/luasrc/view/freifunk-services/services.htm b/applications/luci-app-olsr-services/luasrc/view/freifunk-services/services.htm index 91624f3b30..0aac36de87 100644 --- a/applications/luci-app-olsr-services/luasrc/view/freifunk-services/services.htm +++ b/applications/luci-app-olsr-services/luasrc/view/freifunk-services/services.htm @@ -126,15 +126,20 @@ end var tbody = document.getElementById('olsr_services'); if (tbody) { - var s = ''; + var s = '<div class="tr cbi-section-table-titles">' + + '<div class="th cbi-section-table-cell"><%:Url%></div>' + + '<div class="th cbi-section-table-cell"><%:Protocol%></div>' + + '<div class="th cbi-section-table-cell"><%:Source%></div>' + + '</div>'; + for (var idx = 0; idx < info.length; idx++) { var service = info[idx]; s += String.format( '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+'">' + - '<div class="td cbi-section-table-titles"><a href="%s">%s</a></div>' + - '<div class="td cbi-section-table-titles">%s</div>' + - '<div class="td cbi-section-table-titles"><a href="http://%s/cgi-bin-status.html">%s</a></div>' + + '<div class="td cbi-section-table-cell left"><a href="%s">%s</a></div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left"><a href="http://%s/cgi-bin-status.html">%s</a></div>' + '</div>', service.url, service.descr, service.proto, service.origin_link, service.origin || '?' ); @@ -152,16 +157,13 @@ end <fieldset class="cbi-section"> <legend><%:Internal services%></legend> - <div class="table cbi-section-table"> - <div class="thead"> + <div class="table cbi-section-table" id="olsr_services"> <div class="tr cbi-section-table-titles"> <div class="th cbi-section-table-cell"><%:Url%></div> <div class="th cbi-section-table-cell"><%:Protocol%></div> <div class="th cbi-section-table-cell"><%:Source%></div> </div> - </div> - <div class="tbody" id="olsr_services"> <% for k, line in ipairs(services) do local field = {} @@ -178,13 +180,12 @@ end %> <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%>"> - <div class="td cbi-section-table-titles"><a href="<%=url%>"><%=descr%></a></div> - <div class="td cbi-section-table-titles"><%=proto%></div> - <div class="td cbi-section-table-titles"><a href="http://<%=origin_link%>/cgi-bin-status.html"><%=origin%></a></div> + <div class="td cbi-section-table-cell left"><a href="<%=url%>"><%=descr%></a></div> + <div class="td cbi-section-table-cell left"><%=proto%></div> + <div class="td cbi-section-table-cell left"><a href="http://<%=origin_link%>/cgi-bin-status.html"><%=origin%></a></div> </div> <% i = ((i % 2) + 1) end %> - </div> </div> <br /> <%=last_update%> diff --git a/applications/luci-app-olsr/luasrc/controller/olsr.lua b/applications/luci-app-olsr/luasrc/controller/olsr.lua index dc424c0114..11e27d7c00 100644 --- a/applications/luci-app-olsr/luasrc/controller/olsr.lua +++ b/applications/luci-app-olsr/luasrc/controller/olsr.lua @@ -331,6 +331,8 @@ end function action_interfaces() local data, has_v4, has_v6, error = fetch_jsoninfo('interfaces') + local ntm = require "luci.model.network".init() + if error then return end @@ -339,6 +341,13 @@ function action_interfaces() return a.proto < b.proto end + for k, v in ipairs(data) do + local interface = ntm:get_status_by_address(v.olsrInterface.ipAddress) + if interface then + v.interface = interface + end + end + table.sort(data, compare) luci.template.render("status-olsr/interfaces", {iface=data, has_v4=has_v4, has_v6=has_v6}) end diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm index f04d926918..34cf563363 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/hna.htm @@ -35,7 +35,12 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, var hnadiv = document.getElementById('olsrd_hna'); if (hnadiv) { - var s = ''; + var s = '<div class="tr cbi-section-table-titles">' + + '<div class="th cbi-section-table-cell"><%:Announced network%></div>' + + '<div class="th cbi-section-table-cell"><%:OLSR gateway%></div>' + + '<div class="th cbi-section-table-cell"><%:Validity Time%></div>' + + '</div>'; + for (var idx = 0; idx < info.length; idx++) { var hna = info[idx]; @@ -62,9 +67,9 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, } s += String.format( - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>', hna.destination + '/' + hna.genmask, linkgw + hostname, validity + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>', hna.destination + '/' + hna.genmask, linkgw + hostname, validity ) s += '</div>' } @@ -80,21 +85,18 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, <fieldset class="cbi-section"> <legend><%:Overview of currently active OLSR host net announcements%></legend> - <div class="table cbi-section-table"> - <div class="thead"> + <div class="table cbi-section-table" id="olsrd_hna"> <div class="tr cbi-section-table-titles"> <div class="th cbi-section-table-cell"><%:Announced network%></div> <div class="th cbi-section-table-cell"><%:OLSR gateway%></div> <div class="th cbi-section-table-cell"><%:Validity Time%></div> </div> - </div> - <div class="tbody" id="olsrd_hna"> <% for k, route in ipairs(hna) do %> <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=hna[k].proto%>"> - <div class="td cbi-section-table-cell"><%=hna[k].destination%>/<%=hna[k].genmask%> </div> - <div class="td cbi-section-table-cell"> + <div class="td cbi-section-table-cell left"><%=hna[k].destination%>/<%=hna[k].genmask%> </div> + <div class="td cbi-section-table-cell left"> <% if hna[k].proto == '6' then %> <a href="http://[<%=hna[k].gateway%>]/cgi-bin-status.html"><%=hna[k].gateway%></a> <% else %> @@ -110,12 +112,11 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, validity = '-' end %> - <div class="td cbi-section-table-cell"><%=validity%></div> + <div class="td cbi-section-table-cell left"><%=validity%></div> </div> <% i = ((i % 2) + 1) end %> - </div> </div> </fieldset> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm index 7506f07029..12f7cba967 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/interfaces.htm @@ -21,6 +21,7 @@ local i = 1 <div class="table cbi-section-table"> <div class="tr"> <div class="th cbi-section-table-cell"><%:Interface%></div> + <div class="th cbi-section-table-cell"><%:Device%></div> <div class="th cbi-section-table-cell"><%:State%></div> <div class="th cbi-section-table-cell"><%:MTU%></div> <div class="th cbi-section-table-cell"><%:WLAN%></div> @@ -32,13 +33,14 @@ local i = 1 <% for k, iface in ipairs(iface) do %> <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=iface.proto%>"> - <div class="td cbi-section-table-cell"><%=iface.name%></div> - <div class="td cbi-section-table-cell"><%=iface.olsrInterface.up and luci.i18n.translate('up') or luci.i18n.translate('down')%></div> - <div class="td cbi-section-table-cell"><%=iface.olsrInterface.mtu%></div> - <div class="td cbi-section-table-cell"><%=iface.olsrInterface.wireless and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> - <div class="td cbi-section-table-cell"><%=iface.olsrInterface.ipAddress%></div> - <div class="td cbi-section-table-cell"><%=iface.olsrInterface.ipv4Address ~= '0.0.0.0' and iface.olsrInterface.ipv4Netmask%></div> - <div class="td cbi-section-table-cell"><%=iface.olsrInterface.ipv4Address ~= '0.0.0.0' and iface.olsrInterface.ipv4Broadcast or iface.olsrInterface.ipv6Multicast%></div> + <div class="td cbi-section-table-cell left"><%=iface.interface%></div> + <div class="td cbi-section-table-cell left"><%=iface.name%></div> + <div class="td cbi-section-table-cell left"><%=iface.olsrInterface.up and luci.i18n.translate('up') or luci.i18n.translate('down')%></div> + <div class="td cbi-section-table-cell left"><%=iface.olsrInterface.mtu%></div> + <div class="td cbi-section-table-cell left"><%=iface.olsrInterface.wireless and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> + <div class="td cbi-section-table-cell left"><%=iface.olsrInterface.ipAddress%></div> + <div class="td cbi-section-table-cell left"><%=iface.olsrInterface.ipv4Address ~= '0.0.0.0' and iface.olsrInterface.ipv4Netmask%></div> + <div class="td cbi-section-table-cell left"><%=iface.olsrInterface.ipv4Address ~= '0.0.0.0' and iface.olsrInterface.ipv4Broadcast or iface.olsrInterface.ipv6Multicast%></div> </div> <% i = ((i % 2) + 1) end %> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm index 9babd50a80..469d89111a 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/mid.htm @@ -38,8 +38,8 @@ local i = 1 %> <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=mid.proto%>"> - <div class="td cbi-section-table-cell"><a href="http://<%=host%>/cgi-bin-status.html"><%=mid.main.ipAddress%></a></div> - <div class="td cbi-section-table-cell"><%=aliases%></div> + <div class="td cbi-section-table-cell left"><a href="http://<%=host%>/cgi-bin-status.html"><%=mid.main.ipAddress%></a></div> + <div class="td cbi-section-table-cell left"><%=aliases%></div> </div> <% i = ((i % 2) + 1) diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm index 29ea95694c..8cdda14916 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/neighbors.htm @@ -56,7 +56,17 @@ end var nt = document.getElementById('olsr_neigh_table'); if (nt) { - var s = ''; + var s = '<div class="tr cbi-section-table-cell">' + + '<div class="th cbi-section-table-cell"><%:Neighbour IP%></div>' + + '<div class="th cbi-section-table-cell"><%:Hostname%></div>' + + '<div class="th cbi-section-table-cell"><%:Interface%></div>' + + '<div class="th cbi-section-table-cell"><%:Local interface IP%></div>' + + '<div class="th cbi-section-table-cell">LQ</div>' + + '<div class="th cbi-section-table-cell">NLQ</div>' + + '<div class="th cbi-section-table-cell">ETX</div>' + + '<div class="th cbi-section-table-cell">SNR</div>' + + '</div>'; + for (var idx = 0; idx < info.length; idx++) { var neigh = info[idx]; @@ -64,34 +74,34 @@ end if (neigh.proto == '6') { s += String.format( '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + - '<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://[%s]/cgi-bin-status.html">%s</a></div>', + '<div class="td cbi-section-table-cell left" style="background-color:%s"><a href="http://[%s]/cgi-bin-status.html">%s</a></div>', neigh.proto, neigh.dfgcolor, neigh.rip, neigh.rip ); } else { s += String.format( '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + - '<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></div>', + '<div class="td cbi-section-table-cell left" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></div>', neigh.proto, neigh.dfgcolor, neigh.rip, neigh.rip ); } if (neigh.hn) { s += String.format( - '<div class="td cbi-section-table-titles" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></div>', + '<div class="td cbi-section-table-cell left" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></div>', neigh.dfgcolor, neigh.hn, neigh.hn ); } else { s += String.format( - '<div class="td cbi-section-table-titles" style="background-color:%s">?</div>', + '<div class="td cbi-section-table-cell left" style="background-color:%s">?</div>', neigh.dfgcolor ); } s += String.format( - '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + - '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + - '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + - '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + - '<div class="td cbi-section-table-titles" style="background-color:%s">%s</div>' + - '<div class="td cbi-section-table-titles" style="background-color:%s" title="Signal: %s Noise: %s">%s</div>' + + '<div class="td cbi-section-table-cell left" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-cell left" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-cell left" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-cell left" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-cell left" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-cell left" style="background-color:%s" title="Signal: %s Noise: %s">%s</div>' + '</div>', neigh.dfgcolor, neigh.ifn, neigh.dfgcolor, neigh.lip, neigh.dfgcolor, neigh.lq, neigh.dfgcolor, neigh.nlq, neigh.color, neigh.cost, neigh.snr_color, neigh.signal, neigh.noise, neigh.snr || '?' ); @@ -111,9 +121,8 @@ end <fieldset class="cbi-section"> <legend><%:Overview of currently established OLSR connections%></legend> - <div class="table cbi-section-table"> - <div class="thead"> - <div class="tr cbi-section-table-titles"> + <div class="table cbi-section-table" id="olsr_neigh_table"> + <div class="tr cbi-section-table-cell"> <div class="th cbi-section-table-cell"><%:Neighbour IP%></div> <div class="th cbi-section-table-cell"><%:Hostname%></div> <div class="th cbi-section-table-cell"><%:Interface%></div> @@ -123,9 +132,7 @@ end <div class="th cbi-section-table-cell">ETX</div> <div class="th cbi-section-table-cell">SNR</div> </div> - </div> - <div class="tbody" id="olsr_neigh_table"> <% local i = 1 for k, link in ipairs(links) do link.linkCost = tonumber(link.linkCost) or 0 @@ -148,22 +155,21 @@ end <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=link.proto%>"> <% if link.proto == "6" then %> - <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://[<%=link.remoteIP%>]/cgi-bin-status.html"><%=link.remoteIP%></a></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=defaultgw_color%>"><a href="http://[<%=link.remoteIP%>]/cgi-bin-status.html"><%=link.remoteIP%></a></div> <% else %> - <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.remoteIP%>/cgi-bin-status.html"><%=link.remoteIP%></a></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.remoteIP%>/cgi-bin-status.html"><%=link.remoteIP%></a></div> <% end %> - <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.hostname%>/cgi-bin-status.html"><%=link.hostname%></a></div> - <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.interface%></div> - <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=link.localIP%></div> - <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.linkQuality)%></div> - <div class="td cbi-section-table-titles" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.neighborLinkQuality)%></div> - <div class="td cbi-section-table-titles" style="background-color:<%=color%>"><%=string.format("%.3f", link.linkCost)%></div> - <div class="td cbi-section-table-titles" style="background-color:<%=snr_color%>" title="Signal: <%=link.signal%> Noise: <%=link.noise%>"><%=link.snr%></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link.hostname%>/cgi-bin-status.html"><%=link.hostname%></a></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=defaultgw_color%>"><%=link.interface%></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=defaultgw_color%>"><%=link.localIP%></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.linkQuality)%></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=defaultgw_color%>"><%=string.format("%.3f", link.neighborLinkQuality)%></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=color%>"><%=string.format("%.3f", link.linkCost)%></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=snr_color%>" title="Signal: <%=link.signal%> Noise: <%=link.noise%>"><%=link.snr%></div> </div> <% i = ((i % 2) + 1) end %> - </div> </div> <br /> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm index 4b733524a5..624047f40c 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/routes.htm @@ -13,7 +13,7 @@ local i = 1 if luci.http.formvalue("status") == "1" then local rv = {} for k, route in ipairs(routes) do - local ETX = string.format("%.3f", tonumber(route.rtpMetricCost)/1024 or 0) + local ETX = string.format("%.3f", tonumber(route.etx) or 0) rv[#rv+1] = { hostname = route.hostname, dest = route.destination, @@ -43,21 +43,28 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 }, var rt = document.getElementById('olsrd_routes'); if (rt) { - var s = ''; + var s = '<div class="tr cbi-section-table-cell">' + + '<div class="th cbi-section-table-cell"><%:Announced network%></div>' + + '<div class="th cbi-section-table-cell"><%:OLSR gateway%></div>' + + '<div class="th cbi-section-table-cell"><%:Interface%></div>' + + '<div class="th cbi-section-table-cell"><%:Metric%></div>' + + '<div class="th cbi-section-table-cell">ETX</div>' + + '</div>'; + for (var idx = 0; idx < info.length; idx++) { var route = info[idx]; s += String.format( '<div class="tr cbi-section-table-row cbi-rowstyle-'+(1 + (idx % 2))+' proto-%s">' + - '<div class="td cbi-section-table-cell">%s/%s</div>' + - '<div class="td cbi-section-table-cell">' + + '<div class="td cbi-section-table-cell left">%s/%s</div>' + + '<div class="td cbi-section-table-cell left">' + '<a href="http://%s/cgi-bin-status.html">%s</a>', route.proto, route.dest, route.genmask, route.gw, route.gw ) if (route.hostname) { - if (hna.proto == '6') { + if (route.proto == '6') { s += String.format( ' / <a href="http://[%s]/cgi-bin-status.html">%s</a>', route.hostname, route.hostname || '?' @@ -72,9 +79,9 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 }, } s += String.format( '</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell" style="background-color:%s">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left" style="background-color:%s">%s</div>' + '</div>', route.interface, route.metric, route.color, route.etx || '?' ); @@ -95,27 +102,23 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 }, <fieldset class="cbi-section"> <legend><%:Overview of currently known routes to other OLSR nodes%></legend> -<div class="table cbi-section-table"> - <div class="thead"> - <div class="tr cbi-section-table-titles"> +<div class="table cbi-section-table" id="olsrd_routes"> + <div class="tr cbi-section-table-cell"> <div class="th cbi-section-table-cell"><%:Announced network%></div> <div class="th cbi-section-table-cell"><%:OLSR gateway%></div> <div class="th cbi-section-table-cell"><%:Interface%></div> <div class="th cbi-section-table-cell"><%:Metric%></div> <div class="th cbi-section-table-cell">ETX</div> </div> - </div> - - <div class="tbody" id="olsrd_routes"> <% for k, route in ipairs(routes) do - ETX = tonumber(route.rtpMetricCost)/1024 or '0' + ETX = tonumber(route.etx) or '0' color = olsrtools.etx_color(ETX) %> <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=route.proto%>"> - <div class="td cbi-section-table-cell"><%=route.destination%>/<%=route.genmask%></div> - <div class="td cbi-section-table-cell"> + <div class="td cbi-section-table-cell left"><%=route.destination%>/<%=route.genmask%></div> + <div class="td cbi-section-table-cell left"> <% if route.proto == '6' then %> <a href="http://[<%=route.gateway%>]/cgi-bin-status.html"><%=route.gateway%></a> <% else %> @@ -125,14 +128,13 @@ XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 }, / <a href="http://<%=route.Hostname%>/cgi-bin-status.html"><%=route.hostname%></a> <% end %> </div> - <div class="td cbi-section-table-cell"><%=route.networkInterface%></div> - <div class="td cbi-section-table-cell"><%=route.metric%></div> - <div class="td cbi-section-table-cell" style="background-color:<%=color%>"><%=string.format("%.3f", ETX)%></div> + <div class="td cbi-section-table-cell left"><%=route.networkInterface%></div> + <div class="td cbi-section-table-cell left"><%=route.metric%></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=color%>"><%=string.format("%.3f", ETX)%></div> </div> <% i = ((i % 2) + 1) end %> - </div> </div> <%+status-olsr/legend%> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm index ba36ce980a..8cd2088e42 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm @@ -19,7 +19,7 @@ if luci.http.formvalue("status") == "1" then local rv = {} for k, gw in ipairs(gws.ipv4, gws.ipv6) do gw.cost = tonumber(gw.cost)/1024 or 0 - if gw.cost == 4096 then + if gw.cost >= 100 then gw.cost = 0 end @@ -27,7 +27,7 @@ if luci.http.formvalue("status") == "1" then proto = gw.IPv4 and '4' or '6', originator = gw.originator, selected = gw.selected and luci.i18n.translate('yes') or luci.i18n.translate('no'), - cost = string.format("%.3f", gw.cost), + cost = gw.cost > 0 and string.format("%.3f", gw.cost) or luci.i18n.translate('infinate'), hops = gw.hops, uplink = gw.uplink, downlink = gw.downlink, @@ -51,7 +51,18 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, var smartgwdiv = document.getElementById('olsrd_smartgw'); if (smartgwdiv) { - var s = ''; + var s = '<div class="tr cbi-section-table-titles">' + + '<div class="th cbi-section-table-cell"><%:Gateway%></div>' + + '<div class="th cbi-section-table-cell"><%:Selected%></div>' + + '<div class="th cbi-section-table-cell"><%:ETX%></div>' + + '<div class="th cbi-section-table-cell"><%:Hops%></div>' + + '<div class="th cbi-section-table-cell"><%:Uplink%></div>' + + '<div class="th cbi-section-table-cell"><%:Downlink%></div>' + + '<div class="th cbi-section-table-cell"><%:IPv4%></div>' + + '<div class="th cbi-section-table-cell"><%:IPv6%></div>' + + '<div class="th cbi-section-table-cell"><%:Prefix%></div>' + + '</div>'; + for (var idx = 0; idx < info.length; idx++) { var smartgw = info[idx]; @@ -64,15 +75,15 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, } s += String.format( - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>' + - '<div class="td cbi-section-table-cell">%s</div>', + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>' + + '<div class="td cbi-section-table-cell left">%s</div>', linkgw, smartgw.selected, smartgw.cost, smartgw.hops, smartgw.uplink, smartgw.downlink, smartgw.v4, smartgw.v6, smartgw.prefix ) s += '</div>' @@ -83,9 +94,6 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, ); //]]></script> - -<%+header%> - <h2 name="content"><%:SmartGW announcements%></h2> <div id="togglebuttons"></div> @@ -94,8 +102,7 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, <fieldset class="cbi-section"> <legend><%:Overview of smart gateways in this network%></legend> - <div class="table cbi-section-table"> - <div class="thead"> + <div class="table cbi-section-table" id="olsrd_smartgw"> <div class="tr cbi-section-table-titles"> <div class="th cbi-section-table-cell"><%:Gateway%></div> <div class="th cbi-section-table-cell"><%:Selected%></div> @@ -106,39 +113,35 @@ XHR.poll(10, '<%=REQUEST_URI%>', { status: 1 }, <div class="th cbi-section-table-cell"><%:IPv4%></div> <div class="th cbi-section-table-cell"><%:IPv6%></div> <div class="th cbi-section-table-cell"><%:Prefix%></div> - - </div> </div> - <div class="tbody" id="olsrd_smartgw"> - <% for k, gw in ipairs(gws) do + <% for k, gw in ipairs(gws.ipv4, gws.ipv6) do gw.cost = tonumber(gw.cost)/1024 or 0 - if gw.cost == 4096 then + if gw.cost >= 100 then gw.cost = 0 end %> <div class="tr cbi-section-table-row cbi-rowstyle-<%=i%> proto-<%=proto%>"> <% if gw.proto == '6' then %> - <div class="td cbi-section-table-cell"><a href="http://[<%=gw.originator%>]/cgi-bin-status.html"><%=gw.originator%></a></div> + <div class="td cbi-section-table-cell left"><a href="http://[<%=gw.originator%>]/cgi-bin-status.html"><%=gw.originator%></a></div> <% else %> - <div class="td cbi-section-table-cell"><a href="http://<%=gw.originator%>/cgi-bin-status.html"><%=gw.originator%></a></div> + <div class="td cbi-section-table-cell left"><a href="http://<%=gw.originator%>/cgi-bin-status.html"><%=gw.originator%></a></div> <% end %> - <div class="td cbi-section-table-cell"><%=gw.selected and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> - <div class="td cbi-section-table-cell"><%=string.format("%.3f", gw.cost)%></div> - <div class="td cbi-section-table-cell"><%=gw.hops%></div> - <div class="td cbi-section-table-cell"><%=gw.uplink%></div> - <div class="td cbi-section-table-cell"><%=gw.downlink%></div> - <div class="td cbi-section-table-cell"><%=gw.IPv4 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> - <div class="td cbi-section-table-cell"><%=gw.IPv6 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> - <div class="td cbi-section-table-cell"><%=gw.prefix%></div> + <div class="td cbi-section-table-cell left"><%=gw.selected and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> + <div class="td cbi-section-table-cell left"><%=gw.cost > 0 and string.format("%.3f", gw.cost) or luci.i18n.translate('infinate')%></div> + <div class="td cbi-section-table-cell left"><%=gw.hops%></div> + <div class="td cbi-section-table-cell left"><%=gw.uplink%></div> + <div class="td cbi-section-table-cell left"><%=gw.downlink%></div> + <div class="td cbi-section-table-cell left"><%=gw.IPv4 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> + <div class="td cbi-section-table-cell left"><%=gw.IPv6 and luci.i18n.translate('yes') or luci.i18n.translate('no')%></div> + <div class="td cbi-section-table-cell left"><%=gw.prefix%></div> </div> <% i = ((i % 2) + 1) end %> - </div> </div> </fieldset> diff --git a/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm b/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm index 02fdfddac3..fe673c4111 100644 --- a/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm +++ b/applications/luci-app-olsr/luasrc/view/status-olsr/topology.htm @@ -27,7 +27,7 @@ local olsrtools = require "luci.tools.olsr" </div> <% for k, route in ipairs(routes) do - local cost = string.format("%.3f", tonumber(route.tcEdgeCost/1024) or 0) + local cost = string.format("%.3f", tonumber(route.tcEdgeCost) or 0) local color = olsrtools.etx_color(tonumber(cost)) local lq = string.format("%.3f", tonumber(route.linkQuality) or 0) local nlq = string.format("%.3f", tonumber(route.neighborLinkQuality) or 0) @@ -37,19 +37,19 @@ local olsrtools = require "luci.tools.olsr" <% if route.proto == "6" then %> - <div class="td cbi-section-table-cell"><a href="http://[<%=route.destinationIP%>]/cgi-bin-status.html"><%=route.destinationIP%></a></div> - <div class="td cbi-section-table-cell"><a href="http://[<%=route.lastHopIP%>]/cgi-bin-status.html"><%=route.lastHopIP%></a></div> + <div class="td cbi-section-table-cell left"><a href="http://[<%=route.destinationIP%>]/cgi-bin-status.html"><%=route.destinationIP%></a></div> + <div class="td cbi-section-table-cell left"><a href="http://[<%=route.lastHopIP%>]/cgi-bin-status.html"><%=route.lastHopIP%></a></div> <% else %> - <div class="td cbi-section-table-cell"><a href="http://<%=route.destinationIP%>/cgi-bin-status.html"><%=route.destinationIP%></a></div> - <div class="td cbi-section-table-cell"><a href="http://<%=route.lastHopIP%>/cgi-bin-status.html"><%=route.lastHopIP%></a></div> + <div class="td cbi-section-table-cell left"><a href="http://<%=route.destinationIP%>/cgi-bin-status.html"><%=route.destinationIP%></a></div> + <div class="td cbi-section-table-cell left"><a href="http://<%=route.lastHopIP%>/cgi-bin-status.html"><%=route.lastHopIP%></a></div> <%end%> - <div class="td cbi-section-table-cell"><%=lq%></div> - <div class="td cbi-section-table-cell"><%=nlq%></div> - <div class="td cbi-section-table-cell" style="background-color:<%=color%>"><%=cost%></div> + <div class="td cbi-section-table-cell left"><%=lq%></div> + <div class="td cbi-section-table-cell left"><%=nlq%></div> + <div class="td cbi-section-table-cell left" style="background-color:<%=color%>"><%=cost%></div> </div> <% i = ((i % 2) + 1) diff --git a/applications/luci-app-olsr/po/de/olsr.po b/applications/luci-app-olsr/po/de/olsr.po index 2f387413ff..15b8412a26 100644 --- a/applications/luci-app-olsr/po/de/olsr.po +++ b/applications/luci-app-olsr/po/de/olsr.po @@ -1201,6 +1201,10 @@ msgstr "" #~ msgid "Status" #~ msgstr "Status" +#: application/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm:97 +msgid "Selected" +msgstr "Ausgewählt" + #~ msgid "Device" #~ msgstr "Schnittstelle" diff --git a/applications/luci-app-olsr/po/en/olsr.po b/applications/luci-app-olsr/po/en/olsr.po index bd7ee6fcbf..a009f84854 100644 --- a/applications/luci-app-olsr/po/en/olsr.po +++ b/applications/luci-app-olsr/po/en/olsr.po @@ -1088,6 +1088,10 @@ msgstr "" msgid "yes" msgstr "" +#: application/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm:97 +msgid "Selected" +msgstr "" + #~ msgid "" #~ "Make sure that OLSRd is running, the \"txtinfo\" plugin is loaded, " #~ "configured on port 2006 and accepts connections from \"127.0.0.1\"." diff --git a/applications/luci-app-olsr/po/templates/olsr.pot b/applications/luci-app-olsr/po/templates/olsr.pot index 49f5d63501..521af613ed 100644 --- a/applications/luci-app-olsr/po/templates/olsr.pot +++ b/applications/luci-app-olsr/po/templates/olsr.pot @@ -1073,3 +1073,8 @@ msgstr "" #: applications/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm:135 msgid "yes" msgstr "" + +#: application/luci-app-olsr/luasrc/view/status-olsr/smartgw.htm:97 +msgid "Selected" +msgstr "" + diff --git a/applications/luci-app-opkg/po/zh-cn/opkg.po b/applications/luci-app-opkg/po/zh-cn/opkg.po index bb30fa00be..076ee49b6a 100644 --- a/applications/luci-app-opkg/po/zh-cn/opkg.po +++ b/applications/luci-app-opkg/po/zh-cn/opkg.po @@ -1,9 +1,10 @@ # # Yangfl <mmyangfl@gmail.com>, 2018. +# Zheng Qian <sotux82@gmail.com>, 2018. # msgid "" msgstr "" -"PO-Revision-Date: 2018-08-18 12:39+0800\n" +"PO-Revision-Date: 2018-12-11 09:07+0800\n" "Last-Translator: Yangfl <mmyangfl@gmail.com>\n" "Language-Team: <debian-l10n-chinese@lists.debian.org>\n" "Language: \n" @@ -18,7 +19,7 @@ msgstr "动作" #: applications/luci-app-opkg/luasrc/view/opkg.htm:795 msgid "Automatically remove unused dependencies" -msgstr "" +msgstr "自动移除未使用的依赖" #: applications/luci-app-opkg/luasrc/view/opkg.htm:935 msgid "Available" @@ -31,6 +32,9 @@ msgid "" "custom repository entries. The configuration in the other files may be " "changed but is usually not preserved by <em>sysupgrade</em>." msgstr "" +"以下列出了 <em>opkg</em> 所使用的各个配置文件。<em>opkg.conf</em> 用于全局配" +"置，<em>customfeeds.conf</em> 用于描述自定义仓库。其他配置文件的变更在系统升" +"级时默认不被保留。" #: applications/luci-app-opkg/luasrc/view/opkg.htm:666 #: applications/luci-app-opkg/luasrc/view/opkg.htm:711 @@ -41,16 +45,15 @@ msgstr "取消" #: applications/luci-app-opkg/luasrc/view/opkg.htm:917 msgid "Clear" -msgstr "" +msgstr "清除" #: applications/luci-app-opkg/luasrc/view/opkg.htm:930 -#, fuzzy msgid "Configure opkg…" -msgstr "配置" +msgstr "配置 opkg…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:643 msgid "Dependencies" -msgstr "" +msgstr "依赖" #: applications/luci-app-opkg/luasrc/view/opkg.htm:649 #: applications/luci-app-opkg/luasrc/view/opkg.htm:781 @@ -60,7 +63,7 @@ msgstr "描述" #: applications/luci-app-opkg/luasrc/view/opkg.htm:654 msgid "Details for package <em>%h</em>" -msgstr "" +msgstr "软件包 <em>%h</em> 详情" #: applications/luci-app-opkg/luasrc/view/opkg.htm:851 msgid "Dismiss" @@ -68,20 +71,19 @@ msgstr "解除" #: applications/luci-app-opkg/luasrc/view/opkg.htm:311 msgid "Displaying %d-%d of %d" -msgstr "" +msgstr "正在显示 %d-%d，共 %d" #: applications/luci-app-opkg/luasrc/view/opkg.htm:921 msgid "Download and install package" msgstr "下载并安装软件包" #: applications/luci-app-opkg/luasrc/view/opkg.htm:837 -#, fuzzy msgid "Errors" msgstr "错误" #: applications/luci-app-opkg/luasrc/view/opkg.htm:821 msgid "Executing package manager" -msgstr "" +msgstr "正在执行软件包管理器" #: applications/luci-app-opkg/luasrc/view/opkg.htm:915 msgid "Filter" @@ -99,65 +101,58 @@ msgstr "安装" #: applications/luci-app-opkg/luasrc/view/opkg.htm:262 #: applications/luci-app-opkg/luasrc/view/opkg.htm:470 #: applications/luci-app-opkg/luasrc/view/opkg.htm:936 -#, fuzzy msgid "Installed" -msgstr "安装" +msgstr "已安装" #: applications/luci-app-opkg/luasrc/view/opkg.htm:695 msgid "" "Installing packages from untrusted sources is a potential security risk! " "Really attempt to install <em>%h</em>?" -msgstr "" +msgstr "从未信任的源安装软件包有潜在的安全隐患！您确定要安装 <em>%h</em> 吗？" #: applications/luci-app-opkg/luasrc/view/opkg.htm:251 -#, fuzzy msgid "Install…" -msgstr "安装" +msgstr "安装…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:720 -#, fuzzy msgid "Loading configuration data…" -msgstr "开始应用配置…" +msgstr "载入配置数据…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:858 msgid "Loading package information…" -msgstr "" +msgstr "载入软件包信息…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:705 -#, fuzzy msgid "Manually install package" -msgstr "下载并安装软件包" +msgstr "手动安装软件包" #: applications/luci-app-opkg/luasrc/view/opkg.htm:458 msgid "Needs upgrade" -msgstr "" +msgstr "需要升级" #: applications/luci-app-opkg/luasrc/view/opkg.htm:944 msgid "Next page" -msgstr "" +msgstr "下一页" #: applications/luci-app-opkg/luasrc/view/opkg.htm:324 msgid "No information available" msgstr "无可用信息" #: applications/luci-app-opkg/luasrc/view/opkg.htm:312 -#, fuzzy msgid "No packages" -msgstr "查找软件包" +msgstr "没有软件包" #: applications/luci-app-opkg/luasrc/view/opkg.htm:328 msgid "No packages matching \"<strong>%h</strong>\"." -msgstr "" +msgstr "没有匹配“<strong>%h</strong>”的软件包。" #: applications/luci-app-opkg/luasrc/view/opkg.htm:490 -#, fuzzy msgid "Not available" -msgstr "可用数" +msgstr "不可用" #: applications/luci-app-opkg/luasrc/view/opkg.htm:475 -#, fuzzy msgid "Not installed" -msgstr "未连接" +msgstr "未安装" #: applications/luci-app-opkg/luasrc/view/opkg.htm:923 msgid "OK" @@ -166,7 +161,6 @@ msgstr "确认" #: applications/luci-app-opkg/luasrc/view/opkg.htm:719 #: applications/luci-app-opkg/luasrc/view/opkg.htm:751 #: applications/luci-app-opkg/luasrc/view/opkg.htm:761 -#, fuzzy msgid "OPKG Configuration" msgstr "OPKG 配置" @@ -175,17 +169,16 @@ msgid "Package name" msgstr "软件包名称" #: applications/luci-app-opkg/luasrc/view/opkg.htm:922 -#, fuzzy msgid "Package name or URL…" -msgstr "软件包名称" +msgstr "软件包名称或 URL…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:942 msgid "Previous page" -msgstr "" +msgstr "上一页" #: applications/luci-app-opkg/luasrc/view/opkg.htm:702 msgid "Really attempt to install <em>%h</em>?" -msgstr "" +msgstr "真的要安装 <em>%h</em> 吗？" #: applications/luci-app-opkg/luasrc/view/opkg.htm:241 #: applications/luci-app-opkg/luasrc/view/opkg.htm:808 @@ -194,11 +187,11 @@ msgstr "移除" #: applications/luci-app-opkg/luasrc/view/opkg.htm:786 msgid "Remove package <em>%h</em>" -msgstr "" +msgstr "移除软件包 <em>%h</em>" #: applications/luci-app-opkg/luasrc/view/opkg.htm:639 msgid "Require approx. %.1024mB size for %d package(s) to install." -msgstr "" +msgstr "需要大约 %.1024mB 空间来安装 %d 个软件包。" #: applications/luci-app-opkg/luasrc/view/opkg.htm:465 #: applications/luci-app-opkg/luasrc/view/opkg.htm:483 @@ -206,15 +199,17 @@ msgid "" "Require version %h %h,\n" "installed %h" msgstr "" +"要求 %h %h 版本，\n" +"已安装 %h" #: applications/luci-app-opkg/luasrc/view/opkg.htm:488 msgid "" "Required dependency package <em>%h</em> is not available in any repository." -msgstr "" +msgstr "依赖的软件包 <em>%h</em> 在所有仓库都未提供。" #: applications/luci-app-opkg/luasrc/view/opkg.htm:456 msgid "Requires update to %h %h" -msgstr "" +msgstr "需要更新到 %h %h" #: applications/luci-app-opkg/luasrc/view/opkg.htm:329 msgid "Reset" @@ -225,9 +220,8 @@ msgid "Save" msgstr "保存" #: applications/luci-app-opkg/luasrc/view/opkg.htm:752 -#, fuzzy msgid "Saving configuration data…" -msgstr "开始应用配置…" +msgstr "正在保存配置数据…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:657 #: applications/luci-app-opkg/luasrc/view/opkg.htm:789 @@ -245,42 +239,40 @@ msgstr "软件包" #: applications/luci-app-opkg/luasrc/view/opkg.htm:842 msgid "The <em>opkg %h</em> command failed with code <code>%d</code>." -msgstr "" +msgstr "<em>opkg %h</em> 命令失败，代码 <code>%d</code>。" #: applications/luci-app-opkg/luasrc/view/opkg.htm:461 msgid "" "The installed version of package <em>%h</em> is not compatible, require %s " "while %s is installed." -msgstr "" +msgstr "已安装的软件包 <em>%h</em> 版本不兼容，要求 %s 而 %s 已安装。" #: applications/luci-app-opkg/luasrc/view/opkg.htm:698 msgid "The package <em>%h</em> is not available in any configured repository." -msgstr "" +msgstr "软件包 <em>%h</em> 在所有已配置的仓库中都不存在。" #: applications/luci-app-opkg/luasrc/view/opkg.htm:478 msgid "" "The repository version of package <em>%h</em> is not compatible, require %s " "but only %s is available." -msgstr "" +msgstr "软件包 <em>%h</em> 在仓库中的版本不兼容，要求 %s 但仅可提供 %s。" #: applications/luci-app-opkg/luasrc/view/opkg.htm:916 msgid "Type to filter…" -msgstr "" +msgstr "输入以过滤…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:928 -#, fuzzy msgid "Update lists…" -msgstr "刷新列表" +msgstr "更新列表…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:937 -#, fuzzy msgid "Updates" -msgstr "刷新列表" +msgstr "更新" #: applications/luci-app-opkg/luasrc/view/opkg.htm:233 #: applications/luci-app-opkg/luasrc/view/opkg.htm:257 msgid "Upgrade…" -msgstr "" +msgstr "升级…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:656 #: applications/luci-app-opkg/luasrc/view/opkg.htm:788 @@ -291,12 +283,11 @@ msgstr "版本" #: applications/luci-app-opkg/luasrc/view/opkg.htm:467 #: applications/luci-app-opkg/luasrc/view/opkg.htm:485 msgid "Version incompatible" -msgstr "" +msgstr "版本不兼容" #: applications/luci-app-opkg/luasrc/view/opkg.htm:823 -#, fuzzy msgid "Waiting for the <em>opkg %h</em> command to complete…" -msgstr "等待命令执行完成…" +msgstr "等待命令 <em>opkg %h</em> 执行完成…" #: applications/luci-app-opkg/luasrc/view/opkg.htm:617 #: applications/luci-app-opkg/luasrc/view/opkg.htm:777 @@ -307,9 +298,9 @@ msgstr "未知" #: applications/luci-app-opkg/luasrc/view/opkg.htm:615 #: applications/luci-app-opkg/luasrc/view/opkg.htm:775 msgid "~%.1024mB compressed" -msgstr "" +msgstr "~%.1024mB 已压缩" #: applications/luci-app-opkg/luasrc/view/opkg.htm:613 #: applications/luci-app-opkg/luasrc/view/opkg.htm:773 msgid "~%.1024mB installed" -msgstr "" +msgstr "~%.1024mB 已安装" diff --git a/applications/luci-app-radicale/luasrc/view/radicale/tabmap_nsections.htm b/applications/luci-app-radicale/luasrc/view/radicale/tabmap_nsections.htm index 2b526a31d7..fdb3f27abc 100644 --- a/applications/luci-app-radicale/luasrc/view/radicale/tabmap_nsections.htm +++ b/applications/luci-app-radicale/luasrc/view/radicale/tabmap_nsections.htm @@ -3,8 +3,12 @@ <%- end end -%> <div class="cbi-map" id="cbi-<%=self.config%>"> - <% if self.title and #self.title > 0 then %><h2 name="content"><%=self.title%></h2><% end %> - <% if self.description and #self.description > 0 then %><div class="cbi-map-descr"><%=self.description%></div><% end %> + <% if self.title and #self.title > 0 then %> + <h2 name="content"><%=self.title%></h2> + <% end %> + <% if self.description and #self.description > 0 then %> + <div class="cbi-map-descr"><%=self.description%></div> + <% end %> <%- if firstmap and (applymap or confirmmap) then -%> <%+cbi/apply_widget%> <% cbi_apply_widget() %> @@ -21,23 +25,18 @@ <%- end -%> <% if self.tabbed then %> - <ul class="cbi-tabmenu map"> - <%- self.selected_tab = luci.http.formvalue("tab.m-" .. self.config) %> - <% for i, section in ipairs(self.children) do %> - <%- if not self.selected_tab then self.selected_tab = section.sectiontype end %> - <li id="tab.m-<%=self.config%>.<%=section.section or section.sectiontype%>" class="cbi-tab<%=(section.sectiontype == self.selected_tab) and '' or '-disabled'%>"> - <a onclick="this.blur(); return cbi_t_switch('m-<%=self.config%>', '<%=section.section or section.sectiontype%>')" href="<%=REQUEST_URI%>?tab.m-<%=self.config%>=<%=section.section or section.sectiontype%>"><%=section.title or section.section or section.sectiontype %></a> - <% if section.sectiontype == self.selected_tab then %><input type="hidden" id="tab.m-<%=self.config%>" name="tab.m-<%=self.config%>" value="<%=section.section or section.sectiontype%>" /><% end %> - </li> + <div> + <% for i, section in ipairs(self.children) do + tab = section.section or section.sectiontype %> + <div class="cbi-tabcontainer"<%= + attr("id", "container.m-%s.%s" %{ self.config, tab }) .. + attr("data-tab", tab) .. + attr("data-tab-title", section.title or tab) + %>> + <% section:render() %> + </div> <% end %> - </ul> - <br /> - <% for i, section in ipairs(self.children) do %> - <div class="cbi-tabcontainer" id="container.m-<%=self.config%>.<%=section.section or section.sectiontype%>"<% if section.sectiontype ~= self.selected_tab then %> style="display:none"<% end %>> - <% section:render() %> - </div> - <script type="text/javascript">cbi_t_add('m-<%=self.config%>', '<%=section.section or section.sectiontype%>')</script> - <% end %> + </div> <% else %> <%- self:render_children() %> |