feat: implement plugin architecture and application settings with Svelte UI

- Added plugin base and loader for backend extensibility - Implemented application settings management with config persistence - Created Svelte-based frontend with Dashboard and Settings pages - Added API routes for plugins, tasks, and settings - Updated documentation and specifications - Improved project structure and developer tools
2025-12-20 20:48:18 +03:00
parent ce703322c2
commit 2d8cae563f
98 changed files with 7894 additions and 5021 deletions
--- a/frontend/src/lib/Counter.svelte
+++ b/frontend/src/lib/Counter.svelte
--- a/frontend/src/lib/api.js
+++ b/frontend/src/lib/api.js
@@ -1,55 +1,103 @@
-import { addToast } from './toasts.js';
-
-const API_BASE_URL = 'http://localhost:8000';
-
-/**
- * Fetches data from the API.
- * @param {string} endpoint The API endpoint to fetch data from.
- * @returns {Promise<any>} The JSON response from the API.
- */
-async function fetchApi(endpoint) {
-    try {
-        const response = await fetch(`${API_BASE_URL}${endpoint}`);
-        if (!response.ok) {
-            throw new Error(`API request failed with status ${response.status}`);
-        }
-        return await response.json();
-    } catch (error) {
-        console.error(`Error fetching from ${endpoint}:`, error);
-        addToast(error.message, 'error');
-        throw error;
-    }
-}
-
-/**
- * Posts data to the API.
- * @param {string} endpoint The API endpoint to post data to.
- * @param {object} body The data to post.
- * @returns {Promise<any>} The JSON response from the API.
- */
-async function postApi(endpoint, body) {
-    try {
-        const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(body),
-        });
-        if (!response.ok) {
-            throw new Error(`API request failed with status ${response.status}`);
-        }
-        return await response.json();
-    } catch (error) {
-        console.error(`Error posting to ${endpoint}:`, error);
-        addToast(error.message, 'error');
-        throw error;
-    }
-}
-
-export const api = {
-    getPlugins: () => fetchApi('/plugins'),
-    getTasks: () => fetchApi('/tasks'),
-    getTask: (taskId) => fetchApi(`/tasks/${taskId}`),
-    createTask: (pluginId, params) => postApi('/tasks', { plugin_id: pluginId, params }),
-};
+// [DEF:api_module:Module]
+// @SEMANTICS: api, client, fetch, rest
+// @PURPOSE: Handles all communication with the backend API.
+// @LAYER: Infra-API
+
+import { addToast } from './toasts.js';
+
+const API_BASE_URL = 'http://localhost:8000';
+
+// [DEF:fetchApi:Function]
+// @PURPOSE: Generic GET request wrapper.
+// @PARAM: endpoint (string) - API endpoint.
+// @RETURN: Promise<any> - JSON response.
+async function fetchApi(endpoint) {
+    try {
+        console.log(`[api.fetchApi][Action] Fetching from context={{'endpoint': '${endpoint}'}}`);
+        const response = await fetch(`${API_BASE_URL}${endpoint}`);
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+        }
+        return await response.json();
+    } catch (error) {
+        console.error(`[api.fetchApi][Coherence:Failed] Error fetching from ${endpoint}:`, error);
+        addToast(error.message, 'error');
+        throw error;
+    }
+}
+// [/DEF:fetchApi]
+
+// [DEF:postApi:Function]
+// @PURPOSE: Generic POST request wrapper.
+// @PARAM: endpoint (string) - API endpoint.
+// @PARAM: body (object) - Request payload.
+// @RETURN: Promise<any> - JSON response.
+async function postApi(endpoint, body) {
+    try {
+        console.log(`[api.postApi][Action] Posting to context={{'endpoint': '${endpoint}'}}`);
+        const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+        }
+        return await response.json();
+    } catch (error) {
+        console.error(`[api.postApi][Coherence:Failed] Error posting to ${endpoint}:`, error);
+        addToast(error.message, 'error');
+        throw error;
+    }
+}
+// [/DEF:postApi]
+
+// [DEF:api:Data]
+// @PURPOSE: API client object with specific methods.
+export const api = {
+    getPlugins: () => fetchApi('/plugins/'),
+    getTasks: () => fetchApi('/tasks/'),
+    getTask: (taskId) => fetchApi(`/tasks/${taskId}`),
+    createTask: (pluginId, params) => postApi('/tasks', { plugin_id: pluginId, params }),
+    
+    // Settings
+    getSettings: () => fetchApi('/settings'),
+    updateGlobalSettings: (settings) => {
+        return fetch(`${API_BASE_URL}/settings/global`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(settings)
+        }).then(res => res.json());
+    },
+    getEnvironments: () => fetchApi('/settings/environments'),
+    addEnvironment: (env) => postApi('/settings/environments', env),
+    updateEnvironment: (id, env) => {
+        return fetch(`${API_BASE_URL}/settings/environments/${id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(env)
+        }).then(res => res.json());
+    },
+    deleteEnvironment: (id) => {
+        return fetch(`${API_BASE_URL}/settings/environments/${id}`, {
+            method: 'DELETE'
+        }).then(res => res.json());
+    },
+    testEnvironmentConnection: (id) => postApi(`/settings/environments/${id}/test`, {}),
+};
+// [/DEF:api_module]
+
+// Export individual functions for easier use in components
+export const getPlugins = api.getPlugins;
+export const getTasks = api.getTasks;
+export const getTask = api.getTask;
+export const createTask = api.createTask;
+export const getSettings = api.getSettings;
+export const updateGlobalSettings = api.updateGlobalSettings;
+export const getEnvironments = api.getEnvironments;
+export const addEnvironment = api.addEnvironment;
+export const updateEnvironment = api.updateEnvironment;
+export const deleteEnvironment = api.deleteEnvironment;
+export const testEnvironmentConnection = api.testEnvironmentConnection;
--- a/frontend/src/lib/stores.js
+++ b/frontend/src/lib/stores.js
@@ -1,40 +1,60 @@
-import { writable } from 'svelte/store';
-import { api } from './api.js';
-
-// Store for the list of available plugins
-export const plugins = writable([]);
-
-// Store for the list of tasks
-export const tasks = writable([]);
-
-// Store for the currently selected plugin
-export const selectedPlugin = writable(null);
-
-// Store for the currently selected task
-export const selectedTask = writable(null);
-
-// Store for the logs of the currently selected task
-export const taskLogs = writable([]);
-
-// Function to fetch plugins from the API
-export async function fetchPlugins() {
-    try {
-        const data = await api.getPlugins();
-        console.log('Fetched plugins:', data); // Add console log
-        plugins.set(data);
-    } catch (error) {
-        console.error('Error fetching plugins:', error);
-        // Handle error appropriately in the UI
-    }
-}
-
-// Function to fetch tasks from the API
-export async function fetchTasks() {
-    try {
-        const data = await api.getTasks();
-        tasks.set(data);
-    } catch (error) {
-        console.error('Error fetching tasks:', error);
-        // Handle error appropriately in the UI
-    }
-}
+// [DEF:stores_module:Module]
+// @SEMANTICS: state, stores, svelte, plugins, tasks
+// @PURPOSE: Global state management using Svelte stores.
+// @LAYER: UI-State
+
+import { writable } from 'svelte/store';
+import { api } from './api.js';
+
+// [DEF:plugins:Data]
+// @PURPOSE: Store for the list of available plugins.
+export const plugins = writable([]);
+
+// [DEF:tasks:Data]
+// @PURPOSE: Store for the list of tasks.
+export const tasks = writable([]);
+
+// [DEF:selectedPlugin:Data]
+// @PURPOSE: Store for the currently selected plugin.
+export const selectedPlugin = writable(null);
+
+// [DEF:selectedTask:Data]
+// @PURPOSE: Store for the currently selected task.
+export const selectedTask = writable(null);
+
+// [DEF:currentPage:Data]
+// @PURPOSE: Store for the current page.
+export const currentPage = writable('dashboard');
+
+// [DEF:taskLogs:Data]
+// @PURPOSE: Store for the logs of the currently selected task.
+export const taskLogs = writable([]);
+
+// [DEF:fetchPlugins:Function]
+// @PURPOSE: Fetches plugins from the API and updates the plugins store.
+export async function fetchPlugins() {
+    try {
+        console.log("[stores.fetchPlugins][Action] Fetching plugins.");
+        const data = await api.getPlugins();
+        console.log("[stores.fetchPlugins][Coherence:OK] Plugins fetched context={{'count': " + data.length + "}}");
+        plugins.set(data);
+    } catch (error) {
+        console.error(`[stores.fetchPlugins][Coherence:Failed] Error fetching plugins context={{'error': '${error}'}}`);
+    }
+}
+// [/DEF:fetchPlugins]
+
+// [DEF:fetchTasks:Function]
+// @PURPOSE: Fetches tasks from the API and updates the tasks store.
+export async function fetchTasks() {
+    try {
+        console.log("[stores.fetchTasks][Action] Fetching tasks.");
+        const data = await api.getTasks();
+        console.log("[stores.fetchTasks][Coherence:OK] Tasks fetched context={{'count': " + data.length + "}}");
+        tasks.set(data);
+    } catch (error) {
+        console.error(`[stores.fetchTasks][Coherence:Failed] Error fetching tasks context={{'error': '${error}'}}`);
+    }
+}
+// [/DEF:fetchTasks]
+// [/DEF:stores_module]
--- a/frontend/src/lib/toasts.js
+++ b/frontend/src/lib/toasts.js
@@ -1,13 +1,33 @@
-import { writable } from 'svelte/store';
-
-export const toasts = writable([]);
-
-export function addToast(message, type = 'info', duration = 3000) {
-    const id = Math.random().toString(36).substr(2, 9);
-    toasts.update(all => [...all, { id, message, type }]);
-    setTimeout(() => removeToast(id), duration);
-}
-
-function removeToast(id) {
-    toasts.update(all => all.filter(t => t.id !== id));
-}
+// [DEF:toasts_module:Module]
+// @SEMANTICS: notification, toast, feedback, state
+// @PURPOSE: Manages toast notifications using a Svelte writable store.
+// @LAYER: UI-State
+
+import { writable } from 'svelte/store';
+
+// [DEF:toasts:Data]
+// @PURPOSE: Writable store containing the list of active toasts.
+export const toasts = writable([]);
+
+// [DEF:addToast:Function]
+// @PURPOSE: Adds a new toast message.
+// @PARAM: message (string) - The message text.
+// @PARAM: type (string) - The type of toast (info, success, error).
+// @PARAM: duration (number) - Duration in ms before the toast is removed.
+export function addToast(message, type = 'info', duration = 3000) {
+    const id = Math.random().toString(36).substr(2, 9);
+    console.log(`[toasts.addToast][Action] Adding toast context={{'id': '${id}', 'type': '${type}', 'message': '${message}'}}`);
+    toasts.update(all => [...all, { id, message, type }]);
+    setTimeout(() => removeToast(id), duration);
+}
+// [/DEF:addToast]
+
+// [DEF:removeToast:Function]
+// @PURPOSE: Removes a toast message by ID.
+// @PARAM: id (string) - The ID of the toast to remove.
+function removeToast(id) {
+    console.log(`[toasts.removeToast][Action] Removing toast context={{'id': '${id}'}}`);
+    toasts.update(all => all.filter(t => t.id !== id));
+}
+// [/DEF:removeToast]
+// [/DEF:toasts_module]