ss-tools/frontend/src/pages/Settings.svelte

<!-- [DEF:Settings:Component] -->
<!--
@SEMANTICS: settings, ui, configuration
@PURPOSE:   The main settings page for the application, allowing management of environments and global settings.
@LAYER:     UI
@RELATION:  CALLS -> api.js
@RELATION:  USES -> stores.js

@PROPS: None
@EVENTS: None
@INVARIANT: Settings changes must be saved to the backend.
-->
<script>
    // [SECTION: IMPORTS]
    import { onMount } from 'svelte';
    import { getSettings, updateGlobalSettings, getEnvironments, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection } from '../lib/api';
    import { addToast } from '../lib/toasts';
    // [/SECTION]

    let settings = {
        environments: [],
        settings: {
            backup_path: '',
            default_environment_id: null,
            logging: {
                level: 'INFO',
                file_path: 'logs/app.log',
                max_bytes: 10485760,
                backup_count: 5,
                enable_belief_state: true
            }
        }
    };

    let newEnv = {
        id: '',
        name: '',
        url: '',
        username: '',
        password: '',
        is_default: false
    };

    let editingEnvId = null;

    // [DEF:loadSettings:Function]
    /**
     * @purpose Loads settings from the backend.
     */
    async function loadSettings() {
        try {
            console.log("[Settings.loadSettings][Action] Loading settings.");
            const data = await getSettings();
            settings = data;
            console.log("[Settings.loadSettings][Coherence:OK] Settings loaded.");
        } catch (error) {
            console.error("[Settings.loadSettings][Coherence:Failed] Failed to load settings:", error);
            addToast('Failed to load settings', 'error');
        }
    }
    // [/DEF:loadSettings]

    // [DEF:handleSaveGlobal:Function]
    /**
     * @purpose Saves global settings to the backend.
     */
    async function handleSaveGlobal() {
        try {
            console.log("[Settings.handleSaveGlobal][Action] Saving global settings.");
            await updateGlobalSettings(settings.settings);
            addToast('Global settings saved', 'success');
            console.log("[Settings.handleSaveGlobal][Coherence:OK] Global settings saved.");
        } catch (error) {
            console.error("[Settings.handleSaveGlobal][Coherence:Failed] Failed to save global settings:", error);
            addToast('Failed to save global settings', 'error');
        }
    }
    // [/DEF:handleSaveGlobal]

    // [DEF:handleAddOrUpdateEnv:Function]
    /**
     * @purpose Adds or updates an environment.
     */
    async function handleAddOrUpdateEnv() {
        try {
            console.log(`[Settings.handleAddOrUpdateEnv][Action] ${editingEnvId ? 'Updating' : 'Adding'} environment.`);
            if (editingEnvId) {
                await updateEnvironment(editingEnvId, newEnv);
                addToast('Environment updated', 'success');
            } else {
                await addEnvironment(newEnv);
                addToast('Environment added', 'success');
            }
            resetEnvForm();
            await loadSettings();
            console.log("[Settings.handleAddOrUpdateEnv][Coherence:OK] Environment saved.");
        } catch (error) {
            console.error("[Settings.handleAddOrUpdateEnv][Coherence:Failed] Failed to save environment:", error);
            addToast('Failed to save environment', 'error');
        }
    }
    // [/DEF:handleAddOrUpdateEnv]

    // [DEF:handleDeleteEnv:Function]
    /**
     * @purpose Deletes an environment.
     * @param {string} id - The ID of the environment to delete.
     */
    async function handleDeleteEnv(id) {
        if (confirm('Are you sure you want to delete this environment?')) {
            try {
                console.log(`[Settings.handleDeleteEnv][Action] Deleting environment: ${id}`);
                await deleteEnvironment(id);
                addToast('Environment deleted', 'success');
                await loadSettings();
                console.log("[Settings.handleDeleteEnv][Coherence:OK] Environment deleted.");
            } catch (error) {
                console.error("[Settings.handleDeleteEnv][Coherence:Failed] Failed to delete environment:", error);
                addToast('Failed to delete environment', 'error');
            }
        }
    }
    // [/DEF:handleDeleteEnv]

    // [DEF:handleTestEnv:Function]
    /**
     * @purpose Tests the connection to an environment.
     * @param {string} id - The ID of the environment to test.
     */
    async function handleTestEnv(id) {
        try {
            console.log(`[Settings.handleTestEnv][Action] Testing environment: ${id}`);
            const result = await testEnvironmentConnection(id);
            if (result.status === 'success') {
                addToast('Connection successful', 'success');
                console.log("[Settings.handleTestEnv][Coherence:OK] Connection successful.");
            } else {
                addToast(`Connection failed: ${result.message}`, 'error');
                console.log("[Settings.handleTestEnv][Coherence:Failed] Connection failed.");
            }
        } catch (error) {
            console.error("[Settings.handleTestEnv][Coherence:Failed] Error testing connection:", error);
            addToast('Failed to test connection', 'error');
        }
    }
    // [/DEF:handleTestEnv]

    // [DEF:editEnv:Function]
    /**
     * @purpose Sets the form to edit an existing environment.
     * @param {Object} env - The environment object to edit.
     */
    function editEnv(env) {
        newEnv = { ...env };
        editingEnvId = env.id;
    }
    // [/DEF:editEnv]

    // [DEF:resetEnvForm:Function]
    /**
     * @purpose Resets the environment form.
     */
    function resetEnvForm() {
        newEnv = {
            id: '',
            name: '',
            url: '',
            username: '',
            password: '',
            is_default: false
        };
        editingEnvId = null;
    }
    // [/DEF:resetEnvForm]

    onMount(loadSettings);
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6">Settings</h1>

    <section class="mb-8 bg-white p-6 rounded shadow">
        <h2 class="text-xl font-semibold mb-4">Global Settings</h2>
        <div class="grid grid-cols-1 gap-4">
            <div>
                <label for="backup_path" class="block text-sm font-medium text-gray-700">Backup Storage Path</label>
                <input type="text" id="backup_path" bind:value={settings.settings.backup_path} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
            </div>
        </div>

        <h3 class="text-lg font-medium mb-4 mt-6">Logging Configuration</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label for="log_level" class="block text-sm font-medium text-gray-700">Log Level</label>
                <select id="log_level" bind:value={settings.settings.logging.level} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
                    <option value="DEBUG">DEBUG</option>
                    <option value="INFO">INFO</option>
                    <option value="WARNING">WARNING</option>
                    <option value="ERROR">ERROR</option>
                    <option value="CRITICAL">CRITICAL</option>
                </select>
            </div>
            <div>
                <label for="log_file_path" class="block text-sm font-medium text-gray-700">Log File Path</label>
                <input type="text" id="log_file_path" bind:value={settings.settings.logging.file_path} placeholder="logs/app.log" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
            </div>
            <div>
                <label for="log_max_bytes" class="block text-sm font-medium text-gray-700">Max File Size (MB)</label>
                <input type="number" id="log_max_bytes" bind:value={settings.settings.logging.max_bytes} min="1" step="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
            </div>
            <div>
                <label for="log_backup_count" class="block text-sm font-medium text-gray-700">Backup Count</label>
                <input type="number" id="log_backup_count" bind:value={settings.settings.logging.backup_count} min="1" step="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
            </div>
            <div class="md:col-span-2">
                <label class="flex items-center">
                    <input type="checkbox" id="enable_belief_state" bind:checked={settings.settings.logging.enable_belief_state} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
                    <span class="ml-2 block text-sm text-gray-900">Enable Belief State Logging</span>
                </label>
            </div>
        </div>

        <button on:click={handleSaveGlobal} class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-max mt-4">
            Save Global Settings
        </button>
    </section>

    <section class="mb-8 bg-white p-6 rounded shadow">
        <h2 class="text-xl font-semibold mb-4">Superset Environments</h2>

        {#if settings.environments.length === 0}
            <div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
                <p class="font-bold">Warning</p>
                <p>No Superset environments configured. You must add at least one environment to perform backups or migrations.</p>
            </div>
        {/if}
        
        <div class="mb-6 overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {#each settings.environments as env}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">{env.name}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{env.url}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{env.username}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{env.is_default ? 'Yes' : 'No'}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button on:click={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">Test</button>
                                <button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</button>
                                <button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">Delete</button>
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>

        <div class="bg-gray-50 p-4 rounded">
            <h3 class="text-lg font-medium mb-4">{editingEnvId ? 'Edit' : 'Add'} Environment</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="env_id" class="block text-sm font-medium text-gray-700">ID</label>
                    <input type="text" id="env_id" bind:value={newEnv.id} disabled={!!editingEnvId} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div>
                    <label for="env_name" class="block text-sm font-medium text-gray-700">Name</label>
                    <input type="text" id="env_name" bind:value={newEnv.name} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div>
                    <label for="env_url" class="block text-sm font-medium text-gray-700">URL</label>
                    <input type="text" id="env_url" bind:value={newEnv.url} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div>
                    <label for="env_user" class="block text-sm font-medium text-gray-700">Username</label>
                    <input type="text" id="env_user" bind:value={newEnv.username} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div>
                    <label for="env_pass" class="block text-sm font-medium text-gray-700">Password</label>
                    <input type="password" id="env_pass" bind:value={newEnv.password} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div class="flex items-center">
                    <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
                    <label for="env_default" class="ml-2 block text-sm text-gray-900">Default Environment</label>
                </div>
            </div>
            <div class="mt-4 flex gap-2">
                <button on:click={handleAddOrUpdateEnv} class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
                    {editingEnvId ? 'Update' : 'Add'} Environment
                </button>
                {#if editingEnvId}
                    <button on:click={resetEnvForm} class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                        Cancel
                    </button>
                {/if}
            </div>
        </div>
    </section>
</div>
<!-- [/SECTION] -->

<!-- [/DEF:Settings] -->