dynamic menu

SciSharp · Jan 13, 2024 · 6e4fc44 · 6e4fc44
1 parent a0e710a
commit 6e4fc44
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
         "engines": {
-                "node": ">=18.0.0"
+            "node": ">=18.0.0"
         },
 	"scripts": {
 		"dev": "vite dev",

diff --git a/src/lib/common/data/Layoutmenudata.js b/src/lib/common/data/Layoutmenudata.js
diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
@@ -33,7 +33,16 @@
  * @property {string} description - The plugin description.
  * @property {string} assembly - The plugin assembly.
  * @property {string} icon_url
- * @property {boolean} with_agent
+ * @property {string[]} agent_ids
+ * @property {boolean} enabled
+ */
+
+/**
+ * @typedef {Object} PluginMenuDefModel
+ * @property {string} label
+ * @property {string} icon
+ * @property {string} link
+ * @property {boolean} isHeader
  */
 
 /**
@@ -64,6 +73,7 @@
  * @property {boolean} [isRouter]
  * @property {boolean} [isEvaluator]
  * @property {boolean} [allowRouting]
+ * @property {boolean} [disabled]
  */
 
 /**

diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
@@ -9,6 +9,9 @@ export const endpoints = {
 
     // plugin
     pluginListUrl: `${host}/plugins`,
+    pluginMenuUrl: `${host}/plugin/menu`,
+    pluginEnableUrl: `${host}/plugin/{id}/enable`,
+    pluginDisableUrl: `${host}/plugin/{id}/disable`,
 
     // agent
     agentSettingUrl: `${host}/agent/settings`,

diff --git a/src/lib/services/plugin-service.js b/src/lib/services/plugin-service.js
@@ -1,12 +1,45 @@
 import { endpoints } from './api-endpoints.js';
+import { replaceUrl } from '$lib/helpers/http.js';
 import axios from 'axios';
 
 /**
  * Get plugin list
  * @returns {Promise<import('$types').PluginDefModel[]>}
  */
-export async function GetPlugins() {
+export async function getPlugins() {
     let url = endpoints.pluginListUrl;
     const response = await axios.get(url);
     return response.data;
 }
+
+/**
+ * Get plugin menu
+ * @returns {Promise<import('$types').PluginMenuDefModel[]>}
+ */
+export async function getPluginMenu() {
+    let url = endpoints.pluginMenuUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
+/**
+ * Enable plugin
+ * @param {string} id 
+ * @returns {Promise<import('$types').PluginDefModel>}
+ */
+export async function enablePlugin(id) {
+    let url = replaceUrl(endpoints.pluginEnableUrl, {id: id});
+    const response = await axios.post(url);
+    return response.data;
+}
+
+/**
+ * Disable plugin
+ * @param {string} id 
+ * @returns {Promise<import('$types').PluginDefModel>}
+ */
+export async function disablePlugin(id) {
+    let url = replaceUrl(endpoints.pluginDisableUrl, {id: id});
+    const response = await axios.post(url);
+    return response.data;
+}
diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte
@@ -2,13 +2,19 @@
 	import { onMount, afterUpdate } from 'svelte';
 	import 'overlayscrollbars/overlayscrollbars.css';
 	import { OverlayScrollbars } from 'overlayscrollbars';
-	import data from '$lib/common/data/Layoutmenudata';
 	import Link from 'svelte-link';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { _ } from 'svelte-i18n'
+	import { getPluginMenu } from '$lib/services/plugin-service';
 
-	// after routeing complete call afterUpdate function
+	/** @type {import('$types').PluginMenuDefModel[]} */
+	let menu = [];
+	onMount(async () => {
+        menu = await getPluginMenu();
+    });
+
+	// after routing complete call afterUpdate function
 	afterUpdate(() => {
 
 		removeActiveDropdown()
@@ -167,7 +173,7 @@
 		<div id="sidebar-menu">
 			<!-- Left Menu Start -->
 			<ul class="metismenu list-unstyled" id="side-menu">
-				{#each data.Navdata as item}
+				{#each menu as item}
 					{#if item.isHeader}
 						<li class="menu-title" key="t-menu">{$_(item.label)}</li>
 					{:else if item.subMenu}

diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte
@@ -16,6 +16,7 @@
         agents = await getAgents({
             isRouter: false,
             isEvaluator: false,
+            disabled: false,
             allowRouting: true
         });
 
@@ -56,8 +57,8 @@
         posY = 100;
         posX += nodeSpace;
         nodeId++;
-        agents.forEach(agent => { 
-            editor.addNode('agent', 1, 0, posX, posY, 'agent', data, `Agent (${agent.name})`, false);    
+        agents.forEach(agent => {                           
+            editor.addNode('agent', 1, 0, posX, posY, 'enabled-node', data, `Agent (${agent.name})`, false);
             editor.addConnection(2, nodeId, `output_1`, `input_1`);    
             posY += 100;
             nodeId++;

diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
@@ -3,13 +3,13 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import Plugins from './plugin-list.svelte';
     import { onMount } from 'svelte';
-    import { GetPlugins } from '$lib/services/plugin-service';
+    import { getPlugins } from '$lib/services/plugin-service';
 
     /** @type {import('$types').PluginDefModel[]} */
     let plugins = [];
 
     onMount(async () => {
-        plugins = await GetPlugins();
+        plugins = await getPlugins();
     });
 </script>
 

diff --git a/src/routes/page/plugin/plugin-list.svelte b/src/routes/page/plugin/plugin-list.svelte
@@ -11,10 +11,27 @@
 		Input,
 		Button
 	} from '@sveltestrap/sveltestrap';
+	import { enablePlugin, disablePlugin } from '$lib/services/plugin-service';
+	import { goto } from '$app/navigation';
 
     /** @type {import('$types').PluginDefModel[]} */
     export let plugins;
 
+	/** 
+	 * @param {string} id
+	 * @param {boolean} enable
+	*/
+	async function handlePluginStatus(id, enable) {
+		if (enable) {
+			await enablePlugin(id);
+		} else {
+			await disablePlugin(id);
+		}
+		
+		const path = window.location.pathname;
+		// refresh page
+		goto('/').then(() => goto(path));
+	}
 </script>
 
 <Row>
@@ -27,7 +44,7 @@
 					</div>
 					<img src="{item.icon_url}" alt="{item.name}" height="35" class="mb-3" />
 					<h5 class="fs-17 mb-2">
-						<Link href="/jobs/details" class="text-dark">{item.name}</Link>
+						<Link href="#" class="text-dark">{item.name}</Link>
 						<small class="text-muted fw-normal">plugin</small>
 					</h5>
 					<ul class="list-inline mb-0">
@@ -43,15 +60,15 @@
 						</li>
 					</ul>
 					<div class="mt-3 hstack gap-2">
-						<span class="badge rounded-1 badge-soft-success">Enabled</span>
-						{#if item.with_agent}
-						<span class="badge rounded-1 badge-soft-warning">Agent</span>
+						<span class="badge rounded-1 badge-soft-{item.enabled ? 'success' : 'danger'}">{item.enabled ? "Enabled" : "Disabled"}</span>
+						{#if item.agent_ids.length > 0}
+						<span class="badge rounded-1 badge-soft-info">{item.agent_ids.length} Agent(s)</span>
 						{/if}
 						<span class="badge rounded-1 badge-soft-info">Public</span>
 					</div>
 					<div class="mt-2 hstack pt-2 gap-2 border-top">
 						<a href="/plugin/{item.id}" class="btn btn-soft-success btn-sm">Settings</a>
-						<a href="#" class="btn btn-soft-warning btn-sm">Disable</a>
+						<a href="#" class="btn btn-soft-warning btn-sm" on:click={() => handlePluginStatus(item.id, !item.enabled)}>{item.enabled ? "Disable" : "Enable"}</a>
 					</div>
 				</CardBody>
 			</Card>