connections page improvements

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

@@ -28,5 +28,10 @@ export const GET: RequestHandler = async ({ url }) => {
 	if (!peers) {
 		error(500, "Error getting info from OPNsense API");
 	}
-	return new Response(JSON.stringify(peers));
+	return new Response(JSON.stringify(peers), {
+		headers: {
+			'Content-Type': 'application/json',
+			'Cache-Control': 'max-age=5',
+		}
+	});
 };

src/routes/connections/+page.svelte

@@ -1,21 +1,28 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import { invalidate } from '$app/navigation';
-	import { onMount } from 'svelte';
+	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';
 
 	const { data }: { data: PageData } = $props();
-	let showOnlyActive = $state(false);
+	let showOnlyActive = $state($page.url.searchParams.get('showOnlyActive') === '1');
-	const peerRows = $derived(data.peers.rows.filter((peer) => showOnlyActive ? peer['latest-handshake'] : true));
 
-	onMount(() => {
+	$effect(() => {
 		// refresh every 5 seconds
-		setInterval(() => {
+		const interval = setInterval(() => {
 			console.log('Refreshing connections');
 			invalidate('/api/connections');
 		}, 5000);
+
+		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) {
@@ -38,10 +45,6 @@
 <Checkbox id="showOnlyActive" bind:checked={showOnlyActive} />
 <Label for="showOnlyActive">Show only active connections</Label>
 
-{#if peerRows.length === 0}
-	<p>No active connections</p>
-
-{:else}
 <Table.Root class="bg-accent rounded-xl">
 	<Table.Header>
 		<Table.Head>Name</Table.Head>
@@ -55,7 +58,8 @@
 		<Table.Head>Interface Name</Table.Head>
 	</Table.Header>
 	<Table.Body>
-			{#each peerRows as peer}
+		{#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>
@@ -73,7 +77,7 @@
 					<Table.Cell>{peer['persistent-keepalive']}</Table.Cell>
 					<Table.Cell>{peer.ifname}</Table.Cell>
 				</Table.Row>
+			{/if}
 		{/each}
 	</Table.Body>
 </Table.Root>
-{/if}