| <!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>
|
|
|
