From 19ec9d3bdd0afafa19d8bd1d9c07377198fab203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= Date: Wed, 10 Jan 2024 16:13:23 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=B2=98=EB=A6=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/css/custom.css | 8 +- src/main/resources/static/js/APIClient.js | 88 +++++++++---------- .../static/js/APIScenarioExecutor.js | 86 ++++-------------- src/main/resources/static/js/APITester.js | 15 ++-- .../templates/layout/api_tester_layout.html | 2 +- src/main/resources/templates/page/login.html | 2 +- .../templates/page/routes/mockRouteEdit.html | 2 +- .../resources/templates/page/updatePw.html | 2 +- 8 files changed, 71 insertions(+), 134 deletions(-) diff --git a/src/main/resources/static/css/custom.css b/src/main/resources/static/css/custom.css index 9a999e0..2501bbf 100644 --- a/src/main/resources/static/css/custom.css +++ b/src/main/resources/static/css/custom.css @@ -842,19 +842,19 @@ a.btn.btn-primary { } .drawflow .drawflow-node.current-execution { - border: 2px solid blue; + border: 4px solid lightskyblue; } .drawflow .drawflow-node.result-success { - border: 2px solid green; + border: 4px solid forestgreen; } .drawflow .drawflow-node.result-error { - border: 2px solid red; + border: 4px solid lightcoral; } .drawflow .drawflow-node.result-abort { - border: 2px solid grey; + border: 4px solid lightslategrey; } .hidden { diff --git a/src/main/resources/static/js/APIClient.js b/src/main/resources/static/js/APIClient.js index bf8f83d..6aabd64 100644 --- a/src/main/resources/static/js/APIClient.js +++ b/src/main/resources/static/js/APIClient.js @@ -14,17 +14,39 @@ class APIClient { this.abortController = null; } - async sendAPIRequest(model, callback) { - try { - const updatedModel = await this.executePreRequestScript(model); - let processedRequest = this.replacePlaceholdersWithVariables(updatedModel); - if (callback){ - callback(processedRequest); - } - return this.makeAjaxRequest(processedRequest, model); - } catch (error) { - throw error; + async sendAPIRequest(model, preProcessCallback) { + // try { + const updatedModel = await this.executePreRequestScript(model); + let processedRequest = this.replacePlaceholdersWithVariables(updatedModel); + if (preProcessCallback) { + preProcessCallback(processedRequest); } + return this.makeAjaxRequest(processedRequest, model) + .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}]`); + } + return responseData; + }) + .then(data => { + let response = {}; + response.body = data.body; + response.status = data.status; + response.headers = {}; + response.size = data.size; + _.forEach(data.headers, (header) => { + response.headers[header.key] = header.value; + }); + return this.executePostRequestScript(model.postRequestScript, response) + .catch(error => { + $('.toast-body').text(error); + $('.toast').toast('show'); + return response; // Return the original response even if there's an error + }); + }); } abort() { @@ -46,38 +68,7 @@ class APIClient { }, body: JSON.stringify(processedRequest), signal: signal // pass the signal to the fetch - }) - .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}]`); - } - return responseData; - }) - .then(data => { - try { - let response = {}; - response.body = data.body; - response.status = data.status; - response.headers = {}; - response.size = data.size; - _.forEach(data.headers, (header) => { - response.headers[header.key] = header.value; - }); - - return this.executePostRequestScript(model.postRequestScript, response); - } catch (error) { - console.log('error1') - $('.toast-body').text(error); - $('.toast').toast('show'); - } - }) - .catch(error => { - throw error; - }); - + }); } @@ -135,7 +126,7 @@ class APIClient { window.preRequestComplete = (updatedModel, error) => { if (error) { - reject('PreRequestScript error:', error); + reject(error); } else { resolve(updatedModel); } @@ -152,7 +143,7 @@ class APIClient { ${script} window.parent.preRequestComplete(window.request, null); } catch (error) { - window.parent.preRequestComplete(null, error.toString()); + window.parent.preRequestComplete(null, error); } `; }); @@ -163,11 +154,12 @@ class APIClient { let resultFrame = document.getElementById('postRequest'); window.response = response; window.temp_variable = this.variables; - window.postRequestComplete = (updatedModel, error) => { + window.postRequestComplete = (response, error) => { + console.log(response) if (error) { - reject('PreRequestScript error:', error); + reject(error); } else { - resolve(updatedModel); + resolve(response); } }; @@ -179,7 +171,7 @@ class APIClient { ${script} window.parent.postRequestComplete(window.response, null); } catch (error) { - window.parent.postRequestComplete(null, error.toString()); + window.parent.postRequestComplete(window.response, error.toString()); } `; }); diff --git a/src/main/resources/static/js/APIScenarioExecutor.js b/src/main/resources/static/js/APIScenarioExecutor.js index 753e08e..cd9f9e4 100644 --- a/src/main/resources/static/js/APIScenarioExecutor.js +++ b/src/main/resources/static/js/APIScenarioExecutor.js @@ -32,63 +32,6 @@ class APIScenarioExecutor { }); } - // Method to execute the current node's API request if it's an 'api' node - executeCurrentNode2() { - console.log(this.currentNodeId) - - let allNodes = document.querySelector('#drawflow').querySelectorAll('.drawflow-node'); - allNodes.forEach(node => { - node.classList.remove('current-execution'); - }); - - if (!this.currentNodeId) { - console.log('No current node to execute.'); - return; - } - - const currentNode = this.graph[this.currentNodeId]; - - if (currentNode) { - this.isRunning = true; - - let nodeElement = document.querySelector('#drawflow').querySelector(`.drawflow-node[id="node-${this.currentNodeId}"]`); - if (nodeElement) { - nodeElement.classList.add('current-execution'); - } else { - console.error('Node with ID ' + this.currentNodeId + ' not found'); - } - - if (currentNode.class === 'api') { - let model = JSON.parse(JSON.stringify(this.apiTester.getApiRequestModel(currentNode.data.id))); - model.responseModel = {}; - this.apiClient.sendAPIRequest(model, this.logHttpRequest.bind(this)) - .then(response => { - this.isRunning = false; - this.logHttpResponse(response); - if (response.status === 200 || response.status === 201) { - nodeElement.classList.add('result-success'); - } else { - nodeElement.classList.add('result-error'); - } - - }) - .catch(error => { - nodeElement.classList.add('result-abort'); - $('.toast-body').text(error.message); - $('.toast').toast('show'); - this.appendLog(error.message); - }); - console.log(`Executing API request for node: ${currentNode.id} - ${currentNode.name}`); - } else if (currentNode.class === 'start') { - this.appendLog('Starting API scenario execution...'); - nodeElement.classList.add('result-success'); - } else { - console.log(`Executing script for node: ${currentNode.id} - ${currentNode.name}`); - } - this.visitedNodes.add(this.currentNodeId); // Mark this node as visited - } - } - executeCurrentNode() { return new Promise((resolve, reject) => { console.log(this.currentNodeId) @@ -119,6 +62,7 @@ class APIScenarioExecutor { if (currentNode.class === 'api') { let model = JSON.parse(JSON.stringify(this.apiTester.getApiRequestModel(currentNode.data.id))); model.responseModel = {}; + this.appendLog(`Executing API [${model.name}]`); this.apiClient.sendAPIRequest(model, this.logHttpRequest.bind(this)) .then(response => { this.isRunning = false; @@ -139,7 +83,7 @@ class APIScenarioExecutor { }); console.log(`Executing API request for node: ${currentNode.id} - ${currentNode.name}`); } else if (currentNode.class === 'start') { - this.appendLog('Starting API scenario execution...'); + this.appendLog('Starting API scenario\n'); nodeElement.classList.add('result-success'); resolve(); } else { @@ -160,15 +104,28 @@ class APIScenarioExecutor { } logHttpRequest(model) { - let log = `${model.method} ${model.path} HTTP/1.1\n${model.requestBody}`; + console.log(model); + let log = `[API Request]\n${model.method} ${model.path} HTTP/1.1\n[Request Headers]\n${this.parseRequestHeaders(model.headers)}\n[Request Body]\n${model.requestBody}`; this.appendLog(log); } logHttpResponse(response) { - let log = `HTTP/1.1 ${response.status}\n${this.parseHeaders(response.headers)}\nBody: ${response.body}`; + let log = `[Response]\nHTTP/1.1 ${response.status}\n[Response Headers]\n${this.parseHeaders(response.headers)}\n[Response Body]\n${response.body}`; this.appendLog(log); } + parseRequestHeaders(headers) { + let parsedHeaders = ''; + headers.forEach(header => { + if (header.enabled){ + parsedHeaders += `${header.key}: ${header.value}\n`; + } + }); + + + return parsedHeaders; + } + parseHeaders(headers) { //convert object to string with \n separation //sort header by key @@ -203,15 +160,6 @@ class APIScenarioExecutor { } } - // Method to execute the entire scenario from start to end - // async executeAll() { - // while (this.currentNodeId) { - // console.log(this.currentNodeId) - // this.executeCurrentNode(); //TODO: how can I make sure this call wait until response is received - // await this.moveToNextNodeWithDelay(250); - // } - // console.log('Completed execution of all API nodes.'); - // } async executeAll() { while (this.currentNodeId) { console.log(this.currentNodeId); diff --git a/src/main/resources/static/js/APITester.js b/src/main/resources/static/js/APITester.js index 383d4b1..096155f 100644 --- a/src/main/resources/static/js/APITester.js +++ b/src/main/resources/static/js/APITester.js @@ -438,7 +438,7 @@ class APITester { $('#confirm_delete_modal').modal('show'); } - getApiRequestModel(apiId){ + getApiRequestModel(apiId) { let foundApi = null; this.collections.forEach(function (collection) { collection.apis.forEach(function (api) { @@ -928,14 +928,11 @@ class APITester { this.hideLoadingOverlay(); }) .catch(error => { - console.log(error.name) - if (error.name === 'AbortError') { - console.log('Fetch aborted'); - } else { - console.log('error3') - $('.toast-body').text(error); - $('.toast').toast('show'); - } + // if (error.name === 'AbortError') { + // console.log('Fetch aborted'); + // } + $('.toast-body').text(error); + $('.toast').toast('show'); this.hideLoadingOverlay(); }); } diff --git a/src/main/resources/templates/layout/api_tester_layout.html b/src/main/resources/templates/layout/api_tester_layout.html index 53b1fd1..a865a4d 100644 --- a/src/main/resources/templates/layout/api_tester_layout.html +++ b/src/main/resources/templates/layout/api_tester_layout.html @@ -18,7 +18,7 @@ -