kimhyungsik/ax_hub_mcp_tool
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Enhance Tools List JSON modal with search and Postman export
Some checks failed
Deploy to OCIWP / deploy (push) Failing after 15s
Details

Browse Source
This commit is contained in:
jade
2026-08-19 09:40:51 +09:00
parent ebef388893
commit 17524c5887
1 changed files with 82 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
dap-gateway/src/main/resources/static/tester.html
View File

@@ -94,7 +94,8 @@
</div>
<div class="flex items-center gap-3">
<button id="exportJsonBtn" class="btn-sm flex items-center gap-2 h-10 px-4 text-sm" onclick="exportJson()">
Export JSON
<svg class="w-4 h-4 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
Tools List JSON
</button>
<button id="exportCsvBtn" class="btn-sm flex items-center gap-2 h-10 px-4 text-sm" onclick="exportCsv()" style="display: none;">
Export CSV
@@ -229,7 +230,7 @@
<!-- Modal for JSON Export -->
<div id="jsonExportModal" class="modal-overlay">
<div class="modal-content">
<div class="modal-content" style="max-width: 1200px; height: 85vh;">
<div class="modal-header">
<div>
<h3 class="text-lg font-semibold text-white">Tools List JSON</h3>
@@ -237,13 +238,17 @@
</div>
<button onclick="closeJsonExportModal()" class="text-zinc-400 hover:text-white">&times;</button>
</div>
<div class="modal-body">
<textarea id="jsonExportViewer" class="code-textarea" readonly></textarea>
<div class="border-b border-[#3f3f46] px-6 py-3 flex gap-3 items-center bg-[#09090b]">
<input type="text" id="jsonSearchInput" placeholder="Filter JSON by tool name or description..." class="bg-[#18181b] border border-[#3f3f46] text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 outline-none" oninput="filterJsonExport()">
<button class="btn-sm whitespace-nowrap" onclick="downloadPostmanCollection()">Export Postman Collection</button>
</div>
<div class="modal-body" style="padding: 0;">
<textarea id="jsonExportViewer" class="code-textarea" style="height: 100%; border: none; border-radius: 0; padding: 20px;" readonly></textarea>
</div>
<div class="modal-footer">
<div class="flex-grow flex gap-2">
<button class="btn-sm" onclick="copyJsonExport()">Copy to Clipboard</button>
<button class="btn-sm" onclick="downloadJsonExport()">Download File</button>
<button class="btn-sm" onclick="copyJsonExport()">Copy JSON to Clipboard</button>
<button class="btn-sm" onclick="downloadJsonExport()">Download JSON File</button>
</div>
<button onclick="closeJsonExportModal()" class="btn-sm py-2 px-4">Close</button>
</div>
@@ -914,6 +919,8 @@
document.body.removeChild(link);
}
let currentExportJson = [];
function exportJson() {
if (allTools.length === 0) {
alert("No tools loaded.");
@@ -929,11 +936,25 @@
delete clean._tempParsed;
return clean;
});
const jsonContent = JSON.stringify({ tools: cleanTools }, null, 2);
document.getElementById('jsonExportViewer').value = jsonContent;
currentExportJson = cleanTools;
document.getElementById('jsonSearchInput').value = '';
document.getElementById('jsonExportViewer').value = JSON.stringify({ tools: currentExportJson }, null, 2);
document.getElementById('jsonExportModal').style.display = 'flex';
}
function filterJsonExport() {
const keyword = document.getElementById('jsonSearchInput').value.toLowerCase();
if (!keyword) {
document.getElementById('jsonExportViewer').value = JSON.stringify({ tools: currentExportJson }, null, 2);
return;
}
const filtered = currentExportJson.filter(t =>
(t.name && t.name.toLowerCase().includes(keyword)) ||
(t.description && t.description.toLowerCase().includes(keyword))
);
document.getElementById('jsonExportViewer').value = JSON.stringify({ tools: filtered }, null, 2);
}
function closeJsonExportModal() {
document.getElementById('jsonExportModal').style.display = 'none';
}
@@ -957,6 +978,59 @@
document.body.removeChild(link);
}
function downloadPostmanCollection() {
if (allTools.length === 0) return;
const pmItems = currentExportJson.map(tool => {
const dummy = generateDummyPayload(tool);
return {
name: tool.name,
request: {
method: "POST",
header: [
{ key: "Content-Type", value: "application/json" },
{ key: "X-Agent-Id", value: "AUTO-TESTER" }
],
body: {
mode: "raw",
raw: JSON.stringify({
jsonrpc: "2.0",
method: "tools/call",
params: { name: tool.name, arguments: dummy },
id: 1
}, null, 2)
},
url: {
raw: "{{baseUrl}}/mcp/api/v1/tools/call",
host: ["{{baseUrl}}"],
path: ["mcp", "api", "v1", "tools", "call"]
},
description: tool.description
}
};
});
const collection = {
info: {
name: "AXHUB MCP Tools API",
description: "Auto-generated Postman Collection for testing MCP Tools",
schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
},
item: pmItems,
variable: [
{ key: "baseUrl", value: "http://localhost:8081" }
]
};
const blob = new Blob([JSON.stringify(collection, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", `AXHUB_MCP_Tools.postman_collection.json`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
document.addEventListener('DOMContentLoaded', fetchTools);
</script>
</body>