From c022baa97cae50d7dfb1517554bc1cde8d143578 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Thu, 19 Dec 2024 19:43:03 -0800
Subject: [PATCH] connections page improvements

---
 src/routes/api/connections/+server.ts |  7 +++-
 src/routes/connections/+page.svelte   | 58 ++++++++++++++-------------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/routes/api/connections/+server.ts b/src/routes/api/connections/+server.ts
index 67b9cf4..8644078 100644
--- a/src/routes/api/connections/+server.ts
+++ b/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',
+		}
+	});
 };
diff --git a/src/routes/connections/+page.svelte b/src/routes/connections/+page.svelte
index e6eff51..77a617c 100644
--- a/src/routes/connections/+page.svelte
+++ b/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);
-	const peerRows = $derived(data.peers.rows.filter((peer) => showOnlyActive ? peer['latest-handshake'] : true));
+	let showOnlyActive = $state($page.url.searchParams.get('showOnlyActive') === '1');
 
-	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,24 +45,21 @@
 <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>
-			<Table.Head>Public Key</Table.Head>
-			<Table.Head>Endpoint</Table.Head>
-			<Table.Head>Allowed IPs</Table.Head>
-			<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.Header>
-		<Table.Body>
-			{#each peerRows as peer}
+<Table.Root class="bg-accent rounded-xl">
+	<Table.Header>
+		<Table.Head>Name</Table.Head>
+		<Table.Head>Public Key</Table.Head>
+		<Table.Head>Endpoint</Table.Head>
+		<Table.Head>Allowed IPs</Table.Head>
+		<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.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>
@@ -73,7 +77,7 @@
 					<Table.Cell>{peer['persistent-keepalive']}</Table.Cell>
 					<Table.Cell>{peer.ifname}</Table.Cell>
 				</Table.Row>
-			{/each}
-		</Table.Body>
-	</Table.Root>
-{/if}
\ No newline at end of file
+			{/if}
+		{/each}
+	</Table.Body>
+</Table.Root>