Merge pull request #5 from iceljc/features/add-refresh-agents

add refresh agents

Author: Oceania2018

package.json

@@ -6,7 +6,8 @@
             "node": ">=18.0.0"
         },
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "npm run open-browser && vite dev",
+		"open-browser": "start http://localhost:5015/",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",

src/lib/services/agent-service.js

@@ -44,3 +44,7 @@ export async function saveAgent(agent) {
     await axios.put(url, agent);
 }
 
+export async function refreshAgents() {
+    const url = endpoints.agentRefreshUrl;
+    await axios.post(url);
+}

src/lib/services/api-endpoints.js

@@ -21,6 +21,7 @@ export const endpoints = {
     agentSettingUrl: `${host}/agent/settings`,
     agentListUrl: `${host}/agents`,
     agentDetailUrl: `${host}/agent/{id}`,
+    agentRefreshUrl: `${host}/refresh-agents`,
 
     // router
     routerSettingUrl: `${host}/router/settings`,

src/routes/page/mongodb/+page.svelte

@@ -1,11 +1,27 @@
 <script>
-	import { Col, Row } from '@sveltestrap/sveltestrap';
+	import { Alert, Button, Col, Row } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import { onMount } from 'svelte';
+  import { onMount } from 'svelte';
+	import { refreshAgents } from '$lib/services/agent-service';
 
   /** @type {import('$types').AgentModel[]} */
   let agents = [];
+  let isLoading = false;
+  let isComplete = false;
+
+  const refreshAgentData = () => {
+    isLoading = true;
+    refreshAgents().then(res => {
+      isComplete = true;
+      isLoading = false;
+      setTimeout(() => {
+        isComplete = false;
+      }, 3000);
+    }).catch(err => {
+      isLoading = false;
+    });
+  };
 
   onMount(async () => {
     agents = await getAgents({
@@ -18,7 +34,19 @@
 
 <Breadcrumb title="MongoDB" pagetitle="Setting" />
 
+{#if isLoading}
+  <Alert color="secondary">
+    <div>In Progress...</div>
+  </Alert>
+{/if}
+
+{#if isComplete}
+  <Alert color="success">
+    <div>Update comppleted!</div>
+  </Alert>
+{/if}
+
 <h3>Migrate agents from file repository to MongoDB</h3>
-<button class="btn btn-primary btn-sm">
-    <i class="bx bx-copy" /> Start Migration
-</button>
+<Button color="primary" on:click={() => refreshAgentData()}>
+  <i class="bx bx-copy" /> Start Migration
+</Button>