Merge pull request #544 from fractal-analytics-platform/settings-page

Added settings page to admin area

Author: zonia3000

CHANGELOG.md

@@ -1,5 +1,9 @@
 *Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
 
+# Unreleased
+
+* Added settings page to admin area (\#544);
+
 # 1.4.2
 
 * Added admin page for job submission healthcheck (\#543);

src/lib/server/api/v2/settings_api.js

@@ -0,0 +1,25 @@
+import { env } from '$env/dynamic/private';
+import { responseError } from '$lib/common/errors';
+import { getLogger } from '$lib/server/logger.js';
+
+const logger = getLogger('settings API');
+
+/**
+ * Fetches the settings from the server
+ * @param {typeof fetch} fetch
+ * @returns {Promise<any>}
+ */
+export async function listSettings(fetch) {
+	logger.debug('Fetching the settings');
+	const response = await fetch(env.FRACTAL_SERVER_HOST + '/api/settings/', {
+		method: 'GET',
+		credentials: 'include'
+	});
+
+	if (!response.ok) {
+		logger.error('Unable to fetch the settings');
+		await responseError(response);
+	}
+
+	return await response.json();
+}

src/routes/v2/admin/+page.svelte

@@ -1,7 +1,13 @@
 <div class="row">
 	<div class="col">
+		<h2 class="fw-light">Settings</h2>
 
-		<h2 class="fw-light">Users</h2>
+		<a href="/v2/admin/settings" class="btn btn-primary me-2">
+			<i class="bi bi-gear-fill" />
+			Settings
+		</a>
+
+		<h2 class="fw-light mt-3">Users</h2>
 
 		<a href="/v2/admin/users" class="btn btn-primary">
 			<i class="bi bi-people-fill" />
@@ -16,7 +22,7 @@
 		</a>
 
 		<a href="/v2/admin/jobs/healthcheck" class="btn btn-primary">
-			<i class="bi bi-heart-pulse-fill"></i>
+			<i class="bi bi-heart-pulse-fill" />
 			Job submission healthcheck
 		</a>
 

src/routes/v2/admin/settings/+page.server.js

@@ -0,0 +1,14 @@
+import { listSettings } from '$lib/server/api/v2/settings_api';
+import { getLogger } from '$lib/server/logger.js';
+
+const logger = getLogger('admin settings page');
+
+export async function load({ fetch }) {
+	logger.trace('Loading settings page');
+
+	const settings = await listSettings(fetch);
+
+	return {
+		settings
+	};
+}

src/routes/v2/admin/settings/+page.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { page } from '$app/stores';
+
+	const settings = $page.data.settings;
+
+	let showObfuscated = false;
+</script>
+
+<h1 class="fw-light mb-2">Settings</h1>
+
+<div class="row mb-3">
+	<div class="col">
+		<div class="form-check form-switch float-end">
+			<input
+				class="form-check-input"
+				bind:checked={showObfuscated}
+				type="checkbox"
+				role="switch"
+				id="showObfuscatedSwitch"
+			/>
+			<label class="form-check-label" for="showObfuscatedSwitch">Show obfuscated fields</label>
+		</div>
+	</div>
+</div>
+
+<table class="table table-striped">
+	<tbody>
+		{#each Object.entries(settings) as [key, value]}
+			{#if showObfuscated || value !== '***'}
+				<tr>
+					<th>{key}</th>
+					<td>{value}</td>
+				</tr>
+			{/if}
+		{/each}
+	</tbody>
+</table>

tests/v2/admin_settings.spec.js

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test';
+import { waitPageLoading } from '../utils.js';
+
+test('Show the admin settings page', async ({ page }) => {
+	await test.step('Open the admin settings page', async () => {
+		await page.goto('/v2/admin/settings');
+		await waitPageLoading(page);
+		await expect(page.getByRole('cell', { name: 'FRACTAL_TASKS_DIR', exact: true })).toBeVisible();
+		await expect(page.getByText('***')).not.toBeVisible();
+	});
+
+	await test.step('Display obfuscated settings', async () => {
+		await page.getByRole('switch').check();
+		await expect(page.getByText('***').first()).toBeVisible();
+	});
+});