1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
'use strict';
'require baseclass';
'require rpc';
'require network';
'require view.dashboard.lib.charts as charts';
var callLuciDHCPLeases = rpc.declare({
object: 'luci-rpc',
method: 'getDHCPLeases',
expect: { '': {} }
});
return baseclass.extend({
title: _('DHCP Devices'),
params: {},
load() {
return Promise.all([
callLuciDHCPLeases(),
]);
},
renderKpi() {
const count = this.params.lan.devices.length;
return charts.kpi({
icon: 'devices',
title: this.title,
value: [ String(count) ],
sub: [ count ? _('Active leases') : _('No active leases') ]
});
},
renderTable() {
return charts.table({
head: [ _('Hostname'), _('IP Address'), _('MAC') ],
rows: this.params.lan.devices.map(device => [
device.hostname,
E('code', {}, [ device.ipv4 ]),
E('code', {}, [ device.macaddr ])
]),
emptyText: _('No active leases'),
foot: [ '', _('Total'), String(this.params.lan.devices.length) ]
});
},
renderUpdateData(leases) {
const dev_arr = [];
leases.forEach(({ hostname = '?', ipaddr: ipv4 = '-', macaddr = '00:00:00:00:00:00' }) => {
dev_arr.push({ hostname, ipv4, macaddr });
});
this.params.lan = { devices: dev_arr };
},
render([leases]) {
if (!L.hasSystemFeature('dnsmasq') && !L.hasSystemFeature('odhcpd'))
return null;
this.renderUpdateData([...leases.dhcp_leases]);
return {
kpi: [ this.renderKpi() ],
tabs: [
{ id: 'dhcp', title: this.title, count: this.params.lan.devices.length, content: this.renderTable() }
]
};
}
});
|
