From 42cb85308e824dfdaeade17b09824d13e6f51992 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Mon, 30 Mar 2026 12:01:25 +0700
Subject: [PATCH] Refactor data loading in server routes to use alias parameter

- Replaced `onMount` with `$effect` for loading data in multiple server route components, improving reactivity and ensuring data is fetched based on the current alias.
- Introduced a new `loadFor` function to handle data fetching with the alias parameter, enhancing code clarity and maintainability.
- Updated all relevant components to utilize the new loading mechanism, ensuring consistent behavior across the application.
---
 web/src/routes/servers/[alias]/+page.svelte   | 21 ++++++++++++-----
 .../servers/[alias]/runtime/+page.svelte      | 21 ++++++++++++-----
 .../servers/[alias]/security/+page.svelte     | 17 ++++++++++----
 .../servers/[alias]/update/+page.svelte       | 17 ++++++++++----
 .../servers/[alias]/upstreams/+page.svelte    | 17 ++++++++++----
 .../routes/servers/[alias]/users/+page.svelte | 23 +++++++++++++++----
 6 files changed, 87 insertions(+), 29 deletions(-)

diff --git a/web/src/routes/servers/[alias]/+page.svelte b/web/src/routes/servers/[alias]/+page.svelte
index 0ac4a8b..56b573b 100644
--- a/web/src/routes/servers/[alias]/+page.svelte
+++ b/web/src/routes/servers/[alias]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
 	import {
 		ApiError,
 		fetchStatsSummary,
@@ -22,14 +21,14 @@
 	let summary = $state<StatsSummaryData | null>(null);
 	let sys = $state<SystemInfoData | null>(null);
 
-	async function load() {
+	async function loadFor(a: string) {
 		loading = true;
 		err = null;
 		try {
 			const [h, s, i] = await Promise.all([
-				fetchTelemt<HealthData>(alias, 'health'),
-				fetchStatsSummary(alias),
-				fetchTelemt<SystemInfoData>(alias, 'system/info')
+				fetchTelemt<HealthData>(a, 'health'),
+				fetchStatsSummary(a),
+				fetchTelemt<SystemInfoData>(a, 'system/info')
 			]);
 			health = h.data;
 			summary = s.data;
@@ -41,7 +40,17 @@
 		}
 	}
 
-	onMount(load);
+	$effect(() => {
+		const a = alias;
+		if (!a) return;
+		void loadFor(a);
+	});
+
+	async function load() {
+		const a = alias;
+		if (!a) return;
+		await loadFor(a);
+	}
 </script>
 
 <div class="mb-6 flex items-center justify-between gap-4">
diff --git a/web/src/routes/servers/[alias]/runtime/+page.svelte b/web/src/routes/servers/[alias]/runtime/+page.svelte
index 46a00f4..f6b2150 100644
--- a/web/src/routes/servers/[alias]/runtime/+page.svelte
+++ b/web/src/routes/servers/[alias]/runtime/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
 	import { ApiError, fetchTelemt } from '$lib/api/client.js';
 	import type { DcStatusData, RuntimeGatesData } from '$lib/api/telemt-v1.js';
 	import * as Card from '$lib/components/ui/card/index.js';
@@ -18,14 +17,14 @@
 	let dcs = $state<DcStatusData | null>(null);
 	let pool = $state<unknown>(null);
 
-	async function load() {
+	async function loadFor(a: string) {
 		loading = true;
 		err = null;
 		try {
 			const [g, d, p] = await Promise.all([
-				fetchTelemt<RuntimeGatesData>(alias, 'runtime/gates'),
-				fetchTelemt<DcStatusData>(alias, 'stats/dcs'),
-				fetchTelemt<unknown>(alias, 'runtime/me_pool_state')
+				fetchTelemt<RuntimeGatesData>(a, 'runtime/gates'),
+				fetchTelemt<DcStatusData>(a, 'stats/dcs'),
+				fetchTelemt<unknown>(a, 'runtime/me_pool_state')
 			]);
 			gates = g.data;
 			dcs = d.data;
@@ -37,7 +36,17 @@
 		}
 	}
 
-	onMount(load);
+	$effect(() => {
+		const a = alias;
+		if (!a) return;
+		void loadFor(a);
+	});
+
+	async function load() {
+		const a = alias;
+		if (!a) return;
+		await loadFor(a);
+	}
 
 	function onOff(v: boolean | undefined) {
 		if (v === undefined) return '—';
diff --git a/web/src/routes/servers/[alias]/security/+page.svelte b/web/src/routes/servers/[alias]/security/+page.svelte
index d70042a..204dd7c 100644
--- a/web/src/routes/servers/[alias]/security/+page.svelte
+++ b/web/src/routes/servers/[alias]/security/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
 	import { ApiError, fetchTelemt } from '$lib/api/client.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js';
@@ -13,11 +12,11 @@
 	let err = $state<string | null>(null);
 	let data = $state<Record<string, unknown> | null>(null);
 
-	async function load() {
+	async function loadFor(a: string) {
 		loading = true;
 		err = null;
 		try {
-			const r = await fetchTelemt<Record<string, unknown>>(alias, 'security/posture');
+			const r = await fetchTelemt<Record<string, unknown>>(a, 'security/posture');
 			data = r.data ?? null;
 		} catch (e) {
 			err = e instanceof ApiError ? e.message : String(e);
@@ -26,7 +25,17 @@
 		}
 	}
 
-	onMount(load);
+	$effect(() => {
+		const a = alias;
+		if (!a) return;
+		void loadFor(a);
+	});
+
+	async function load() {
+		const a = alias;
+		if (!a) return;
+		await loadFor(a);
+	}
 </script>
 
 <div class="mb-6 flex items-center justify-between">
diff --git a/web/src/routes/servers/[alias]/update/+page.svelte b/web/src/routes/servers/[alias]/update/+page.svelte
index 0d68b0d..f9b3e4e 100644
--- a/web/src/routes/servers/[alias]/update/+page.svelte
+++ b/web/src/routes/servers/[alias]/update/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
 	import { ApiError, fetchTelemt } from '$lib/api/client.js';
 	import type { SystemInfoData } from '$lib/api/telemt-v1.js';
 	import * as Card from '$lib/components/ui/card/index.js';
@@ -14,11 +13,11 @@
 	let err = $state<string | null>(null);
 	let sys = $state<SystemInfoData | null>(null);
 
-	async function load() {
+	async function loadFor(a: string) {
 		loading = true;
 		err = null;
 		try {
-			const r = await fetchTelemt<SystemInfoData>(alias, 'system/info');
+			const r = await fetchTelemt<SystemInfoData>(a, 'system/info');
 			sys = r.data;
 		} catch (e) {
 			err = e instanceof ApiError ? e.message : String(e);
@@ -27,7 +26,17 @@
 		}
 	}
 
-	onMount(load);
+	$effect(() => {
+		const a = alias;
+		if (!a) return;
+		void loadFor(a);
+	});
+
+	async function load() {
+		const a = alias;
+		if (!a) return;
+		await loadFor(a);
+	}
 </script>
 
 <div class="mb-6 flex items-center justify-between">
diff --git a/web/src/routes/servers/[alias]/upstreams/+page.svelte b/web/src/routes/servers/[alias]/upstreams/+page.svelte
index 0379e5b..f20affd 100644
--- a/web/src/routes/servers/[alias]/upstreams/+page.svelte
+++ b/web/src/routes/servers/[alias]/upstreams/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
 	import { ApiError, fetchTelemt } from '$lib/api/client.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js';
@@ -13,11 +12,11 @@
 	let err = $state<string | null>(null);
 	let data = $state<Record<string, unknown> | null>(null);
 
-	async function load() {
+	async function loadFor(a: string) {
 		loading = true;
 		err = null;
 		try {
-			const r = await fetchTelemt<Record<string, unknown>>(alias, 'stats/upstreams');
+			const r = await fetchTelemt<Record<string, unknown>>(a, 'stats/upstreams');
 			data = r.data ?? null;
 		} catch (e) {
 			err = e instanceof ApiError ? e.message : String(e);
@@ -26,7 +25,17 @@
 		}
 	}
 
-	onMount(load);
+	$effect(() => {
+		const a = alias;
+		if (!a) return;
+		void loadFor(a);
+	});
+
+	async function load() {
+		const a = alias;
+		if (!a) return;
+		await loadFor(a);
+	}
 </script>
 
 <div class="mb-6 flex items-center justify-between">
diff --git a/web/src/routes/servers/[alias]/users/+page.svelte b/web/src/routes/servers/[alias]/users/+page.svelte
index f69d454..95ec4b6 100644
--- a/web/src/routes/servers/[alias]/users/+page.svelte
+++ b/web/src/routes/servers/[alias]/users/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
 	import {
 		ApiError,
 		createUser,
@@ -49,13 +48,13 @@
 	let busy = $state(false);
 	let formErr = $state<string | null>(null);
 
-	async function load() {
+	async function loadFor(a: string) {
 		loading = true;
 		err = null;
 		try {
 			const [res, h] = await Promise.all([
-				fetchUsersList(alias),
-				fetchTelemt<HealthData>(alias, 'health')
+				fetchUsersList(a),
+				fetchTelemt<HealthData>(a, 'health')
 			]);
 			users = res.data ?? [];
 			configRevision = res.revision;
@@ -67,7 +66,21 @@
 		}
 	}
 
-	onMount(load);
+	$effect(() => {
+		const a = alias;
+		if (!a) return;
+		createOpen = false;
+		editUser = null;
+		deleteUserRow = null;
+		formErr = null;
+		void loadFor(a);
+	});
+
+	async function load() {
+		const a = alias;
+		if (!a) return;
+		await loadFor(a);
+	}
 
 	function openEdit(u: UserInfo) {
 		editUser = u;