시나리오 탭 처리

src/main/resources/static/js/APIScenario.js

@@ -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);
+        var all = document.querySelectorAll(".api-scenario-list ul li");
-        this.openTab(scenario);
+        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;
+        // this.currentScenario = scenario;
-        let openTab = this.scenarioTab.find((tab) => tab.id === scenario.id);
+        // let openTab = this.scenarioTab.find((tab) => tab.id === scenario.id);
-        if (openTab) {
+        // if (openTab) {
-            this.currentIndex = this.scenarioTab.indexOf(openTab);
+        //     this.currentIndex = this.scenarioTab.indexOf(openTab);
-            //$(`#api_scenario_tab_${id}`).tab('show'); // API request 탭 활성화
+        //     //$(`#api_scenario_tab_${id}`).tab('show'); // API request 탭 활성화
-        } else {
+        // } else {
-            this.scenarioTab.push(scenario);
+        //     this.scenarioTab.push(scenario);
-            this.renderScenarioTab(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

@@ -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

@@ -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

@@ -18,15 +18,48 @@
 
 <!-- csrf -->
 <input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
-<div class="pt-layout">
+<div class="api-tester-layout">
-    <aside th:replace="page/tester/apiCollection :: collectionFragment"></aside>
+    <div class="tester-toolbar">
-    <th:block th:replace="page/tester/apiCollection :: collectionScript"></th:block>
+        <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> 새 컬렉션
-    <section class="pt-main order-1" layout:fragment="contentFragment">
+        </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>
-    <th:block layout:fragment="contentScript">
+        <aside th:replace="page/tester/apiCollection :: collectionFragment"></aside>
-    </th:block>
+        <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">
+
+    </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

@@ -6,15 +6,31 @@
 </head>
 
 <body>
-<aside class="pt-sidebar border" th:fragment="collectionFragment" style="min-width: 200px;">
+<aside class="api-catalog border" th:fragment="collectionFragment">
-    <div class="p-1">
+    <div style="background: rgba(0,0,0,.03);">
-        <button type="button" class="btn btn-primary btn-sm" id="new_collection"><i class="fa fa-plus"></i>새 컬렉션</button>
+        API 목록
-        <button type="button" class="btn btn-primary btn-sm" id="new_request"><i class="fa fa-plus"></i>새 요청</button>
     </div>
-    <div class="collapse pt-links" aria-label="sidebar menu">
+    <div class="pt-links" aria-label="sidebar menu">
-        <ul class="list-unstyled mb-0 py-3 pt-md-1" id="side_menubar">
+        <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

@@ -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

@@ -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 apiScenario = new APIScenario(apiTester);
-            // const timer = setInterval(function () {
+            apiScenario.init();
-            //     $.ajax({
-            //         url: '/refreshSessionTimeout.do',
-            //         type: 'GET',
-            //         contentType: 'application/json',
-            //         complete: function () {
-            //             apiTester.hideLoadingOverlay();
-            //         }
-            //     });
-            // }, 60000);
 
         });
     </script>