Commit e6c835809ff3378173c42cc91fccedf5521f6366
working scrolling for network tab
mix irving committed on 1/11/2017, 3:14:40 AMParent: a985a4d720c6d68c96dba230b7c58072d5663d71
Files changed
| modules_extra/network.js | changed |
| modules_extra/network.js | |||
|---|---|---|---|
| @@ -25,9 +25,8 @@ | |||
| 25 | 25 … | function legacyToMultiServer(addr) { | |
| 26 | 26 … | return 'net:'+addr.host + ':'+addr.port + '~shs:'+addr.key.substring(1).replace('.ed25519','') | |
| 27 | 27 … | } | |
| 28 | 28 … | ||
| 29 | -//types of peers | ||
| 30 | 29 … | ||
| 31 | 30 … | ||
| 32 | 31 … | //on the same wifi network | |
| 33 | 32 … | function isLocal (e) { | |
| @@ -72,21 +71,9 @@ | |||
| 72 | 71 … | function origin (e) { | |
| 73 | 72 … | return e.source === 'local' ? 0 : 1 | |
| 74 | 73 … | } | |
| 75 | 74 … | ||
| 76 | -var states = { | ||
| 77 | - connected: 3, | ||
| 78 | - connecting: 2 | ||
| 79 | -} | ||
| 80 | 75 … | ||
| 81 | -var types = { | ||
| 82 | - modern: 4, | ||
| 83 | - legacy: 3, | ||
| 84 | - inactive: 2, | ||
| 85 | - unattempted: 1, | ||
| 86 | - other: 0 | ||
| 87 | -} | ||
| 88 | - | ||
| 89 | 76 … | function round(n) { | |
| 90 | 77 … | return Math.round(n*100)/100 | |
| 91 | 78 … | } | |
| 92 | 79 … | ||
| @@ -99,75 +86,89 @@ | |||
| 99 | 86 … | else | |
| 100 | 87 … | return round(s)+'ms' | |
| 101 | 88 … | } | |
| 102 | 89 … | ||
| 90 … | +function peerListSort (a, b) { | ||
| 91 … | + var states = { | ||
| 92 … | + connected: 3, | ||
| 93 … | + connecting: 2 | ||
| 94 … | + } | ||
| 103 | 95 … | ||
| 96 … | + //types of peers | ||
| 97 … | + var types = { | ||
| 98 … | + modern: 4, | ||
| 99 … | + legacy: 3, | ||
| 100 … | + inactive: 2, | ||
| 101 … | + unattempted: 1, | ||
| 102 … | + other: 0 | ||
| 103 … | + } | ||
| 104 | 104 … | ||
| 105 … | + return ( | ||
| 106 … | + (states[b.state] || 0) - (states[a.state] || 0) | ||
| 107 … | + || origin(b) - origin(a) | ||
| 108 … | + || types[getType(b)] - types[getType(a)] | ||
| 109 … | + || b.stateChange - a.stateChange | ||
| 110 … | + ) | ||
| 111 … | +} | ||
| 112 … | + | ||
| 113 … | + | ||
| 105 | 114 … | exports.create = function (api) { | |
| 106 | 115 … | ||
| 107 | 116 … | return { | |
| 108 | 117 … | menu_items: () => h('a', {href: '#/network'}, '/network'), | |
| 109 | 118 … | builtin_tabs: () => ['/network'], | |
| 119 … | + screen_view | ||
| 120 … | + } | ||
| 121 … | + | ||
| 122 … | + function screen_view (path) { | ||
| 123 … | + if (path !== '/network') return | ||
| 110 | 124 … | ||
| 111 | - screen_view: function (path) { | ||
| 125 … | + var ol = h('ul', { className: 'network' }) | ||
| 112 | 126 … | ||
| 113 | - if(path !== '/network') return | ||
| 127 … | + ;(function poll () { | ||
| 114 | 128 … | ||
| 115 | - var ol = h('ul.network') | ||
| 129 … | + //if this tab isn't open, don't update. | ||
| 130 … | + //todo: make a better way to do this... | ||
| 131 … | + if (!isVisible(ol)) return setTimeout(poll, 1000) | ||
| 116 | 132 … | ||
| 117 | - ;(function poll () { | ||
| 118 | - | ||
| 119 | - //if this tab isn't open, don't update. | ||
| 120 | - //todo: make a better way to do this... | ||
| 121 | - if(!isVisible(ol)) | ||
| 122 | - return setTimeout(poll, 1000) | ||
| 123 | - | ||
| 124 | - api.sbot_gossip_peers(function (err, list) { | ||
| 125 | - ol.innerHTML = '' | ||
| 126 | - list.sort(function (a, b) { | ||
| 127 | - return ( | ||
| 128 | - (states[b.state] || 0) - (states[a.state] || 0) | ||
| 129 | - || origin(b) - origin(a) | ||
| 130 | - || types[getType(b)] - types[getType(a)] | ||
| 131 | - || b.stateChange - a.stateChange | ||
| 133 … | + api.sbot_gossip_peers((err, list) => { | ||
| 134 … | + ol.innerHTML = '' | ||
| 135 … | + list.sort(peerListSort).forEach(peer => { | ||
| 136 … | + ol.appendChild(h('div', [ | ||
| 137 … | + api.avatar(peer.key, 'thumbnail'), | ||
| 138 … | + h('div', [ | ||
| 139 … | + peer.state || 'not connected', | ||
| 140 … | + ' ', | ||
| 141 … | + getType(peer), | ||
| 142 … | + ' ', | ||
| 143 … | + //TODO: show nicer details, with labels. etc. | ||
| 144 … | + (peer.ping && peer.ping.rtt) ? duration(peer.ping.rtt.mean) : '', | ||
| 145 … | + ' ', | ||
| 146 … | + (peer.ping && peer.ping.skew) ? duration(peer.ping.skew.mean) : '', | ||
| 147 … | + h('label', | ||
| 148 … | + { title: new Date(peer.stateChange).toString() }, | ||
| 149 … | + peer.stateChange && ('(' + human(new Date(peer.stateChange))) + ')' | ||
| 150 … | + ) | ||
| 151 … | + ]), | ||
| 152 … | + 'source:'+peer.source, | ||
| 153 … | + h('pre', legacyToMultiServer(peer)), | ||
| 154 … | + h('button', { | ||
| 155 … | + 'ev-click': () => { | ||
| 156 … | + api.sbot_gossip_connect(peer, (err) => { | ||
| 157 … | + if(err) console.error(err) | ||
| 158 … | + else console.log('connected to', peer) | ||
| 159 … | + }) | ||
| 160 … | + }}, | ||
| 161 … | + 'connect' | ||
| 132 | 162 … | ) | |
| 133 | - }).forEach(function (peer) { | ||
| 134 | - ol.appendChild(h('div', [ | ||
| 135 | - api.avatar(peer.key, 'thumbnail'), | ||
| 136 | - h('div', [ | ||
| 137 | - peer.state || 'not connected', | ||
| 138 | - ' ', | ||
| 139 | - getType(peer), | ||
| 140 | - ' ', | ||
| 141 | - //TODO: show nicer details, with labels. etc. | ||
| 142 | - (peer.ping && peer.ping.rtt) ? duration(peer.ping.rtt.mean) : '', | ||
| 143 | - ' ', | ||
| 144 | - (peer.ping && peer.ping.skew) ? duration(peer.ping.skew.mean) : '', | ||
| 145 | - h('label', | ||
| 146 | - {title: new Date(peer.stateChange).toString()}, | ||
| 147 | - peer.stateChange && ('(' + human(new Date(peer.stateChange))) + ')') | ||
| 148 | - ]), | ||
| 149 | - 'source:'+peer.source, | ||
| 150 | - h('pre', legacyToMultiServer(peer)), | ||
| 151 | - h('button', { | ||
| 152 | - 'ev-click': () => { | ||
| 153 | - api.sbot_gossip_connect(peer, (err) => { | ||
| 154 | - if(err) console.error(err) | ||
| 155 | - else console.log('connected to', peer) | ||
| 156 | - }) | ||
| 157 | - }}, | ||
| 158 | - 'connect' | ||
| 159 | - )]) | ||
| 160 | - ) | ||
| 161 | - }) | ||
| 162 | - | ||
| 163 | - setTimeout(poll, 5000) | ||
| 163 … | + ])) | ||
| 164 | 164 … | }) | |
| 165 | 165 … | ||
| 166 | - })() | ||
| 166 … | + setTimeout(poll, 5000) | ||
| 167 … | + }) | ||
| 167 | 168 … | ||
| 168 | - return h('div.column.scroll-y', ol) | ||
| 169 | - } | ||
| 169 … | + })() | ||
| 170 … | + | ||
| 171 … | + return h('div', { className: 'column scroll-y' }, ol) | ||
| 170 | 172 … | } | |
| 171 | 173 … | } | |
| 172 | 174 … | ||
| 173 | - | ||
Built with git-ssb-web