비동기 테스트 추가
This commit is contained in:
현성필
@@ -22,6 +22,9 @@
|
||||
<div class="text-center flex-fill" sec:authorize="isAuthenticated()">
|
||||
<a class="nav-link" th:href="@{/mgmt/routes/list_view.do}">응답 관리</a>
|
||||
</div>
|
||||
<div class="text-center flex-fill" sec:authorize="isAuthenticated()">
|
||||
<a class="nav-link" th:href="@{/mgmt/queues/list_view.do}">큐 관리</a>
|
||||
</div>
|
||||
<div class="text-center flex-fill" sec:authorize="isAuthenticated()">
|
||||
<a class="nav-link" th:href="@{/mgmt/api_tester.do}">요청 관리</a>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<!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" layout:decorate="~{layout/default_layout}">
|
||||
<body>
|
||||
|
||||
<section layout:fragment="contentFragment">
|
||||
<script th:src="@{/plugins/vs/loader.js}"></script>
|
||||
<script>
|
||||
require.config({paths: {'vs': '[[@{/plugins/vs}]]'}});
|
||||
</script>
|
||||
<div class="container-fluid mt-2">
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; left: 0;">
|
||||
<div class="toast-header">
|
||||
<strong class="mr-auto">알림</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
</div>
|
||||
</div>
|
||||
<form name="queueHandlerForm" id="queueHandlerForm"
|
||||
th:action="${queueHandler.queueName == null}?@{/mgmt/queues/register.do}:@{/mgmt/queues/update.do}"
|
||||
th:object='${queueHandler}' method="post">
|
||||
<div class="card col-md">
|
||||
<div class="card-header">
|
||||
<h3 th:if="${queueHandler.queueName == null}">Queue Handler 등록</h3>
|
||||
<h3 th:if="${queueHandler.queueName != null}">Queue Handler 수정</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
|
||||
|
||||
<!-- Queue Name field -->
|
||||
<div class="form-floating mt-2">
|
||||
<input type="text" class="form-control"
|
||||
th:classappend="${#fields.hasErrors('queueName')}? 'is-invalid'"
|
||||
th:field="*{queueName}" required/>
|
||||
<label for="queueName" class="form-label must">Queue Name</label>
|
||||
<th:block th:each="err : ${#fields.errors('queueName')}">
|
||||
<div th:text="${err}" class="invalid-feedback"></div>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
<!-- Handler Script -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">Handler Script</div>
|
||||
<div class="card-body">
|
||||
<div id="handler_script_editor" style="width:100%;height:400px;border:1px solid grey;"></div>
|
||||
<textarea class="form-control" style="display: none;"
|
||||
th:field="*{handlerScript}" name="handlerScript"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="button" class="btn btn-primary btn_list">
|
||||
<i class="fa-solid fa-list"></i> 목록
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn_register">
|
||||
<i class="fa-sharp fa-solid fa-floppy-disk"></i> 저장
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script>
|
||||
$(function () {
|
||||
let handlerScriptEditor;
|
||||
|
||||
// Initialize Monaco Editor
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
handlerScriptEditor = monaco.editor.create(document.getElementById('handler_script_editor'), {
|
||||
value: document.querySelector('textarea[name="handlerScript"]').value || '',
|
||||
language: 'javascript',
|
||||
theme: 'vs-light',
|
||||
automaticLayout: true
|
||||
});
|
||||
|
||||
handlerScriptEditor.onDidChangeModelContent(function (e) {
|
||||
document.querySelector('textarea[name="handlerScript"]').value = handlerScriptEditor.getValue();
|
||||
});
|
||||
});
|
||||
|
||||
let fnRegister = document.querySelector(".btn_register");
|
||||
|
||||
fnRegister.addEventListener("click", function (event) {
|
||||
let form = document.getElementById("queueHandlerForm");
|
||||
// Update the hidden textarea with current editor content
|
||||
document.querySelector('textarea[name="handlerScript"]').value = handlerScriptEditor.getValue();
|
||||
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
} else {
|
||||
form.submit();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
});
|
||||
|
||||
let fnList = document.querySelector(".btn_list");
|
||||
|
||||
fnList.addEventListener("click", function () {
|
||||
location.href = "[[@{/mgmt/queues/list_view.do}]]";
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</html>
|
||||
@@ -0,0 +1,215 @@
|
||||
<!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" layout:decorate="~{layout/default_layout}">
|
||||
|
||||
<body>
|
||||
|
||||
<section layout:fragment="contentFragment">
|
||||
<div class="container-fluid">
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<h5><span style="font-weight: bold">Queue Handler List</span></h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<form role="form" class="row g-3" name="searchForm" th:action="@{/mgmt/queues/list_view.do}" method="get" th:object="${queueHandlerSearch}">
|
||||
<input name="page" type="hidden" value="1"/>
|
||||
<div class="col-auto">
|
||||
<input class="form-control" name="name" placeholder="Name" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
|
||||
th:value="${queueHandlerSearch.queueName}"
|
||||
maxlength="255"/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}">
|
||||
<i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary btn_delete">
|
||||
<i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="button" class="btn btn-primary btn_add">
|
||||
<i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-4">
|
||||
<div class="card-body">
|
||||
<form name="listForm">
|
||||
<input name="id" type="hidden"/>
|
||||
<input name="checkedIdForDel" type="hidden"/>
|
||||
<input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
|
||||
<table class="table table-hover pt-table">
|
||||
<colgroup>
|
||||
<col style="width: 5%;">
|
||||
<col style="width: 20%;">
|
||||
<col style="width: 55%;">
|
||||
<col style="width: 20%;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><div class="text-center">No.</div></th>
|
||||
<th>
|
||||
<div class="text-center">
|
||||
<input type="checkbox" name="checkAll" class="form-check-input" onclick="fncCheckAll()" th:title="#{input.selectAll.title}">
|
||||
</div>
|
||||
</th>
|
||||
<th><div class="text-center">Queue Name</div></th>
|
||||
<th><div class="text-center">Actions</div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="row, status : ${page.content}">
|
||||
<td class="text-center" th:text="${page.getNumber() * page.getSize() + status.count}"></td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-center">
|
||||
<input type="checkbox" name="checkField" class="form-check-input" title="Select"/>
|
||||
<input name="checkId" type="hidden" th:value="${row.queueName}"/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-center">
|
||||
<span th:text="${row.queueName}"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<button type="button" class="btn btn-success btn-sm me-2" th:onclick="fnStartQueue([[${row.queueName}]])" title="Start Queue">
|
||||
<i class="fa-sharp fa-solid fa-play"></i> Start
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-sm me-2" th:onclick="fnStopQueue([[${row.queueName}]])" title="Stop Queue">
|
||||
<i class="fa-sharp fa-solid fa-stop"></i> Stop
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-sm me-2" th:onclick="fnSelectItem([[${row.queueName}]])" th:value="#{button.update}">
|
||||
<i class="fa-sharp fa-solid fa-edit"></i> [[#{button.update}]]
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- No data message -->
|
||||
<tr th:if="${page.content.size() == 0 }">
|
||||
<td colspan="6" th:text="#{common.nodata.msg}"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script>
|
||||
|
||||
function fnStartQueue(id) {
|
||||
if (confirm("Are you sure you want to start this queue?")) {
|
||||
let form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '[[@{/mgmt/queues/start.do}]]';
|
||||
|
||||
let idInput = document.createElement('input');
|
||||
idInput.type = 'hidden';
|
||||
idInput.name = 'id';
|
||||
idInput.value = id;
|
||||
|
||||
let csrfInput = document.createElement('input');
|
||||
csrfInput.type = 'hidden';
|
||||
csrfInput.name = document.getElementById('csrf').name;
|
||||
csrfInput.value = document.getElementById('csrf').value;
|
||||
|
||||
form.appendChild(idInput);
|
||||
form.appendChild(csrfInput);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
|
||||
function fnStopQueue(id) {
|
||||
if (confirm("Are you sure you want to stop this queue?")) {
|
||||
let form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '[[@{/mgmt/queues/stop.do}]]';
|
||||
|
||||
let idInput = document.createElement('input');
|
||||
idInput.type = 'hidden';
|
||||
idInput.name = 'id';
|
||||
idInput.value = id;
|
||||
|
||||
let csrfInput = document.createElement('input');
|
||||
csrfInput.type = 'hidden';
|
||||
csrfInput.name = document.getElementById('csrf').name;
|
||||
csrfInput.value = document.getElementById('csrf').value;
|
||||
|
||||
form.appendChild(idInput);
|
||||
form.appendChild(csrfInput);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
|
||||
function fn_select_page(pageNo) {
|
||||
document.searchForm.page.value = pageNo;
|
||||
document.searchForm.submit();
|
||||
}
|
||||
|
||||
function fnSelectItem(id) {
|
||||
location.href = "[[@{/mgmt/queues/update_view.do}]]" + "?id=" + id;
|
||||
}
|
||||
|
||||
$(function () {
|
||||
let fnSearch = document.querySelector(".btn_search");
|
||||
let fnDelete = document.querySelector(".btn_delete");
|
||||
let fnAdd = document.querySelector(".btn_add");
|
||||
|
||||
fnSearch.addEventListener("click", function () {
|
||||
document.searchForm.page.value = 1;
|
||||
document.searchForm.submit();
|
||||
});
|
||||
|
||||
fnDelete.addEventListener("click", function () {
|
||||
var checkField = document.listForm.checkField;
|
||||
var id = document.listForm.checkId;
|
||||
var checkedIds = "";
|
||||
var checkedCount = 0;
|
||||
if (checkField) {
|
||||
if (checkField.length > 1) {
|
||||
for (var i = 0; i < checkField.length; i++) {
|
||||
if (checkField[i].checked) {
|
||||
checkedIds += ((checkedCount == 0 ? "" : ",") + id[i].value);
|
||||
checkedCount++;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (checkField.checked) {
|
||||
checkedIds = id.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (checkedIds.length > 0) {
|
||||
if (confirm("[[#{common.delete.msg}]]")) {
|
||||
document.listForm.checkedIdForDel.value = checkedIds;
|
||||
document.listForm.method = 'POST';
|
||||
document.listForm.action = '[[@{/mgmt/queues/delete.do}]]';
|
||||
document.listForm.submit();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
fnAdd.addEventListener("click", function () {
|
||||
location.href = '[[@{/mgmt/queues/create_view.do}]]';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
@@ -78,6 +78,15 @@
|
||||
<div th:text="${err}" class="invalid-feedback"></div>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
<div class="card mt-1">
|
||||
<div class="card-header">요청 스크립트</div>
|
||||
<div class="card-body">
|
||||
<div id="request_script_editor" class="request_script_editor" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
<textarea class="form-control" style="display: none;" name="requestScript" th:field="*{requestScript}"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="responses" class="mt-1">
|
||||
<div class="row" th:each="response, status: *{responses}">
|
||||
<input type="number" th:field="*{responses[__${status.index}__].statusCode}" required/>
|
||||
@@ -240,12 +249,14 @@
|
||||
name: '',
|
||||
method: '',
|
||||
pathPattern: '',
|
||||
responses: []
|
||||
requestScript: '',
|
||||
responses: [],
|
||||
};
|
||||
|
||||
let view = {
|
||||
currentIdx: 0,
|
||||
responseEditors : [],
|
||||
requestScriptEditor: null, // Add reference for request script editor
|
||||
init: function () {
|
||||
$('.btn_add_case').on('click', function () {
|
||||
controller.addResponse();
|
||||
@@ -310,7 +321,23 @@
|
||||
response.headers.push(header);
|
||||
});
|
||||
});
|
||||
|
||||
$('#responses').empty();
|
||||
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
view.requestScriptEditor = monaco.editor.create(document.getElementById('request_script_editor'), {
|
||||
value: $('textarea[name="requestScript"]').val() || '',
|
||||
theme: 'vs-light',
|
||||
language: 'javascript',
|
||||
automaticLayout: true
|
||||
});
|
||||
|
||||
view.requestScriptEditor.onDidChangeModelContent(function (e) {
|
||||
model.requestScript = view.requestScriptEditor.getValue();
|
||||
$('textarea[name="requestScript"]').val(view.requestScriptEditor.getValue());
|
||||
});
|
||||
});
|
||||
|
||||
this.render();
|
||||
},
|
||||
renderCondition: function(i) {
|
||||
|
||||
Reference in New Issue
Block a user