djb-eapim/elink-test-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console 추가

Browse Source
This commit is contained in:
현성필
2024-01-11 09:18:08 +09:00
parent 06bee094e3
commit f5ffe34aa3
4 changed files with 81 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/custom.css
+4
View File
@@ -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
+22 -13
View File
@@ -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
+24 -9
View File
@@ -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
+31 -109
View File
@@ -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);