mirror of
https://github.com/oarkflow/mq.git
synced 2025-10-19 14:44:43 +08:00
118 lines
4.8 KiB
HTML
118 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Task Status Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #D1D5DB #E5E7EB;
|
|
}
|
|
.scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.scrollbar::-webkit-scrollbar-track {
|
|
background: #E5E7EB;
|
|
}
|
|
.scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: #D1D5DB;
|
|
border-radius: 9999px;
|
|
}
|
|
svg path {
|
|
transition: fill 0.3s ease;
|
|
}
|
|
svg path:hover {
|
|
opacity: 0.8;
|
|
}
|
|
.popover {
|
|
position: absolute;
|
|
z-index: 10;
|
|
display: none;
|
|
background-color: white;
|
|
border: 1px solid #E5E7EB;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 10px;
|
|
width: 200px;
|
|
border-radius: 8px;
|
|
}
|
|
.popover.visible {
|
|
display: block;
|
|
}
|
|
#dag-diagram {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 h-screen p-4">
|
|
|
|
<div class="w-[95vw] mx-auto p-6 bg-white shadow-lg rounded-lg">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="min-h-96">
|
|
<div class="grid grid-cols-4 gap-4 mb-6">
|
|
<div class="col-span-1 w-full flex justify-center">
|
|
<div class="flex flex-col space-y-4">
|
|
<div class="p-4 border rounded-md flex items-center justify-center">
|
|
<div class="bg-gray-50">
|
|
<img id="svg-container" class="w-full" src="" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-3 w-full flex flex-col">
|
|
<div class=" flex justify-between">
|
|
<textarea id="payload" class="w-full p-2 border rounded-md" placeholder="Enter your JSON Payload here">[{"phone": "+123456789", "email": "abc.xyz@gmail.com"}, {"phone": "+98765412", "email": "xyz.abc@gmail.com"}]</textarea>
|
|
<button id="send-request" class="ml-4 py-2 px-6 bg-green-500 text-white rounded-md">Send</button>
|
|
</div>
|
|
<div id="response">
|
|
<h1 class="text-xl font-semibold text-gray-700 mb-4">Table</h1>
|
|
<div class="overflow-auto scrollbar h-48">
|
|
<table class="min-w-full border-collapse border border-gray-300">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="px-4 py-2 border border-gray-300">Task ID</th>
|
|
<th class="px-4 py-2 border border-gray-300">Created At</th>
|
|
<th class="px-4 py-2 border border-gray-300">Processed At</th>
|
|
<th class="px-4 py-2 border border-gray-300">Latency</th>
|
|
<th class="px-4 py-2 border border-gray-300">Status</th>
|
|
<th class="px-4 py-2 border border-gray-300">View</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="taskTableBody">
|
|
<!-- Dynamic rows will be appended here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="mt-6">
|
|
<div class="grid grid-cols-4 gap-4 mb-6">
|
|
<div class="col-span-3">
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-2">DAG Image view per task</h2>
|
|
<div id="task-svg" class="border border-gray-300 p-4 bg-gray-50 min-h-64 flex items-center justify-center">
|
|
<svg id="dag-diagram" xmlns="http://www.w3.org/2000/svg"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1">
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-2">Node Result: <span id="task-id"></span></h2>
|
|
<div id="svg-popover" class="p-4 border rounded-md min-h-48 flex flex-wrap justify-center">
|
|
<p>Node Result per task</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/socket.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|