console 추가
This commit is contained in:
현성필
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user