mirror of
https://github.com/oarkflow/mq.git
synced 2025-10-04 07:37:05 +08:00
629 lines
36 KiB
HTML
629 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MQ Admin Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
|
|
<link rel="stylesheet" href="/static/admin/css/admin.css">
|
|
</head>
|
|
|
|
<body class="bg-gray-100 min-h-screen">
|
|
<!-- Navigation Header -->
|
|
<nav class="bg-blue-800 text-white shadow-lg">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<h1 class="text-xl font-bold">MQ Admin Dashboard</h1>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="connection-status flex items-center space-x-2">
|
|
<div id="connectionIndicator" class="w-3 h-3 bg-red-500 rounded-full"></div>
|
|
<span id="connectionStatus">Disconnected</span>
|
|
</div>
|
|
<button id="refreshBtn" class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<!-- Tab Navigation -->
|
|
<div class="border-b border-gray-200 mb-6">
|
|
<nav class="-mb-px flex space-x-8">
|
|
<button class="tab-btn active py-2 px-1 border-b-2 font-medium text-sm" data-tab="overview">
|
|
Overview
|
|
</button>
|
|
<button class="tab-btn py-2 px-1 border-b-2 font-medium text-sm" data-tab="broker">
|
|
Broker
|
|
</button>
|
|
<button class="tab-btn py-2 px-1 border-b-2 font-medium text-sm" data-tab="queues">
|
|
Queues
|
|
</button>
|
|
<button class="tab-btn py-2 px-1 border-b-2 font-medium text-sm" data-tab="consumers">
|
|
Consumers
|
|
</button>
|
|
<button class="tab-btn py-2 px-1 border-b-2 font-medium text-sm" data-tab="pools">
|
|
Worker Pools
|
|
</button>
|
|
<button class="tab-btn py-2 px-1 border-b-2 font-medium text-sm" data-tab="tasks">
|
|
Tasks
|
|
</button>
|
|
<button class="tab-btn py-2 px-1 border-b-2 font-medium text-sm" data-tab="monitoring">
|
|
Monitoring
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div id="tabContent">
|
|
<!-- Overview Tab -->
|
|
<div id="overview" class="tab-content active">
|
|
<!-- System Status Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z">
|
|
</path>
|
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Total Messages</dt>
|
|
<dd class="text-lg font-medium text-gray-900" id="totalMessages">0</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Active Consumers</dt>
|
|
<dd class="text-lg font-medium text-gray-900" id="activeConsumers">0</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-yellow-500 rounded-md flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Active Queues</dt>
|
|
<dd class="text-lg font-medium text-gray-900" id="activeQueues">0</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-red-500 rounded-md flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Failed Messages</dt>
|
|
<dd class="text-lg font-medium text-gray-900" id="failedMessages">0</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Real-time Charts -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Message Throughput</h3>
|
|
<div class="chart-container" style="position: relative; height: 200px;">
|
|
<canvas id="throughputChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Queue Depths</h3>
|
|
<div class="chart-container" style="position: relative; height: 200px;">
|
|
<canvas id="queueDepthChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Recent Activity</h3>
|
|
<div class="flow-root">
|
|
<ul id="activityFeed" class="divide-y divide-gray-200">
|
|
<!-- Activity items will be populated here -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Broker Tab -->
|
|
<div id="broker" class="tab-content hidden">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Broker Status -->
|
|
<div class="bg-white shadow rounded-lg p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Broker Status</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Status:</span>
|
|
<span id="brokerStatus"
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Running</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Address:</span>
|
|
<span id="brokerAddress">localhost:8080</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Uptime:</span>
|
|
<span id="brokerUptime">0h 0m</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600">Connections:</span>
|
|
<span id="brokerConnections">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Broker Controls -->
|
|
<div class="bg-white shadow rounded-lg p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Broker Controls</h3>
|
|
<div class="space-y-4">
|
|
<button id="restartBroker"
|
|
class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">
|
|
Restart Broker
|
|
</button>
|
|
<button id="stopBroker"
|
|
class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
|
|
Stop Broker
|
|
</button>
|
|
<button id="flushQueues"
|
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
Flush All Queues
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Broker Configuration -->
|
|
<div class="mt-6 bg-white shadow rounded-lg p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Broker Configuration</h3>
|
|
<div id="brokerConfig" class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Configuration will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Queues Tab -->
|
|
<div id="queues" class="tab-content hidden">
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Queue Management</h3>
|
|
<button id="createQueue"
|
|
class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
|
|
Create Queue
|
|
</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Queue Name</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Messages</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Consumers</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Rate/sec</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="queuesTable" class="bg-white divide-y divide-gray-200">
|
|
<!-- Queue rows will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Consumers Tab -->
|
|
<div id="consumers" class="tab-content hidden">
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Consumer Management</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Consumer ID</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Queue</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Status</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Processed</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Errors</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="consumersTable" class="bg-white divide-y divide-gray-200">
|
|
<!-- Consumer rows will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Worker Pools Tab -->
|
|
<div id="pools" class="tab-content hidden">
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Worker Pool Management</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Pool ID</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Workers</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Queue Size</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Active Tasks</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Status</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="poolsTable" class="bg-white divide-y divide-gray-200">
|
|
<!-- Pool rows will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monitoring Tab -->
|
|
<div id="monitoring" class="tab-content hidden">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">System Performance</h3>
|
|
<div class="chart-container" style="position: relative; height: 200px;">
|
|
<canvas id="systemChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Error Rate</h3>
|
|
<div class="chart-container" style="position: relative; height: 200px;">
|
|
<canvas id="errorChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health Checks -->
|
|
<div class="bg-white shadow rounded-lg p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Health Checks</h3>
|
|
<div id="healthChecks" class="space-y-4">
|
|
<!-- Health check items will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tasks Tab -->
|
|
<div id="tasks" class="tab-content hidden">
|
|
<!-- Tasks Overview Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Active Tasks</dt>
|
|
<dd class="text-lg font-medium text-gray-900" id="activeTasks">0</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Completed</dt>
|
|
<dd class="text-lg font-medium text-gray-900" id="completedTasks">0</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-red-500 rounded-md flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Failed</dt>
|
|
<dd class="text-lg font-medium text-gray-900" id="failedTasks">0</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-yellow-500 rounded-md flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Queued</dt>
|
|
<dd class="text-lg font-medium text-gray-900" id="queuedTasks">0</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tasks Table -->
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Real-time Tasks</h3>
|
|
<div class="flex space-x-2">
|
|
<button id="refreshTasks"
|
|
class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Task ID
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Queue
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Retry Count
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Created At
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Payload
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tasksTableBody" class="bg-white divide-y divide-gray-200">
|
|
<!-- Tasks will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<!-- Consumer Configuration Modal -->
|
|
<div id="consumerModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
|
|
<div class="flex items-center justify-center min-h-screen p-4">
|
|
<div class="bg-white rounded-lg max-w-lg w-full p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Configure Consumer</h3>
|
|
<form id="consumerForm">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Consumer ID</label>
|
|
<input type="text" id="consumerIdField"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" readonly>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Max Concurrent Tasks</label>
|
|
<input type="number" id="maxConcurrentTasks"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Task Timeout (seconds)</label>
|
|
<input type="number" id="taskTimeout"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Max Retries</label>
|
|
<input type="number" id="maxRetries"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end space-x-3">
|
|
<button type="button" id="cancelConsumerConfig"
|
|
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
|
|
Cancel
|
|
</button>
|
|
<button type="submit"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pool Configuration Modal -->
|
|
<div id="poolModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
|
|
<div class="flex items-center justify-center min-h-screen p-4">
|
|
<div class="bg-white rounded-lg max-w-lg w-full p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Configure Worker Pool</h3>
|
|
<form id="poolForm">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Pool ID</label>
|
|
<input type="text" id="poolIdField"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" readonly>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Number of Workers</label>
|
|
<input type="number" id="numWorkers"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Queue Size</label>
|
|
<input type="number" id="queueSize"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Max Memory Load (bytes)</label>
|
|
<input type="number" id="maxMemoryLoad"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end space-x-3">
|
|
<button type="button" id="cancelPoolConfig"
|
|
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
|
|
Cancel
|
|
</button>
|
|
<button type="submit"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/admin/js/socket.js"></script>
|
|
<script src="/static/admin/js/admin.js"></script>
|
|
</body>
|
|
|
|
</html>
|