| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Source Pool Management - Crypto API Monitor</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg-primary: #f8fafc; |
| --bg-secondary: #ffffff; |
| --bg-card: #ffffff; |
| --bg-hover: #f1f5f9; |
| --text-primary: #0f172a; |
| --text-secondary: #475569; |
| --text-muted: #94a3b8; |
| --accent-primary: #3b82f6; |
| --accent-secondary: #8b5cf6; |
| --success: #10b981; |
| --success-bg: #d1fae5; |
| --warning: #f59e0b; |
| --warning-bg: #fef3c7; |
| --danger: #ef4444; |
| --danger-bg: #fee2e2; |
| --info: #06b6d4; |
| --info-bg: #cffafe; |
| --border: #e2e8f0; |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
| --radius: 12px; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: var(--text-primary); |
| line-height: 1.6; |
| min-height: 100vh; |
| padding: 20px; |
| } |
| |
| .container { |
| max-width: 1600px; |
| margin: 0 auto; |
| } |
| |
| .header { |
| background: var(--bg-secondary); |
| border-radius: var(--radius); |
| padding: 24px; |
| margin-bottom: 24px; |
| box-shadow: var(--shadow); |
| } |
| |
| .header h1 { |
| font-size: 28px; |
| font-weight: 800; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| margin-bottom: 8px; |
| } |
| |
| .header p { |
| color: var(--text-muted); |
| font-size: 14px; |
| } |
| |
| .header-actions { |
| display: flex; |
| gap: 12px; |
| margin-top: 16px; |
| } |
| |
| .btn { |
| padding: 10px 20px; |
| border-radius: 8px; |
| border: none; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s; |
| font-size: 14px; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); |
| } |
| |
| .btn-secondary { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
| |
| .btn-danger { |
| background: var(--danger); |
| color: white; |
| } |
| |
| .btn-sm { |
| padding: 6px 12px; |
| font-size: 12px; |
| } |
| |
| .pools-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); |
| gap: 20px; |
| margin-bottom: 24px; |
| } |
| |
| .pool-card { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| padding: 20px; |
| box-shadow: var(--shadow); |
| transition: all 0.3s; |
| } |
| |
| .pool-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); |
| } |
| |
| .pool-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| margin-bottom: 16px; |
| } |
| |
| .pool-title { |
| font-size: 18px; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
| |
| .pool-category { |
| display: inline-block; |
| padding: 4px 12px; |
| border-radius: 999px; |
| background: var(--info-bg); |
| color: var(--info); |
| font-size: 12px; |
| font-weight: 600; |
| } |
| |
| .pool-stats { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 12px; |
| margin: 16px 0; |
| } |
| |
| .stat-item { |
| background: var(--bg-hover); |
| padding: 12px; |
| border-radius: 8px; |
| } |
| |
| .stat-label { |
| font-size: 12px; |
| color: var(--text-muted); |
| margin-bottom: 4px; |
| } |
| |
| .stat-value { |
| font-size: 20px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
| |
| .pool-members { |
| margin-top: 16px; |
| } |
| |
| .member-item { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 10px; |
| background: var(--bg-hover); |
| border-radius: 8px; |
| margin-bottom: 8px; |
| } |
| |
| .member-name { |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
| |
| .member-stats { |
| display: flex; |
| gap: 12px; |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
| |
| .status-indicator { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| display: inline-block; |
| margin-right: 8px; |
| } |
| |
| .status-online { |
| background: var(--success); |
| } |
| |
| .status-warning { |
| background: var(--warning); |
| } |
| |
| .status-offline { |
| background: var(--danger); |
| } |
| |
| .rotation-history { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| padding: 20px; |
| box-shadow: var(--shadow); |
| } |
| |
| .history-item { |
| display: flex; |
| align-items: center; |
| padding: 12px; |
| border-left: 3px solid var(--accent-primary); |
| background: var(--bg-hover); |
| border-radius: 4px; |
| margin-bottom: 12px; |
| } |
| |
| .history-time { |
| font-size: 12px; |
| color: var(--text-muted); |
| margin-bottom: 4px; |
| } |
| |
| .history-desc { |
| font-size: 14px; |
| color: var(--text-primary); |
| } |
| |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.5); |
| z-index: 1000; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .modal.active { |
| display: flex; |
| } |
| |
| .modal-content { |
| background: var(--bg-secondary); |
| border-radius: var(--radius); |
| padding: 32px; |
| max-width: 600px; |
| width: 90%; |
| max-height: 90vh; |
| overflow-y: auto; |
| } |
| |
| .modal-header { |
| font-size: 24px; |
| font-weight: 700; |
| margin-bottom: 24px; |
| } |
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
| |
| .form-label { |
| display: block; |
| font-weight: 600; |
| margin-bottom: 8px; |
| color: var(--text-primary); |
| } |
| |
| .form-input, .form-select, .form-textarea { |
| width: 100%; |
| padding: 12px; |
| border: 2px solid var(--border); |
| border-radius: 8px; |
| font-family: inherit; |
| font-size: 14px; |
| transition: all 0.3s; |
| } |
| |
| .form-input:focus, .form-select:focus, .form-textarea:focus { |
| outline: none; |
| border-color: var(--accent-primary); |
| } |
| |
| .form-textarea { |
| resize: vertical; |
| min-height: 100px; |
| } |
| |
| .alert { |
| padding: 12px 16px; |
| border-radius: 8px; |
| margin-bottom: 16px; |
| font-size: 14px; |
| } |
| |
| .alert-success { |
| background: var(--success-bg); |
| color: var(--success); |
| border-left: 4px solid var(--success); |
| } |
| |
| .alert-error { |
| background: var(--danger-bg); |
| color: var(--danger); |
| border-left: 4px solid var(--danger); |
| } |
| |
| .badge { |
| display: inline-block; |
| padding: 4px 10px; |
| border-radius: 999px; |
| font-size: 12px; |
| font-weight: 600; |
| } |
| |
| .badge-success { |
| background: var(--success-bg); |
| color: var(--success); |
| } |
| |
| .badge-warning { |
| background: var(--warning-bg); |
| color: var(--warning); |
| } |
| |
| .badge-danger { |
| background: var(--danger-bg); |
| color: var(--danger); |
| } |
| |
| .rate-limit-bar { |
| height: 8px; |
| background: var(--bg-hover); |
| border-radius: 4px; |
| overflow: hidden; |
| margin-top: 4px; |
| } |
| |
| .rate-limit-fill { |
| height: 100%; |
| background: linear-gradient(90deg, var(--success) 0%, var(--warning) 50%, var(--danger) 100%); |
| transition: width 0.3s; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>🔄 Source Pool Management</h1> |
| <p>Intelligent API source rotation and failover management</p> |
| <div class="header-actions"> |
| <button class="btn btn-primary" onclick="showCreatePoolModal()">➕ Create New Pool</button> |
| <button class="btn btn-secondary" onclick="loadPools()">🔄 Refresh</button> |
| <button class="btn btn-secondary" onclick="window.location.href='index.html'">← Back to Dashboard</button> |
| </div> |
| </div> |
|
|
| <div id="alertContainer"></div> |
|
|
| <div id="poolsContainer" class="pools-grid"> |
| |
| </div> |
|
|
| <div class="rotation-history" style="margin-top: 24px;"> |
| <h2 style="margin-bottom: 16px;">Recent Rotation Events</h2> |
| <div id="historyContainer"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="createPoolModal" class="modal"> |
| <div class="modal-content"> |
| <h2 class="modal-header">Create New Source Pool</h2> |
| <form id="createPoolForm"> |
| <div class="form-group"> |
| <label class="form-label">Pool Name</label> |
| <input type="text" class="form-input" id="poolName" required> |
| </div> |
| <div class="form-group"> |
| <label class="form-label">Category</label> |
| <select class="form-select" id="poolCategory" required> |
| <option value="market_data">Market Data</option> |
| <option value="blockchain_explorers">Blockchain Explorers</option> |
| <option value="news">News</option> |
| <option value="sentiment">Sentiment</option> |
| <option value="onchain_analytics">On-Chain Analytics</option> |
| <option value="rpc_nodes">RPC Nodes</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label class="form-label">Rotation Strategy</label> |
| <select class="form-select" id="rotationStrategy" required> |
| <option value="round_robin">Round Robin</option> |
| <option value="least_used">Least Used</option> |
| <option value="priority">Priority Based</option> |
| <option value="weighted">Weighted</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label class="form-label">Description</label> |
| <textarea class="form-textarea" id="poolDescription"></textarea> |
| </div> |
| <div style="display: flex; gap: 12px; justify-content: flex-end;"> |
| <button type="button" class="btn btn-secondary" onclick="closeCreatePoolModal()">Cancel</button> |
| <button type="submit" class="btn btn-primary">Create Pool</button> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div id="addMemberModal" class="modal"> |
| <div class="modal-content"> |
| <h2 class="modal-header">Add Provider to Pool</h2> |
| <form id="addMemberForm"> |
| <div class="form-group"> |
| <label class="form-label">Provider</label> |
| <select class="form-select" id="memberProvider" required> |
| |
| </select> |
| </div> |
| <div class="form-group"> |
| <label class="form-label">Priority (higher = better)</label> |
| <input type="number" class="form-input" id="memberPriority" value="1" min="1" max="10"> |
| </div> |
| <div class="form-group"> |
| <label class="form-label">Weight</label> |
| <input type="number" class="form-input" id="memberWeight" value="1" min="1" max="100"> |
| </div> |
| <div style="display: flex; gap: 12px; justify-content: flex-end;"> |
| <button type="button" class="btn btn-secondary" onclick="closeAddMemberModal()">Cancel</button> |
| <button type="submit" class="btn btn-primary">Add Member</button> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| <script> |
| const API_BASE = window.location.origin; |
| let currentPoolId = null; |
| let allProviders = []; |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| loadPools(); |
| loadProviders(); |
| }); |
| |
| async function loadPools() { |
| try { |
| const response = await fetch(`${API_BASE}/api/pools`); |
| const data = await response.json(); |
| |
| const container = document.getElementById('poolsContainer'); |
| container.innerHTML = ''; |
| |
| if (data.pools.length === 0) { |
| container.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--text-muted);">No pools configured. Create your first pool to get started.</p>'; |
| return; |
| } |
| |
| data.pools.forEach(pool => { |
| container.appendChild(createPoolCard(pool)); |
| }); |
| } catch (error) { |
| console.error('Error loading pools:', error); |
| showAlert('Failed to load pools', 'error'); |
| } |
| } |
| |
| function createPoolCard(pool) { |
| const card = document.createElement('div'); |
| card.className = 'pool-card'; |
| |
| const currentProvider = pool.current_provider |
| ? `<div style="margin-bottom: 12px;"> |
| <span class="status-indicator status-online"></span> |
| Current: <strong>${pool.current_provider.name}</strong> |
| </div>` |
| : '<div style="margin-bottom: 12px; color: var(--text-muted);">No active provider</div>'; |
| |
| const membersHTML = pool.members.map(member => { |
| const successRate = member.success_rate || 0; |
| const statusClass = successRate >= 90 ? 'status-online' : successRate >= 70 ? 'status-warning' : 'status-offline'; |
| |
| let rateLimitHTML = ''; |
| if (member.rate_limit) { |
| const percentage = member.rate_limit.percentage; |
| rateLimitHTML = ` |
| <div style="margin-top: 4px;"> |
| <div style="font-size: 11px; color: var(--text-muted);"> |
| ${member.rate_limit.usage}/${member.rate_limit.limit} (${percentage}%) |
| </div> |
| <div class="rate-limit-bar"> |
| <div class="rate-limit-fill" style="width: ${percentage}%"></div> |
| </div> |
| </div> |
| `; |
| } |
| |
| return ` |
| <div class="member-item"> |
| <div> |
| <span class="status-indicator ${statusClass}"></span> |
| <span class="member-name">${member.provider_name}</span> |
| <div class="member-stats"> |
| <span>Used: ${member.use_count}</span> |
| <span>Success: ${successRate.toFixed(1)}%</span> |
| <span>Priority: ${member.priority}</span> |
| </div> |
| ${rateLimitHTML} |
| </div> |
| </div> |
| `; |
| }).join(''); |
| |
| card.innerHTML = ` |
| <div class="pool-header"> |
| <div> |
| <div class="pool-title">${pool.pool_name}</div> |
| <span class="pool-category">${pool.category}</span> |
| </div> |
| <div style="display: flex; gap: 8px;"> |
| <button class="btn btn-sm btn-secondary" onclick="addMember(${pool.pool_id})">➕</button> |
| <button class="btn btn-sm btn-primary" onclick="rotatePool(${pool.pool_id})">🔄</button> |
| <button class="btn btn-sm btn-danger" onclick="deletePool(${pool.pool_id}, '${pool.pool_name}')">🗑️</button> |
| </div> |
| </div> |
| |
| ${currentProvider} |
| |
| <div class="pool-stats"> |
| <div class="stat-item"> |
| <div class="stat-label">Strategy</div> |
| <div class="stat-value" style="font-size: 14px;">${pool.rotation_strategy}</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-label">Total Rotations</div> |
| <div class="stat-value">${pool.total_rotations}</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-label">Members</div> |
| <div class="stat-value">${pool.members.length}</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-label">Status</div> |
| <div class="stat-value"> |
| <span class="badge ${pool.enabled ? 'badge-success' : 'badge-danger'}"> |
| ${pool.enabled ? 'Enabled' : 'Disabled'} |
| </span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="pool-members"> |
| <div style="font-weight: 600; margin-bottom: 12px;">Pool Members</div> |
| ${membersHTML || '<div style="color: var(--text-muted); font-size: 14px;">No members</div>'} |
| </div> |
| `; |
| |
| return card; |
| } |
| |
| async function loadProviders() { |
| try { |
| const response = await fetch(`${API_BASE}/api/providers`); |
| const providers = await response.json(); |
| allProviders = providers; |
| |
| const select = document.getElementById('memberProvider'); |
| select.innerHTML = providers.map(p => |
| `<option value="${p.id}">${p.name} (${p.category})</option>` |
| ).join(''); |
| } catch (error) { |
| console.error('Error loading providers:', error); |
| } |
| } |
| |
| function showCreatePoolModal() { |
| document.getElementById('createPoolModal').classList.add('active'); |
| } |
| |
| function closeCreatePoolModal() { |
| document.getElementById('createPoolModal').classList.remove('active'); |
| document.getElementById('createPoolForm').reset(); |
| } |
| |
| function showAddMemberModal() { |
| document.getElementById('addMemberModal').classList.add('active'); |
| } |
| |
| function closeAddMemberModal() { |
| document.getElementById('addMemberModal').classList.remove('active'); |
| document.getElementById('addMemberForm').reset(); |
| } |
| |
| function addMember(poolId) { |
| currentPoolId = poolId; |
| showAddMemberModal(); |
| } |
| |
| document.getElementById('createPoolForm').addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| const data = { |
| name: document.getElementById('poolName').value, |
| category: document.getElementById('poolCategory').value, |
| rotation_strategy: document.getElementById('rotationStrategy').value, |
| description: document.getElementById('poolDescription').value |
| }; |
| |
| try { |
| const response = await fetch(`${API_BASE}/api/pools`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(data) |
| }); |
| |
| if (response.ok) { |
| showAlert('Pool created successfully', 'success'); |
| closeCreatePoolModal(); |
| loadPools(); |
| } else { |
| const error = await response.json(); |
| showAlert(error.detail || 'Failed to create pool', 'error'); |
| } |
| } catch (error) { |
| console.error('Error creating pool:', error); |
| showAlert('Failed to create pool', 'error'); |
| } |
| }); |
| |
| document.getElementById('addMemberForm').addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| const data = { |
| provider_id: parseInt(document.getElementById('memberProvider').value), |
| priority: parseInt(document.getElementById('memberPriority').value), |
| weight: parseInt(document.getElementById('memberWeight').value) |
| }; |
| |
| try { |
| const response = await fetch(`${API_BASE}/api/pools/${currentPoolId}/members`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(data) |
| }); |
| |
| if (response.ok) { |
| showAlert('Member added successfully', 'success'); |
| closeAddMemberModal(); |
| loadPools(); |
| } else { |
| const error = await response.json(); |
| showAlert(error.detail || 'Failed to add member', 'error'); |
| } |
| } catch (error) { |
| console.error('Error adding member:', error); |
| showAlert('Failed to add member', 'error'); |
| } |
| }); |
| |
| async function rotatePool(poolId) { |
| try { |
| const response = await fetch(`${API_BASE}/api/pools/${poolId}/rotate`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ reason: 'manual' }) |
| }); |
| |
| if (response.ok) { |
| const result = await response.json(); |
| showAlert(`Rotated to ${result.provider_name}`, 'success'); |
| loadPools(); |
| } else { |
| const error = await response.json(); |
| showAlert(error.detail || 'Failed to rotate', 'error'); |
| } |
| } catch (error) { |
| console.error('Error rotating pool:', error); |
| showAlert('Failed to rotate pool', 'error'); |
| } |
| } |
| |
| async function deletePool(poolId, poolName) { |
| if (!confirm(`Are you sure you want to delete pool "${poolName}"?`)) { |
| return; |
| } |
| |
| try { |
| const response = await fetch(`${API_BASE}/api/pools/${poolId}`, { |
| method: 'DELETE' |
| }); |
| |
| if (response.ok) { |
| showAlert('Pool deleted successfully', 'success'); |
| loadPools(); |
| } else { |
| const error = await response.json(); |
| showAlert(error.detail || 'Failed to delete pool', 'error'); |
| } |
| } catch (error) { |
| console.error('Error deleting pool:', error); |
| showAlert('Failed to delete pool', 'error'); |
| } |
| } |
| |
| function showAlert(message, type) { |
| const container = document.getElementById('alertContainer'); |
| const alert = document.createElement('div'); |
| alert.className = `alert alert-${type}`; |
| alert.textContent = message; |
| container.appendChild(alert); |
| |
| setTimeout(() => { |
| alert.remove(); |
| }, 5000); |
| } |
| |
| |
| document.querySelectorAll('.modal').forEach(modal => { |
| modal.addEventListener('click', (e) => { |
| if (e.target === modal) { |
| modal.classList.remove('active'); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
