From 016b323a1710cb205ce4862e9f4a8f9cb4db6320 Mon Sep 17 00:00:00 2001
From: Jan Alexander <jan@nalx.net>
Date: Tue, 7 Apr 2020 11:45:00 +0200
Subject: [PATCH] gluon-status-page: set fixed layout and responsive view for
data tables
---
.../gluon/status-page/view/status-page.html | 10 ++--
.../status-page/www/static/status-page.css | 2 +-
.../status-page/www/static/status-page.js | 2 +-
.../javascript/status-page.js | 16 ++++++
.../gluon-status-page/sass/status-page.scss | 55 ++++++++++++++++++-
5 files changed, 75 insertions(+), 10 deletions(-)
diff --git a/package/gluon-status-page/files/lib/gluon/status-page/view/status-page.html b/package/gluon-status-page/files/lib/gluon/status-page/view/status-page.html
index cb7aaa111..83a82ef87 100644
--- a/package/gluon-status-page/files/lib/gluon/status-page/view/status-page.html
+++ b/package/gluon-status-page/files/lib/gluon/status-page/view/status-page.html
@@ -152,7 +152,7 @@
</table>
</div>
</div>
- <div class="frame">
+ <div class="frame frame-wide">
<h2><%:Neighbors%></h2>
<%
@@ -167,12 +167,12 @@
<tr>
<th><%:Node%></th>
<% for i, v in ipairs(mesh.attrs or {}) do %>
- <th<%= attr('data-key', v[1]) .. attr('data-suffix', v[3]) %>><%| v[2] %></th>
+ <th<%= attr('class', 'row-' .. v[1] ) .. attr('data-key', v[1]) .. attr('data-suffix', v[3]) %>><%| v[2] %></th>
<% end %>
<% if wireless then %>
- <th>dBm</th>
- <th><%:Distance%></th>
- <th><%:Last seen%></th>
+ <th class="row-signal">dBm</th>
+ <th class="row-distance"><%:Distance%></th>
+ <th class="row-inactive"><%:Last seen%></th>
<% end %>
</tr>
</table>
diff --git a/package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.css b/package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.css
index a6a974e2c..b725fe0bb 100644
--- a/package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.css
+++ b/package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.css
@@ -1 +1 @@
-html,body,div,span,h1,h2,h3,dl,dt,dd,canvas,header,table,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{background:rgba(0,0,0,0.12);font-family:Roboto, Lucida Grande, sans, Arial;color:rgba(0,0,0,0.87);font-size:14px;line-height:1}a{color:rgba(220,0,103,0.87);text-decoration:none;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover{text-decoration:underline}h1{font-weight:bold}h2{font-size:16px;margin-bottom:16px;color:rgba(0,0,0,0.54)}h3{font-size:15px;margin-top:16px;margin-bottom:8px;color:rgba(0,0,0,0.54)}header{display:flex;padding:0 14px;background:#dc0067;color:rgba(255,255,255,0.98);position:absolute;top:0;width:100%;box-sizing:border-box;height:20vh;z-index:-1;box-shadow:0px 5px 6px rgba(0,0,0,0.16),0px 1.5px 3px rgba(0,0,0,0.23);white-space:nowrap}header h1{font-size:24px;margin:10px 0;padding:6px 0;text-overflow:ellipsis;overflow:hidden;flex:1}.container{display:flex;max-width:90vw;margin:64px auto 24px auto;background:#fdfdfd;box-shadow:0px 5px 20px rgba(0,0,0,0.19),0px 3px 6px rgba(0,0,0,0.23)}.container>.frame{flex:1;border-style:solid;border-color:rgba(0,0,0,0.12);box-sizing:border-box;padding:16px}.container>.frame+.frame{border-width:0 0 0 1px}dt,th{font-weight:bold;color:rgba(0,0,0,0.87)}dt{margin-bottom:4px}th,td{text-align:left;padding:4px 16px 4px 0}th:last-child,td:last-child{padding-right:0}dd,td{font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.54)}dd{margin-bottom:16px}table{border-collapse:collapse;border-spacing:0}table.datatable{width:100%}table.datatable th,table.datatable td{font-size:1em;white-space:nowrap}table.datatable th:last-child,table.datatable td:last-child{width:100%}table.datatable tr.inactive{opacity:0.33}table.datatable tr.highlight{background:rgba(255,180,0,0.25)}canvas.signalgraph{margin-top:8px;width:100%}@media only screen and (max-width: 1250px){.container{max-width:none;margin:56px 0 0}header{height:56px;z-index:1;position:fixed}}@media only screen and (max-width: 700px){.container{display:block}.container>.frame+.frame{border-width:1px 0 0 0}}
+html,body,div,span,h1,h2,h3,dl,dt,dd,canvas,header,table,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{background:rgba(0,0,0,0.12);font-family:Roboto, Lucida Grande, sans, Arial;color:rgba(0,0,0,0.87);font-size:14px;line-height:1}a{color:rgba(220,0,103,0.87);text-decoration:none;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover{text-decoration:underline}h1{font-weight:bold}h2{font-size:16px;margin-bottom:16px;color:rgba(0,0,0,0.54)}h3{font-size:15px;margin-top:16px;margin-bottom:8px;color:rgba(0,0,0,0.54)}header{display:flex;padding:0 14px;background:#dc0067;color:rgba(255,255,255,0.98);position:absolute;top:0;width:100%;box-sizing:border-box;height:20vh;z-index:-1;box-shadow:0px 5px 6px rgba(0,0,0,0.16),0px 1.5px 3px rgba(0,0,0,0.23);white-space:nowrap}header h1{font-size:24px;margin:10px 0;padding:6px 0;text-overflow:ellipsis;overflow:hidden;flex:1}.container{display:flex;max-width:90vw;margin:64px auto 24px auto;background:#fdfdfd;box-shadow:0px 5px 20px rgba(0,0,0,0.19),0px 3px 6px rgba(0,0,0,0.23)}.container>.frame{flex:1;border-style:solid;border-color:rgba(0,0,0,0.12);box-sizing:border-box;padding:16px}.container>.frame+.frame{border-width:0 0 0 1px}.container>.frame-wide{flex:2}dt,th,td::before{font-weight:bold;color:rgba(0,0,0,0.87)}dt{margin-bottom:4px}th,td{text-align:left;padding:4px 16px 4px 0}th:last-child,td:last-child{padding-right:0}dd,td{font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.54)}dd{margin-bottom:16px}table{border-collapse:collapse;border-spacing:0}table.datatable{width:100%;table-layout:fixed}table.datatable th,table.datatable td{font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.datatable th.row-tq{width:42px}table.datatable th.row-signal{width:36px}table.datatable th.row-distance{width:90px}table.datatable th.row-inactive{width:130px}table.datatable tr.inactive{opacity:0.33}table.datatable tr.highlight{background:rgba(255,180,0,0.25)}canvas.signalgraph{margin-top:8px;width:100%}@media only screen and (max-width: 1250px){.container{max-width:none;margin:56px 0 0}header{height:56px;z-index:1;position:fixed}.datatable tr{display:block;margin-bottom:15px}.datatable tr:first-child{margin-bottom:0}.datatable th{display:none}.datatable td{display:block;position:relative;padding-left:150px;max-width:calc(100% - 150px)}.datatable td::before{position:absolute;left:5px;content:attr(data-label)}}@media only screen and (max-width: 700px){.container{display:block}.container>.frame+.frame{border-width:1px 0 0 0}}
diff --git a/package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.js b/package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.js
index 87e337895..de3f86b20 100644
--- a/package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.js
+++ b/package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.js
@@ -1 +1 @@
-"use strict";!function(){var a=JSON.parse(document.body.getAttribute("data-translations"));function i(t,e){return t.toFixed(e).replace(/\./,a["."])}function o(t,e){e--;for(var n=t;10<=n&&0<e;n/=10)e--;return i(t,e)}function r(t){return function(t,e,n){var r=0;if(void 0===n)return"- ";for(;e<n&&r<t.length-1;)n/=e,r++;return(n=o(n,3))+" "+t[r]}(["","K","M","G","T"],1024,t)}String.prototype.sprintf=function(){var t=0,e=arguments;return this.replace(/%s/g,function(){return e[t++]})};var s={id:function(t){return t},decimal:function(t){return i(t,2)},percent:function(t){return a["%s used"].sprintf(o(100*t,3)+"%")},memory:function(t){var e=1-t.available/t.total;return s.percent(e)},time:function(t){var e=Math.round(t/60),n=Math.floor(e/1440),r=Math.floor(e%1440/60);e=Math.floor(e%60);var i="";return 1===n?i+=a["1 day"]+", ":1<n&&(i+=a["%s days"].sprintf(n)+", "),i+=r+":",e<10&&(i+="0"),i+=e},packetsDiff:function(t,e,n){if(0<n)return r=(t-e)/n,a["%s packets/s"].sprintf(i(r,0));var r},bytesDiff:function(t,e,n){if(0<n)return r(8*((t-e)/n))+"bps"},bytes:function(t){return r(t)+"B"},neighbour:function(t){if(!t)return"";for(var e in c){var n=c[e].lookup_neigh(t);if(n)return"via "+n.get_hostname()+" ("+e+")"}return"via "+t+" (unknown iface)"}};function f(e,t){return t.split("/").forEach(function(t){e=e&&e[t]}),e}function l(t,n){var e=new EventSource(t),r={};e.onmessage=function(t){var e=JSON.parse(t.data);n(e,r),r=e},e.onerror=function(){e.close(),window.setTimeout(function(){l(t,n)},3e3)}}var C,w=document.body.getAttribute("data-node-address");try{C=JSON.parse(document.body.getAttribute("data-node-location"))}catch(t){}function t(t){var e=document.getElementById("mesh-vpn");if(t){e.style.display="";for(var i=document.getElementById("mesh-vpn-peers");i.lastChild;)i.removeChild(i.lastChild);var n=function e(n,r){return Object.keys(r.peers||{}).forEach(function(t){n.push([t,r.peers[t]])}),Object.keys(r.groups||{}).forEach(function(t){e(n,r.groups[t])}),n}([],t);n.sort(),n.forEach(function(t){var e=document.createElement("tr"),n=document.createElement("th");n.textContent=t[0],e.appendChild(n);var r=document.createElement("td");t[1]?r.textContent=a.connected+" ("+s.time(t[1].established)+")":r.textContent=a["not connected"],e.appendChild(r),i.appendChild(e)})}else e.style.display="none"}var e=document.querySelectorAll("[data-statistics]");l("/cgi-bin/dyn/statistics",function(o,c){var u=o.uptime-c.uptime;e.forEach(function(t){var e=t.getAttribute("data-statistics"),n=t.getAttribute("data-format"),r=f(c,e),i=f(o,e);try{var a=s[n](i,r,u);void 0!==a&&(t.textContent=a)}catch(t){console.error(t)}});try{t(o.mesh_vpn)}catch(t){console.error(t)}});var c={};function E(a){var o=document.createElement("canvas"),c=o.getContext("2d"),u=null;return{canvas:o,highlight:!1,resize:function(t,e){try{c.getImageData(0,0,t,e)}catch(t){}o.width=t,o.height=e},draw:function(t,e){var n,r,i=e(u);c.clearRect(t,0,5,o.height),i&&(n=t,r=i,c.beginPath(),c.fillStyle=a,c.arc(n,r,1.2,0,2*Math.PI,!1),c.closePath(),c.fill())},set:function(t){u=t}}}function h(){var u=-100,s=0,n=0,r=[],f=document.createElement("canvas");f.className="signalgraph",f.height=200;var l=f.getContext("2d");function t(){f.width=f.clientWidth,r.forEach(function(t){t.resize(f.width,f.height)})}function i(){if(0!==f.clientWidth){f.width!==f.clientWidth&&t(),l.clearRect(0,0,f.width,f.height);var e=!1;r.forEach(function(t){t.highlight&&(e=!0)}),l.save(),r.forEach(function(t){e&&(l.globalAlpha=.2),t.highlight&&(l.globalAlpha=1),t.draw(n,function(t){return e=t,n=u,r=s,i=f.height,(1-(e-n)/(r-n))*i;var e,n,r,i}),l.drawImage(t.canvas,0,0)}),l.restore(),l.save(),l.beginPath(),l.strokeStyle="rgba(255, 180, 0, 0.15)",l.lineWidth=5,l.moveTo(n+2.5,0),l.lineTo(n+2.5,f.height),l.stroke(),function(){var t,e,n,r,i=Math.floor(f.height/40);l.save(),l.lineWidth=.5,l.strokeStyle="rgba(0, 0, 0, 0.25)",l.fillStyle="rgba(0, 0, 0, 0.5)",l.textAlign="end",l.textBaseline="bottom",l.beginPath();for(var a=0;a<i;a++){var o=f.height-40*a;l.moveTo(0,o-.5),l.lineTo(f.width,o-.5);var c=Math.round((t=o,e=u,n=s,r=f.height,(e*t+n*(r-t))/r))+" dBm";l.save(),l.strokeStyle="rgba(255, 255, 255, 0.9)",l.lineWidth=4,l.miterLimit=2,l.strokeText(c,f.width-5,o-2.5),l.fillText(c,f.width-5,o-2.5),l.restore()}l.stroke(),l.strokeStyle="rgba(0, 0, 0, 0.83)",l.lineWidth=1.5,l.strokeRect(.5,.5,f.width-1,f.height-1),l.restore()}()}}t(),window.addEventListener("resize",i);var a=0;return window.requestAnimationFrame(function t(e){40<e-a&&(i(),n=(n+1)%f.width,a=e),window.requestAnimationFrame(t)}),{el:f,addSignal:function(t){r.push(t),t.resize(f.width,f.height)},removeSignal:function(t){r.splice(r.indexOf(t),1)}}}function d(t,e,n,r){var i=t.table.firstElementChild,a=t.table.insertRow(),o=a.insertCell();if(t.wireless){var c=document.createElement("span");c.textContent="⬤ ",c.style.color=n,o.appendChild(c)}var h=document.createElement("span");h.textContent=e,o.appendChild(h);var u,d,s,f,l,v={};function g(t){var e=t.getAttribute("data-key");if(e){var n=t.getAttribute("data-suffix")||"",r=a.insertCell();r.textContent="-",v[e]={td:r,suffix:n}}}for(var m=0;m<i.children.length;m++)g(i.children[m]);function p(){l&&window.clearTimeout(l),l=window.setTimeout(function(){f&&t.signalgraph.removeSignal(f),a.parentNode.removeChild(a),r()},6e4)}function b(t){var e=function(t){"::"==t.slice(0,2)&&(t="0"+t),"::"==t.slice(-2)&&(t+="0");var e=t.split(":"),n=e.length,r=[];return e.forEach(function(t,e){if(""===t)for(;n++<=8;)r.push(0);else{if(!/^[a-f0-9]{1,4}$/i.test(t))return;r.push(parseInt(t,16))}}),r}(t);if(e){var n="";return e.forEach(function(t){n+=("0000000000000000"+t.toString(2)).slice(-16)}),n}}function y(t){var r=b(w);if(t&&t[0]){(t=t.map(function(t){var e=b(t);if(!e)return[-1];var n=0;return r&&(n=function(t,e){var n;for(n=0;n<t.length&&n<e.length&&t[n]===e[n];n++);return n}(r,e)),[n,e,t]})).sort(function(t,e){return t[0]<e[0]?1:t[0]>e[0]?-1:t[1]<e[1]?-1:t[1]>e[1]?1:0});var e=t[0][2];return e&&!/^fe80:/i.test(e)?e:void 0}}return t.wireless&&((u=a.insertCell()).textContent="-",(d=a.insertCell()).textContent="-",(s=a.insertCell()).textContent="-",f=E(n),t.signalgraph.addSignal(f)),a.onmouseenter=function(){a.classList.add("highlight"),f&&(f.highlight=!0)},a.onmouseleave=function(){a.classList.remove("highlight"),f&&(f.highlight=!1)},p(),{get_hostname:function(){return h.textContent},update_nodeinfo:function(t){var e,n,r,i,a,o,c,u,s=y(t.network.addresses);if(s){if("span"===h.nodeName.toLowerCase()){var f=h;h=document.createElement("a"),f.parentNode.replaceChild(h,f)}h.href="http://["+s+"]/"}if(h.textContent=t.hostname,C&&t.location){var l=(e=C.latitude,n=C.longitude,r=t.location.latitude,i=t.location.longitude,a=Math.PI/180,o=(r*=a)-(e*=a),c=(i*=a)-(n*=a),u=Math.sin(o/2)*Math.sin(o/2)+Math.sin(c/2)*Math.sin(c/2)*Math.cos(e)*Math.cos(r),2*Math.asin(Math.sqrt(u))*6372.8);d.textContent=Math.round(1e3*l)+" m"}p()},update_mesh:function(n){Object.keys(v).forEach(function(t){var e=v[t];e.td.textContent=n[t]+e.suffix}),p()},update_wifi:function(t){u.textContent=t.signal,s.textContent=Math.round(t.inactive/1e3)+" s",a.classList.toggle("inactive",200<t.inactive),f.set(200<t.inactive?null:t.signal),p()}}}function u(t,e,n){var r,a={};n&&(r=h(),t.appendChild(r.el));var i={table:t.firstElementChild,signalgraph:r,ifname:e,wireless:n},o=!1,c={},u=[];function s(){if(!o){o=!0;var t=new EventSource("/cgi-bin/dyn/neighbours-nodeinfo?"+encodeURIComponent(e));t.addEventListener("neighbour",function(t){try{var n=JSON.parse(t.data);(r=[],i=n.network.mesh,Object.keys(i).forEach(function(t){var e=i[t].interfaces;Object.keys(e).forEach(function(t){e[t].forEach(function(t){r.push(t)})})}),r).forEach(function(t){var e=a[t];if(e){delete c[t];try{e.update_nodeinfo(n)}catch(t){console.error(t)}}})}catch(t){console.error(t)}var r,i},!1),t.onerror=function(){t.close(),o=!1,Object.keys(c).forEach(function(t){0<c[t]&&(c[t]--,s())})}}}function f(t){var e=a[t];return e||(c[t]=3,e=a[t]=d(i,t,(u[0]||(u=["#396AB1","#DA7C30","#3E9651","#CC2529","#535154","#6B4C9A","#922428","#948B3D"]),u.shift()),function(){delete c[t],delete a[t]}),s()),e}return n&&l("/cgi-bin/dyn/stations?"+encodeURIComponent(e),function(n){Object.keys(n).forEach(function(t){var e=n[t];f(t).update_wifi(e)})}),{get_neigh:f,lookup_neigh:function(t){return a[t]}}}document.querySelectorAll("[data-interface]").forEach(function(t){var e=t.getAttribute("data-interface"),n=(t.getAttribute("data-interface-address"),!!t.getAttribute("data-interface-wireless"));c[e]=u(t,e,n)});var n=document.body.getAttribute("data-mesh-provider");n&&l(n,function(r){Object.keys(r).forEach(function(t){var e=r[t],n=c[e.ifname];n&&n.get_neigh(t).update_mesh(e)})})}();
\ No newline at end of file
+"use strict";!function(){var a=JSON.parse(document.body.getAttribute("data-translations"));function i(t,e){return t.toFixed(e).replace(/\./,a["."])}function o(t,e){e--;for(var n=t;10<=n&&0<e;n/=10)e--;return i(t,e)}function r(t){return function(t,e,n){var r=0;if(void 0===n)return"- ";for(;e<n&&r<t.length-1;)n/=e,r++;return(n=o(n,3))+" "+t[r]}(["","K","M","G","T"],1024,t)}String.prototype.sprintf=function(){var t=0,e=arguments;return this.replace(/%s/g,function(){return e[t++]})};var u={id:function(t){return t},decimal:function(t){return i(t,2)},percent:function(t){return a["%s used"].sprintf(o(100*t,3)+"%")},memory:function(t){var e=1-t.available/t.total;return u.percent(e)},time:function(t){var e=Math.round(t/60),n=Math.floor(e/1440),r=Math.floor(e%1440/60);e=Math.floor(e%60);var i="";return 1===n?i+=a["1 day"]+", ":1<n&&(i+=a["%s days"].sprintf(n)+", "),i+=r+":",e<10&&(i+="0"),i+=e},packetsDiff:function(t,e,n){if(0<n)return r=(t-e)/n,a["%s packets/s"].sprintf(i(r,0));var r},bytesDiff:function(t,e,n){if(0<n)return r(8*((t-e)/n))+"bps"},bytes:function(t){return r(t)+"B"},neighbour:function(t){if(!t)return"";for(var e in c){var n=c[e].lookup_neigh(t);if(n)return"via "+n.get_hostname()+" ("+e+")"}return"via "+t+" (unknown iface)"}};function l(e,t){return t.split("/").forEach(function(t){e=e&&e[t]}),e}function h(t,n){var e=new EventSource(t),r={};e.onmessage=function(t){var e=JSON.parse(t.data);n(e,r),r=e},e.onerror=function(){e.close(),window.setTimeout(function(){h(t,n)},3e3)}}var y,w=document.body.getAttribute("data-node-address");try{y=JSON.parse(document.body.getAttribute("data-node-location"))}catch(t){}function t(t){var e=document.getElementById("mesh-vpn");if(t){e.style.display="";for(var i=document.getElementById("mesh-vpn-peers");i.lastChild;)i.removeChild(i.lastChild);var n=function e(n,r){return Object.keys(r.peers||{}).forEach(function(t){n.push([t,r.peers[t]])}),Object.keys(r.groups||{}).forEach(function(t){e(n,r.groups[t])}),n}([],t);n.sort(),n.forEach(function(t){var e=document.createElement("tr"),n=document.createElement("th");n.textContent=t[0],e.appendChild(n);var r=document.createElement("td");t[1]?r.textContent=a.connected+" ("+u.time(t[1].established)+")":r.textContent=a["not connected"],e.appendChild(r),i.appendChild(e)})}else e.style.display="none"}var e=document.querySelectorAll("[data-statistics]");h("/cgi-bin/dyn/statistics",function(o,c){var s=o.uptime-c.uptime;e.forEach(function(t){var e=t.getAttribute("data-statistics"),n=t.getAttribute("data-format"),r=l(c,e),i=l(o,e);try{var a=u[n](i,r,s);void 0!==a&&(t.textContent=a)}catch(t){console.error(t)}});try{t(o.mesh_vpn)}catch(t){console.error(t)}});var c={};function E(a){var o=document.createElement("canvas"),c=o.getContext("2d"),s=null;return{canvas:o,highlight:!1,resize:function(t,e){try{c.getImageData(0,0,t,e)}catch(t){}o.width=t,o.height=e},draw:function(t,e){var n,r,i=e(s);c.clearRect(t,0,5,o.height),i&&(n=t,r=i,c.beginPath(),c.fillStyle=a,c.arc(n,r,1.2,0,2*Math.PI,!1),c.closePath(),c.fill())},set:function(t){s=t}}}function f(){var s=-100,u=0,n=0,r=[],l=document.createElement("canvas");l.className="signalgraph",l.height=200;var h=l.getContext("2d");function t(){l.width=l.clientWidth,r.forEach(function(t){t.resize(l.width,l.height)})}function i(){if(0!==l.clientWidth){l.width!==l.clientWidth&&t(),h.clearRect(0,0,l.width,l.height);var e=!1;r.forEach(function(t){t.highlight&&(e=!0)}),h.save(),r.forEach(function(t){e&&(h.globalAlpha=.2),t.highlight&&(h.globalAlpha=1),t.draw(n,function(t){return e=t,n=s,r=u,i=l.height,(1-(e-n)/(r-n))*i;var e,n,r,i}),h.drawImage(t.canvas,0,0)}),h.restore(),h.save(),h.beginPath(),h.strokeStyle="rgba(255, 180, 0, 0.15)",h.lineWidth=5,h.moveTo(n+2.5,0),h.lineTo(n+2.5,l.height),h.stroke(),function(){var t,e,n,r,i=Math.floor(l.height/40);h.save(),h.lineWidth=.5,h.strokeStyle="rgba(0, 0, 0, 0.25)",h.fillStyle="rgba(0, 0, 0, 0.5)",h.textAlign="end",h.textBaseline="bottom",h.beginPath();for(var a=0;a<i;a++){var o=l.height-40*a;h.moveTo(0,o-.5),h.lineTo(l.width,o-.5);var c=Math.round((t=o,e=s,n=u,r=l.height,(e*t+n*(r-t))/r))+" dBm";h.save(),h.strokeStyle="rgba(255, 255, 255, 0.9)",h.lineWidth=4,h.miterLimit=2,h.strokeText(c,l.width-5,o-2.5),h.fillText(c,l.width-5,o-2.5),h.restore()}h.stroke(),h.strokeStyle="rgba(0, 0, 0, 0.83)",h.lineWidth=1.5,h.strokeRect(.5,.5,l.width-1,l.height-1),h.restore()}()}}t(),window.addEventListener("resize",i);var a=0;return window.requestAnimationFrame(function t(e){40<e-a&&(i(),n=(n+1)%l.width,a=e),window.requestAnimationFrame(t)}),{el:l,addSignal:function(t){r.push(t),t.resize(l.width,l.height)},removeSignal:function(t){r.splice(r.indexOf(t),1)}}}function d(t,e,n,r){var i=t.table.firstElementChild,a=t.table.insertRow(),o=a.insertCell();if(o.setAttribute("data-label",i.children[0].textContent),t.wireless){var c=document.createElement("span");c.textContent="⬤ ",c.style.color=n,o.appendChild(c)}var f=document.createElement("span");f.textContent=e,o.appendChild(f);var s,d,u,l,h,g={};function v(t){var e=t.getAttribute("data-key");if(e){var n=t.getAttribute("data-suffix")||"",r=a.insertCell();r.textContent="-",r.setAttribute("data-label",t.textContent),g[e]={td:r,suffix:n}}}for(var m=0;m<i.children.length;m++)v(i.children[m]);function p(){h&&window.clearTimeout(h),h=window.setTimeout(function(){l&&t.signalgraph.removeSignal(l),a.parentNode.removeChild(a),r()},6e4)}function b(t){var e=function(t){"::"==t.slice(0,2)&&(t="0"+t),"::"==t.slice(-2)&&(t+="0");var e=t.split(":"),n=e.length,r=[];return e.forEach(function(t,e){if(""===t)for(;n++<=8;)r.push(0);else{if(!/^[a-f0-9]{1,4}$/i.test(t))return;r.push(parseInt(t,16))}}),r}(t);if(e){var n="";return e.forEach(function(t){n+=("0000000000000000"+t.toString(2)).slice(-16)}),n}}function C(t){var r=b(w);if(t&&t[0]){(t=t.map(function(t){var e=b(t);if(!e)return[-1];var n=0;return r&&(n=function(t,e){var n;for(n=0;n<t.length&&n<e.length&&t[n]===e[n];n++);return n}(r,e)),[n,e,t]})).sort(function(t,e){return t[0]<e[0]?1:t[0]>e[0]||t[1]<e[1]?-1:t[1]>e[1]?1:0});var e=t[0][2];return e&&!/^fe80:/i.test(e)?e:void 0}}return t.wireless&&((s=a.insertCell()).textContent="-",s.setAttribute("data-label",i.children[Object.keys(g).length+1].textContent),(d=a.insertCell()).textContent="-",d.setAttribute("data-label",i.children[Object.keys(g).length+2].textContent),(u=a.insertCell()).textContent="-",u.setAttribute("data-label",i.children[Object.keys(g).length+3].textContent),l=E(n),t.signalgraph.addSignal(l)),a.onmouseenter=function(){a.classList.add("highlight"),l&&(l.highlight=!0)},a.onmouseleave=function(){a.classList.remove("highlight"),l&&(l.highlight=!1)},p(),{get_hostname:function(){return f.textContent},update_nodeinfo:function(t){var e,n,r,i,a,o,c,s,u=C(t.network.addresses);if(u){if("span"===f.nodeName.toLowerCase()){var l=f;f=document.createElement("a"),l.parentNode.replaceChild(f,l)}f.href="http://["+u+"]/"}if(f.textContent=t.hostname,y&&t.location){var h=(e=y.latitude,n=y.longitude,r=t.location.latitude,i=t.location.longitude,a=Math.PI/180,o=(r*=a)-(e*=a),c=(i*=a)-(n*=a),s=Math.sin(o/2)*Math.sin(o/2)+Math.sin(c/2)*Math.sin(c/2)*Math.cos(e)*Math.cos(r),2*Math.asin(Math.sqrt(s))*6372.8);d.textContent=Math.round(1e3*h)+" m"}p()},update_mesh:function(n){Object.keys(g).forEach(function(t){var e=g[t];e.td.textContent=n[t]+e.suffix}),p()},update_wifi:function(t){s.textContent=t.signal,u.textContent=Math.round(t.inactive/1e3)+" s",a.classList.toggle("inactive",200<t.inactive),l.set(200<t.inactive?null:t.signal),p()}}}function s(t,e,n){var r,a={};n&&(r=f(),t.appendChild(r.el));var i={table:t.firstElementChild,signalgraph:r,ifname:e,wireless:n},o=!1,c={},s=[];function u(){if(!o){o=!0;var t=new EventSource("/cgi-bin/dyn/neighbours-nodeinfo?"+encodeURIComponent(e));t.addEventListener("neighbour",function(t){try{var n=JSON.parse(t.data);r=[],i=n.network.mesh,Object.keys(i).forEach(function(t){var e=i[t].interfaces;Object.keys(e).forEach(function(t){e[t].forEach(function(t){r.push(t)})})}),r.forEach(function(t){var e=a[t];if(e){delete c[t];try{e.update_nodeinfo(n)}catch(t){console.error(t)}}})}catch(t){console.error(t)}var r,i},!1),t.onerror=function(){t.close(),o=!1,Object.keys(c).forEach(function(t){0<c[t]&&(c[t]--,u())})}}}function l(t){var e=a[t];return e||(c[t]=3,e=a[t]=d(i,t,(s[0]||(s=["#396AB1","#DA7C30","#3E9651","#CC2529","#535154","#6B4C9A","#922428","#948B3D"]),s.shift()),function(){delete c[t],delete a[t]}),u()),e}return n&&h("/cgi-bin/dyn/stations?"+encodeURIComponent(e),function(n){Object.keys(n).forEach(function(t){var e=n[t];l(t).update_wifi(e)})}),{get_neigh:l,lookup_neigh:function(t){return a[t]}}}document.querySelectorAll("[data-interface]").forEach(function(t){var e=t.getAttribute("data-interface"),n=(t.getAttribute("data-interface-address"),!!t.getAttribute("data-interface-wireless"));c[e]=s(t,e,n)});var n=document.body.getAttribute("data-mesh-provider");n&&h(n,function(r){Object.keys(r).forEach(function(t){var e=r[t],n=c[e.ifname];n&&n.get_neigh(t).update_mesh(e)})})}();
\ No newline at end of file
diff --git a/package/gluon-status-page/javascript/status-page.js b/package/gluon-status-page/javascript/status-page.js
index 8d97463d8..7bfea2ca3 100644
--- a/package/gluon-status-page/javascript/status-page.js
+++ b/package/gluon-status-page/javascript/status-page.js
@@ -433,6 +433,7 @@
var el = iface.table.insertRow();
var tdHostname = el.insertCell();
+ tdHostname.setAttribute('data-label', th.children[0].textContent);
if (iface.wireless) {
var marker = document.createElement("span");
@@ -456,6 +457,7 @@
var td = el.insertCell();
td.textContent = '-';
+ td.setAttribute('data-label', attr.textContent);
meshAttrs[key] = {
'td': td,
@@ -474,10 +476,24 @@
if (iface.wireless) {
tdSignal = el.insertCell();
tdSignal.textContent = '-';
+ tdSignal.setAttribute(
+ 'data-label',
+ th.children[Object.keys(meshAttrs).length + 1].textContent
+ );
+
tdDistance = el.insertCell();
tdDistance.textContent = '-';
+ tdDistance.setAttribute(
+ 'data-label',
+ th.children[Object.keys(meshAttrs).length + 2].textContent
+ );
+
tdInactive = el.insertCell();
tdInactive.textContent = '-';
+ tdInactive.setAttribute(
+ 'data-label',
+ th.children[Object.keys(meshAttrs).length + 3].textContent
+ );
signal = Signal(color);
iface.signalgraph.addSignal(signal);
diff --git a/package/gluon-status-page/sass/status-page.scss b/package/gluon-status-page/sass/status-page.scss
index cfaa561fa..d665c743e 100644
--- a/package/gluon-status-page/sass/status-page.scss
+++ b/package/gluon-status-page/sass/status-page.scss
@@ -109,10 +109,14 @@ header {
& + .frame {
border-width: 0 0 0 1px;
}
+
+ &-wide {
+ flex: 2;
+ }
}
}
-dt, th {
+dt, th, td::before {
font-weight: bold;
color: rgba(0, 0, 0, 0.87);
}
@@ -146,13 +150,30 @@ table {
&.datatable {
width: 100%;
+ table-layout: fixed;
th, td {
font-size: 1em;
white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ th {
+ &.row-tq {
+ width: 42px;
+ }
- &:last-child {
- width: 100%;
+ &.row-signal {
+ width: 36px;
+ }
+
+ &.row-distance {
+ width: 90px;
+ }
+
+ &.row-inactive {
+ width: 130px;
}
}
@@ -182,6 +203,34 @@ canvas.signalgraph {
z-index: 1;
position: fixed;
}
+
+ .datatable {
+ tr {
+ display: block;
+ margin-bottom: 15px;
+
+ &:first-child {
+ margin-bottom: 0;
+ }
+ }
+
+ th {
+ display: none;
+ }
+
+ td {
+ display: block;
+ position: relative;
+ padding-left: 150px;
+ max-width: calc(100% - 150px);
+
+ &::before {
+ position: absolute;
+ left: 5px;
+ content: attr(data-label)
+ }
+ }
+ }
}
@media only screen and (max-width: 700px) {
--
GitLab