move mongo to settings

src/lib/services/agent-service.js

@@ -63,10 +63,12 @@ export async function deleteAgent(agentId) {
 
 /**
  * Refresh agent data
+ * @returns {Promise<string>}
  */
 export async function refreshAgents() {
     const url = endpoints.agentRefreshUrl;
-    await axios.post(url);
+    const response = await axios.post(url);
+    return response.data;
 }
 
 /**

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

@@ -5,7 +5,7 @@
 	import { refreshAgents } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
     import { _ } from 'svelte-i18n';
-    import Swal from 'sweetalert2'
+    import Swal from 'sweetalert2';
 
     let isLoading = false;
     let isComplete = false;

src/routes/page/setting/+page.svelte

@@ -1,7 +1,7 @@
 <script>
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
+    import { onMount } from 'svelte';
     import { _ } from 'svelte-i18n';
+    import Swal from 'sweetalert2';
     import {
 		Card,
 		CardBody,
@@ -13,43 +13,94 @@
 		NavLink,
 		Row,
 		TabContent,
-		TabPane
+		TabPane,
+        Button
 	} from '@sveltestrap/sveltestrap';
-    import { onMount } from 'svelte';
+    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import { getSettings, getSettingDetail } from '$lib/services/setting-service';
     import { JSONEditor } from 'svelte-jsoneditor';
+	import { refreshAgents } from '$lib/services/agent-service';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+
+    const duration = 3000;
+    let isLoading = false;
+    let isComplete = false;
+    let isError = false;
+    let successText = '';
+    let errorText = '';
 
-    let customActiveTab = '1';
+    let selectedTab = '1';
     /** @type {string[]} */
     let settings = [];
 
-    let content = {
-        json: {
-        }
-    };
+    let content = { json: {} };
 
     onMount(async () => {
         settings = await getSettings();   
-        customActiveTab = settings[0];
-        handleGetSettingDetail(settings[0]);         
+        selectedTab = settings[0];
+        handleGetSettingDetail(selectedTab);         
     });
 
     /**
-     * 
      * @param {string} tab
      */
     async function handleGetSettingDetail(tab) {
-        customActiveTab = tab;
+        selectedTab = tab;
         const detail = await getSettingDetail(tab);
         content = {
             json: detail
         };
     }
+
+    function readyToRefresh() {
+		// @ts-ignore
+        Swal.fire({
+            title: 'Are you sure?',
+            text: "You will migrate all agents data to mongoDb.",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Yes',
+            cancelButtonText: 'No'
+        }).then((result) => {
+            if (result.value) {
+                refreshAgentData();
+            }
+        });
+	}
+
+    const refreshAgentData = () => {
+        isLoading = true;
+        refreshAgents().then(res => {
+            isComplete = true;
+            isLoading = false;
+            successText = res;
+            setTimeout(() => {
+                isComplete = false;
+                successText = '';
+            }, duration);
+        }).catch(err => {
+            isLoading = false;
+            isComplete = false;
+            isError = true;
+            errorText = 'Failed to migrate agents.';
+            setTimeout(() => {
+                isError = false;
+                errorText = '';
+            }, duration);
+        });
+    };
 </script>
 
 <HeadTitle title="{$_('Settings')}" />
-
 <Breadcrumb title="{$_('Settings')}" pagetitle="{$_('Detail')}" />
+<LoadingToComplete
+    isLoading={isLoading}
+    isComplete={isComplete}
+    isError={isError}
+    successText={successText}
+    errorText={errorText}
+/>
 
 <Card>
     <CardBody>
@@ -62,7 +113,7 @@
                 <NavLink
                     style="cursor: pointer"
                     on:click={() => handleGetSettingDetail(tab)}
-                    active={customActiveTab == tab}
+                    active={selectedTab == tab}
                 >
                     <span class="d-block d-sm-none">
                         <i class="fas fa-home" />
@@ -73,14 +124,14 @@
             {/each}
         </Nav>
 
-        <TabContent activeTab={customActiveTab} class="p-3 text-muted">
+        <TabContent class="p-3 text-muted">
             {#each settings as tab}
-            <TabPane tabId={tab} class={customActiveTab == tab ? 'active' : ''}>
+            <TabPane tabId={tab} class={selectedTab == tab ? 'active' : ''}>
                 <Row>
                     <Col sm="12">
                         <CardText class="mb-0">
                             <div class="my-json-editor">
-                                <JSONEditor bind:content expand={() => { return true;}}/>
+                                <JSONEditor bind:content />
                             </div>
                         </CardText>
                     </Col>
@@ -91,6 +142,18 @@
     </CardBody>
 </Card>
 
+
+<Card>
+    <CardBody>
+        <CardTitle class="h4">{$_('Migrate agents from file repository to MongoDB')}</CardTitle>
+        <p class="card-title-desc"></p>
+
+        <Button color="primary" on:click={() => readyToRefresh()} disabled={isLoading}>
+            <i class="bx bx-copy" /> {$_('Start Migration')}
+        </Button>
+    </CardBody>
+</Card>
+
 <style>
     .my-json-editor {
       /* define a custom theme color */