connections page overhaul

src/routes/api/connections/+server.ts

@@ -1,14 +1,14 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { env } from '$env/dynamic/private';
+import { opnsenseAuth, opnsenseIfname, opnsenseUrl } from '$lib/server/opnsense';
 import type { OpnsenseWgPeers } from '$lib/opnsense/wg';
 
-export const GET: RequestHandler = async ({ url }) => {
-	const apiUrl = `${env.OPNSENSE_API_URL}/api/wireguard/service/show`;
+export const GET: RequestHandler = async () => {
+	const apiUrl = `${opnsenseUrl}/api/wireguard/service/show`;
 	const options: RequestInit = {
 		method: 'POST',
 		headers: {
-			Authorization: `Basic ${Buffer.from(`${env.OPNSENSE_API_KEY}:${env.OPNSENSE_API_SECRET}`).toString('base64')}`,
+			Authorization: opnsenseAuth,
 			Accept: 'application/json',
 			'Content-Type': 'application/json',
 		},
@@ -24,6 +24,7 @@ export const GET: RequestHandler = async ({ url }) => {
 
 	const res = await fetch(apiUrl, options);
 	const peers = await res.json() as OpnsenseWgPeers;
+	peers.rows = peers.rows.filter(peer => peer['latest-handshake'] && peer.ifname === opnsenseIfname)
 
 	if (!peers) {
 		error(500, "Error getting info from OPNsense API");

src/routes/connections/+page.svelte

@@ -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>

src/routes/connections/+page.ts

@@ -1,7 +1,7 @@
 import type { PageLoad } from './$types';
 import type { OpnsenseWgPeers } from '$lib/opnsense/wg';
 
-export const load: PageLoad = async ({ fetch, params }) => {
+export const load: PageLoad = async ({ fetch }) => {
 	const res = await fetch('/api/connections');
 	const peers = await res.json() as OpnsenseWgPeers;