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
72
73
74
75
76
77
78
|
'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: {},
widgets: [
{ id: 'dhcp', slot: 'cards', title: _('DHCP Devices'), order: 50, hidden: true },
{ id: 'dhcp', slot: 'tabs', title: _('DHCP Devices'), order: 40 }
],
available() {
return L.hasSystemFeature('dnsmasq') || L.hasSystemFeature('odhcpd');
},
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({
id: 'dashboard-lan-table',
head: [ _('Hostname'), _('IP Address'), _('MAC') ],
rows: this.params.lan.devices.map(device => [
device.hostname,
device.ipv4,
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]) {
this.renderUpdateData([...leases.dhcp_leases]);
return {
cards: [ { id: 'dhcp', node: () => this.renderKpi() } ],
tabs: [
{ id: 'dhcp', title: this.title, count: this.params.lan.devices.length, content: () => this.renderTable() }
]
};
}
});
|
