|
1
|
|
|
define(['sorttable', 'snabbdom', 'd3-interpolate', 'moment', 'helper'], |
|
2
|
|
|
function (SortTable, V, d3Interpolate, moment, helper) { |
|
3
|
|
|
'use strict'; |
|
4
|
|
|
V = V.default; |
|
5
|
|
|
|
|
6
|
|
|
function showGeoURI(d) { |
|
7
|
|
|
if (!helper.hasLocation(d)) { |
|
8
|
|
|
return undefined; |
|
9
|
|
|
} |
|
10
|
|
|
|
|
11
|
|
|
return V.h('td', |
|
12
|
|
|
V.h('a', |
|
13
|
|
|
{ props: { href: 'geo:' + d.location.latitude + ',' + d.location.longitude } }, |
|
14
|
|
|
Number(d.location.latitude.toFixed(6)) + ', ' + Number(d.location.longitude.toFixed(6)) |
|
15
|
|
|
) |
|
16
|
|
|
); |
|
17
|
|
|
} |
|
18
|
|
|
|
|
19
|
|
|
function showStatus(d) { |
|
20
|
|
|
return V.h('td', |
|
21
|
|
|
{ props: { className: d.is_unseen ? 'unseen' : (d.is_online ? 'online' : 'offline') } }, |
|
22
|
|
|
_.t((d.is_online ? 'node.lastOnline' : 'node.lastOffline'), { |
|
23
|
|
|
time: d.lastseen.fromNow(), |
|
24
|
|
|
date: d.lastseen.format('DD.MM.YYYY, H:mm:ss') |
|
25
|
|
|
})); |
|
26
|
|
|
} |
|
27
|
|
|
|
|
28
|
|
|
function showFirmware(d) { |
|
29
|
|
|
return [ |
|
30
|
|
|
helper.dictGet(d, ['firmware', 'release']), |
|
31
|
|
|
helper.dictGet(d, ['firmware', 'base']) |
|
32
|
|
|
].filter(function (n) { |
|
33
|
|
|
return n !== null; |
|
34
|
|
|
}).join(' / ') || undefined; |
|
35
|
|
|
} |
|
36
|
|
|
|
|
37
|
|
|
function showSite(d, config) { |
|
38
|
|
|
var rt = d.site_code; |
|
39
|
|
|
if (config.siteNames) { |
|
40
|
|
|
config.siteNames.forEach(function (t) { |
|
41
|
|
|
if (d.site_code === t.site) { |
|
42
|
|
|
rt = t.name; |
|
43
|
|
|
} |
|
44
|
|
|
}); |
|
45
|
|
|
} |
|
46
|
|
|
return rt; |
|
47
|
|
|
} |
|
48
|
|
|
|
|
49
|
|
|
function showClients(d) { |
|
50
|
|
|
var clients = [ |
|
51
|
|
|
V.h('span', [ |
|
52
|
|
|
d.clients > 0 ? d.clients : _.t('none'), |
|
53
|
|
|
V.h('br'), |
|
54
|
|
|
V.h('i', { props: { className: 'ion-people', title: _.t('node.clients') } }) |
|
55
|
|
|
]), |
|
56
|
|
|
V.h('span', |
|
57
|
|
|
{ props: { className: 'legend-24ghz' } }, |
|
58
|
|
|
[ |
|
59
|
|
|
d.clients_wifi24, |
|
60
|
|
|
V.h('br'), |
|
61
|
|
|
V.h('span', { props: { className: 'symbol', title: '2,4 Ghz' } }) |
|
62
|
|
|
]), |
|
63
|
|
|
V.h('span', |
|
64
|
|
|
{ props: { className: 'legend-5ghz' } }, |
|
65
|
|
|
[ |
|
66
|
|
|
d.clients_wifi5, |
|
67
|
|
|
V.h('br'), |
|
68
|
|
|
V.h('span', { props: { className: 'symbol', title: '5 Ghz' } }) |
|
69
|
|
|
]), |
|
70
|
|
|
V.h('span', |
|
71
|
|
|
{ props: { className: 'legend-others' } }, |
|
72
|
|
|
[ |
|
73
|
|
|
d.clients_other, |
|
74
|
|
|
V.h('br'), |
|
75
|
|
|
V.h('span', { props: { className: 'symbol', title: _.t('others') } }) |
|
76
|
|
|
]) |
|
77
|
|
|
]; |
|
78
|
|
|
|
|
79
|
|
|
return V.h('td', { props: { className: 'clients' } }, clients); |
|
80
|
|
|
} |
|
81
|
|
|
|
|
82
|
|
|
function showIPs(d) { |
|
83
|
|
|
var ips = d.network.addresses; |
|
84
|
|
|
ips.sort(); |
|
85
|
|
|
var string = []; |
|
86
|
|
|
ips.forEach(function (ip, i) { |
|
87
|
|
|
var link = !ip.startsWith('fe80:'); |
|
88
|
|
|
|
|
89
|
|
|
if (i > 0) { |
|
90
|
|
|
string.push(V.h('br')); |
|
91
|
|
|
} |
|
92
|
|
|
|
|
93
|
|
|
if (link) { |
|
94
|
|
|
string.push(V.h('a', { props: { href: 'http://[' + ip + ']/', target: '_blank' } }, ip)); |
|
95
|
|
|
} else { |
|
96
|
|
|
string.push(ip); |
|
97
|
|
|
} |
|
98
|
|
|
}); |
|
99
|
|
|
return V.h('td', string); |
|
100
|
|
|
} |
|
101
|
|
|
|
|
102
|
|
|
function showBar(v, width, warning) { |
|
103
|
|
|
return V.h('span', |
|
104
|
|
|
{ props: { className: 'bar' + (warning ? ' warning' : '') } }, |
|
105
|
|
|
[ |
|
106
|
|
|
V.h('span', |
|
107
|
|
|
{ |
|
108
|
|
|
style: { width: (width * 100) + '%' } |
|
109
|
|
|
}), |
|
110
|
|
|
V.h('label', v) |
|
111
|
|
|
] |
|
112
|
|
|
); |
|
113
|
|
|
} |
|
114
|
|
|
|
|
115
|
|
|
function showLoad(d) { |
|
116
|
|
|
return showBar(d.loadavg.toFixed(2), d.loadavg % 1, d.loadavg >= d.nproc); |
|
117
|
|
|
} |
|
118
|
|
|
|
|
119
|
|
|
function showRAM(d) { |
|
120
|
|
|
return showBar(Math.round(d.memory_usage * 100) + ' %', d.memory_usage, d.memory_usage >= 0.8); |
|
121
|
|
|
} |
|
122
|
|
|
|
|
123
|
|
|
function showAutoupdate(d) { |
|
124
|
|
|
return d.autoupdater.enabled ? _.t('node.activated', { branch: d.autoupdater.branch }) : _.t('node.deactivated'); |
|
125
|
|
|
} |
|
126
|
|
|
|
|
127
|
|
|
function showStatImg(o, d) { |
|
128
|
|
|
var subst = {}; |
|
129
|
|
|
subst['{NODE_ID}'] = d.node_id; |
|
130
|
|
|
subst['{NODE_NAME}'] = d.hostname.replace(/[^a-z0-9\-]/ig, '_'); |
|
131
|
|
|
subst['{TIME}'] = d.lastseen.format('DDMMYYYYHmmss'); |
|
132
|
|
|
subst['{LOCALE}'] = _.locale(); |
|
133
|
|
|
return helper.showStat(V, o, subst); |
|
134
|
|
|
} |
|
135
|
|
|
|
|
136
|
|
|
return function (config, el, router, d, linkScale, nodeDict) { |
|
137
|
|
|
function nodeLink(node) { |
|
138
|
|
|
return V.h('a', { |
|
139
|
|
|
props: { |
|
140
|
|
|
className: node.is_online ? 'online' : 'offline', |
|
141
|
|
|
href: router.generateLink({ node: node.node_id }) |
|
142
|
|
|
}, on: { |
|
143
|
|
|
click: function (e) { |
|
144
|
|
|
router.fullUrl({ node: node.node_id }, e); |
|
145
|
|
|
} |
|
146
|
|
|
} |
|
147
|
|
|
}, node.hostname); |
|
148
|
|
|
} |
|
149
|
|
|
|
|
150
|
|
|
function nodeIdLink(nodeId) { |
|
151
|
|
|
if (nodeDict[nodeId]) { |
|
152
|
|
|
return nodeLink(nodeDict[nodeId]); |
|
153
|
|
|
} |
|
154
|
|
|
return nodeId; |
|
155
|
|
|
} |
|
156
|
|
|
|
|
157
|
|
|
function showGateway(node) { |
|
158
|
|
|
var gatewayCols = [ |
|
159
|
|
|
V.h('span', [ |
|
160
|
|
|
nodeIdLink(node.gateway_nexthop), |
|
161
|
|
|
V.h('br'), |
|
162
|
|
|
_.t('node.nexthop') |
|
163
|
|
|
]), |
|
164
|
|
|
V.h('span', { props: { className: 'ion-arrow-right-c' } }), |
|
165
|
|
|
V.h('span', [ |
|
166
|
|
|
nodeIdLink(node.gateway), |
|
167
|
|
|
V.h('br'), |
|
168
|
|
|
'IPv4' |
|
169
|
|
|
]), |
|
170
|
|
|
V.h('span', [ |
|
171
|
|
|
nodeIdLink(node.gateway6), |
|
172
|
|
|
V.h('br'), |
|
173
|
|
|
'IPv6' |
|
174
|
|
|
]) |
|
175
|
|
|
]; |
|
176
|
|
|
|
|
177
|
|
|
return V.h('td', { props: { className: 'gateway' } }, gatewayCols); |
|
178
|
|
|
} |
|
179
|
|
|
|
|
180
|
|
|
function renderNeighbourRow(n) { |
|
181
|
|
|
var icons = []; |
|
182
|
|
|
if (helper.hasLocation(n.node)) { |
|
183
|
|
|
icons.push(V.h('span', { props: { className: 'ion-location' } })); |
|
184
|
|
|
} |
|
185
|
|
|
|
|
186
|
|
|
var td1 = V.h('td', icons); |
|
187
|
|
|
var td2 = V.h('td', nodeLink(n.node)); |
|
188
|
|
|
var td3 = V.h('td', (n.node.clients ? n.node.clients.toString() : '0')); |
|
189
|
|
|
var td4 = V.h('td', { style: { color: linkScale((n.link.source_tq + n.link.target_tq) / 2) } }, helper.showTq(n.link.source_tq) + ' - ' + helper.showTq(n.link.target_tq)); |
|
190
|
|
|
var td5 = V.h('td', helper.showDistance(n.link)); |
|
191
|
|
|
|
|
192
|
|
|
return V.h('tr', [td1, td2, td3, td4, td5]); |
|
193
|
|
|
} |
|
194
|
|
|
|
|
195
|
|
|
var self = this; |
|
196
|
|
|
var header = document.createElement('h2'); |
|
197
|
|
|
var table = document.createElement('table'); |
|
198
|
|
|
var images = document.createElement('div'); |
|
199
|
|
|
var neighbours = document.createElement('h3'); |
|
200
|
|
|
var headings = [{ |
|
201
|
|
|
name: '' |
|
202
|
|
|
}, { |
|
203
|
|
|
name: 'node.nodes', |
|
204
|
|
|
sort: function (a, b) { |
|
205
|
|
|
return a.node.hostname.localeCompare(b.node.hostname); |
|
206
|
|
|
}, |
|
207
|
|
|
reverse: false |
|
208
|
|
|
}, { |
|
209
|
|
|
name: 'node.clients', |
|
210
|
|
|
class: 'ion-people', |
|
211
|
|
|
sort: function (a, b) { |
|
212
|
|
|
return ('clients' in a.node ? a.node.clients : -1) - |
|
213
|
|
|
('clients' in b.node ? b.node.clients : -1); |
|
214
|
|
|
}, |
|
215
|
|
|
reverse: true |
|
216
|
|
|
}, { |
|
217
|
|
|
name: 'node.tq', |
|
218
|
|
|
class: 'ion-connection-bars', |
|
219
|
|
|
sort: function (a, b) { |
|
220
|
|
|
return a.link.source_tq - b.link.source_tq; |
|
221
|
|
|
}, |
|
222
|
|
|
reverse: true |
|
223
|
|
|
}, { |
|
224
|
|
|
name: 'node.distance', |
|
225
|
|
|
class: 'ion-arrow-resize', |
|
226
|
|
|
sort: function (a, b) { |
|
227
|
|
|
return (a.link.distance === undefined ? -1 : a.link.distance) - |
|
228
|
|
|
(b.link.distance === undefined ? -1 : b.link.distance); |
|
229
|
|
|
}, |
|
230
|
|
|
reverse: true |
|
231
|
|
|
}]; |
|
232
|
|
|
var tableNeighbour = new SortTable(headings, 1, renderNeighbourRow); |
|
233
|
|
|
|
|
234
|
|
|
el.appendChild(header); |
|
235
|
|
|
el.appendChild(table); |
|
236
|
|
|
el.appendChild(neighbours); |
|
237
|
|
|
el.appendChild(tableNeighbour.el); |
|
238
|
|
|
el.appendChild(images); |
|
239
|
|
|
|
|
240
|
|
|
self.render = function render() { |
|
241
|
|
|
V.patch(header, V.h('h2', d.hostname)); |
|
242
|
|
|
|
|
243
|
|
|
var children = []; |
|
244
|
|
|
|
|
245
|
|
|
children.push(helper.attributeEntry(V, 'node.status', showStatus(d))); |
|
246
|
|
|
children.push(helper.attributeEntry(V, 'node.gateway', d.is_gateway ? 'ja' : null)); |
|
247
|
|
|
children.push(helper.attributeEntry(V, 'node.coordinates', showGeoURI(d))); |
|
248
|
|
|
|
|
249
|
|
|
if (config.nodeInfobox && config.nodeInfobox.contact) { |
|
250
|
|
|
children.push(helper.attributeEntry(V, 'node.contact', helper.dictGet(d, ['owner', 'contact']))); |
|
251
|
|
|
} |
|
252
|
|
|
|
|
253
|
|
|
children.push(helper.attributeEntry(V, 'node.hardware', d.model)); |
|
254
|
|
|
children.push(helper.attributeEntry(V, 'node.primaryMac', d.network.mac)); |
|
255
|
|
|
children.push(helper.attributeEntry(V, 'node.firmware', showFirmware(d))); |
|
256
|
|
|
children.push(helper.attributeEntry(V, 'node.site', showSite(d, config))); |
|
257
|
|
|
children.push(helper.attributeEntry(V, 'node.uptime', moment.utc(d.uptime).local().fromNow(true))); |
|
258
|
|
|
children.push(helper.attributeEntry(V, 'node.firstSeen', d.firstseen.fromNow(true))); |
|
259
|
|
|
if (config.nodeInfobox && config.nodeInfobox.hardwareUsage) { |
|
260
|
|
|
children.push(helper.attributeEntry(V, 'node.systemLoad', showLoad(d))); |
|
261
|
|
|
children.push(helper.attributeEntry(V, 'node.ram', showRAM(d))); |
|
262
|
|
|
} |
|
263
|
|
|
children.push(helper.attributeEntry(V, 'node.ipAddresses', showIPs(d))); |
|
264
|
|
|
children.push(helper.attributeEntry(V, 'node.update', showAutoupdate(d))); |
|
265
|
|
|
children.push(helper.attributeEntry(V, 'node.clients', showClients(d))); |
|
266
|
|
|
children.push(helper.attributeEntry(V, 'node.gateway', showGateway(d))); |
|
267
|
|
|
|
|
268
|
|
|
var elNew = V.h('table', children); |
|
269
|
|
|
table = V.patch(table, elNew); |
|
270
|
|
|
table.elm.classList.add('attributes'); |
|
271
|
|
|
|
|
272
|
|
|
V.patch(neighbours, V.h('h3', _.t('node.link', d.neighbours.length) + ' (' + d.neighbours.length + ')')); |
|
273
|
|
|
if (d.neighbours.length > 0) { |
|
274
|
|
|
tableNeighbour.setData(d.neighbours); |
|
275
|
|
|
tableNeighbour.el.elm.classList.add('node-links'); |
|
276
|
|
|
} |
|
277
|
|
|
|
|
278
|
|
|
if (config.nodeInfos) { |
|
279
|
|
|
var img = []; |
|
280
|
|
|
config.nodeInfos.forEach(function (nodeInfo) { |
|
281
|
|
|
img.push(V.h('h4', nodeInfo.name)); |
|
282
|
|
|
img.push(showStatImg(nodeInfo, d)); |
|
283
|
|
|
}); |
|
284
|
|
|
images = V.patch(images, V.h('div', img)); |
|
285
|
|
|
} |
|
286
|
|
|
}; |
|
287
|
|
|
|
|
288
|
|
|
self.setData = function setData(data) { |
|
289
|
|
|
d = data.nodes.all.find(function (a) { |
|
290
|
|
|
return a.node_id === d.node_id; |
|
291
|
|
|
}); |
|
292
|
|
|
self.render(); |
|
293
|
|
|
}; |
|
294
|
|
|
return self; |
|
295
|
|
|
}; |
|
296
|
|
|
}); |
|
297
|
|
|
|
ffrgb /
meshviewer
