diff --git a/luci-mod-dashboard/Makefile b/luci-mod-dashboard/Makefile new file mode 100644 index 000000000..4a9aec96f --- /dev/null +++ b/luci-mod-dashboard/Makefile @@ -0,0 +1,18 @@ +# +# Copyright 2019-2020 ZHANG Zhao +# +# This is free software, licensed under the Apache License, Version 2.0 . +# + +include $(TOPDIR)/rules.mk + +LUCI_TITLE:=LuCI Dashboard Pages +LUCI_DEPENDS:=+luci-base +libiwinfo + +PKG_BUILD_DEPENDS:=iwinfo +PKG_LICENSE:=Apache-2.0 + +include $(TOPDIR)/feeds/luci/luci.mk + +# call BuildPackage - OpenWrt buildroot signature + diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css new file mode 100644 index 000000000..0efbf6294 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css @@ -0,0 +1,285 @@ +/** + * Dashboard Principals Styles +**/ + +.Dashboard { + color: #212529!important; +} + +.Dashboard h3 { + color:#000; +} + +.Dashboard hr { + border: 0; + height: 0; + overflow: visible; + margin: 0; + box-sizing: content-box; + border-top: 1px solid rgba(0,0,0,.1); +} + +.Dashboard .box-s1 { + min-height: 550px; +} + +.Dashboard .internet-status-self .internet-status-info .title { + height: 97px; +} + +.Dashboard .dashboard-bg { + border-radius: 16px; + background-color: #e0e0e0; +} + +.Dashboard .title { + text-align: center; +} + +.Dashboard .section-content { + display: flex; + vertical-align: top; + padding: 20px 0 0 0; + align-items: flex-start; + justify-content: space-between; +} + +.Dashboard .section-content > div { + width:100%; + padding:1.5em; +} + +.Dashboard .section-content .settings-info { + padding-top:1em; +} + +.Dashboard .section-content .internet-status-info .settings-info { + display: flex; + justify-content: space-around; +} + +.Dashboard .section-content .internet-status-info .settings-info > div > p > i{ + padding: 0 0 0 5px; +} + +.Dashboard .section-content > div:nth-child(2) { + margin-left:20px; +} + +.Dashboard .devices-list .devices-info { + margin-bottom: 0; +} + +.Dashboard .devices-list .devices-info .tr .td{ + padding:0px 0 0 10px; +} + +.Dashboard .devices-list .devices-info .tr .td:first-child { + width: 33%; + word-break: break-all; +} + +.Dashboard .devices-list hr:nth-child(4) { + margin-top: 0; + margin-bottom: 8px; +} + +.Dashboard .router-status-lan .devices-list .table-titles .th:first-child { + width: 35%; +} + +.Dashboard .router-status-self .router-status-info .settings-info { + padding-left:27px; +} + +.Dashboard .router-status-self .router-status-info .title h3 { + margin-top:-2px; +} + +.Dashboard .router-status-info svg { + width: 70px; +} + +.Dashboard .internet-status-self .settings-info p:first-child span:first-child{ + font-size: 12px; + font-weight: 500; +} + +//.Dashboard .internet-status-self .settings-info p:first-child span:first-child, +.Dashboard .router-status-wifi .wifi-info .settings-info p:first-child span:first-child, +.Dashboard .router-status-wifi .wifi-info .settings-info p:nth-child(2) span:first-child{ + font-weight: 700; +} + +.Dashboard .settings-info p span:first-child { + width: 35%; + font-size: 12px; + text-align: right; +} + +.Dashboard .settings-info p span:nth-child(2){ + display: inline-block; + word-break: break-all; + max-width: 150px; + overflow: hidden; + max-height: 16px; + position: relative; + top:2px; +} + +.Dashboard .router-status-info .settings-info p span:nth-child(2){ + max-width: 283px; +} + +.Dashboard .settings-info p span.ssid { + max-height: 18px; + top: 3px; +} + +.Dashboard .settings-info p span.encryption { + max-width: 82px; +} + +.Dashboard .router-status-wifi .wifi-info .settings-info, +.Dashboard .router-status-lan .lan-info .settings-info +{ + display: flex; + justify-content: space-around; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td { + padding: 0 10px 0 10px; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:first-child { + width: 30%; + word-break: break-all; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(2) { + width: 21%; + overflow: hidden; + padding-left:0; + word-break: break-all; +} + +.Dashboard .router-status-wifi .wifi-info .settings-info{ + padding:1em 0 1em 0; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(3) { + width: 22%; + overflow: hidden; + position: relative; + top: -3px; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(5) { + width: initial; +} + +.Dashboard .router-status-wifi .wifi-info > hr:last-child { + margin-bottom:0; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .device-info .progress { + padding: 0; + width: 100%; + margin: 0; +} + +.Dashboard .wifi-info .devices-info .table-titles { + border-bottom:1px solid rgba(0,0,0,.1); +} + +/** + * Responsive + **/ +@media screen and (min-width: 200px) and (max-width: 640px) { + + .Dashboard .cbi-section-1 > .section-content { + padding-top:10px; + } + + .Dashboard .section-content { + display:block; + } + + .Dashboard .section-content > div{ + padding: 1em; + } + + .Dashboard .section-content > div:first-child { + margin-bottom:10px; + } + + .Dashboard .section-content > div:nth-child(2) { + margin:0; + } + + .Dashboard .router-status-self .router-status-info .settings-info { + padding:0; + } + + .Dashboard .section-content .internet-status-info .settings-info { + display:block; + } + + .Dashboard .section-content .internet-status-info .settings-info > div:first-child { + margin-bottom: 10px; + border-bottom: 1px solid rgba(0,0,0,.1); + } + + .Dashboard .section-content .router-status-lan .devices-info .table-titles { + display:block; + } + + .Dashboard .router-status-wifi .wifi-info .settings-info > div{ + flex:1; + } + + .Dashboard .section-content .router-status-lan .devices-info .table-titles .th:last-child{ + padding-left: 70px; + } + + .Dashboard .section-content .router-status-lan .devices-info .td:first-child{ + flex: 2 2 31%; + } + + .Dashboard .section-content .router-status-lan .devices-info .td:nth-child(2){ + flex: 1 1 24%; + padding: 0; + } + + .Dashboard .section-content .router-status-lan .devices-info .td:last-child{ + word-wrap: normal; + } + + .Dashboard .router-status-wifi .wifi-info .settings-info > div p:nth-child(6) > span:last-child{ + display: inline-block; + overflow: hidden; + height: 14px; + width: 52%; + word-break: break-word; + line-height: 15px; + } + + .Dashboard .wifi-info .devices-info .table-titles { + padding: 0; + margin: 0; + display: flex; + border-radius: initial; + } + + .Dashboard .wifi-info .devices-info .table-titles .th { + flex: 2 2 24%; + } + + .Dashboard .wifi-info .devices-info .tr .td { + flex: 2 2 10%; + } + + .Dashboard .wifi-info hr:nth-child(4) { + margin-bottom: 0; + } +} diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/devices.svg b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/devices.svg new file mode 100644 index 000000000..9fa17f40c --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/devices.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/internet.svg b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/internet.svg new file mode 100644 index 000000000..c6feb0fb9 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/internet.svg @@ -0,0 +1,46 @@ + + + + + + + + + + diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/not-internet.svg b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/not-internet.svg new file mode 100644 index 000000000..f1202fe22 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/not-internet.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/router.svg b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/router.svg new file mode 100644 index 000000000..588504ea8 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/router.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/wireless.svg b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/wireless.svg new file mode 100644 index 000000000..06073fa41 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/wireless.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/10_router.js b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/10_router.js new file mode 100644 index 000000000..58848fb72 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/10_router.js @@ -0,0 +1,374 @@ +'use strict'; +'require baseclass'; +'require fs'; +'require rpc'; +'require network'; + +var callSystemBoard = rpc.declare({ + object: 'system', + method: 'board' +}); + +var callSystemInfo = rpc.declare({ + object: 'system', + method: 'info' +}); + +var callOpenMPTCProuterInfo = rpc.declare({ + object: 'openmptcprouter', + method: 'status' +}); + + +return baseclass.extend({ + + params: [], + + formatBytes: function(a,b=2){if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"][d]}, + load: function() { + return Promise.all([ + network.getWANNetworks(), + network.getWAN6Networks(), + L.resolveDefault(callSystemBoard(), {}), + L.resolveDefault(callSystemInfo(), {}), + L.resolveDefault(callOpenMPTCProuterInfo(), {}) + ]); + }, + + renderHtml: function(data, type) { + + var icon = type; + var title = 'router' == type ? _('System') : _('Internet'); + var container_wapper = E('div', { 'class': type + '-status-self dashboard-bg box-s1'}); + var container_box = E('div', { 'class': type + '-status-info'}); + var container_item = E('div', { 'class': 'settings-info'}); + + if ('internet' == type) { + icon = (data.internet.v4.connected.value || data.internet.v6.connected.value) ? type : 'not-internet'; + } + + container_box.appendChild(E('div', { 'class': 'title'}, [ + E('img', { + 'src': L.resource('view/dashboard/icons/' + icon + '.svg'), + 'width': 'router' == type ? 64 : 54, + 'title': title, + 'class': 'middle' + }), + E('h3', title) + ])); + + container_box.appendChild(E('hr')); + + if ('internet' == type) { + + var container_internet_v4 = E('div'); + var container_internet_v6 = E('div'); + var container_internet_vps = E('div'); + + for(var idx in data['vps']) { + var classname = ver, + suppelements = '', + visible = data['vps'][idx].visible; + if ('title' === idx) { + container_internet_vps.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('h4', {'class': ''}, [ data['vps'].title ]), + ]) + ); + continue; + } + if (visible) { + container_internet_vps.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('span', {'class': ''}, [ data['vps'][idx].title + '：' ]), + E('span', {'class': ''}, [ data['vps'][idx].value ]), + suppelements + ]) + ); + } + } + + + for(var idx in data['internet']) { + + for(var ver in data['internet'][idx]) { + var classname = ver, + suppelements = '', + visible = data['internet'][idx][ver].visible; + + if('connected' === ver) { + classname = data['internet'][idx][ver].value ? 'label label-success' : 'label label-danger'; + data['internet'][idx][ver].value = data['internet'][idx][ver].value ? _('yes') : _('no'); + } + + if ('v4' === idx) { + + if ('title' === ver) { + container_internet_v4.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('h4', {'class': ''}, [ data['internet'][idx].title ]), + ]) + ); + continue; + } + + if ('addrsv4' === ver) { + var addrs = data['internet'][idx][ver].value; + if(Array.isArray(addrs) && addrs.length) { + for(var ip in addrs) { + data['internet'][idx][ver].value = addrs[ip].split('/')[0]; + } + } + } + + if (visible) { + container_internet_v4.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('span', {'class': ''}, [ data['internet'][idx][ver].title + '：' ]), + E('span', {'class': classname }, [ data['internet'][idx][ver].value ]), + suppelements + ]) + ); + } + + } else { + + if ('title' === ver) { + container_internet_v6.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('h4', {'class': ''}, [ data['internet'][idx].title ]), + ]) + ); + continue; + } + + if (visible) { + container_internet_v6.appendChild( + E('p', {'class': 'mt-2'}, [ + E('span', {'class': ''}, [data['internet'][idx][ver].title + '：']), + E('span', {'class': classname}, [data['internet'][idx][ver].value]), + suppelements + ]) + ); + } + } + } + } + + container_item.appendChild(E('p', { 'class': 'table'}, [ + E('div', { 'class': 'tr' }, [ + E('div', { 'class': 'td' }, [ container_internet_vps ]) + ]), + E('div', { 'class': 'tr' }, [ + E('div', { 'class': 'td' }, [ + container_internet_v4 + ]), + E('div', { 'class': 'td' }, [ + container_internet_v6 + ]) + ]) + ])); + } else { + for(var idx in data) { + container_item.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('span', {'class': ''}, [ data[idx].title + '：' ]), + E('span', {'class': ''}, [ data[idx].value ]) + ]) + ); + } + } + + container_box.appendChild(container_item); + container_box.appendChild(E('hr')); + container_wapper.appendChild(container_box); + return container_wapper; + }, + + renderUpdateWanData: function(data, v6) { + for (var i = 0; i < data.length; i++) { + var ifc = data[i]; + + if (v6) { + this.params.internet.v6.ipprefixv6.value = ifc.getIP6Prefix() || '-'; + this.params.internet.v6.gatewayv6.value = ifc.getGateway6Addr() || '-'; + this.params.internet.v6.protocol.value= ifc.getI18n() || E('em', _('Not connected')); + this.params.internet.v6.addrsv6.value = ifc.getIP6Addrs() || [ '-' ]; + this.params.internet.v6.dnsv6.value = ifc.getDNS6Addrs() || [ '-' ]; + this.params.internet.v6.connected.value = ifc.isUp(); + } else { + var uptime = ifc.getUptime(); + this.params.internet.v4.uptime.value = (uptime > 0) ? '%t'.format(uptime) : '-'; + this.params.internet.v4.protocol.value= ifc.getI18n() || E('em', _('Not connected')); + this.params.internet.v4.gatewayv4.value = ifc.getGatewayAddr() || '0.0.0.0'; + this.params.internet.v4.connected.value = ifc.isUp(); + this.params.internet.v4.addrsv4.value = ifc.getIPAddrs() || [ '-']; + this.params.internet.v4.dnsv4.value = ifc.getDNSAddrs() || [ '-' ]; + } + } + }, + renderUpdateOpenMPTCProuterData: function(data, v6) { + if (data.openmptcprouter.wan_addr != '') this.params.omrvps.internet.v4.connected.value = true; + if (data.openmptcprouter.wan_addr) this.params.omrvps.internet.v4.addrsv4.value = data.openmptcprouter.wan_addr || [ '-']; + if (data.openmptcprouter.wan_addr6) this.params.omrvps.internet.v6.addrsv6.value = data.openmptcprouter.wan_addr6 || [ '-']; + if (data.openmptcprouter.vps_kernel) this.params.omrvps.vps.version.value = data.openmptcprouter.vps_kernel + ' ' + data.openmptcprouter.vps_omr_version || [ '-']; + if (data.openmptcprouter.vps_loadavg) this.params.omrvps.vps.load.value = data.openmptcprouter.vps_loadavg || [ '-']; + if (data.openmptcprouter.vps_uptime) this.params.omrvps.vps.uptime.value = String.format('%t', data.openmptcprouter.vps_uptime) || [ '-']; + if (data.openmptcprouter.proxy_traffic) this.params.omrvps.vps.trafficproxy.value = this.formatBytes(data.openmptcprouter.proxy_traffic) || [ '-']; + if (data.openmptcprouter.vpn_traffic) this.params.omrvps.vps.trafficvpn.value = this.formatBytes(data.openmptcprouter.vpn_traffic) || [ '-']; + if (data.openmptcprouter.total_traffic) this.params.omrvps.vps.traffictotal.value = this.formatBytes(data.openmptcprouter.total_traffic) || [ '-']; + if (data.openmptcprouter.ipv6 != 'disabled') this.params.omrvps.internet.v6.connected.value = true; + }, + + renderInternetBox: function(data) { + + this.params.omrvps = { + vps: { + title: _('Server'), + + version: { + title: _('Version'), + visible: true, + value: [ '-' ] + }, + + load: { + title: _('Load'), + visible: true, + value: [ '-' ] + }, + + uptime: { + title: _('Uptime'), + visible: true, + value: [ '-' ] + }, + + trafficproxy: { + title: _('Proxy traffic'), + visible: true, + value: [ '-' ] + }, + + trafficvpn: { + title: _('VPN traffic'), + visible: true, + value: [ '-' ] + }, + + traffictotal: { + title: _('Total traffic'), + visible: true, + value: [ '-' ] + } + }, + + internet: { + + v4: { + title: _('IPv4 Internet'), + + connected: { + title: _('Connected'), + visible: true, + value: false + }, + + addrsv4: { + title: _('IPv4'), + visible: true, + value: [ '-' ] + } + }, + + v6: { + title: _('IPv6 Internet'), + + connected: { + title: _('Connected'), + visible: true, + value: false + }, + + ipprefixv6 : { + title: _('IPv6 prefix'), + visible: false, + value: ' - ' + }, + + addrsv6: { + title: _('IPv6'), + visible: true, + value: [ '-' ] + } + + } + } + }; + + //this.renderUpdateWanData(data[0], false); + //this.renderUpdateWanData(data[1], true); + this.renderUpdateOpenMPTCProuterData(data[4], true); + + return this.renderHtml(this.params.omrvps, 'internet'); + }, + + renderRouterBox: function(data) { + + var boardinfo = data[2], + systeminfo = data[3]; + + var datestr = null; + + if (systeminfo.localtime) { + var date = new Date(systeminfo.localtime * 1000); + + datestr = '%04d-%02d-%02d %02d:%02d:%02d'.format( + date.getUTCFullYear(), + date.getUTCMonth() + 1, + date.getUTCDate(), + date.getUTCHours(), + date.getUTCMinutes(), + date.getUTCSeconds() + ); + } + + this.params.router = { + uptime: { + title: _('Uptime'), + value: systeminfo.uptime ? '%t'.format(systeminfo.uptime) : null, + }, + + localtime: { + title: _('Local Time'), + value: datestr + }, + + kernel: { + title: _('Kernel Version'), + value: boardinfo.kernel + }, + + model: { + title: _('Model'), + value: boardinfo.model + }, + + system: { + title: _('Architecture'), + value: boardinfo.system + }, + + release: { + title: _('Firmware Version'), + value: boardinfo.release.description + } + }; + + return this.renderHtml(this.params.router, 'router'); + }, + + render: function(data) { + return [this.renderInternetBox(data), this.renderRouterBox(data)]; + } +}); diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/20_lan.js b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/20_lan.js new file mode 100644 index 000000000..2d786c828 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/20_lan.js @@ -0,0 +1,150 @@ +'use strict'; +'require baseclass'; +'require rpc'; +'require network'; + +var callLuciDHCPLeases = rpc.declare({ + object: 'luci-rpc', + method: 'getDHCPLeases', + expect: { '': {} } +}); + +return baseclass.extend({ + title: _('DHCP Devices'), + + params: {}, + + load: function() { + return Promise.all([ + callLuciDHCPLeases(), + network.getDevices() + ]); + }, + + renderHtml: function() { + + var container_wapper = E('div', { 'class': 'router-status-lan dashboard-bg box-s1' }); + var container_box = E('div', { 'class': 'lan-info devices-list' }); + var container_devices = E('div', { 'class': 'table assoclist devices-info' }, [ + E('div', { 'class': 'tr table-titles dashboard-bg' }, [ + E('div', { 'class': 'th nowrap' }, _('Hostname')), + E('div', { 'class': 'th' }, _('IP Address')), + E('div', { 'class': 'th' }, _('MAC')), + ]) + ]); + + var container_deviceslist = E('div', { 'class': 'table assoclist devices-info' }); + + container_box.appendChild(E('div', { 'class': 'title'}, [ + E('img', { + 'src': L.resource('view/dashboard/icons/devices.svg'), + 'width': 55, + 'title': this.title, + 'class': 'middle' + }), + E('h3', this.title) + ])); + + for(var idx in this.params.lan.devices) { + var deivce = this.params.lan.devices[idx]; + + container_deviceslist.appendChild(E('div', { 'class': 'tr cbi-rowstyle-1'}, [ + + E('div', { 'class': 'td device-info'}, [ + E('p', {}, [ + E('span', { 'class': 'd-inline-block'}, [ deivce.hostname ]), + ]), + ]), + + E('div', { 'class': 'td device-info'}, [ + E('p', {}, [ + E('span', { 'class': 'd-inline-block'}, [ deivce.ipv4 ]), + ]), + ]), + + E('div', { 'class': 'td device-info'}, [ + E('p', {}, [ + E('span', { 'class': 'd-inline-block'}, [ deivce.macaddr ]), + ]), + ]) + ])); + } + + container_box.appendChild(E('hr')); + container_box.appendChild(container_devices); + container_box.appendChild(E('hr')); + container_box.appendChild(container_deviceslist); + container_wapper.appendChild(container_box); + + return container_wapper; + }, + + renderUpdateData: function(data, leases) { + + for(var item in data) { + if (/lan|br-lan/ig.test(data[item].ifname) && (typeof data[item].dev == 'object' && !data[item].dev.wireless)) { + var lan_device = data[item]; + var ipv4addr = lan_device.dev.ipaddrs.toString().split('/'); + + this.params.lan.ipv4 = ipv4addr[0] || '?'; + this.params.lan.ipv6 = ipv4addr[0] || '?'; + this.params.lan.macaddr = lan_device.dev.macaddr || '00:00:00:00:00:00'; + this.params.lan.rx_bytes = lan_device.dev.stats.rx_bytes ? '%.2mB'.format(lan_device.dev.stats.rx_bytes) : '-'; + this.params.lan.tx_bytes = lan_device.dev.stats.tx_bytes ? '%.2mB'.format(lan_device.dev.stats.tx_bytes) : '-'; + } + } + + var devices = []; + leases.map(function(lease) { + devices[lease.expires] = { + hostname: lease.hostname || '?', + ipv4: lease.ipaddr || '-', + macaddr: lease.macaddr || '00:00:00:00:00:00', + }; + }); + this.params.lan.devices = devices; + }, + + renderLeases: function(data) { + + var leases = Array.isArray(data[0].dhcp_leases) ? data[0].dhcp_leases : []; + + this.params.lan = { + ipv4: { + title: _('IPv4'), + value: '?' + }, + + macaddr: { + title: _('Mac'), + value: '00:00:00:00:00:00' + }, + + rx_bytes: { + title: _('Upload'), + value: '-' + }, + + tx_bytes: { + title: _('Download'), + value: '-' + }, + + devices: { + title: _('Devices'), + value: [] + } + }; + + this.renderUpdateData(data[1], leases); + + return this.renderHtml(); + }, + + render: function(data) { + if (L.hasSystemFeature('dnsmasq') || L.hasSystemFeature('odhcpd')) + return this.renderLeases(data); + + return E([]); + } +}); diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/30_wifi.js b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/30_wifi.js new file mode 100644 index 000000000..03c9ee606 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/30_wifi.js @@ -0,0 +1,267 @@ +'use strict'; +'require baseclass'; +'require dom'; +'require network'; +'require rpc'; + +return baseclass.extend({ + + title: _('Wireless'), + + params: [], + + load: function() { + return Promise.all([ + network.getWifiDevices(), + network.getWifiNetworks(), + network.getHostHints() + ]).then(function(radios_networks_hints) { + var tasks = []; + + for (var i = 0; i < radios_networks_hints[1].length; i++) + tasks.push(L.resolveDefault(radios_networks_hints[1][i].getAssocList(), []).then(L.bind(function(net, list) { + net.assoclist = list.sort(function(a, b) { return a.mac > b.mac }); + }, this, radios_networks_hints[1][i]))); + + return Promise.all(tasks).then(function() { + return radios_networks_hints; + }); + }); + }, + + renderHtml: function() { + + var container_wapper = E('div', { 'class': 'router-status-wifi dashboard-bg box-s1' }); + var container_box = E('div', { 'class': 'wifi-info devices-list' }); + var container_radio = E('div', { 'class': 'settings-info' }); + var container_radio_item; + + container_box.appendChild(E('div', { 'class': 'title'}, [ + E('img', { + 'src': L.resource('view/dashboard/icons/wireless.svg'), + 'width': 55, + 'title': this.title, + 'class': 'middle' + }), + E('h3', this.title) + ])); + + container_box.appendChild(E('hr')); + + for (var i =0; i < this.params.wifi.radios.length; i++) { + + container_radio_item = E('div', { 'class': 'radio-info' }) + + for(var idx in this.params.wifi.radios[i]) { + var classname = idx, + radio = this.params.wifi.radios[i]; + + if (!radio[idx].visible) { + continue; + } + + if ('actived' === idx) { + classname = radio[idx].value ? 'label label-success' : 'label label-danger'; + radio[idx].value = radio[idx].value ? _('yes') : _('no'); + } + + container_radio_item.appendChild( + E('p', {}, [ + E('span', { 'class': ''}, [ radio[idx].title + '：']), + E('span', { 'class': classname }, [ radio[idx].value ]), + ]) + ); + } + + container_radio.appendChild(container_radio_item); + } + + container_box.appendChild(container_radio); + + var container_devices = E('div', { 'class': 'table assoclist devices-info' }, [ + E('div', { 'class': 'tr table-titles dashboard-bg' }, [ + E('div', { 'class': 'th nowrap' }, _('Hostname')), + E('div', { 'class': 'th' }, _('Wireless')), + E('div', { 'class': 'th' }, _('Signal')), + E('div', { 'class': 'th' }, '%s / %s'.format( _('Up.'), _('Down.'))) + ]) + ]); + + var container_devices_item; + var container_devices_list = E('div', { 'class': 'table assoclist devices-info' }); + + for (var i =0; i < this.params.wifi.devices.length; i++) { + container_devices_item = E('div', { 'class': 'tr cbi-rowstyle-1' }); + + for(var idx in this.params.wifi.devices[i]) { + var device = this.params.wifi.devices[i]; + + if (!device[idx].visible) { + continue; + } + + var container_content; + + if ('progress' == idx) { + container_content = E('div', { 'class' : 'td device-info' }, [ + E('div', { 'class': 'progress' }, [ + E('div', { 'class': 'progress-bar ' + device[idx].value.style, role: 'progressbar', style: 'width:'+device[idx].value.qualite+'%', 'aria-valuenow': device[idx].value.qualite, 'aria-valuemin': 0, 'aria-valuemax': 100 }), + ]) + ]); + } else if ('rate' == idx) { + container_content = E('div', { 'class': 'td device-info' }, [ + E('p', {}, [ + E('span', { 'class': ''}, [ device[idx].value.rx ]), + E('br'), + E('span', { 'class': ''}, [ device[idx].value.tx ]) + ]) + ]); + } else { + container_content = E('div', { 'class': 'td device-info'}, [ + E('p', {}, [ + E('span', { 'class': ''}, [ device[idx].value ]), + ]) + ]); + } + + container_devices_item.appendChild(container_content); + } + + container_devices_list.appendChild(container_devices_item); + } + + container_devices.appendChild(container_devices_list); + container_box.appendChild(E('hr')); + container_box.appendChild(container_devices); + container_box.appendChild(container_devices_list); + container_wapper.appendChild(container_box); + + return container_wapper; + }, + + renderUpdateData: function(radios, networks, hosthints) { + + for (var i = 0; i < radios.sort(function(a, b) { a.getName() > b.getName() }).length; i++) { + var network_items = networks.filter(function(net) { return net.getWifiDeviceName() == radios[i].getName() }); + + for (var j = 0; j < network_items.length; j++) { + var net = network_items[j], + is_assoc = (net.getBSSID() != '00:00:00:00:00:00' && net.getChannel() && !net.isDisabled()), + chan = net.getChannel(), + freq = net.getFrequency(), + rate = net.getBitRate(); + + this.params.wifi.radios.push( + { + ssid : { + title: _('SSID'), + visible: true, + value: net.getActiveSSID() || '?' + }, + + actived : { + title: _('Active'), + visible: true, + value: !net.isDisabled() + }, + + chan : { + title: _('Channel'), + visible: true, + value: chan ? '%d (%.3f %s)'.format(chan, freq, _('GHz')) : '-' + }, + + rate : { + title: _('Bitrate'), + visible: true, + value: rate ? '%d %s'.format(rate, _('Mbit/s')) : '-' + }, + + bssid : { + title: _('BSSID'), + visible: true, + value: is_assoc ? (net.getActiveBSSID() || '-') : '-' + }, + + encryption : { + title: _('Encryption'), + visible: true, + value: is_assoc ? net.getActiveEncryption() : '-' + }, + + associations : { + title: _('Devices Connected'), + visible: true, + value: is_assoc ? (net.assoclist.length || '0') : 0 + } + } + ); + } + } + + for (var i = 0; i < networks.length; i++) { + for (var k = 0; k < networks[i].assoclist.length; k++) { + var bss = networks[i].assoclist[k], + name = hosthints.getHostnameByMACAddr(bss.mac); + + var progress_style; + var q = Math.min((bss.signal + 110) / 70 * 100, 100); + + if (q == 0 || q < 25) + progress_style = 'bg-danger'; + else if (q < 50) + progress_style = 'bg-warning'; + else if (q < 75) + progress_style = 'bg-success'; + else + progress_style = 'bg-success'; + + this.params.wifi.devices.push( + { + hostname : { + title: _('Hostname'), + visible: true, + value: name || '?' + }, + + ssid : { + title: _('SSID'), + visible: true, + value: networks[i].getActiveSSID() + }, + + progress : { + title: _('Channel'), + visible: true, + value: { + qualite: q, + style: progress_style + } + }, + + rate : { + title: _('Bitrate'), + visible: true, + value: { + rx: '%s'.format('%.2mB'.format(bss.rx.bytes)), + tx: '%s'.format('%.2mB'.format(bss.tx.bytes)), + } + } + } + ); + } + } + }, + + render: function(data) { + + this.params.wifi = { + radios: [], + devices: [] + }; + + this.renderUpdateData(data[0], data[1], data[2]); + + return this.renderHtml(); + } +}); diff --git a/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/index.js b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/index.js new file mode 100644 index 000000000..c3e3b7027 --- /dev/null +++ b/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/index.js @@ -0,0 +1,110 @@ +'use strict'; +'require view'; +'require dom'; +'require poll'; +'require fs'; +'require network'; + +document.querySelector('head').appendChild(E('link', { + 'rel': 'stylesheet', + 'type': 'text/css', + 'href': L.resource('view/dashboard/css/custom.css') +})); + +function invokeIncludesLoad(includes) { + var tasks = [], has_load = false; + + for (var i = 0; i < includes.length; i++) { + if (typeof(includes[i].load) == 'function') { + tasks.push(includes[i].load().catch(L.bind(function() { + this.failed = true; + }, includes[i]))); + + has_load = true; + } + else { + tasks.push(null); + } + } + + return has_load ? Promise.all(tasks) : Promise.resolve(null); +} + +function startPolling(includes, containers) { + var step = function() { + return network.flushCache().then(function() { + return invokeIncludesLoad(includes); + }).then(function(results) { + for (var i = 0; i < includes.length; i++) { + var content = null; + + if (includes[i].failed) + continue; + + if (typeof(includes[i].render) == 'function') + content = includes[i].render(results ? results[i] : null); + else if (includes[i].content != null) + content = includes[i].content; + + if (content != null) { + + if (i > 1) { + dom.append(containers[1], content); + } else { + containers[i].parentNode.style.display = ''; + containers[i].parentNode.classList.add('fade-in'); + containers[i].parentNode.classList.add('Dashboard'); + dom.content(containers[i], content); + } + } + } + + var ssi = document.querySelector('div.includes'); + if (ssi) { + ssi.style.display = ''; + ssi.classList.add('fade-in'); + } + }); + }; + + return step().then(function() { + poll.add(step); + }); +} + +return view.extend({ + load: function() { + return L.resolveDefault(fs.list('/www' + L.resource('view/dashboard/include')), []).then(function(entries) { + return Promise.all(entries.filter(function(e) { + return (e.type == 'file' && e.name.match(/\.js$/)); + }).map(function(e) { + return 'view.dashboard.include.' + e.name.replace(/\.js$/, ''); + }).sort().map(function(n) { + return L.require(n); + })); + }); + }, + + render: function(includes) { + var rv = E([]), containers = []; + + for (var i = 0; i < includes.length - 1; i++) { + + var container = E('div', { 'class': 'section-content' }); + + rv.appendChild(E('div', { 'class': 'cbi-section-' + i, 'style': 'display:none' }, [ + container + ])); + + containers.push(container); + } + + return startPolling(includes, containers).then(function() { + return rv; + }); + }, + + handleSaveApply: null, + handleSave: null, + handleReset: null +}); diff --git a/luci-mod-dashboard/root/usr/share/luci/menu.d/luci-mod-dashboard.json b/luci-mod-dashboard/root/usr/share/luci/menu.d/luci-mod-dashboard.json new file mode 100644 index 000000000..555884674 --- /dev/null +++ b/luci-mod-dashboard/root/usr/share/luci/menu.d/luci-mod-dashboard.json @@ -0,0 +1,13 @@ +{ + "admin/dashboard": { + "title": "Dashboard", + "order": 1, + "action": { + "type": "view", + "path": "dashboard/index" + }, + "depends": { + "acl": [ "luci-mod-dashboard-index" ] + } + } +} diff --git a/luci-mod-dashboard/root/usr/share/rpcd/acl.d/luci-mod-dashboard.json b/luci-mod-dashboard/root/usr/share/rpcd/acl.d/luci-mod-dashboard.json new file mode 100644 index 000000000..1f331e7b4 --- /dev/null +++ b/luci-mod-dashboard/root/usr/share/rpcd/acl.d/luci-mod-dashboard.json @@ -0,0 +1,41 @@ +{ + "luci-mod-dashboard-routes": { + "description": "Grant access to the system route status", + "read": { + "ubus": { + "file": [ "exec" ] + } + } + }, + + "luci-mod-dashboard-index": { + "description": "Grant access to main status display", + "read": { + "file": { + "/www/luci-static/resources/view/status/include": [ "list" ] + }, + "ubus": { + "file": [ "list", "read" ], + "system": [ "board", "info" ] + } + } + }, + + "luci-mod-dashboard-index-dhcp": { + "description": "Grant access to DHCP status display", + "read": { + "ubus": { + "luci-rpc": [ "getDHCPLeases" ] + } + } + }, + + "luci-mod-dashboard-index-wifi": { + "description": "Grant access to wireless status display", + "read": { + "ubus": { + "iwinfo": [ "assoclist" ] + } + } + } +}