현성필
393 lines
12 KiB
JavaScript
393 lines
12 KiB
JavaScript
import * as monaco from 'monaco-editor';
|
|
import APIScenarioExecutor from './APIScenarioExecutor';
|
|
import Drawflow from 'drawflow';
|
|
|
|
class APIScenario {
|
|
|
|
constructor(apiTester, contextPath) {
|
|
this.scenarioList = [];
|
|
this.currentScenario = null;
|
|
this.apiTester = apiTester;
|
|
this.contextPath = contextPath || '/';
|
|
}
|
|
|
|
getAPIScenarioListURL() {
|
|
return this.contextPath + 'mgmt/api_scenario/list.do';
|
|
}
|
|
|
|
getAPIScenarioCreateURL() {
|
|
return this.contextPath + 'mgmt/api_scenario/create.do';
|
|
}
|
|
|
|
getAPIScenarioUpdateURL() {
|
|
return this.contextPath + 'mgmt/api_scenario/update.do';
|
|
}
|
|
|
|
getAPIScenarioDeleteURL() {
|
|
return this.contextPath + 'mgmt/api_scenario/delete.do';
|
|
}
|
|
|
|
init() {
|
|
this.loadScenarioList();
|
|
this.outputEditor = monaco.editor.create(document.getElementById('output'), {
|
|
value: '',
|
|
automaticLayout: true
|
|
});
|
|
this.bindEvents();
|
|
|
|
let id = document.getElementById('drawflow');
|
|
this.editor = new Drawflow(id);
|
|
this.editor.reroute = true;
|
|
this.editor.reroute_fix_curvature = true;
|
|
this.editor.force_first_input = true;
|
|
this.editor.start();
|
|
// this.editor.on('contextmenu', (event) => {
|
|
// let node = this.editor.getNodeFromId(event.target.id);
|
|
// })
|
|
|
|
this.showOutput = true;
|
|
}
|
|
|
|
loadScenarioList(callback) {
|
|
const me = this;
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getAPIScenarioListURL(),
|
|
type: 'GET',
|
|
contentType: 'application/json',
|
|
success: function(data) {
|
|
me.scenarioList = data;
|
|
let drawflowData = {drawflow: {Home: {data: {}}}};
|
|
data.forEach((scenario) => {
|
|
let scenarioData = null;
|
|
try {
|
|
scenarioData = JSON.parse(scenario.scenario);
|
|
} catch (e) {
|
|
scenarioData = {};
|
|
}
|
|
drawflowData.drawflow[scenario.id] = {data: scenarioData};
|
|
});
|
|
|
|
me.editor.import(drawflowData);
|
|
me.editor.changeModule('Home');
|
|
},
|
|
error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
},
|
|
complete: function() {
|
|
me.renderScenarioList();
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
me.hideLoadingOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
getScenarioList() {
|
|
return this.scenarioList;
|
|
}
|
|
|
|
openScenario(event) {
|
|
event.preventDefault();
|
|
let scenarioId = $(event.target).closest('li').data('id');
|
|
this.stopScenario();
|
|
this.openScenarioById(scenarioId);
|
|
}
|
|
|
|
openScenarioById(scenarioId) {
|
|
document.querySelectorAll('.api-scenario-list li').forEach((node) => {
|
|
node.classList.remove('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;
|
|
}
|
|
|
|
getScenario(scenarioId) {
|
|
return this.getScenarioList().find((scenario) => scenario.id === scenarioId);
|
|
}
|
|
|
|
showLoadingOverlay() {
|
|
$('#loading-overlay').show();
|
|
}
|
|
|
|
hideLoadingOverlay() {
|
|
$('#loading-overlay').hide();
|
|
}
|
|
|
|
showNewScenarioModal() {
|
|
$('#new_scenario_modal').find('input').val('');
|
|
$('#new_scenario_modal').modal('show');
|
|
}
|
|
|
|
createScenario() {
|
|
const name = $('#new_scenario_name').val();
|
|
const me = this;
|
|
me.showLoadingOverlay();
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getAPIScenarioCreateURL(),
|
|
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);
|
|
me.saveScenario();
|
|
});
|
|
},
|
|
error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
},
|
|
complete: function() {
|
|
me.hideLoadingOverlay();
|
|
$('#new_scenario_modal').modal('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
saveScenario() {
|
|
if (this.currentScenario !== null) {
|
|
let data = this.editor.export();
|
|
console.log(data.drawflow[this.currentScenario].data);
|
|
let updatedScenario = this.getScenario(this.currentScenario);
|
|
updatedScenario.scenario = JSON.stringify(data.drawflow[this.currentScenario].data);
|
|
|
|
const me = this;
|
|
me.showLoadingOverlay();
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getAPIScenarioUpdateURL(),
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(updatedScenario),
|
|
error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
},
|
|
complete: function() {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text('저장되었습니다.');
|
|
$('.toast').toast('show');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
showDeleteModal(event) {
|
|
const id = $(event.currentTarget).closest('li').data('id');
|
|
$('#confirm_delete_scenario_modal').find('.confirm_delete_scenario').data('id', id);
|
|
$('#confirm_delete_scenario_modal').modal('show');
|
|
}
|
|
|
|
removeScenario(event) {
|
|
const id = $(event.currentTarget).data('id');
|
|
const me = this;
|
|
me.showLoadingOverlay();
|
|
this.currentAjaxRequest = $.ajax({
|
|
url: this.getAPIScenarioDeleteURL(),
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({id: id}),
|
|
error: function(response, textStatus, errorThrown) {
|
|
me.hideLoadingOverlay();
|
|
$('.toast-body').text(response.responseJSON.error);
|
|
$('.toast').toast('show');
|
|
},
|
|
complete: function() {
|
|
me.hideLoadingOverlay();
|
|
$('#confirm_delete_scenario_modal').modal('hide');
|
|
$('.toast-body').text('삭제되었습니다.');
|
|
$('.toast').toast('show');
|
|
me.editor.changeModule('Home');
|
|
me.loadScenarioList(() => {
|
|
if (me.getScenarioList().length > 0) {
|
|
me.openScenarioById(me.getScenarioList()[0].id);
|
|
}
|
|
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
toggleOutput() {
|
|
// Define your selectors as constants for easy changes and better readability
|
|
const scenarioContentSelector = '.api-scenario-content';
|
|
const scenarioOutputSelector = '.api-scenario-output';
|
|
const scenarioOutputBodySelector = '.api-scenario-output-body';
|
|
const drawflowSelector = '#drawflow';
|
|
const scenarioEditorSelector = '.scenario_editor';
|
|
|
|
// Ensure parentHeight is a number
|
|
let parentHeight = parseInt($(scenarioContentSelector).css('height'), 10);
|
|
|
|
// Toggle the showOutput state
|
|
this.showOutput = !this.showOutput;
|
|
|
|
if (!this.showOutput) {
|
|
$(scenarioOutputSelector).css('flex', '0');
|
|
$(scenarioOutputBodySelector).hide();
|
|
|
|
let editorHeight = $(scenarioEditorSelector).css('height');
|
|
$(drawflowSelector).css('height', editorHeight);
|
|
$(scenarioOutputSelector).removeClass('halfHeight');
|
|
$(drawflowSelector).removeClass('halfHeight');
|
|
} else {
|
|
$(scenarioOutputSelector).css('flex', '1');
|
|
$(scenarioOutputSelector).addClass('halfHeight');
|
|
$(scenarioOutputBodySelector).show();
|
|
$(drawflowSelector).addClass('halfHeight');
|
|
$(drawflowSelector).css('height', parentHeight / 2);
|
|
}
|
|
|
|
// Adjustments for when parentHeight isn't a valid number
|
|
if (isNaN(parentHeight)) {
|
|
console.error('parentHeight is not a number. Check the height of the api-scenario-content element.');
|
|
// Fallback or additional error handling can be placed here
|
|
}
|
|
}
|
|
|
|
resizeEditor() {
|
|
//FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출
|
|
this.outputEditor.layout({
|
|
width: 0
|
|
});
|
|
this.outputEditor.layout({});
|
|
|
|
}
|
|
|
|
runScript() {
|
|
console.log(this.editor.export().drawflow);
|
|
let graph = APIScenarioExecutor.extractGraphFromStart(this.editor.export().drawflow[this.currentScenario].data);
|
|
this.executor = new APIScenarioExecutor(graph, this.apiTester, this.outputEditor);
|
|
}
|
|
|
|
runScenarioAll() {
|
|
if (!this.executor) {
|
|
this.runScript();
|
|
}
|
|
if (!this.executor.isDone) {
|
|
this.executor.executeAll();
|
|
} else {
|
|
this.executor.reset();
|
|
}
|
|
}
|
|
|
|
runScenarioStep() {
|
|
if (!this.executor) {
|
|
this.runScript();
|
|
}
|
|
if (!this.executor.isDone) {
|
|
this.executor.executeCurrentNode();
|
|
this.executor.moveToNextNode();
|
|
} else {
|
|
this.executor.reset();
|
|
}
|
|
|
|
}
|
|
|
|
resetScenario() {
|
|
|
|
}
|
|
|
|
pauseScenario() {
|
|
|
|
}
|
|
|
|
stopScenario() {
|
|
if (this.executor) {
|
|
this.executor.reset();
|
|
this.executor = null;
|
|
}
|
|
this.outputEditor.setValue('');
|
|
}
|
|
|
|
addStart() {
|
|
let start = `
|
|
<div>
|
|
<div><i class="fas fa-play"></i> Start </div>
|
|
</div>
|
|
`;
|
|
this.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start);
|
|
}
|
|
|
|
bindEvents() {
|
|
const events = [
|
|
{type: 'click', selector: '.open_scenario', action: this.openScenario.bind(this)},
|
|
{type: 'click', selector: '.export', action: this.runScript.bind(this)},
|
|
{type: 'click', selector: '.toggle_output', action: this.toggleOutput.bind(this)},
|
|
{type: 'click', selector: '.run_scenario_step', action: this.runScenarioStep.bind(this)},
|
|
{type: 'click', selector: '.run_scenario_all', action: this.runScenarioAll.bind(this)},
|
|
{type: 'click', selector: '.reset_scenario', action: this.resetScenario.bind(this)},
|
|
{type: 'click', selector: '.pause_scenario', action: this.pauseScenario.bind(this)},
|
|
{type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)},
|
|
{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: '.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)}
|
|
];
|
|
|
|
for (let event of events) {
|
|
$(document).on(event.type, event.selector, event.action);
|
|
}
|
|
|
|
window.addEventListener('resize', this.resizeEditor.bind(this));
|
|
var me = this;
|
|
|
|
$('#drawflow').droppable({
|
|
drop: function(event, ui) {
|
|
const x = ui.offset.left - $(this).offset().left;
|
|
const y = ui.offset.top - $(this).offset().top;
|
|
|
|
const dataset = ui.draggable[0].dataset;
|
|
console.log(dataset);
|
|
var node = `<div><div class="title-box">API</div><div class="box">${dataset.name}</div></div>`;
|
|
|
|
me.editor.addNode(dataset.name, 1, 1, x, y, dataset.nodeType, dataset, node);
|
|
}
|
|
});
|
|
}
|
|
|
|
scenarioListTemplate(scenario) {
|
|
return `
|
|
<li class="d-flex justify-content-between " data-id="${scenario.id}">
|
|
<a href="#" class="d-inline-flex align-items-center rounded open_scenario">${scenario.name}</a>
|
|
<div class="d-flex justify-content-between">
|
|
<button class="p-1 reset-button edit_scenario"><i class="fa fa-sharp fa-file-edit"></i></button>
|
|
<button class="p-1 reset-button delete_scenario"><i class="fa fa-trash-can"></i></button>
|
|
</div>
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
renderScenarioList() {
|
|
let scenarioList = this.getScenarioList();
|
|
let scenarioListHtml = scenarioList.map((scenario) => this.scenarioListTemplate(scenario)).join('');
|
|
$('.api-scenario-list').html(scenarioListHtml);
|
|
|
|
let nodes = document.querySelectorAll('.api-scenario-list li');
|
|
nodes.forEach((node) => {
|
|
if ($(node).data('id') === this.currentScenario) {
|
|
node.classList.add('selected');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
export default APIScenario;
|