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

시나리오 탭 처리

Browse Source
This commit is contained in:
현성필
2024-01-08 10:20:58 +09:00
parent b4c43a2138
commit 2861d3d393
7 changed files with 260 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/js/APIScenario.js
+36 -19
View File
@@ -2,11 +2,13 @@ require.config({paths: {'vs': '/plugins/vs'}});
class APIScenario {
constructor() {
constructor(apiTester) {
this.scenarioList = [];
this.scenarioTab = [];
this.currentIndex = -1;
this.currentScenario = null;
this.apiTester = apiTester;
this.dataflow = {drawflow: {Home: {data: {} }}};
}
init() {
@@ -28,18 +30,14 @@ class APIScenario {
this.editor.reroute_fix_curvature = true;
this.editor.force_first_input = true;
this.editor.start();
let start = `
<div>
<div><i class="fas fa-play"></i> Start </div>
</div>
`;
this.editor.on('connectionCreated', (connection) => {
console.log('Connection created');
console.log(connection);
});
this.showOutput = true;
this.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start);
}
@@ -51,6 +49,11 @@ class APIScenario {
contentType: 'application/json',
success: function (data) {
me.scenarioList = data;
data.forEach((scenario) => {
me.dataflow.drawflow[scenario.id] = {data : JSON.parse(scenario.scenario)};
});
console.log(JSON.stringify(me.dataflow));
me.editor.import(me.dataflow);
},
error: function (response, textStatus, errorThrown) {
me.hideLoadingOverlay();
@@ -71,22 +74,26 @@ class APIScenario {
openScenario(event) {
event.preventDefault();
let scenarioId = $(event.target).closest('li').data('id');
let scenario = this.getScenario(scenarioId);
this.openTab(scenario);
var all = document.querySelectorAll(".api-scenario-list ul li");
for (var i = 0; i < all.length; i++) {
all[i].classList.remove('selected');
}
event.target.classList.add('selected');
this.editor.changeModule(scenarioId);
}
openTab(scenario) {
console.log('openTab');
console.log(scenario);
this.currentScenario = scenario;
let openTab = this.scenarioTab.find((tab) => tab.id === scenario.id);
if (openTab) {
this.currentIndex = this.scenarioTab.indexOf(openTab);
//$(`#api_scenario_tab_${id}`).tab('show'); // API request 탭 활성화
} else {
this.scenarioTab.push(scenario);
this.renderScenarioTab(scenario);
}
// this.currentScenario = scenario;
// let openTab = this.scenarioTab.find((tab) => tab.id === scenario.id);
// if (openTab) {
// this.currentIndex = this.scenarioTab.indexOf(openTab);
// //$(`#api_scenario_tab_${id}`).tab('show'); // API request 탭 활성화
// } else {
// this.scenarioTab.push(scenario);
// this.renderScenarioTab(scenario);
// }
}
renderScenarioTab(scenario) {
@@ -196,8 +203,9 @@ class APIScenario {
}
runScript() {
console.log(this.editor.export().drawflow);
let graph = APIScenarioExecutor.extractGraphFromStart(this.editor.export().drawflow.Home.data);
this.executor = new APIScenarioExecutor(graph);
this.executor = new APIScenarioExecutor(graph, this.apiTester);
this.outputEditor.setValue(JSON.stringify(graph, null, 4));
}
@@ -228,6 +236,14 @@ class APIScenario {
stopScenario() {
}
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 = [
@@ -241,6 +257,7 @@ class APIScenario {
{type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)},
{type: 'click', selector: '#new_scenario', action: this.showNewScenarioModal.bind(this)},
{type: 'click', selector: '.save_scenario', action: this.saveScenario.bind(this)},
{type: 'click', selector: '.add_start', action: this.addStart.bind(this)},
];
for (let event of events) {
src/main/resources/static/js/APIScenarioExecutor.js
+16 -3
View File
@@ -1,8 +1,9 @@
class APIScenarioExecutor {
constructor(graph) {
constructor(graph, apiTester) {
this.graph = graph; // The graph data
this.currentNodeId = this.findStartNodeId(); // Initialize at the 'start' node
this.apiClient = new APIClient();
this.apiTester = apiTester;
this.visitedNodes = new Set(); // Keep track of visited nodes
}
@@ -19,7 +20,7 @@ class APIScenarioExecutor {
// Method to execute the current node's API request if it's an 'api' node
executeCurrentNode() {
console.log(this.currentNodeId)
if(!this.currentNodeId) {
if (!this.currentNodeId) {
console.log('No current node to execute.');
return;
}
@@ -27,7 +28,19 @@ class APIScenarioExecutor {
const currentNode = this.graph[this.currentNodeId];
if (currentNode && currentNode.class === 'api') {
// get API model with currentNode.id
//this.apiClient.sendAPIRequest(currentNode);
let model = this.apiTester.getApiRequestModel(currentNode.id);
this.apiClient.sendAPIRequest(model)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error.name)
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.log('error3')
}
});
console.log(`Executing API request for node: ${currentNode.id} - ${currentNode.name}`);
} else {
console.log('Current node is not an API node or does not exist.');
src/main/resources/static/js/APITester.js
+13
View File
@@ -438,6 +438,19 @@ class APITester {
$('#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');
src/main/resources/templates/layout/api_tester_layout.html
+39 -6
View File
@@ -18,15 +18,48 @@
<!-- csrf -->
<input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<div class="pt-layout">
<aside th:replace="page/tester/apiCollection :: collectionFragment"></aside>
<th:block th:replace="page/tester/apiCollection :: collectionScript"></th:block>
<div class="api-tester-layout">
<div class="tester-toolbar">
<button type="button" class="btn btn-primary btn-sm" id="toggle_tester">시나리오 보기</button>
<button type="button" class="btn btn-primary btn-sm" id="new_collection"><i class="fa fa-plus"></i> 새 컬렉션
</button>
<button type="button" class="btn btn-primary btn-sm" id="new_request"><i class="fa fa-plus"></i> 새 요청</button>
<button type="button" class="btn btn-primary btn-sm" id="new_scenario"><i class="fa fa-plus"></i> 새로운 시나리오
</button>
<button type="button" class="btn btn-primary btn-sm" id="full_screen"><i class="fa-solid fa-display"></i> 전체화면</button>
</div>
<div class="tester">
<section th:replace="page/tester/apiScenario :: scenarioFragment">
</section>
<aside th:replace="page/tester/apiCollection :: collectionFragment"></aside>
<section class="api-tester" layout:fragment="contentFragment">
</section>
<section th:replace="page/tester/apiScenario :: scenarioScript">
</section>
</div>
<th:block th:replace="page/tester/apiCollection :: collectionScript">
<section class="pt-main order-1" layout:fragment="contentFragment">
</section>
<th:block layout:fragment="contentScript">
</th:block>
<th:block layout:fragment="contentScript">
</th:block>
<script>
$(function () {
const container = document.querySelector('.api-tester-layout');
$('#full_screen').on('click', function () {
container.classList.toggle('full-screen');
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
container.classList.remove('full-screen');
// layoutManager.resize();
}
});
});
</script>
</div>
<footer th:replace="fragment/footer :: footerFragment"></footer>
src/main/resources/templates/page/tester/apiCollection.html
+87 -6
View File
@@ -6,15 +6,31 @@
</head>
<body>
<aside class="pt-sidebar border" th:fragment="collectionFragment" style="min-width: 200px;">
<div class="p-1">
<button type="button" class="btn btn-primary btn-sm" id="new_collection"><i class="fa fa-plus"></i>새 컬렉션</button>
<button type="button" class="btn btn-primary btn-sm" id="new_request"><i class="fa fa-plus"></i>새 요청</button>
<aside class="api-catalog border" th:fragment="collectionFragment">
<div style="background: rgba(0,0,0,.03);">
API 목록
</div>
<div class="collapse pt-links" aria-label="sidebar menu">
<ul class="list-unstyled mb-0 py-3 pt-md-1" id="side_menubar">
<div class="pt-links" aria-label="sidebar menu">
<ul class="list-unstyled" id="side_menubar">
</ul>
</div>
<div class="modal fade" id="new_scenario_modal" tabindex="-1" aria-labelledby="new_scenario_modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">새로운 시나리오 추가</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="text" id="new_scenario_name" class="form-control" placeholder="이름을 입력하세요" aria-label="이름을 입력하세요" name="scenario_name" required/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary save_scenario">저장</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="new_collection_modal" tabindex="-1" aria-labelledby="new_collection_modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
@@ -49,6 +65,39 @@
</div>
</div>
</div>
<div id="loading-overlay" style="display: none;">
<div class="d-flex justify-content-center align-items-center"
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
<div class="text-center">
<span class="sr-only">Loading...</span>
<br/>
<button id="cancel-ajax" class="btn btn-danger mt-3">Cancel</button>
</div>
</div>
</div>
<div class="modal fade" id="new_api_request_modal" tabindex="-1" aria-labelledby="new_api_request_modal"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">새로운 API 추가</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<select class="form-select" id="modal_collection"></select>
<div class="input-group mt-2">
<span class="input-group-text">API 이름</span>
<input type="text" class="form-control" id="new_api_name">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary add_new_request">추가</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="confirm_delete_modal" tabindex="-1" aria-labelledby="confirm_delete_modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
@@ -88,6 +137,38 @@
<!-- menu script -->
<th:block th:fragment="collectionScript">
<script th:inline="javascript">
$(document).ready(function () {
var showingScenario = true;
$('#toggle_tester').on('click', function () {
console.log(showingScenario);
showingScenario = !showingScenario;
if (showingScenario) {
// Move .api-scenario off-screen to the left
// $('.api-scenario').css('transform', 'translateX(0)');
$('.api-scenario').show();
$('.api-tester').hide();
$('#toggle_tester').text('테스터 보기');
} else {
// Bring .api-scenario into view
// $('.api-scenario').css('transform', 'translateX(-100%)');
$('#toggle_tester').text('시나리오 보기');
$('.api-scenario').hide();
$('.api-tester').show();
}
});
if (showingScenario){
$('.api-scenario').show();
$('.api-tester').hide();
}
else{
$('.api-scenario').hide();
$('.api-tester').show();
}
});
</script>
</th:block>
</body>
src/main/resources/templates/page/tester/apiScenario.html
+64
View File
@@ -0,0 +1,64 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<section th:fragment="scenarioFragment" class="api-scenario">
<div class="api-scenario-sidebar">
<div style="background: rgba(0,0,0,.03);">
시나리오 목록
</div>
<div class="pt-links ">
<ul class="list-unstyled api-scenario-list" id="scenario_menubar">
</ul>
</div>
</div>
<div class="api-scenario-view">
<div class="api-scenario-content">
<div class="api-scenario-editor">
<div class="api-scenario-editor-toolbar" style="height: 50px; border: 1px solid grey; padding: 5px;">
<button type="button" class="btn btn-primary btn-sm run_scenario_step">단계 별 실행</button>
<button type="button" class="btn btn-primary btn-sm run_scenario_all">전체 실행</button>
<button type="button" class="btn btn-primary btn-sm pause_scenario">일시 정지</button>
<button type="button" class="btn btn-primary btn-sm stop_scenario">정지</button>
<button type="button" class="btn btn-primary btn-sm save">저장</button>
<button type="button" class="btn btn-primary btn-sm export">내보내기</button>
<button type="button" class="btn btn-primary btn-sm clear">초기화</button>
<button type="button" class="btn btn-primary btn-sm add_start">시작 노드</button>
</div>
<div>시나리오 설명이 여기에 표시</div>
<div class="api-scenario-editor-body" style="display: flex; flex-direction: row; flex: 1; border: 1px solid grey; padding: 5px;">
<div class="scenario_editor">
<div class="drawflow" id="drawflow">
<!-- <div class="btn-lock">-->
<!-- <i id="lock" class="fas fa-lock lock"></i>-->
<!-- <i id="unlock" class="fas fa-lock-open unlock" style="display:none;"></i>-->
<!-- </div>-->
<!-- <div class="bar-zoom">-->
<!-- <i class="fas fa-search-minus zoom_out"></i>-->
<!-- <i class="fas fa-search zoom_reset"></i>-->
<!-- <i class="fas fa-search-plus zoom_in"></i>-->
<!-- </div>-->
</div>
</div>
</div>
</div>
<div class="api-scenario-output">
<div class="api-scenario-output-header">
<span>output</span>
<button type="button" class="btn btn-primary btn-sm toggle_output">숨기기</button>
</div>
<div class="api-scenario-output-body">
<div id="output" style="height: 100%"></div>
</div>
</div>
</div>
</div>
</section>
</body>
<th:block th:fragment="scenarioScript">
</th:block>
</html>
src/main/resources/templates/page/tester/apiTester.html
+5 -44
View File
@@ -7,16 +7,6 @@
<script>
require.config({paths: {'vs': '/plugins/vs'}});
</script>
<div id="loading-overlay" style="display: none;">
<div class="d-flex justify-content-center align-items-center"
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
<div class="text-center">
<span class="sr-only">Loading...</span>
<br/>
<button id="cancel-ajax" class="btn btn-danger mt-3">Cancel</button>
</div>
</div>
</div>
<div class="container-fluid mt-2">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; bottom: 0; left: 0;">
<div class="toast-header">
@@ -38,28 +28,6 @@
</div>
</div>
</div>
<div class="modal fade" id="new_api_request_modal" tabindex="-1" aria-labelledby="new_api_request_modal"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">새로운 API 추가</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<select class="form-select" id="modal_collection"></select>
<div class="input-group mt-2">
<span class="input-group-text">API 이름</span>
<input type="text" class="form-control" id="new_api_name">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary add_new_request">추가</button>
</div>
</div>
</div>
</div>
<div style="display: none">
<ul id="servers">
<li th:each="server : ${servers}" th:data-id="${server.id}" th:data-name="${server.name}" th:data-path="${server.basePath}"></li>
@@ -71,8 +39,11 @@
</body>
<th:block layout:fragment="contentScript">
<script th:src="@{/js/APIClient.js}"></script>
<script th:src="@{/js/APITester.js}"></script>
<script th:src="@{/js/LayoutUtil.js}"></script>
<script th:src="@{/js/APIScenarioExecutor.js}"></script>
<script th:src="@{/js/APIScenario.js}"></script>
<script>
$(document).ajaxError(function(event, jqxhr, settings, exception) {
if (jqxhr.status === 401) {
@@ -80,7 +51,6 @@
}
});
$(function () {
//get servers from html convert to array
const servers = [];
$('#servers li').each(function () {
@@ -93,17 +63,8 @@
const apiTester = new APITester();
apiTester.init(servers);
// const timer = setInterval(function () {
// $.ajax({
// url: '/refreshSessionTimeout.do',
// type: 'GET',
// contentType: 'application/json',
// complete: function () {
// apiTester.hideLoadingOverlay();
// }
// });
// }, 60000);
const apiScenario = new APIScenario(apiTester);
apiScenario.init();
});
</script>