add topology

Author: Jicheng Lu

src/lib/helpers/types/agentTypes.js

@@ -231,6 +231,7 @@
  * @property {string} trigger_name 
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {any?} [config]
  * @property {any?} [output_args]
  * @property {string?} [json_args]
  * @property {string?} [statement]

src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte

@@ -3,14 +3,12 @@
     import { slide } from 'svelte/transition';
     import { Input } from '@sveltestrap/sveltestrap';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import CodeScript from '$lib/common/shared/CodeScript.svelte';
 	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
 
     const svelteDispatch = createEventDispatcher();
 
     const duration = 200;
-    const textLimit = 1024;
 
     /** @type {import('$agentTypes').AgentRule} */
     export let rule;
@@ -27,8 +25,8 @@
     /** @type {any[]} */
     export let ruleOptions = [];
 
-    /** @type {any} */
-    export let configOptions = {};
+    /** @type {any[]} */
+    export let configOptions = [];
 
     /** @type {number} */
     export let windowWidth;
@@ -75,11 +73,11 @@
         });
     }
 
-    function compileCodeScript() {
-        svelteDispatch('compile', {
-            rule: rule
-        });
-    }
+    // function compileCodeScript() {
+    //     svelteDispatch('compile', {
+    //         rule: rule
+    //     });
+    // }
 
     function toggleConfig() {
         svelteDispatch('config', {
@@ -140,7 +138,7 @@
                 </div>
                 {/if}
 
-                {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && Object.keys(configOptions || {}).length > 0}
+                {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && rule.config?.topology_provider}
                 <!-- svelte-ignore a11y-no-static-element-interactions -->
                 <div class="line-align-center">
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -186,6 +184,31 @@
     {#if !collapsed}
     <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
         <div class="utility-content">
+            <div class="utility-list-item">
+                <div class="utility-label line-align-center">
+                    <div class="d-flex gap-1">
+                        <div class="line-align-center">
+                            {'Topology'}
+                        </div>
+                        <div class="line-align-center"></div>
+                    </div>
+                </div>
+                <div class="utility-value">
+                    <div class="utility-input line-align-center">
+                        <Input
+                            type="select"
+                            on:change={e => changeRule(e, 'topology')}
+                        >
+                            {#each [...configOptions] as option}
+                                <option value={`${option.name}`} selected={option.name == rule.config?.topology_provider}>
+                                    {option.name}
+                                </option>
+                            {/each}
+                        </Input>
+                    </div>
+                    <div class="utility-delete line-align-center"></div>
+                </div>
+            </div>
             <!-- <div class="utility-list-item">
                 <div class="utility-label line-align-center">
                     <div class="d-flex gap-1">

src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte

@@ -31,7 +31,9 @@
     let errorText = '';
 
     /** @type {any} */
-    let ruleConfig = {};
+    let selectedRuleConfig = {};
+    /** @type {any} */
+    let ruleConfigs = {};
 
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
@@ -47,6 +49,7 @@
             return {
                 trigger_name: x.trigger_name,
                 disabled: x.disabled,
+                config: x.config,
                 expanded: x.expanded
             };
         });
@@ -69,7 +72,7 @@
     let ruleOptions = [];
 
     /** @type {any} */
-    let configOptions = {};
+    let configOptions = [];
 
     /** @type {import('$agentTypes').AgentRule[]} */
     let innerRules = [];
@@ -120,7 +123,13 @@
     function loadAgentRuleConfigOptions() {
         return new Promise((resolve) => {
             getAgentRuleConfigOptions().then(data => {
-                configOptions = data || {};
+                ruleConfigs = data || {};
+                const keys = Object.keys(data || {});
+                const list = keys?.map(x => ({ name: x })) || [];
+                configOptions = [
+                    { name: '' },
+                    ...list
+                ];
                 resolve('done');
             });
         });
@@ -139,7 +148,13 @@
         if (field === 'rule') {
             found.trigger_name = value;
             innerRefresh(innerRules);
-        } 
+        } else if (field === 'topology') {
+            found.config = {
+                ...found.config || {},
+                topology_provider: value
+            };
+            innerRefresh(innerRules);
+        }
         
         // else if (field === 'criteria') {
         //     const name = value.split('#')[0];
@@ -362,25 +377,30 @@
 	 */
     function openRuleConfigModal(e, uid) {
         const found = innerRules.find((_, index) => index === uid);
-        if (!found) return;
-
-        const graph = configOptions['membase'];
-        const params = JSON.stringify({
-            agent: agent.name,
-            agent_id: agent.id,
-            trigger: found.trigger_name || ""
-        });
-        const url = new URL(graph.url, window.location.origin);
-        url.searchParams.set('parameters', params);
-        console.log(url.toString());
+        if (!found || !found.config?.topology_provider) {
+            return;
+        }
 
-        ruleConfig = {
-            url: url.toString(),
-            rule: found,
-            title: `${found.trigger_name} config`
-        };
+        const config = ruleConfigs[found.config.topology_provider];
+        const customParam = config.customParameters || {};
 
-        isOpenConfigModal = true;
+        if (customParam.htmlTag === 'iframe') {
+            const params = JSON.stringify({
+                agent: agent.name,
+                agentId: agent.id,
+                trigger: found.trigger_name || ""
+            });
+            const url = new URL(customParam.url, window.location.origin);
+            url.searchParams.set(customParam.appendParameterName || 'parameters', encodeURIComponent(params));
+
+            selectedRuleConfig = {
+                agent: agent.name,
+                url: url.toString(),
+                rule: found,
+                title: `${found.trigger_name} config`
+            };
+            isOpenConfigModal = true;
+        }
     }
 
     function resizeWindow() {
@@ -402,12 +422,12 @@
 {#if isOpenConfigModal}
     <PlainModal
         containerClasses={'rule-config-modal'}
-        title={ruleConfig?.rule?.trigger_name || ''}
+        title={selectedRuleConfig?.rule?.trigger_name || ''}
         size={'xl'}
         isOpen={isOpenConfigModal}
         toggleModal={() => isOpenConfigModal = !isOpenConfigModal}
     >
-        <iframe src={ruleConfig.url} title={ruleConfig.title} width="100%" height="100%" />
+        <iframe src={selectedRuleConfig.url} title={selectedRuleConfig.title} width="100%" height="100%" />
     </PlainModal>
 {/if}