context-path 대응

ApiTestManager/src/APIClient.js

@@ -7,10 +7,18 @@
  */
 
 class APIClient {
-    constructor() {
+
+    CLIENT_URL = 'mgmt/api/test.do';
+
+    constructor(contextPath) {
         window.globals = {};
         this.variables = {};
         this.abortController = null;
+        this.contextPath = contextPath || '/';
+    }
+
+    getClientUrl() {
+        return this.contextPath + this.CLIENT_URL;
     }
 
     async sendAPIRequest(model, preProcessCallback, consoleOutput) {
@@ -67,7 +75,7 @@ class APIClient {
         const {signal} = this.abortController;
 
         try {
-            return fetch('/mgmt/api/test.do', {
+            return fetch(this.getClientUrl(), {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

ApiTestManager/src/APIScenario.js

@@ -4,12 +4,28 @@ import APIScenarioExecutor from "./APIScenarioExecutor";
 import Drawflow from "drawflow";
 
 class APIScenario {
-    constructor(apiTester) {
+
+    constructor(apiTester, contextPath) {
         this.scenarioList = [];
-        this.currentIndex = -1;
         this.currentScenario = null;
         this.apiTester = apiTester;
-        console.log('constructor');
+        this.contextPath = contextPath || '/';
+    }
+
+    getAPIScenarioListURL() {
+        return this.contextPath + 'mgmt/api_scenario/list.do';
+    }
+
+    getAPIScenarioCreateURL() {
+        return this.contextPath + 'mgmt/api_scenario/create.do';
+    }
+
+    getAPIScenarioUpdateURL() {
+        return this.contextPath + 'mgmt/api_scenario/update.do';
+    }
+
+    getAPIScenarioDeleteURL() {
+        return this.contextPath + 'mgmt/api_scenario/delete.do';
     }
 
     init() {
@@ -36,7 +52,7 @@ class APIScenario {
     loadScenarioList(callback) {
         const me = this;
         this.currentAjaxRequest = $.ajax({
-            url: '/mgmt/api_scenario/list.do',
+            url: this.getAPIScenarioListURL(),
             type: 'GET',
             contentType: 'application/json',
             success: function (data) {
@@ -114,7 +130,7 @@ class APIScenario {
         const me = this;
         me.showLoadingOverlay();
         this.currentAjaxRequest = $.ajax({
-            url: '/mgmt/api_scenario/create.do',
+            url: this.getAPIScenarioCreateURL(),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify({name: name, scenario: "{}", description: ""}),
@@ -152,7 +168,7 @@ class APIScenario {
             const me = this;
             me.showLoadingOverlay();
             this.currentAjaxRequest = $.ajax({
-                url: '/mgmt/api_scenario/update.do',
+                url: this.getAPIScenarioUpdateURL(),
                 type: 'POST',
                 contentType: 'application/json',
                 data: JSON.stringify(updatedScenario),
@@ -181,7 +197,7 @@ class APIScenario {
         const me = this;
         me.showLoadingOverlay();
         this.currentAjaxRequest = $.ajax({
-            url: '/mgmt/api_scenario/delete.do',
+            url: this.getAPIScenarioDeleteURL(),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify({id: id}),

ApiTestManager/src/APITester.js

@@ -9,7 +9,7 @@ import VariableSnippet from "./components/VariableSnippet";
 
 class APITester {
 
-    constructor() {
+    constructor(contextPath) {
         this.servers = [];
         this.apiTabTitleTarget = '#apiRequestTabTitle';
         this.apiTabContentTarget = '#apiRequestTabContent';
@@ -26,8 +26,35 @@ class APITester {
         this.apiClient = new APIClient();
         this.popperContent = document.getElementById('popperContent');
         this.popperInstance = null;
+        this.contextPath = contextPath || '/';
     }
 
+    getCollectionListURL(){
+        return this.contextPath + 'mgmt/collections/list.do';
+    }
+
+    getCollectionCreateURL(){
+        return this.contextPath + 'mgmt/collections/create.do';
+    }
+
+    getCollectionUpdateURL(){
+        return this.contextPath + 'mgmt/collections/update.do';
+    }
+
+    getCollectionDeleteURL(){
+        return this.contextPath + 'mgmt/collections/delete.do';
+    }
+
+    getAPISaveURL(collectionId){
+        return this.contextPath + `mgmt/collections/${collectionId}/apis/save.do`;
+    }
+
+    getAPIDeleteURL(collectionId){
+        return this.contextPath + `mgmt/collections/${collectionId}/apis/delete.do`;
+    }
+
+
+
     renderServers(selectedServer) {
         const optionsHtml = this.servers.map(server => `
             <option value="${server.id}" ${selectedServer === server.id ? 'selected' : ''}  data-path="${server.basePath}">${server.name}</option>
@@ -749,12 +776,6 @@ class APITester {
             start: function (event, ui) {
                 // You can add any additional data or styles you want when dragging starts
                 $(this).addClass('dragging');
-                const apiDetails = {
-                    name: 'API 이름',
-                    method: 'POST',
-                    url: 'http://localhost:8080/api/test'
-                };
-
             },
             stop: function (event, ui) {
                 // Clean up, e.g., remove styles or data
@@ -908,7 +929,7 @@ class APITester {
     loadCollections() {
         const me = this;
         this.currentAjaxRequest = $.ajax({
-            url: '/mgmt/collections/list.do',
+            url: this.getCollectionListURL(),
             type: 'GET',
             contentType: 'application/json',
             success: function (data) {
@@ -936,7 +957,7 @@ class APITester {
         const me = this;
         me.showLoadingOverlay();
         this.currentAjaxRequest = $.ajax({
-            url: '/mgmt/collections/create.do',
+            url: this.getCollectionCreateURL(),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify({name: name}),
@@ -957,7 +978,7 @@ class APITester {
         const me = this;
         me.showLoadingOverlay();
         this.currentAjaxRequest = $.ajax({
-            url: '/mgmt/collections/update.do',
+            url: this.getCollectionUpdateURL(),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify({id: id, name: name}),
@@ -979,7 +1000,7 @@ class APITester {
         const me = this;
         me.showLoadingOverlay();
         this.currentAjaxRequest = $.ajax({
-            url: '/mgmt/collections/delete.do',
+            url: this.getCollectionDeleteURL(),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify({id: collectionId}),
@@ -1002,7 +1023,7 @@ class APITester {
         const me = this;
         me.showLoadingOverlay();
         this.currentAjaxRequest = $.ajax({
-            url: `/mgmt/collections/${model.collectionId}/apis/save.do`,
+            url: this.getAPISaveURL(model.collectionId),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify(model),
@@ -1029,7 +1050,7 @@ class APITester {
         me.showLoadingOverlay();
 
         this.currentAjaxRequest = $.ajax({
-            url: `/mgmt/collections/${model.collectionId}/apis/save.do`,
+            url: this.getAPISaveURL(model.collectionId),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify(model),
@@ -1083,7 +1104,7 @@ class APITester {
         newApi.collectionName = collection.name;
 
         this.currentAjaxRequest = $.ajax({
-            url: `/mgmt/collections/${collectionId}/apis/save.do`,
+            url: this.getAPISaveURL(collectionId),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify(newApi),
@@ -1175,7 +1196,7 @@ class APITester {
         }
         const me = this;
         this.currentAjaxRequest = $.ajax({
-            url: `/mgmt/collections/${collectionId}/apis/delete.do`,
+            url: this.getAPIDeleteURL(collectionId),
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify({id: apiId}),

ApiTestManager/src/index.js

@@ -21,10 +21,10 @@ window.MonacoEnvironment = {
 
 export default class APITestManager {
 
-    constructor(servers) {
+    constructor(servers, options = {}) {
-        this.apiTester = new APITester();
+        this.apiTester = new APITester(options.contextPath);
         this.apiTester.init(servers);
-        this.apiScenario = new APIScenario(this.apiTester);
+        this.apiScenario = new APIScenario(this.apiTester, options.contextPath);
         this.apiScenario.init();
     }
 

src/main/resources/templates/page/tester/apiTester.html

@@ -35,12 +35,10 @@
 </body>
 
 <th:block layout:fragment="contentScript">
-<!--    <script th:src="@{/plugins/apitestmanager/vendors.bundle.js}" defer></script>-->
-<!--    <script th:src="@{/plugins/apitestmanager/app.bundle.js}" defer></script>-->
     <script>
         $(document).ajaxError(function (event, jqxhr, settings, exception) {
             if (jqxhr.status === 401) {
-                window.location.href = '/';
+                window.location.href = '[[@{/}]]';
             }
         });
 
@@ -53,8 +51,9 @@
                     basePath: $(this).data('path')
                 });
             });
-
+            let options = {};
-            const apiTester = new APITestManager(servers);
+            options.contextPath = '[[@{/}]]';
+            const apiTester = new APITestManager(servers, options);
         });
     </script>
 </th:block>