Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-app-cloudflared: Add table for Tunnels

Browse source 
Signed-off-by: Hilman Maulana <hilman0.0maulana@gmail.com>
This commit is contained in:
Hilman Maulana 2024-02-27 14:01:25 +07:00 committed by Paul Donald
parent 162fba5244
commit e8156de2cf
1 changed files with 59 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
applications/luci-app-cloudflared/htdocs/luci-static/resources/view/cloudflared/tunnels.js
View file

@ -19,7 +19,6 @@ function listTunnels() {
}); });
} }
return view.extend({ return view.extend({
handleSaveApply: null, handleSaveApply: null,
handleSave: null, handleSave: null,
@ -34,53 +33,69 @@ return view.extend({
render: function (data) { render: function (data) {
var tunnels = data[0]; var tunnels = data[0];
var tunnelsElList = []; var tunnelRows = tunnels.map(function (tunnel, index) {
for (var tunnel of tunnels) { var rowClass = index % 2 === 0 ? 'cbi-rowstyle-1' : 'cbi-rowstyle-2';
var connectionsSection = []; var tunneldate = new Date(tunnel.created_at).toLocaleString();
if (tunnel.connections.length > 0) { return E('tr', { 'class': 'tr ' + rowClass }, [
var connectionsElList = []; E('td', {'class': 'td'}, tunnel.name),
for (let connection of tunnel.connections) { E('td', {'class': 'td'}, tunnel.id),
var dateOpenedAt = new Date(connection.opened_at).toLocaleString(); E('td', {'class': 'td'}, tunneldate),
connectionsElList.push( E('td', {'class': 'td'}, tunnel.connections.length)
E('tr', [ ]);
E('td', connection.id), });
E('td', connection.origin_ip),
E('td', dateOpenedAt),
E('td', connection.colo_name)
])
);
}
connectionsSection = [ var tunnelTable = [
E('h5', _('Connections')), E('h3', _('Tunnels Information')),
E('table', {'class': 'table cbi-section-table'}, [ E('table', { 'class': 'table cbi-section-table' }, [
E('thead', [ E('tr', { 'class': 'tr table-titles' }, [
E('tr', {'class': 'tr table-titles'}, [ E('th', {'class': 'th'}, _('Name')),
E('th', {'class': 'th'}, 'ID'), E('th', {'class': 'th'}, _('ID')),
E('th', {'class': 'th'}, _('Origin IP')), E('th', {'class': 'th'}, _('Created At')),
E('th', {'class': 'th'}, _('Opened At')), E('th', {'class': 'th'}, _('Connections'))
E('th', {'class': 'th'}, _('Data center')), ]),
]), E(tunnelRows)
]), ])
E('tbody', connectionsElList) ];
])
]; var connectionsTables = tunnels.map(function (tunnel) {
var connectionsTable;
if (tunnel.connections.length > 0) {
var connectionRows = tunnel.connections.map(function (connection, index) {
var rowClass = index % 2 === 0 ? 'cbi-rowstyle-1' : 'cbi-rowstyle-2';
var connectiondate = new Date(connection.opened_at).toLocaleString();
return E('tr', { 'class': 'tr ' + rowClass }, [
E('td', {'class': 'td'}, connection.id),
E('td', {'class': 'td'}, connection.origin_ip),
E('td', {'class': 'td'}, connectiondate),
E('td', {'class': 'td'}, connection.colo_name)
]);
});
connectionsTable = E('table', { 'class': 'table cbi-section-table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', {'class': 'th'}, _('Connection ID')),
E('th', {'class': 'th'}, _('Origin IP')),
E('th', {'class': 'th'}, _('Opened At')),
E('th', {'class': 'th'}, _('Data Center'))
]),
E(connectionRows)
]);
} else { } else {
connectionsSection = [E('em', _('No connections'))]; connectionsTable = E('div', {'class':'cbi-value center'}, [
E('em', _('No connections'))
]);
} }
var tunnelEl = E('div', [ return E('div', {'class': 'cbi-section'}, [
E('h4', tunnel.name), E('h3', _('Connections') + ' ' + tunnel.name),
E('span', 'ID '), E(connectionsTable)
E('span', tunnel.id), ]);
E('div', connectionsSection) });
]
);
tunnelsElList.push(tunnelEl);
}
return E([], [ return E([], [
E('h2', {'class': 'section-title'}, _('Tunnels')), E('h2', { 'class': 'section-title' }, _('Tunnels')),
E('div', {'id': 'tunnels'}, tunnelsElList), E('div', {'class': 'cbi-section'}, tunnelTable),
E(connectionsTables)
]); ]);
} }
}); });