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