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

connections page overhaul

Browse Source
This commit is contained in:
Yuri Tatishchev
2024-12-19 22:10:08 -08:00
parent 686383e4d1
commit e03bf11fa5
8 changed files with 123 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,10 @@
<script lang="ts">
import type { PageData } from './$types';
import { invalidate } from '$app/navigation';
import { page } from '$app/stores';
import * as Table from '$lib/components/ui/table';
import { Checkbox } from '$lib/components/ui/checkbox';
import { Label } from '$lib/components/ui/label';
import { Badge } from '$lib/components/ui/badge';
const { data }: { data: PageData } = $props();
let showOnlyActive = $state($page.url.searchParams.get('showOnlyActive') === '1');
$effect(() => {
// refresh every 5 seconds
@@ -18,12 +15,6 @@
return () => clearInterval(interval);
});
$effect(() => {
window.history.replaceState(history.state, '', window.location.pathname + `?showOnlyActive=${showOnlyActive? 1 : 0}`);
// other options that worked less well (at some things)
// pushState('', {showOnlyActive: showOnlyActive});
// goto(`?showOnlyActive=${showOnlyActive? 1 : 0}`);
});
function getSize(size: number) {
let sizes = ['Bytes', 'KiB', 'MiB', 'GiB',
@@ -42,9 +33,6 @@
<title>Connections</title>
</svelte:head>
<Checkbox id="showOnlyActive" bind:checked={showOnlyActive} />
<Label for="showOnlyActive">Show only active connections</Label>
<Table.Root class="bg-accent rounded-xl">
<Table.Header>
<Table.Head>Name</Table.Head>
@@ -54,30 +42,28 @@
<Table.Head>Latest Handshake</Table.Head>
<Table.Head>RX</Table.Head>
<Table.Head>TX</Table.Head>
<Table.Head>Persistent Keepalive</Table.Head>
<Table.Head>Interface Name</Table.Head>
<Table.Head class="hidden">Persistent Keepalive</Table.Head>
<Table.Head class="hidden">Interface Name</Table.Head>
</Table.Header>
<Table.Body>
{#each data.peers.rows as peer}
{#if peer['latest-handshake'] || !showOnlyActive }
<Table.Row class="border-y-2 border-background">
<Table.Cell>{peer.name}</Table.Cell>
<Table.Cell>{peer['public-key'].substring(0, 10)}</Table.Cell>
<Table.Cell>{peer.endpoint}</Table.Cell>
<Table.Cell>{peer['allowed-ips']}</Table.Cell>
{#if peer['latest-handshake']}
<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>
{:else}
<Table.Cell>Never</Table.Cell>
<Table.Cell>--</Table.Cell>
<Table.Cell>--</Table.Cell>
{/if}
<Table.Cell>{peer['persistent-keepalive']}</Table.Cell>
<Table.Cell>{peer.ifname}</Table.Cell>
</Table.Row>
{/if}
<Table.Row class="border-y-2 border-background">
<Table.Cell>{peer.name}</Table.Cell>
<Table.Cell class="truncate max-w-[10ch]">{peer['public-key']}</Table.Cell>
<Table.Cell>{peer.endpoint}</Table.Cell>
<Table.Cell>
<div class="flex flex-wrap gap-1">
{#each peer['allowed-ips'].split(',') as addr}
<Badge class="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.Row>
{/each}
</Table.Body>
</Table.Root>