현성필
966 lines
34 KiB
JavaScript
966 lines
34 KiB
JavaScript
import * as monaco from 'monaco-editor';
|
|
import APIClient from './APIClient';
|
|
import {createPopper} from '@popperjs/core/lib/popper-lite';
|
|
import VariableSnippet from './components/VariableSnippet';
|
|
import HTTPClientView from './components/HTTPClientView';
|
|
import TCPClientView from './components/TCPClientView';
|
|
import ServerManager from './components/ServerManager';
|
|
import HTTPFlatClientView from './components/HTTPFlatClientView';
|
|
|
|
class APITester {
|
|
|
|
constructor(contextPath) {
|
|
this.servers = [];
|
|
this.apiTabTitleTarget = '#apiRequestTabTitle';
|
|
this.apiTabContentTarget = '#apiRequestTabContent';
|
|
this.collectionTarget = '#side_menubar';
|
|
this.currentIndex = 0;
|
|
this.apiRequests = []; //탭 열린 API
|
|
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.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`;
|
|
}
|
|
|
|
headerTemplate(header, index) {
|
|
return `
|
|
<tr data-index="${index}">
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="headers[${index}].enabled" ${header.enabled ? 'checked' : ''} />
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<input class="form-control" type="text" name="headers[${index}].key" value="${header.key}"/>
|
|
</td>
|
|
<td>
|
|
<input class="form-control" type="text" name="headers[${index}].value" value="${header.value}"/>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-secondary btn-sm btn_remove_header">제거</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
responseHeaderTemplate(key, value) {
|
|
return `
|
|
<tr>
|
|
<td>
|
|
<input class="form-control" type="text" value="${key}" readonly/>
|
|
</td>
|
|
<td>
|
|
<input class="form-control" type="text" value="${value}" readonly/>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
collectionTemplate(collection, index) {
|
|
return `
|
|
<li id="collection_${index}" class="collection api_scenario_item" data-index="${index}">
|
|
<div class="d-flex justify-content-between">
|
|
<button class="btn d-inline-flex align-items-center rounded normal"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#btn_collection_${index}" aria-expanded="false" aria-current="false">${collection.name}
|
|
</button>
|
|
<div class="d-flex justify-content-between">
|
|
<button class="p-1 reset-button edit_collection" data-collection="${collection.id}"><i class="fa fa-sharp fa-file-edit"></i></button>
|
|
<button class="p-1 reset-button delete_collection" data-collection="${collection.id}"><i class="fa fa-sharp fa-trash-can"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="collapse" id="btn_collection_${index}">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
${collection.apis.map((api, apiIndex) => this.collectionApiTemplate(api, apiIndex, collection.id)).join('')}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
collectionApiTemplate(api, apiIndex, collectionId) {
|
|
return `
|
|
<li class="d-flex justify-content-between api_request_sortable " draggable="true" data-collection="${collectionId}" data-id="${api.id}" data-index="${apiIndex}" data-node-type="api" data-name="${api.name}">
|
|
<a href="#" class="d-inline-flex align-items-center rounded open_api_request" data-node-type="api">${api.name}</a>
|
|
<div class="d-flex justify-content-between">
|
|
<button class="p-1 reset-button edit_api_request"><i class="fa fa-sharp fa-file-edit"></i></button>
|
|
<button class="p-1 reset-button delete_api_request"><i class="fa fa-trash-can"></i></button>
|
|
</div>
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
init(servers) {
|
|
if (servers) {
|
|
this.servers = servers;
|
|
if (this.servers.length === 0) {
|
|
$('.toast-body').text('서버관리에서 서버를 등록해주세요.');
|
|
$('.toast').toast('show');
|
|
}
|
|
}
|
|
this.serverManager = new ServerManager(this.servers);
|
|
this.bindEvents();
|
|
this.loadCollections();
|
|
}
|
|
|
|
bindEvents() {
|
|
const events = [
|
|
{selector: '.btn_add_header', action: this.addHeader.bind(this)},
|
|
{selector: '.btn_remove_header', action: this.removeHeader.bind(this)},
|
|
{selector: '.send', action: this.handleSendAPIRequest.bind(this)},
|
|
{selector: '.save', action: this.saveAPIRequest.bind(this)},
|
|
{selector: '.save_collection', action: this.addCollection.bind(this)},
|
|
{selector: '#cancel-ajax', action: this.cancelAjaxRequest.bind(this)},
|
|
{selector: '#new_collection', action: this.showNewCollectionModal.bind(this)},
|
|
{selector: '#new_request', action: this.showNewApiRequestModal.bind(this)},
|
|
{selector: '.edit_collection', action: this.showCollectionEditModal.bind(this)},
|
|
{selector: '.delete_collection', action: this.showCollectionDeleteModal.bind(this)},
|
|
{selector: '.confirm_delete', action: this.removeCollection.bind(this)},
|
|
{selector: '.add_new_request', action: this.addAPIRequest.bind(this)},
|
|
{selector: '.edit_api_request', action: this.showEditNameModal.bind(this)},
|
|
{selector: '.delete_api_request', action: this.showDeleteApiRequestModal.bind(this)},
|
|
{selector: '.open_api_request', action: this.openApiRequest.bind(this)},
|
|
{selector: '.confirm_delete_api', action: this.deleteApiRequest.bind(this)},
|
|
{selector: '.close_tab', action: this.closeTab.bind(this)}];
|
|
|
|
for (let event of events) {
|
|
$(document).on('click', event.selector, event.action);
|
|
}
|
|
|
|
$(document).on('change', '.path', this.parseParam.bind(this));
|
|
$(document).on('change', '.request_headers 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));
|
|
|
|
window.addEventListener('resize', this.resizeEditor.bind(this));
|
|
|
|
}
|
|
|
|
resizeEditor() {
|
|
//FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출
|
|
|
|
for (let i = 0; i < this.requestEditors.length; i++) {
|
|
this.requestEditors[i].layout({
|
|
width: 0
|
|
});
|
|
}
|
|
|
|
for (let i = 0; i < this.responseEditors.length; i++) {
|
|
this.responseEditors[i].layout({
|
|
width: 0
|
|
});
|
|
}
|
|
for (let i = 0; i < this.preRequestEditors.length; i++) {
|
|
this.preRequestEditors[i].layout({
|
|
width: 0
|
|
});
|
|
}
|
|
for (let i = 0; i < this.postRequestEditors.length; i++) {
|
|
this.postRequestEditors[i].layout({
|
|
width: 0
|
|
});
|
|
}
|
|
|
|
for (let i = 0; i < this.requestEditors.length; i++) {
|
|
this.requestEditors[i].layout({});
|
|
}
|
|
for (let i = 0; i < this.responseEditors.length; i++) {
|
|
this.responseEditors[i].layout({});
|
|
}
|
|
for (let i = 0; i < this.preRequestEditors.length; i++) {
|
|
this.preRequestEditors[i].layout({});
|
|
}
|
|
for (let i = 0; i < this.postRequestEditors.length; i++) {
|
|
this.postRequestEditors[i].layout({});
|
|
}
|
|
|
|
}
|
|
|
|
showCollectionDeleteModal(event) {
|
|
const collectionId = $(event.currentTarget).closest('button').data('collection');
|
|
$('#confirm_delete_modal').find('.confirm_delete').data('id', collectionId);
|
|
$('#confirm_delete_modal').modal('show');
|
|
}
|
|
|
|
getApiRequestModel(apiId) {
|
|
let foundApi = null;
|
|
this.collections.forEach(function(collection) {
|
|
collection.apis.forEach(function(api) {
|
|
if (api.id === apiId) {
|
|
foundApi = api;
|
|
}
|
|
});
|
|
});
|
|
|
|
return foundApi;
|
|
}
|
|
|
|
showCollectionEditModal(event) {
|
|
const me = this;
|
|
const collectionId = $(event.currentTarget).closest('button').data('collection');
|
|
const collection = this.collections.filter(function(collection) {
|
|
return collection.id === collectionId;
|
|
})[0];
|
|
|
|
$('#edit_name_modal').find('input').val('');
|
|
$('#edit_name_modal').modal('show');
|
|
|
|
let saveBtn = $('#edit_name_modal').find('button.change_name');
|
|
saveBtn.off('click');
|
|
|
|
saveBtn.on('click', function() {
|
|
collection.name = $('#edit_name_modal').find('input').val();
|
|
me.saveCollection(collection.id, collection.name);
|
|
me.renderCollections();
|
|
$('#edit_name_modal').modal('hide');
|
|
});
|
|
}
|
|
|
|
showDeleteApiRequestModal(event) {
|
|
let collectionId = $(event.currentTarget).closest('li').data('collection');
|
|
let apiId = $(event.currentTarget).closest('li').data('id');
|
|
$('#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');
|
|
}
|
|
|
|
showNewApiRequestModal(event) {
|
|
if (this.collections.length == 0) {
|
|
$('.toast-body').text('새로운 컬렉션을 추가해 주세요.');
|
|
$('.toast').toast('show');
|
|
return;
|
|
}
|
|
$('#new_api_request_modal').modal('show');
|
|
}
|
|
|
|
showNewCollectionModal(event) {
|
|
$('#new_collection_modal').find('input').val('');
|
|
$('#new_collection_modal').modal('show');
|
|
}
|
|
|
|
showEditNameModal(event) {
|
|
const me = this;
|
|
const apiId = $(event.currentTarget).closest('li').data('id');
|
|
const collectionId = $(event.currentTarget).closest('li').data('collection');
|
|
|
|
const collection = this.collections.filter(function(collection) {
|
|
return collection.id === collectionId;
|
|
})[0];
|
|
|
|
let apiRequest = collection.apis.filter(function(api) {
|
|
return api.id === apiId;
|
|
})[0];
|
|
|
|
apiRequest.collectionId = collectionId;
|
|
|
|
let saveBtn = $('#edit_name_modal').find('button.change_name');
|
|
saveBtn.off('click');
|
|
saveBtn.on('click', function() {
|
|
apiRequest.name = $('#edit_name_modal').find('input').val();
|
|
me.changeAPIName(apiRequest);
|
|
me.renderCollections();
|
|
$('#edit_name_modal').modal('hide');
|
|
|
|
//탭이 열려 있으면, 닫았다가 다시 열어야 함.
|
|
me.renderTabHeader();
|
|
me.renderTabContent(apiRequest.index);
|
|
|
|
});
|
|
$('#edit_name_modal').find('input').val('');
|
|
$('#edit_name_modal').modal('show');
|
|
}
|
|
|
|
getFieldValue(element) {
|
|
if ($(element).is('select') || $(element).is('input[type="text"]')) {
|
|
return $(element).val();
|
|
}
|
|
if ($(element).is('input[type="checkbox"]')) {
|
|
return $(element).is(':checked');
|
|
}
|
|
}
|
|
|
|
handleUIUpdate(event) {
|
|
if (event) {
|
|
event.preventDefault();
|
|
const element = event.currentTarget;
|
|
const fieldName = $(element).attr('name');
|
|
const newValue = this.getFieldValue(element);
|
|
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
|
let model = this.apiRequests[tabIndex];
|
|
|
|
if (fieldName !== '') {
|
|
_.set(model, fieldName, newValue);
|
|
}
|
|
}
|
|
}
|
|
|
|
handleUpdateServer(event) {
|
|
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
|
let model = this.apiRequests[tabIndex];
|
|
let target = $('#api_request_' + model.id);
|
|
target.find('input[name="basePath"]').val(this.serverManager.basePath(model.server));
|
|
}
|
|
|
|
renderHeaders(headers) {
|
|
return headers.map((header, index) => this.headerTemplate(header, index)).join('');
|
|
}
|
|
|
|
renderTabHeader() {
|
|
let apiRequestTabTitle = $(this.apiTabTitleTarget);
|
|
apiRequestTabTitle.empty();
|
|
|
|
for (let idx = 0; idx < this.apiRequests.length; idx++) {
|
|
let li = `<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="api_request_tab_${this.apiRequests[idx].id}" data-bs-toggle="tab" type="button" role="tab" aria-controls="api_request_${this.apiRequests[idx].id}" data-bs-target="#api_request_${this.apiRequests[idx].id}" aria-selected="false">${this.apiRequests[idx].name}
|
|
<span class="close_tab"><i class="fa fa-light fa-close"></i></span>
|
|
</button>
|
|
</li>`;
|
|
apiRequestTabTitle.append(li);
|
|
}
|
|
}
|
|
|
|
showPopper(element, text) {
|
|
const variable = text.replace(/{{|}}/g, '');
|
|
this.popperContent.style.display = 'block';
|
|
|
|
const innerDiv = this.popperContent.querySelector('.variable_popper');
|
|
innerDiv.textContent = '{{' + variable + '}} = ' + (window.globals[variable] === undefined ? '' : window.globals[variable]);
|
|
|
|
this.popperInstance = createPopper(element, this.popperContent, {
|
|
placement: 'bottom', // Popper below the element
|
|
modifiers: [
|
|
{
|
|
name: 'offset', options: {
|
|
offset: [0, 8] // Adjust the position if needed
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
|
|
hidePopper(element) {
|
|
if (this.popperInstance) {
|
|
this.popperInstance.destroy();
|
|
this.popperInstance = null;
|
|
}
|
|
this.popperContent.style.display = 'none';
|
|
}
|
|
|
|
renderTabContent(index) {
|
|
var me = this;
|
|
let apiRequestTabContent = $(this.apiTabContentTarget);
|
|
let model = this.apiRequests[index];
|
|
|
|
document.querySelectorAll('.variable').forEach(element => {
|
|
let text = element.innerText;
|
|
element.addEventListener('mouseover', () => me.showPopper(element, text));
|
|
element.addEventListener('mouseout', () => me.hidePopper(element));
|
|
});
|
|
let language = model.type === 'HTTP' ? 'json' : 'text';
|
|
|
|
let requestBodyEditor = null;
|
|
let target = null;
|
|
|
|
if (model.type === 'HTTP') {
|
|
let httpClientView = new HTTPClientView(me, this.serverManager, apiRequestTabContent, model);
|
|
httpClientView.init();
|
|
target = this.openTab(model.id);
|
|
requestBodyEditor = monaco.editor.create(target.find('.request_body')[0], {
|
|
value: model.requestBody, language: 'json', automaticLayout: true
|
|
});
|
|
} else if (model.type === 'HTTPFlat') {
|
|
let httpFlatClientView = new HTTPFlatClientView(me, this.serverManager, apiRequestTabContent, model);
|
|
httpFlatClientView.init();
|
|
target = this.openTab(model.id);
|
|
requestBodyEditor = monaco.editor.create(target.find('.request_body')[0], {
|
|
value: model.requestBody, language: 'json', automaticLayout: true
|
|
});
|
|
httpFlatClientView.requestBodyEditor = requestBodyEditor;
|
|
} else if (model.type === 'TCP') {
|
|
const tcpClientView = new TCPClientView(me, this.serverManager, apiRequestTabContent, model);
|
|
tcpClientView.init();
|
|
target = this.openTab(model.id);
|
|
|
|
requestBodyEditor = monaco.editor.create(target.find('.request_body')[0], {
|
|
value: model.requestBody, language: 'text', automaticLayout: true
|
|
});
|
|
tcpClientView.requestBodyEditor = requestBodyEditor;
|
|
}
|
|
|
|
requestBodyEditor.onMouseMove((e) => {
|
|
let position = e.target.position;
|
|
if (position) {
|
|
let model = requestBodyEditor.getModel();
|
|
let word = model.getWordAtPosition(position);
|
|
let lineContent = model.getLineContent(position.lineNumber);
|
|
if (word) {
|
|
if (lineContent.indexOf('{{' + word.word + '}}') > -1) {
|
|
me.showPopper(e.target.element, word.word);
|
|
}
|
|
} else {
|
|
me.hidePopper(e.target.element);
|
|
}
|
|
}
|
|
});
|
|
|
|
me.requestEditors.push(requestBodyEditor);
|
|
|
|
target.find('.request_body_tab')[0].addEventListener('shown.bs.tab', () => {
|
|
me.requestEditors[index].layout();
|
|
});
|
|
|
|
me.requestEditors[index].onDidChangeModelContent((e) => {
|
|
model.requestBody = requestBodyEditor.getValue();
|
|
});
|
|
|
|
target.find('.request_body_type').on('change', function() {
|
|
let model = requestBodyEditor.getModel();
|
|
monaco.editor.setModelLanguage(model, $(this).val());
|
|
});
|
|
|
|
let responseBodyEditor = monaco.editor.create(target.find('.response_body')[0], {
|
|
value: '', language: language, automaticLayout: true, quickSuggestions: false
|
|
});
|
|
|
|
me.responseEditors.push(responseBodyEditor);
|
|
|
|
let consoleEditor = monaco.editor.create(target.find('.console')[0], {
|
|
value: '', automaticLayout: true, quickSuggestions: false
|
|
});
|
|
|
|
me.consoleEditors.push(consoleEditor);
|
|
|
|
let preRequestEditor = monaco.editor.create(target.find('.pre-request')[0], {
|
|
value: model.preRequestScript, language: 'javascript', automaticLayout: true, quickSuggestions: false
|
|
});
|
|
|
|
const snippet1 = new VariableSnippet();
|
|
snippet1.init(target.find('.pre-request-variable')[0], preRequestEditor);
|
|
|
|
me.preRequestEditors.push(preRequestEditor);
|
|
target.find('.pre-request')[0].addEventListener('shown.bs.tab', () => {
|
|
me.preRequestEditors[index].layout();
|
|
});
|
|
|
|
me.preRequestEditors[index].onDidChangeModelContent((e) => {
|
|
model.preRequestScript = preRequestEditor.getValue();
|
|
});
|
|
|
|
let postRequestEditor = monaco.editor.create(target.find('.post-request')[0], {
|
|
value: model.postRequestScript, language: 'javascript', automaticLayout: true, quickSuggestions: false
|
|
});
|
|
|
|
const snippet2 = new VariableSnippet();
|
|
snippet2.init(target.find('.post-request-variable')[0], postRequestEditor);
|
|
|
|
me.postRequestEditors.push(postRequestEditor);
|
|
target.find('.post-request')[0].addEventListener('shown.bs.tab', () => {
|
|
me.postRequestEditors[index].layout();
|
|
});
|
|
|
|
me.postRequestEditors[index].onDidChangeModelContent((e) => {
|
|
model.postRequestScript = postRequestEditor.getValue();
|
|
});
|
|
|
|
}
|
|
|
|
renderResponse(tabIndex) {
|
|
let model = this.apiRequests[tabIndex];
|
|
let target = $('#api_request_' + model.id);
|
|
target.find('.response_headers').empty();
|
|
target.find('.response_status').empty();
|
|
|
|
try {
|
|
const parsedJson = JSON.parse(model.responseModel.body);
|
|
const formattedJson = JSON.stringify(parsedJson, null, 2);
|
|
this.responseEditors[tabIndex].setValue(formattedJson);
|
|
} catch (e) {
|
|
this.responseEditors[tabIndex].setValue(model.responseModel.body);
|
|
}
|
|
if (model.responseModel && model.responseModel.headers) {
|
|
const headers = model.responseModel.headers;
|
|
Object.entries(headers).forEach(([key, value]) => {
|
|
target.find('.response_headers').append(this.responseHeaderTemplate(key, value));
|
|
});
|
|
}
|
|
|
|
target.find('.response_status').text('status: ' + model.responseModel.status);
|
|
target.find('.response_time').text('time: ' + model.responseModel.time + 'ms');
|
|
target.find('.response_size').text('size: ' + model.responseModel.size + 'bytes');
|
|
|
|
}
|
|
|
|
customHelper(event) {
|
|
// Create and return the custom helper element
|
|
let name = $(event.target).closest('.api_request_sortable').find('.open_api_request').text().trim();
|
|
let apiId = $(event.target).closest('.api_request_sortable').data('id');
|
|
return `<div style="display: flex; flex-direction: column; flex: 1; border: 2px dashed #333; padding: 10px;" data-id="${apiId}">
|
|
<div>${name}</div>
|
|
</div>`;
|
|
}
|
|
|
|
renderCollections() {
|
|
let select = $('#modal_collection');
|
|
let sidemenu = $(this.collectionTarget);
|
|
select.empty();
|
|
sidemenu.empty();
|
|
|
|
for (let i = 0; i < this.collections.length; i++) {
|
|
sidemenu.append(this.renderCollection(this.collections[i], i));
|
|
let option = $('<option>');
|
|
option.attr('value', this.collections[i].id);
|
|
option.text(this.collections[i].name);
|
|
select.append(option);
|
|
}
|
|
|
|
$('li .api_request_sortable').draggable({
|
|
helper: this.customHelper, start: function(event, ui) {
|
|
// You can add any additional data or styles you want when dragging starts
|
|
$(this).addClass('dragging');
|
|
}, stop: function(event, ui) {
|
|
// Clean up, e.g., remove styles or data
|
|
$(this).removeClass('dragging');
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
renderCollection(collection, index) {
|
|
return this.collectionTemplate(collection, index);
|
|
}
|
|
|
|
openTab(id) {
|
|
const target = $(`#api_request_${id}`);
|
|
try {
|
|
$(`#api_request_tab_${id}`).tab('show'); // API request 탭 활성화
|
|
} catch (e) {
|
|
}
|
|
|
|
try {
|
|
$(`#api_request_${id}`).find('.btn_request_body_tab').tab('show'); // Body 탭 활성화
|
|
} catch (e) {
|
|
}
|
|
return target;
|
|
}
|
|
|
|
addHeader(event) {
|
|
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
|
let model = this.apiRequests[tabIndex];
|
|
model.headers.push({
|
|
enabled: true, key: '', value: ''
|
|
});
|
|
this.renderHeaderView(tabIndex);
|
|
}
|
|
|
|
removeHeader(event) {
|
|
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
|
const index = $(event.currentTarget).closest('tr').data('index');
|
|
let model = this.apiRequests[tabIndex];
|
|
model.headers.splice(index, 1);
|
|
this.renderHeaderView(tabIndex);
|
|
}
|
|
|
|
renderHeaderView(tabIndex) {
|
|
let model = this.apiRequests[tabIndex];
|
|
let target = $('#api_request_' + model.id);
|
|
target.find('.request_headers').empty();
|
|
target.find('.request_headers').append(this.renderHeaders(model.headers));
|
|
}
|
|
|
|
parseParam(path) {
|
|
let queryParams = [];
|
|
let queryString = path.split('?')[1];
|
|
if (queryString) {
|
|
let queryParamArray = queryString.split('&');
|
|
for (let i = 0; i < queryParamArray.length; i++) {
|
|
let queryParam = queryParamArray[i].split('=');
|
|
|
|
queryParams.push({
|
|
enabled: true, key: queryParam[0], value: (queryParam[1] === undefined ? '' : queryParam[1])
|
|
});
|
|
}
|
|
}
|
|
return queryParams;
|
|
}
|
|
|
|
showLoadingOverlay() {
|
|
$('#loading-overlay').show();
|
|
}
|
|
|
|
hideLoadingOverlay() {
|
|
$('#loading-overlay').hide();
|
|
}
|
|
|
|
handleSendAPIRequest(event) {
|
|
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
|
|
|
let model = this.apiRequests[tabIndex];
|
|
|
|
if (!model.server) {
|
|
$('.toast-body').text('서버를 등록해주세요.');
|
|
$('.toast').toast('show');
|
|
return;
|
|
}
|
|
|
|
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, null, this.consoleOutput.bind(this, console)).then(response => {
|
|
if (response) {
|
|
model.responseModel = response;
|
|
let endTime = new Date().getTime();
|
|
model.responseModel.time = endTime - startTime;
|
|
} else {
|
|
model.responseModel = {
|
|
status: 0, time: 0, size: 0, headers: [], body: ''
|
|
};
|
|
}
|
|
|
|
this.renderResponse(tabIndex);
|
|
this.hideLoadingOverlay();
|
|
}).catch(error => {
|
|
$('.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;
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getCollectionListURL(), type: 'GET', contentType: 'application/json', success: function(data) {
|
|
me.collections = data.map(collection => {
|
|
if (collection.apis) {
|
|
collection.apis = collection.apis.map(api => ({...api, collectionId: collection.id}));
|
|
}
|
|
return collection;
|
|
});
|
|
}, error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
}, complete: function() {
|
|
me.renderCollections();
|
|
me.hideLoadingOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
addCollection(event) {
|
|
const name = $('#new_collection_name').val();
|
|
const me = this;
|
|
me.showLoadingOverlay();
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getCollectionCreateURL(), type: 'POST', contentType: 'application/json', data: JSON.stringify({name: name}), error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
}, complete: function() {
|
|
me.loadCollections();
|
|
me.hideLoadingOverlay();
|
|
$('#new_collection_modal').modal('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
saveCollection(id, name) {
|
|
const me = this;
|
|
me.showLoadingOverlay();
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getCollectionUpdateURL(), type: 'POST', contentType: 'application/json', data: JSON.stringify({id: id, name: name}), error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
}, complete: function() {
|
|
me.loadCollections();
|
|
me.hideLoadingOverlay();
|
|
$('#new_collection_modal').modal('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
removeCollection(event) {
|
|
let collectionId = $(event.currentTarget).closest('button').data('id');
|
|
const me = this;
|
|
me.showLoadingOverlay();
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getCollectionDeleteURL(), type: 'POST', contentType: 'application/json', data: JSON.stringify({id: collectionId}), success: function() {
|
|
}, error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
}, complete: function() {
|
|
me.loadCollections();
|
|
me.hideLoadingOverlay();
|
|
$('#confirm_delete_modal').modal('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
changeAPIName(model) {
|
|
const me = this;
|
|
me.showLoadingOverlay();
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getAPISaveURL(model.collectionId), type: 'POST', contentType: 'application/json', data: JSON.stringify(model), success: function(data) {
|
|
let message = '저장되었습니다.';
|
|
$('.toast-body').text(message);
|
|
$('.toast').toast('show');
|
|
}, error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
}, complete: function() {
|
|
me.hideLoadingOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
saveAPIRequest(event) {
|
|
const me = this;
|
|
const index = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
|
let model = this.apiRequests[index];
|
|
me.showLoadingOverlay();
|
|
|
|
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getAPISaveURL(model.collectionId), type: 'POST', contentType: 'application/json', data: JSON.stringify(model), success: function(data) {
|
|
let message = '저장되었습니다.';
|
|
$('.toast-body').text(message);
|
|
$('.toast').toast('show');
|
|
let collection = me.collections.find(function(collection) {
|
|
return collection.id === model.collectionId;
|
|
});
|
|
|
|
if (collection) {
|
|
// Assuming each API in the collection.apis array has an 'id' you want to match with model.id
|
|
let apiIndex = collection.apis.findIndex(api => api.id === model.id);
|
|
if (apiIndex !== -1) {
|
|
collection.apis[apiIndex] = model; // Replace the API with the model
|
|
} else {
|
|
console.log("API not found in the collection.");
|
|
}
|
|
} else {
|
|
console.log("Collection not found.");
|
|
}
|
|
}, error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
}, complete: function() {
|
|
me.hideLoadingOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
addAPIRequest(event) {
|
|
const collectionId = $('#modal_collection').val();
|
|
let newApiName = $('#new_api_name').val();
|
|
if (newApiName === '') {
|
|
newApiName = '새로운 API';
|
|
}
|
|
let newApiType = $('#new_api_type').val();
|
|
if (newApiType === '') {
|
|
newApiType = 'HTTP';
|
|
}
|
|
|
|
const collection = this.collections.filter(function(collection) {
|
|
return collection.id === collectionId;
|
|
})[0];
|
|
let me = this;
|
|
let newApi = {
|
|
id: '',
|
|
server: null,
|
|
method: 'GET',
|
|
name: newApiName,
|
|
path: '',
|
|
type: newApiType,
|
|
headers: [],
|
|
queryParams: [],
|
|
requestBody: '',
|
|
preRequestScript: '',
|
|
postRequestScript: '',
|
|
collectionId: collectionId,
|
|
responseModel: {
|
|
status: 0,
|
|
time: 0,
|
|
size: 0,
|
|
headers: [],
|
|
body: ''
|
|
}
|
|
};
|
|
newApi.collectionName = collection.name;
|
|
|
|
if (newApiType === 'TCP' || newApiType === 'HTTPFlat') {
|
|
newApi.layout = { layoutItems : []};
|
|
}
|
|
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getAPISaveURL(collectionId), type: 'POST', contentType: 'application/json', data: JSON.stringify(newApi), success: function(data) {
|
|
newApi.id = data;
|
|
}, error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
}, complete: function() {
|
|
me.loadCollections();
|
|
me.apiRequests.push(newApi);
|
|
me.currentIndex = me.apiRequests.length - 1;
|
|
|
|
me.renderTabHeader();
|
|
me.renderTabContent(me.currentIndex);
|
|
$('#new_api_name').val('');
|
|
me.hideLoadingOverlay();
|
|
$('#new_api_request_modal').modal('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
cancelAjaxRequest() {
|
|
if (this.currentAjaxRequest) {
|
|
try {
|
|
|
|
this.currentAjaxRequest.abort();
|
|
} catch (e) {
|
|
this.apiClient.abort();
|
|
}
|
|
}
|
|
this.hideLoadingOverlay();
|
|
}
|
|
|
|
openApiRequest(event) {
|
|
const collectionId = $(event.currentTarget).closest('li').data('collection');
|
|
const apiId = $(event.currentTarget).closest('li').data('id');
|
|
|
|
const collection = this.collections.filter(function(collection) {
|
|
return collection.id === collectionId;
|
|
})[0];
|
|
let selectedApi = collection.apis.filter(function(api) {
|
|
return api.id === apiId;
|
|
})[0];
|
|
|
|
if (selectedApi) {
|
|
selectedApi.collectionId = collectionId;
|
|
selectedApi.collectionName = collection.name;
|
|
let tab = this.apiRequests.filter(function(api) {
|
|
return api.id === selectedApi.id;
|
|
})[0];
|
|
|
|
if (!selectedApi.responseModel) {
|
|
selectedApi.responseModel = {
|
|
status: 0, time: 0, size: 0, headers: [], body: ''
|
|
};
|
|
}
|
|
|
|
if (tab) {
|
|
this.currentIndex = this.apiRequests.findIndex(function(api) {
|
|
return api.id === selectedApi.id;
|
|
});
|
|
this.openTab(selectedApi.id);
|
|
|
|
} else {
|
|
this.apiRequests.push(selectedApi);
|
|
this.currentIndex = this.apiRequests.length - 1;
|
|
this.renderTabHeader();
|
|
this.renderTabContent(this.currentIndex);
|
|
}
|
|
}
|
|
}
|
|
|
|
deleteApiRequest(event) {
|
|
let collectionId = $(event.currentTarget).closest('button').data('collection');
|
|
let apiId = $(event.currentTarget).closest('.confirm_delete_api').data('id');
|
|
let apiIndex = this.apiRequests.findIndex(function(api) {
|
|
return api.id === apiId;
|
|
});
|
|
if (apiIndex >= 0) {
|
|
this.closeTabWithApiIndex(apiIndex);
|
|
}
|
|
const me = this;
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getAPIDeleteURL(collectionId), type: 'POST', contentType: 'application/json', data: JSON.stringify({id: apiId}), success: function(data) {
|
|
}, error: function(response, textStatus, errorThrown) {
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
me.hideLoadingOverlay();
|
|
}, complete: function() {
|
|
me.hideLoadingOverlay();
|
|
me.loadCollections();
|
|
$('#confirm_delete_api_modal').modal('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
closeTabWithApiIndex(index) {
|
|
if (index !== undefined) {
|
|
const model = this.apiRequests[index];
|
|
this.apiRequests.splice(index, 1);
|
|
|
|
this.requestEditors.splice(index, 1);
|
|
this.responseEditors.splice(index, 1);
|
|
this.consoleEditors.splice(index, 1);
|
|
this.preRequestEditors.splice(index, 1);
|
|
this.postRequestEditors.splice(index, 1);
|
|
|
|
this.renderTabHeader();
|
|
$(`#api_request_${model.id}`).remove();
|
|
// $(`#apiRequestTabTitle li:eq(${this.apiRequests.length - 1}) button`).tab('show');
|
|
|
|
$(`#apiRequestTabTitle li:last button`).tab('show');
|
|
}
|
|
}
|
|
|
|
closeTab(event) {
|
|
const index = $('#apiRequestTabTitle').children().index($(event.currentTarget).closest('.nav-item'));
|
|
this.closeTabWithApiIndex(index);
|
|
}
|
|
}
|
|
|
|
export default APITester;
|