console 추가

src/main/resources/static/css/custom.css

@@ -1920,4 +1920,8 @@ footer div.foot_info span {
 
 .bar-zoom svg:nth-child(1) {
     padding-left: 20px;
+}
+
+.response_headers td{
+    padding: 1px !important;
 }

src/main/resources/static/js/APIClient.js

@@ -14,9 +14,10 @@ class APIClient {
         this.abortController = null;
     }
 
-    async sendAPIRequest(model, preProcessCallback) {
+
+    async sendAPIRequest(model, preProcessCallback, consoleOutput) {
         // try {
-        const updatedModel = await this.executePreRequestScript(model);
+        const updatedModel = await this.executePreRequestScript(model, consoleOutput);
         let processedRequest = this.replacePlaceholdersWithVariables(updatedModel);
         if (preProcessCallback) {
             preProcessCallback(processedRequest);
@@ -25,7 +26,6 @@ class APIClient {
             .then(async response => {
                 const responseData = await response.json(); // Parse the JSON response
                 if (!response.ok) {
-                    // If response is not OK, use the parsed error information
                     const errorMessage = responseData.error || 'Unknown error';
                     throw new Error(`API 호출 중 오류가 발생했습니다. 사유[${errorMessage}]`);
                 }
@@ -40,7 +40,7 @@ class APIClient {
                 _.forEach(data.headers, (header) => {
                     response.headers[header.key] = header.value;
                 });
-                return this.executePostRequestScript(model.postRequestScript, response)
+                return this.executePostRequestScript(model.postRequestScript, response, consoleOutput)
                     .catch(error => {
                         $('.toast-body').text(error);
                         $('.toast').toast('show');
@@ -112,17 +112,13 @@ class APIClient {
         return request;
     }
 
-    executePreRequestScript(model) {
+
+    executePreRequestScript(model, consoleOutput) {
         return new Promise((resolve, reject) => {
             let script = model.preRequestScript;
             let resultFrame = document.getElementById('preRequest');
 
             this.variables = {};
-            model.variables.forEach((item) => {
-                if (item.enabled) {
-                    this.variables[item.key] = item.value;
-                }
-            });
 
             window.preRequestComplete = (updatedModel, error) => {
                 if (error) {
@@ -134,7 +130,15 @@ class APIClient {
 
             window.temp_variable = this.variables;
             window.currentRequest = model;
+            window.consoleOutput = consoleOutput;
             resultFrame.srcdoc = `<script>
+                var oldLog = console.log;
+                console.log = function(message) {
+                    if(window.parent.consoleOutput)
+                        window.parent.consoleOutput(message);  
+                    oldLog.apply(console, arguments);
+                };
+                
                 window.globals = window.parent.globals;
                 window.variables = window.parent.temp_variable;
                 window.request = window.parent.currentRequest;
@@ -149,21 +153,26 @@ class APIClient {
         });
     }
 
-    executePostRequestScript(script, response) {
+    executePostRequestScript(script, response, consoleOutput) {
         return new Promise((resolve, reject) => {
             let resultFrame = document.getElementById('postRequest');
             window.response = response;
             window.temp_variable = this.variables;
             window.postRequestComplete = (response, error) => {
-                console.log(response)
                 if (error) {
                     reject(error);
                 } else {
                     resolve(response);
                 }
             };
-
+            window.consoleOutput = consoleOutput;
             resultFrame.srcdoc = `<script>
+            var oldLog = console.log;
+            console.log = function(message) {
+                if(window.parent.consoleOutput)
+                    window.parent.consoleOutput(message); 
+                oldLog.apply(console, arguments);
+            };
             window.globals = window.parent.globals;
             window.variables = window.parent.temp_variable;
             window.response = window.parent.response;

src/main/resources/static/js/APIScenario.js

@@ -33,7 +33,7 @@ class APIScenario {
         this.showOutput = true;
     }
 
-    loadScenarioList() {
+    loadScenarioList(callback) {
         const me = this;
         this.currentAjaxRequest = $.ajax({
             url: '/mgmt/api_scenario/list.do',
@@ -53,12 +53,7 @@ class APIScenario {
                 });
 
                 me.editor.import(drawflowData);
-                // if (data.length === 0) {
                 me.editor.changeModule('Home');
-                // } else {
-                //     me.editor.changeModule(data[0].id);
-                //     me.currentScenario = data[0].id;
-                // }
             },
             error: function (response, textStatus, errorThrown) {
                 me.hideLoadingOverlay();
@@ -67,6 +62,9 @@ class APIScenario {
             },
             complete: function () {
                 me.renderScenarioList();
+                if (callback) {
+                    callback();
+                }
                 me.hideLoadingOverlay();
             }
         });
@@ -79,12 +77,18 @@ class APIScenario {
     openScenario(event) {
         event.preventDefault();
         let scenarioId = $(event.target).closest('li').data('id');
+        this.openScenarioById(scenarioId);
+    }
+    openScenarioById(scenarioId) {
         let all = document.querySelectorAll(".api-scenario-list li");
 
         for (let i = 0; i < all.length; i++) {
             all[i].classList.remove('selected');
         }
-        event.target.closest('li').classList.add('selected');
+
+        //find li by data-id and add class selected
+
+        document.querySelector(`.api-scenario-list li[data-id="${scenarioId}"]`).classList.add('selected');
 
         this.editor.changeModule(scenarioId);
         this.currentScenario = scenarioId;
@@ -116,13 +120,24 @@ class APIScenario {
             type: 'POST',
             contentType: 'application/json',
             data: JSON.stringify({name: name, scenario: "{}", description: ""}),
+            success: function (data) {
+                me.loadScenarioList(()=> {
+                    me.openScenarioById(data.id);
+                    let start = `
+                        <div>
+                            <div><i class="fas fa-play"></i> Start </div>
+                        </div>
+                    `;
+                    me.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start);
+                });
+            },
             error: function (response, textStatus, errorThrown) {
                 me.hideLoadingOverlay();
                 $('.toast-body').text(response.responseJSON.error);
                 $('.toast').toast('show');
             },
             complete: function () {
-                me.loadScenarioList();
+
                 me.hideLoadingOverlay();
                 $('#new_scenario_modal').modal('hide');
             }
@@ -302,7 +317,7 @@ class APIScenario {
             {type: 'click', selector: '#new_scenario', action: this.showNewScenarioModal.bind(this)},
             {type: 'click', selector: '.create_scenario', action: this.createScenario.bind(this)},
             {type: 'click', selector: '.save_scenario', action: this.saveScenario.bind(this)},
-            {type: 'click', selector: '.add_start', action: this.addStart.bind(this)},
+            // {type: 'click', selector: '.add_start', action: this.addStart.bind(this)},
             {type: 'click', selector: '.delete_scenario', action: this.showDeleteModal.bind(this)},
             {type: 'click', selector: '.confirm_delete_scenario', action: this.removeScenario.bind(this)},
             {type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)}

src/main/resources/static/js/APITester.js

@@ -13,10 +13,10 @@ class APITester {
         this.collections = [];  //API 컬렉션
         this.requestEditors = [];  //API request body editor
         this.responseEditors = []; //API response body editor
+        this.consoleEditors = []; //API console editor
         this.preRequestEditors = [];
         this.postRequestEditors = [];
 
-        // this.variables = {};
         this.apiClient = new APIClient();
     }
 
@@ -175,14 +175,17 @@ class APITester {
                 <li class="nav-item" role="presentation">
                     <button class="nav-link" data-bs-toggle="tab" data-bs-target="#responseHeaderTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseHeader" aria-selected="false">Header</button>
                 </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#consoleTab_${apiRequest.id}" type="button" role="tab" aria-controls="consoleTab" aria-selected="false">Console</button>
+                </li>
             </ul>
             <div class="tab-content border-bottom" style="min-height: 250px;">
                 <div class="tab-pane fade show active" id="responseBodyTab_${apiRequest.id}" role="tabpanel"
-                     aria-labelledby="requestParams-tab">
+                     aria-labelledby="responseParams-tab">
                     <div class="response_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
                 </div>
                 <div class="tab-pane fade" id="responseHeaderTab_${apiRequest.id}" role="tabpanel"
-                     aria-labelledby="requestParams-tab">
+                     aria-labelledby="responseParams-tab">
                     <table class="table">
                         <thead>
                         <tr>
@@ -194,6 +197,10 @@ class APITester {
                         </tbody>
                     </table>
                 </div>
+                <div class="tab-pane fade" id="consoleTab_${apiRequest.id}" role="tabpanel"
+                     aria-labelledby="console-tab">
+                    <div class="console mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
+                </div>
             </div>
         </div>
         `;
@@ -220,27 +227,6 @@ class APITester {
         `;
     }
 
-    // variableTemplate(variable, index) {
-    //     return `
-    //         <tr data-index="${index}">
-    //             <td>
-    //                 <div class="form-check">
-    //                     <input class="form-check-input" type="checkbox" name="variables[${index}].enabled" ${variable.enabled ? 'checked' : ''} />
-    //                 </div>
-    //             </td>
-    //             <td>
-    //                 <input class="form-control" type="text" name="variables[${index}].key" value="${variable.key}"/>
-    //             </td>
-    //             <td>
-    //                 <input class="form-control" type="text" name="variables[${index}].value" value="${variable.value}"/>
-    //             </td>
-    //             <td>
-    //                 <button type="button" class="btn btn-secondary btn-sm btn_remove_variable">제거</button>
-    //             </td>
-    //         </tr>
-    //     `;
-    // }
-
     headerTemplate(header, index) {
         return `
             <tr data-index="${index}">
@@ -327,9 +313,6 @@ class APITester {
             {selector: '.btn_remove_header', action: this.removeHeader.bind(this)},
             {selector: '.btn_add_query', action: this.addQueryParam.bind(this)},
             {selector: '.btn_remove_query', action: this.removeQueryParam.bind(this)},
-            // {selector: '.btn_add_variables', action: this.addVariable.bind(this)},
-            // {selector: '.btn_remove_variable', action: this.removeVariable.bind(this)},
-
             {selector: '.send', action: this.handleSendAPIRequest.bind(this)},
             {selector: '.save', action: this.saveAPIRequest.bind(this)},
             {selector: '.save_collection', action: this.addCollection.bind(this)},
@@ -358,7 +341,6 @@ class APITester {
         $(document).on('change', '.query_params input', this.buildPath.bind(this));
         $(document).on('input', '.path', this.parseParam.bind(this));
         $(document).on('change', '.request_headers input', this.handleUIUpdate.bind(this));
-        // $(document).on('change', '.variables input', this.handleUIUpdate.bind(this));
         $(document).on('change', '.api_request_info select, .api_request_info input', this.handleUIUpdate.bind(this));
         $(document).on('change', '.api_request_info select', this.handleUpdateServer.bind(this));
 
@@ -449,7 +431,6 @@ class APITester {
     showDeleteApiRequestModal(event) {
         let collectionId = $(event.currentTarget).closest('li').data('collection');
         let apiId = $(event.currentTarget).closest('li').data('id');
-        console.log('apiId: ' + apiId);
         $('#confirm_delete_api_modal').find('.confirm_delete_api').data('id', apiId);
         $('#confirm_delete_api_modal').find('.confirm_delete_api').data('collection', collectionId);
         $('#confirm_delete_api_modal').modal('show');
@@ -515,16 +496,13 @@ class APITester {
             event.preventDefault();
             const element = event.currentTarget;
             const fieldName = $(element).attr('name');
-            //console.log(fieldName);
             const newValue = this.getFieldValue(element);
-            //console.log(newValue);
             const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
             let model = this.apiRequests[tabIndex];
 
             if (fieldName !== '') {
                 _.set(model, fieldName, newValue);
             }
-            //console.log(model);
         }
     }
 
@@ -532,7 +510,6 @@ class APITester {
         const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
         let model = this.apiRequests[tabIndex];
         let target = $('#api_request_' + model.id);
-        //console.log('model.server: ' + model.server);
         target.find('input[name="basePath"]').val(this.basePath(model.server));
     }
 
@@ -540,32 +517,11 @@ class APITester {
         return params.map((param, index) => this.queryParamTemplate(param, index)).join('');
     }
 
-    // renderGlobalVariables() {
-    //     let globalVaraibes = '';
-    //     if (window.globals) {
-    //         //for each key in globals
-    //         Object.keys(window.globals).map((key, index) => {
-    //             globalVaraibes += this.variableTemplate({
-    //                 enabled: true,
-    //                 key: key,
-    //                 value: window.globals[key]
-    //             }, index);
-    //         });
-    //     }
-    //
-    //     return globalVaraibes;
-    // }
-
-    // renderVariables(variables) {
-    //     return variables.map((variable, index) => this.variableTemplate(variable, index)).join('');
-    // }
-
     renderHeaders(headers) {
         return headers.map((header, index) => this.headerTemplate(header, index)).join('');
     }
 
     renderTabHeader() {
-        //console.log('renderTabHeader');
         let apiRequestTabTitle = $('#apiRequestTabTitle');
         apiRequestTabTitle.empty();
 
@@ -581,7 +537,6 @@ class APITester {
 
     renderTabContent(index) {
         var me = this;
-        //console.log('renderTabContent: ' + index);
         let apiRequestTabContent = $(this.apiTabContentTarget);
         let model = this.apiRequests[index];
 
@@ -619,6 +574,16 @@ class APITester {
             });
             me.responseEditors.push(responseBodyEditor);
 
+            let consoleEditor = monaco.editor.create(target.find(".console")[0], {
+                value: '',
+                language: 'text/plain',
+                theme: 'vs-light',
+                automaticLayout: true
+            });
+
+            me.consoleEditors.push(consoleEditor);
+
+
             let preRequestEditor = monaco.editor.create(target.find(".pre-request")[0], {
                 value: model.preRequestScript,
                 language: 'javascript',
@@ -729,15 +694,11 @@ class APITester {
         try {
             $(`#api_request_tab_${id}`).tab('show'); // API request 탭 활성화
         } catch (e) {
-            //console.log(e);
         }
 
-        //console.log('openTab, api_request: ' + id);
         try {
             $(`#api_request_${id}`).find('.btn_request_body_tab').tab('show');  // Body 탭 활성화
-            //console.log('openTab, done: ' + id);
         } catch (e) {
-            //console.log(e);
         }
     }
 
@@ -762,7 +723,6 @@ class APITester {
 
     renderHeaderView(tabIndex) {
         let model = this.apiRequests[tabIndex];
-        //console.log(model);
         let target = $('#api_request_' + model.id);
         target.find('.request_headers').empty();
         target.find('.request_headers').append(this.renderHeaders(model.headers));
@@ -771,7 +731,6 @@ class APITester {
 
     addQueryParam(event) {
         const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
-        //console.log('addQueryParam');
         let model = this.apiRequests[tabIndex];
         model.queryParams.push({
             enabled: true,
@@ -783,7 +742,6 @@ class APITester {
     }
 
     removeQueryParam(event) {
-        //console.log('removeQueryParam');
         const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
         const index = $(event.currentTarget).closest('tr').data('index');
         let model = this.apiRequests[tabIndex];
@@ -799,43 +757,12 @@ class APITester {
         target.find('.query_params').append(this.renderParams(model.queryParams));
     }
 
-    // addVariable(event) {
-    //     //console.log('addVariable');
-    //     const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
-    //     let model = this.apiRequests[tabIndex];
-    //     model.variables.push({
-    //         enabled: true,
-    //         key: '',
-    //         value: ''
-    //     });
-    //     this.renderVariablesView(tabIndex);
-    // }
-    //
-    // removeVariable(event) {
-    //     //console.log('removeVariable');
-    //     const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
-    //     const index = $(event.currentTarget).closest('tr').data('index');
-    //     let model = this.apiRequests[tabIndex];
-    //     model.variables.splice(index, 1);
-    //     this.renderVariablesView(tabIndex);
-    // }
-    //
-    // renderVariablesView(tabIndex) {
-    //     let model = this.apiRequests[tabIndex];
-    //     //console.log(model);
-    //     let target = $('#api_request_' + model.id);
-    //     target.find('.variables').empty();
-    //     target.find('.variables').append(this.renderVariables(model.variables));
-    // }
-
     parseParam(event) {
         const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
         let model = this.apiRequests[tabIndex];
         model.path = $(event.currentTarget).val();
-        //console.log(model.path);
         model.queryParams = [];
         let queryString = model.path.split('?')[1];
-        //console.log('parseParam:' + queryString);
         if (queryString) {
             let queryParamArray = queryString.split('&');
             for (let i = 0; i < queryParamArray.length; i++) {
@@ -881,7 +808,6 @@ class APITester {
 
     handleSendAPIRequest(event) {
         const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
-        console.log(tabIndex);
 
         let model = this.apiRequests[tabIndex];
 
@@ -894,11 +820,12 @@ class APITester {
         let target = $('#api_request_' + model.id);
         target.find('.response_headers').empty();
         this.responseEditors[tabIndex].setValue('');
+        let console = this.consoleEditors[tabIndex];
         model.responseModel = {};
         this.showLoadingOverlay();
 
         let startTime = new Date().getTime();
-        this.currentAjaxRequest = this.apiClient.sendAPIRequest(model)
+        this.currentAjaxRequest = this.apiClient.sendAPIRequest(model, null, this.consoleOutput.bind(this, console))
             .then(response => {
                 if (response) {
                     model.responseModel = response;
@@ -918,14 +845,20 @@ class APITester {
                 this.hideLoadingOverlay();
             })
             .catch(error => {
-                // if (error.name === 'AbortError') {
-                //     console.log('Fetch aborted');
-                // }
                 $('.toast-body').text(error);
                 $('.toast').toast('show');
                 this.hideLoadingOverlay();
             });
     }
+    consoleOutput(console, message) {
+        var range = new monaco.Range(console.getModel().getLineCount(), 1, console.getModel().getLineCount(), 1);
+        var id = {major: 1, minor: 1};
+        if (typeof message === 'object') {
+            message = JSON.stringify(message, null, 2);
+        }
+        var op = {identifier: id, range: range, text: message + '\n', forceMoveMarkers: true};
+        console.executeEdits("my-source", [op]);
+    }
 
     loadCollections() {
         const me = this;
@@ -1050,8 +983,6 @@ class APITester {
         let model = this.apiRequests[index];
         me.showLoadingOverlay();
 
-        //console.log('model.collectionId: '+ model.collectionId);
-
         this.currentAjaxRequest = $.ajax({
             url: `/mgmt/collections/${model.collectionId}/apis/save.do`,
             type: 'POST',
@@ -1092,7 +1023,6 @@ class APITester {
             path: '',
             headers: [],
             queryParams: [],
-            variables: [],
             requestBody: '',
             preRequestScript: '',
             postRequestScript: '',
@@ -1192,14 +1122,9 @@ class APITester {
     deleteApiRequest(event) {
         let collectionId = $(event.currentTarget).closest('button').data('collection');
         let apiId = $(event.currentTarget).closest('.confirm_delete_api').data('id');
-        console.log(event.currentTarget);
-        console.log($(event.currentTarget));
-        console.log('deleteApiRequest: ' + apiId);
-        console.log('collectionId: ' + collectionId);
         let apiIndex = this.apiRequests.findIndex(function (api) {
             return api.id === apiId;
         });
-        console.log(apiIndex);
         if (apiIndex >= 0) {
             this.closeTabWithApiIndex(apiIndex);
         }
@@ -1224,11 +1149,8 @@ class APITester {
     }
 
     closeTabWithApiIndex(index) {
-        console.log(index);
         if (index !== undefined) {
-            //console.log('closeTabWithApiIndex: ' + index);
             const model = this.apiRequests[index];
-            console.log(model);
             this.apiRequests.splice(index, 1);
 
             let apiRequestTabTitle = $(this.apiTabTitleTarget);