CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

connections page: update API, combine opnsense data with db data

Browse Source
This commit is contained in:
Yuri Tatishchev
2025-01-07 18:51:24 -08:00
parent 76559d2931
commit 29fbccc953
7 changed files with 75 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/routes/connections/+page.svelte
View File

@@ -16,7 +16,7 @@
return () => clearInterval(interval);
});
function getSize(size: number) {
function toSizeString(size: number) {
let sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
for (let i = 1; i < sizes.length; i++) {
@@ -34,35 +34,31 @@
<Table.Root class="divide-y-2 divide-background overflow-hidden rounded-lg bg-accent">
<Table.Header>
<Table.Row>
<Table.Head scope="col">Name</Table.Head>
<Table.Head scope="col">Device</Table.Head>
<Table.Head scope="col">Public Key</Table.Head>
<Table.Head scope="col">Endpoint</Table.Head>
<Table.Head scope="col">Allowed IPs</Table.Head>
<Table.Head scope="col">Device IPs</Table.Head>
<Table.Head scope="col">Latest Handshake</Table.Head>
<Table.Head scope="col">RX</Table.Head>
<Table.Head scope="col">TX</Table.Head>
<Table.Head scope="col" class="hidden">Persistent Keepalive</Table.Head>
<Table.Head scope="col" class="hidden">Interface Name</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body class="divide-y-2 divide-background">
{#each data.peers.rows as peer}
{#each data.connections as conn}
<Table.Row class="hover:bg-surface">
<Table.Head scope="row">{peer.name}</Table.Head>
<Table.Cell class="max-w-[10ch] truncate">{peer['public-key']}</Table.Cell>
<Table.Cell>{peer.endpoint}</Table.Cell>
<Table.Head scope="row">{conn.deviceName}</Table.Head>
<Table.Cell class="max-w-[10ch] truncate">{conn.devicePublicKey}</Table.Cell>
<Table.Cell>{conn.endpoint}</Table.Cell>
<Table.Cell>
<div class="flex flex-wrap gap-1">
{#each peer['allowed-ips'].split(',') as addr}
{#each conn.deviceIps as addr}
<Badge class="select-auto bg-background" variant="secondary">{addr}</Badge>
{/each}
</div>
</Table.Cell>
<Table.Cell>{new Date(peer['latest-handshake'] * 1000).toLocaleString()}</Table.Cell>
<Table.Cell>{getSize(peer['transfer-rx'])}</Table.Cell>
<Table.Cell>{getSize(peer['transfer-tx'])}</Table.Cell>
<Table.Cell class="hidden">{peer['persistent-keepalive']}</Table.Cell>
<Table.Cell class="hidden">{peer.ifname}</Table.Cell>
<Table.Cell>{new Date(conn.latestHandshake).toLocaleString()}</Table.Cell>
<Table.Cell>{toSizeString(conn.transferRx)}</Table.Cell>
<Table.Cell>{toSizeString(conn.transferTx)}</Table.Cell>
</Table.Row>
{/each}
</Table.Body>