|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Crypto API Monitor</title>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
|
<style>
|
|
|
* { box-sizing: border-box; }
|
|
|
:root {
|
|
|
--bg: #f5f6fb;
|
|
|
--card: #ffffff;
|
|
|
--muted: #6b7280;
|
|
|
--text: #1f2937;
|
|
|
--primary: #2563eb;
|
|
|
--success: #16a34a;
|
|
|
--danger: #dc2626;
|
|
|
--warning: #d97706;
|
|
|
--border: #e5e7eb;
|
|
|
}
|
|
|
|
|
|
@keyframes gradientShift {
|
|
|
0% { background-position: 0% 50%; }
|
|
|
50% { background-position: 100% 50%; }
|
|
|
100% { background-position: 0% 50%; }
|
|
|
}
|
|
|
|
|
|
@keyframes fadeInUp {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
transform: translateY(30px);
|
|
|
}
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes pulse {
|
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
|
50% { transform: scale(1.05); opacity: 0.8; }
|
|
|
}
|
|
|
|
|
|
@keyframes shimmer {
|
|
|
0% { background-position: -1000px 0; }
|
|
|
100% { background-position: 1000px 0; }
|
|
|
}
|
|
|
|
|
|
@keyframes slideInRight {
|
|
|
from {
|
|
|
transform: translateX(100%);
|
|
|
opacity: 0;
|
|
|
}
|
|
|
to {
|
|
|
transform: translateX(0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
margin: 0;
|
|
|
font-family: 'Inter', sans-serif;
|
|
|
background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
|
|
|
background-size: 400% 400%;
|
|
|
animation: gradientShift 15s ease infinite;
|
|
|
color: var(--text);
|
|
|
min-height: 100vh;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
body::before {
|
|
|
content: '';
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
backdrop-filter: blur(1px);
|
|
|
z-index: -1;
|
|
|
}
|
|
|
.container {
|
|
|
max-width: 1400px;
|
|
|
margin: 0 auto;
|
|
|
padding: 20px;
|
|
|
animation: fadeInUp 0.6s ease;
|
|
|
}
|
|
|
.header {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(10px) saturate(180%);
|
|
|
padding: 18px 24px;
|
|
|
border-radius: 16px;
|
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 16px;
|
|
|
margin-bottom: 24px;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
.header:hover {
|
|
|
box-shadow: 0 12px 48px rgba(102, 126, 234, 0.2);
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
.logo h1 {
|
|
|
margin: 0;
|
|
|
font-size: 24px;
|
|
|
font-weight: 800;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
background-clip: text;
|
|
|
letter-spacing: -0.5px;
|
|
|
}
|
|
|
.header-actions { display: flex; gap: 12px; align-items: center; }
|
|
|
.status-pill {
|
|
|
padding: 8px 16px;
|
|
|
border-radius: 20px;
|
|
|
font-size: 12px;
|
|
|
font-weight: 700;
|
|
|
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
|
|
|
color: var(--danger);
|
|
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
|
|
|
border: 2px solid rgba(220, 38, 38, 0.2);
|
|
|
transition: all 0.3s ease;
|
|
|
text-transform: uppercase;
|
|
|
letter-spacing: 0.5px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.status-pill::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: -100%;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
|
transition: left 0.5s;
|
|
|
}
|
|
|
.status-pill:hover::before {
|
|
|
left: 100%;
|
|
|
}
|
|
|
.status-pill.connected {
|
|
|
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
|
|
color: #15803d;
|
|
|
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
|
|
|
border-color: rgba(22, 163, 74, 0.2);
|
|
|
}
|
|
|
.btn {
|
|
|
padding: 10px 18px;
|
|
|
border-radius: 8px;
|
|
|
border: none;
|
|
|
font-weight: 600;
|
|
|
font-size: 13px;
|
|
|
cursor: pointer;
|
|
|
background: var(--primary);
|
|
|
color: #fff;
|
|
|
transition: all 0.2s ease;
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
|
box-shadow: 0 2px 4px rgba(37,99,235,0.2);
|
|
|
}
|
|
|
.btn:hover {
|
|
|
background: #1d4ed8;
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 4px 8px rgba(37,99,235,0.3);
|
|
|
}
|
|
|
.btn:active {
|
|
|
transform: translateY(0);
|
|
|
box-shadow: 0 1px 2px rgba(37,99,235,0.2);
|
|
|
}
|
|
|
.btn.secondary {
|
|
|
background: var(--card);
|
|
|
border: 1px solid var(--border);
|
|
|
color: var(--text);
|
|
|
box-shadow: 0 1px 2px rgba(15,23,42,0.1);
|
|
|
}
|
|
|
.btn.secondary:hover {
|
|
|
background: #f9fafb;
|
|
|
border-color: var(--primary);
|
|
|
color: var(--primary);
|
|
|
box-shadow: 0 2px 4px rgba(37,99,235,0.15);
|
|
|
}
|
|
|
.kpi-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
|
gap: 10px;
|
|
|
margin: 16px 0;
|
|
|
}
|
|
|
.kpi-card {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(10px) saturate(180%);
|
|
|
padding: 20px;
|
|
|
border-radius: 16px;
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
|
border: 2px solid transparent;
|
|
|
background-clip: padding-box;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 12px;
|
|
|
animation: fadeInUp 0.6s ease;
|
|
|
}
|
|
|
.kpi-card::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
border-radius: 16px;
|
|
|
padding: 2px;
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
|
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
|
-webkit-mask-composite: xor;
|
|
|
mask-composite: exclude;
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.3s;
|
|
|
}
|
|
|
.kpi-card:hover {
|
|
|
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
|
|
|
transform: translateY(-8px) scale(1.02);
|
|
|
}
|
|
|
.kpi-card:hover::before {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
.kpi-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
.kpi-icon {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
padding: 8px;
|
|
|
border-radius: 12px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-shrink: 0;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
.kpi-icon svg {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
stroke-width: 2;
|
|
|
}
|
|
|
.kpi-icon.blue {
|
|
|
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
|
|
color: #2563eb;
|
|
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
|
|
|
}
|
|
|
.kpi-icon.green {
|
|
|
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
|
|
color: #16a34a;
|
|
|
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
|
|
|
}
|
|
|
.kpi-icon.orange {
|
|
|
background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
|
|
|
color: #ea580c;
|
|
|
box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
|
|
|
}
|
|
|
.kpi-icon.purple {
|
|
|
background: linear-gradient(135deg, #e9d5ff 0%, #ddd6fe 100%);
|
|
|
color: #9333ea;
|
|
|
box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
|
|
|
}
|
|
|
.kpi-card:hover .kpi-icon {
|
|
|
animation: pulse 2s infinite;
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
.kpi-label {
|
|
|
font-size: 11px;
|
|
|
color: var(--muted);
|
|
|
letter-spacing: 0.3px;
|
|
|
text-transform: uppercase;
|
|
|
font-weight: 600;
|
|
|
flex: 1;
|
|
|
}
|
|
|
.kpi-value {
|
|
|
font-size: 32px;
|
|
|
font-weight: 900;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
background-clip: text;
|
|
|
line-height: 1.2;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
.kpi-value.green {
|
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
.kpi-value.red {
|
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
.kpi-value.orange {
|
|
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
.kpi-trend {
|
|
|
font-size: 11px;
|
|
|
color: var(--muted);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
|
}
|
|
|
.tabs {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(10px) saturate(180%);
|
|
|
border-radius: 16px;
|
|
|
padding: 8px;
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
overflow-x: auto;
|
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
margin-bottom: 24px;
|
|
|
}
|
|
|
.tab {
|
|
|
border: none;
|
|
|
background: transparent;
|
|
|
padding: 12px 20px;
|
|
|
border-radius: 10px;
|
|
|
font-weight: 700;
|
|
|
color: var(--muted);
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
position: relative;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.tab::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 0;
|
|
|
height: 3px;
|
|
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
|
|
border-radius: 2px;
|
|
|
transition: width 0.3s ease;
|
|
|
}
|
|
|
.tab:hover {
|
|
|
background: rgba(102, 126, 234, 0.1);
|
|
|
color: var(--primary);
|
|
|
}
|
|
|
.tab.active {
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: #fff;
|
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
|
}
|
|
|
.tab.active::before {
|
|
|
width: 80%;
|
|
|
}
|
|
|
.tab-content { margin-top: 16px; display: none; }
|
|
|
.tab-content.active { display: block; }
|
|
|
.card {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(10px) saturate(180%);
|
|
|
border-radius: 16px;
|
|
|
padding: 24px;
|
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
margin-bottom: 20px;
|
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
animation: fadeInUp 0.6s ease;
|
|
|
}
|
|
|
.card:hover {
|
|
|
box-shadow: 0 16px 48px rgba(102, 126, 234, 0.25);
|
|
|
transform: translateY(-4px);
|
|
|
border-color: rgba(102, 126, 234, 0.3);
|
|
|
}
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 16px;
|
|
|
padding-bottom: 12px;
|
|
|
border-bottom: 2px solid var(--border);
|
|
|
}
|
|
|
.card-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
color: var(--text);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
.grid { display: grid; gap: 16px; }
|
|
|
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
|
|
|
.table-wrapper {
|
|
|
overflow-x: auto;
|
|
|
border-radius: 8px;
|
|
|
border: 1px solid var(--border);
|
|
|
}
|
|
|
table {
|
|
|
width: 100%;
|
|
|
border-collapse: separate;
|
|
|
border-spacing: 0;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
thead {
|
|
|
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
thead th {
|
|
|
padding: 14px 16px;
|
|
|
text-align: left;
|
|
|
font-weight: 700;
|
|
|
font-size: 11px;
|
|
|
text-transform: uppercase;
|
|
|
letter-spacing: 0.5px;
|
|
|
color: var(--muted);
|
|
|
border-bottom: 2px solid var(--border);
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
thead th:first-child { border-top-left-radius: 8px; }
|
|
|
thead th:last-child { border-top-right-radius: 8px; }
|
|
|
tbody tr {
|
|
|
transition: all 0.15s ease;
|
|
|
border-bottom: 1px solid #f3f4f6;
|
|
|
}
|
|
|
tbody tr:hover {
|
|
|
background: #f9fafb;
|
|
|
transform: scale(1.001);
|
|
|
box-shadow: 0 2px 8px rgba(37,99,235,0.08);
|
|
|
}
|
|
|
tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
|
|
|
tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
|
|
|
tbody td {
|
|
|
padding: 14px 16px;
|
|
|
color: var(--text);
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
tbody td strong {
|
|
|
font-weight: 600;
|
|
|
color: var(--text);
|
|
|
}
|
|
|
tbody td:first-child {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.badge {
|
|
|
padding: 5px 12px;
|
|
|
border-radius: 6px;
|
|
|
font-size: 11px;
|
|
|
font-weight: 700;
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: 5px;
|
|
|
text-transform: uppercase;
|
|
|
letter-spacing: 0.3px;
|
|
|
border: 1px solid transparent;
|
|
|
transition: all 0.2s ease;
|
|
|
}
|
|
|
.badge.success {
|
|
|
background: #dcfce7;
|
|
|
color: #15803d;
|
|
|
border-color: #86efac;
|
|
|
}
|
|
|
.badge.warn {
|
|
|
background: #fef3c7;
|
|
|
color: #d97706;
|
|
|
border-color: #fde047;
|
|
|
}
|
|
|
.badge.danger {
|
|
|
background: #fee2e2;
|
|
|
color: #b91c1c;
|
|
|
border-color: #fca5a5;
|
|
|
}
|
|
|
.badge.info {
|
|
|
background: #dbeafe;
|
|
|
color: #1e40af;
|
|
|
border-color: #93c5fd;
|
|
|
}
|
|
|
.list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
.list-item {
|
|
|
padding: 12px;
|
|
|
border-radius: 8px;
|
|
|
border: 1px solid var(--border);
|
|
|
background: var(--card);
|
|
|
transition: all 0.15s ease;
|
|
|
}
|
|
|
.list-item:hover {
|
|
|
background: #f9fafb;
|
|
|
border-color: var(--primary);
|
|
|
transform: translateX(2px);
|
|
|
box-shadow: 0 2px 8px rgba(37,99,235,0.1);
|
|
|
}
|
|
|
.list-item:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
.resource-search { display: flex; gap: 12px; }
|
|
|
.resource-search input {
|
|
|
flex: 1;
|
|
|
padding: 10px 12px;
|
|
|
border-radius: 6px;
|
|
|
border: 1px solid var(--border);
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.resource-columns {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
|
gap: 12px;
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
.resource-item {
|
|
|
padding: 10px;
|
|
|
border: 1px solid var(--border);
|
|
|
border-radius: 6px;
|
|
|
margin-bottom: 8px;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
.form-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
|
gap: 10px;
|
|
|
}
|
|
|
label { font-size: 12px; font-weight: 600; color: var(--muted); }
|
|
|
input, textarea, select {
|
|
|
width: 100%;
|
|
|
padding: 10px 14px;
|
|
|
border: 1px solid var(--border);
|
|
|
border-radius: 8px;
|
|
|
font-size: 14px;
|
|
|
font-family: inherit;
|
|
|
background: var(--card);
|
|
|
color: var(--text);
|
|
|
transition: all 0.2s ease;
|
|
|
}
|
|
|
input:focus, textarea:focus, select:focus {
|
|
|
outline: none;
|
|
|
border-color: var(--primary);
|
|
|
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
|
|
|
}
|
|
|
input:hover, textarea:hover, select:hover {
|
|
|
border-color: rgba(37,99,235,0.3);
|
|
|
}
|
|
|
textarea {
|
|
|
min-height: 120px;
|
|
|
resize: vertical;
|
|
|
font-family: 'Monaco', 'Courier New', monospace;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
.toast-container {
|
|
|
position: fixed;
|
|
|
bottom: 20px;
|
|
|
right: 20px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
.toast {
|
|
|
background: #111827;
|
|
|
color: white;
|
|
|
padding: 12px 16px;
|
|
|
border-radius: 6px;
|
|
|
min-width: 240px;
|
|
|
box-shadow: 0 8px 20px rgba(15,23,42,0.25);
|
|
|
}
|
|
|
@media (max-width: 720px) {
|
|
|
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
|
|
|
.grid-2 { grid-template-columns: 1fr; }
|
|
|
.resource-search { flex-direction: column; }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
<div class="container">
|
|
|
<div class="header">
|
|
|
<div class="logo">
|
|
|
<h1>🚀 Crypto API Monitor</h1>
|
|
|
<div style="font-size:12px; color:var(--muted);">Real API diagnostics + market intelligence</div>
|
|
|
</div>
|
|
|
<div class="header-actions">
|
|
|
<div class="status-pill" id="wsStatus">Connecting...</div>
|
|
|
<button class="btn secondary" onclick="refreshAll()">Refresh</button>
|
|
|
<button class="btn" onclick="loadErrorSummary()">Diagnostics</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="kpi-grid">
|
|
|
<div class="kpi-card">
|
|
|
<div class="kpi-header">
|
|
|
<div class="kpi-label">Total APIs</div>
|
|
|
<div class="kpi-icon blue">
|
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="kpi-value" id="kpiTotalAPIs">--</div>
|
|
|
<div class="kpi-trend" id="kpiTotalTrend">Loading…</div>
|
|
|
</div>
|
|
|
<div class="kpi-card">
|
|
|
<div class="kpi-header">
|
|
|
<div class="kpi-label">Online</div>
|
|
|
<div class="kpi-icon green">
|
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="kpi-value" id="kpiOnline">--</div>
|
|
|
<div class="kpi-trend" id="kpiOnlineTrend">Loading…</div>
|
|
|
</div>
|
|
|
<div class="kpi-card">
|
|
|
<div class="kpi-header">
|
|
|
<div class="kpi-label">Avg Response</div>
|
|
|
<div class="kpi-icon orange">
|
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="kpi-value" id="kpiAvgResponse">--</div>
|
|
|
<div class="kpi-trend" id="kpiResponseTrend">Loading…</div>
|
|
|
</div>
|
|
|
<div class="kpi-card">
|
|
|
<div class="kpi-header">
|
|
|
<div class="kpi-label">Last Update</div>
|
|
|
<div class="kpi-icon purple">
|
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="kpi-value" id="kpiLastUpdate" style="font-size:16px;">--</div>
|
|
|
<div class="kpi-trend">Auto-refresh</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tabs" id="tabBar">
|
|
|
<button class="tab active" data-tab="dashboard" onclick="switchTab(event, 'dashboard')">Dashboard</button>
|
|
|
<button class="tab" data-tab="providers" onclick="switchTab(event, 'providers')">Providers</button>
|
|
|
<button class="tab" data-tab="market" onclick="switchTab(event, 'market')">Market</button>
|
|
|
<button class="tab" data-tab="sentiment" onclick="switchTab(event, 'sentiment')">Sentiment</button>
|
|
|
<button class="tab" data-tab="news" onclick="switchTab(event, 'news')">News</button>
|
|
|
<button class="tab" data-tab="resources" onclick="switchTab(event, 'resources')">Resources & Tools</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-content active" id="tab-dashboard">
|
|
|
<div class="grid grid-2">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<h3 class="card-title">Provider Overview</h3>
|
|
|
<button class="btn secondary" onclick="loadProviders()">Reload</button>
|
|
|
</div>
|
|
|
<div class="table-wrapper" style="overflow:auto;">
|
|
|
<table>
|
|
|
<thead>
|
|
|
<tr><th>Provider</th><th>Status</th><th>Response</th><th>Uptime</th></tr>
|
|
|
</thead>
|
|
|
<tbody id="providersTableBody">
|
|
|
<tr><td colspan="4" style="text-align:center; padding:40px; color:var(--muted);">Loading providers…</td></tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<h3 class="card-title">Error Monitor</h3>
|
|
|
<button class="btn secondary" onclick="loadErrorSummary()">Refresh</button>
|
|
|
</div>
|
|
|
<div id="errorSummaryCard" style="font-size:13px; color:var(--muted);">Gathering diagnostics…</div>
|
|
|
<div id="diagnosticsList" class="list" style="margin-top:12px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grid grid-2">
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Health Trend</h3></div>
|
|
|
<div style="height:260px;"><canvas id="healthChart"></canvas></div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Status Distribution</h3></div>
|
|
|
<div style="height:260px;"><canvas id="statusChart"></canvas></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-content" id="tab-providers">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<h3 class="card-title">Providers Detail</h3>
|
|
|
<button class="btn secondary" onclick="loadProviders()">Reload</button>
|
|
|
</div>
|
|
|
<div id="providersDetail"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-content" id="tab-market">
|
|
|
<div class="grid grid-2">
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Global Stats</h3></div>
|
|
|
<div id="marketGlobalStats" class="list"></div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Top Movers</h3></div>
|
|
|
<div style="height:260px;"><canvas id="marketChart"></canvas></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grid grid-2">
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Top Assets</h3></div>
|
|
|
<div class="table-wrapper" style="overflow:auto; max-height:320px;">
|
|
|
<table>
|
|
|
<thead><tr><th>Rank</th><th>Name</th><th>Price</th><th>24h</th><th>Market Cap</th></tr></thead>
|
|
|
<tbody id="marketTableBody"></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Trending Now</h3></div>
|
|
|
<div id="trendingList" class="list"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-content" id="tab-sentiment">
|
|
|
<div class="grid grid-2">
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Fear & Greed Index</h3></div>
|
|
|
<div id="sentimentCard" style="font-size:14px; color:var(--muted);">Loading sentiment…</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">DeFi TVL</h3></div>
|
|
|
<div class="table-wrapper" style="overflow:auto; max-height:280px;">
|
|
|
<table>
|
|
|
<thead><tr><th>Protocol</th><th>TVL</th><th>24h</th><th>Chain</th></tr></thead>
|
|
|
<tbody id="defiTableBody"></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-content" id="tab-news">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<h3 class="card-title">Latest Headlines</h3>
|
|
|
<button class="btn secondary" onclick="loadNews()">Reload</button>
|
|
|
</div>
|
|
|
<div id="newsList" class="list"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-content" id="tab-resources">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<h3 class="card-title">Resource Search</h3>
|
|
|
<span style="font-size:12px;color:var(--muted);">Live search across providers + HuggingFace registry</span>
|
|
|
</div>
|
|
|
<div class="resource-search">
|
|
|
<input type="text" id="resourceSearch" placeholder="Search provider, model or dataset..." />
|
|
|
<select id="resourceFilter" onchange="loadResourceSearch()">
|
|
|
<option value="all">All sources</option>
|
|
|
<option value="providers">Providers</option>
|
|
|
<option value="models">Models</option>
|
|
|
<option value="datasets">Datasets</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="resource-columns">
|
|
|
<div>
|
|
|
<h4>Providers <span id="resourceCountProviders" style="color:var(--muted);"></span></h4>
|
|
|
<div id="resourceResultsProviders"></div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h4>Models <span id="resourceCountModels" style="color:var(--muted);"></span></h4>
|
|
|
<div id="resourceResultsModels"></div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h4>Datasets <span id="resourceCountDatasets" style="color:var(--muted);"></span></h4>
|
|
|
<div id="resourceResultsDatasets"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grid grid-2">
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Export & Backup</h3></div>
|
|
|
<div style="display:flex; gap:10px; flex-wrap:wrap;">
|
|
|
<button class="btn" onclick="handleExport('json')">Export JSON Snapshot</button>
|
|
|
<button class="btn" onclick="handleExport('csv')">Export CSV</button>
|
|
|
<button class="btn secondary" onclick="handleBackup()">Create Backup</button>
|
|
|
</div>
|
|
|
<div id="exportHistory" class="list" style="margin-top:12px;"></div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<div class="card-header"><h3 class="card-title">Import Provider</h3></div>
|
|
|
<form id="importForm" onsubmit="handleImportSingle(event)">
|
|
|
<div class="form-grid">
|
|
|
<div><label>Name</label><input name="name" required></div>
|
|
|
<div><label>Category</label><input name="category" required></div>
|
|
|
<div><label>Endpoint URL</label><input name="endpoint_url" required></div>
|
|
|
<div><label>Health Endpoint</label><input name="health_check_endpoint"></div>
|
|
|
<div><label>Rate Limit</label><input name="rate_limit"></div>
|
|
|
<div><label>Timeout (ms)</label><input name="timeout_ms" type="number" value="10000"></div>
|
|
|
</div>
|
|
|
<label style="margin-top:12px; display:block;">Notes<textarea name="notes"></textarea></label>
|
|
|
<div style="margin-top:12px; display:flex; gap:10px; align-items:center;">
|
|
|
<label style="display:flex; gap:6px; align-items:center; font-size:13px;">
|
|
|
<input type="checkbox" name="requires_key"> Requires API Key
|
|
|
</label>
|
|
|
<input name="api_key" placeholder="API Key (optional)" style="flex:1;">
|
|
|
</div>
|
|
|
<button class="btn" style="margin-top:12px;" type="submit">Import Provider</button>
|
|
|
</form>
|
|
|
<hr style="margin:20px 0; border:none; border-top:1px solid var(--border);">
|
|
|
<label style="display:block; font-size:13px; color:var(--muted); margin-bottom:6px;">Bulk JSON Import</label>
|
|
|
<textarea id="bulkImportTextarea" placeholder='[{"name":"Sample API","category":"market","endpoint_url":"https://..."}]'></textarea>
|
|
|
<button class="btn secondary" style="margin-top:10px;" onclick="handleImportBulk()">Run Bulk Import</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
const config = {
|
|
|
apiBaseUrl: '',
|
|
|
wsUrl: (() => {
|
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
|
return `${protocol}//${window.location.host}/ws`;
|
|
|
})(),
|
|
|
autoRefreshInterval: 30000
|
|
|
};
|
|
|
|
|
|
const state = {
|
|
|
ws: null,
|
|
|
wsConnected: false,
|
|
|
providers: [],
|
|
|
market: { cryptocurrencies: [], global: {} },
|
|
|
trending: [],
|
|
|
sentiment: null,
|
|
|
defi: [],
|
|
|
news: [],
|
|
|
errorSummary: null,
|
|
|
diagnostics: null,
|
|
|
resources: { providers: [], models: [], datasets: [] },
|
|
|
exports: [],
|
|
|
charts: { health: null, status: null, market: null },
|
|
|
currentTab: 'dashboard',
|
|
|
resourceSearchTimeout: null,
|
|
|
lastUpdate: null
|
|
|
};
|
|
|
|
|
|
function showToast(message, type = 'info') {
|
|
|
const container = document.getElementById('toastContainer');
|
|
|
const toast = document.createElement('div');
|
|
|
toast.className = 'toast';
|
|
|
toast.style.background = type === 'error' ? '#b91c1c' : (type === 'success' ? '#065f46' : '#111827');
|
|
|
toast.textContent = message;
|
|
|
container.appendChild(toast);
|
|
|
setTimeout(() => toast.remove(), 3000);
|
|
|
}
|
|
|
|
|
|
async function apiCall(endpoint, options = {}) {
|
|
|
const response = await fetch(config.apiBaseUrl + endpoint, options);
|
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
|
return await response.json();
|
|
|
}
|
|
|
|
|
|
function initializeWebSocket() {
|
|
|
try {
|
|
|
state.ws = new WebSocket(config.wsUrl);
|
|
|
state.ws.onopen = () => {
|
|
|
state.wsConnected = true;
|
|
|
const pill = document.getElementById('wsStatus');
|
|
|
pill.textContent = 'Connected';
|
|
|
pill.style.background = '#dcfce7';
|
|
|
pill.style.color = '#15803d';
|
|
|
};
|
|
|
state.ws.onclose = () => {
|
|
|
state.wsConnected = false;
|
|
|
const pill = document.getElementById('wsStatus');
|
|
|
pill.textContent = 'Disconnected';
|
|
|
pill.style.background = '#fee2e2';
|
|
|
pill.style.color = '#b91c1c';
|
|
|
};
|
|
|
state.ws.onmessage = (event) => {
|
|
|
const data = JSON.parse(event.data);
|
|
|
if (data.type === 'status_update' && data.data?.providers) {
|
|
|
updateKPIs(data.data.providers);
|
|
|
}
|
|
|
if (data.type === 'market_update' && Array.isArray(data.data)) {
|
|
|
state.market.cryptocurrencies = data.data;
|
|
|
renderMarketTable();
|
|
|
updateMarketChart();
|
|
|
}
|
|
|
if (data.type === 'sentiment_update') {
|
|
|
state.sentiment = data.data;
|
|
|
renderSentiment();
|
|
|
}
|
|
|
};
|
|
|
} catch (err) {
|
|
|
console.error('WebSocket error', err);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadInitialData() {
|
|
|
try {
|
|
|
await Promise.all([
|
|
|
loadProviders(),
|
|
|
loadMarket(),
|
|
|
loadTrending(),
|
|
|
loadSentimentData(),
|
|
|
loadDefi(),
|
|
|
loadErrorSummary(),
|
|
|
loadNews(),
|
|
|
loadResourceSearch()
|
|
|
]);
|
|
|
initializeCharts();
|
|
|
state.lastUpdate = new Date();
|
|
|
updateLastUpdateDisplay();
|
|
|
showToast('Dashboard ready', 'success');
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
showToast('Failed to load initial data', 'error');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadProviders() {
|
|
|
try {
|
|
|
const data = await apiCall('/api/providers');
|
|
|
state.providers = Array.isArray(data) ? data : [];
|
|
|
renderProvidersTable();
|
|
|
renderProvidersDetail();
|
|
|
updateStatusChart();
|
|
|
updateKPIs(state.providers);
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
document.getElementById('providersTableBody').innerHTML = `<tr><td colspan="4" style="padding:40px; text-align:center;">${err.message}</td></tr>`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function renderProvidersTable() {
|
|
|
const tbody = document.getElementById('providersTableBody');
|
|
|
if (!state.providers.length) {
|
|
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:40px; color:var(--muted);">No providers available</td></tr>';
|
|
|
return;
|
|
|
}
|
|
|
tbody.innerHTML = state.providers.slice(0, 8).map(p => `
|
|
|
<tr>
|
|
|
<td>
|
|
|
<div style="font-weight:600;">${p.name || 'Unknown'}</div>
|
|
|
<div style="font-size:11px;color:var(--muted);">${p.category || 'general'}</div>
|
|
|
</td>
|
|
|
<td>${renderStatusBadge(p.status)}</td>
|
|
|
<td>${p.response_time_ms ? `${p.response_time_ms}ms` : '--'}</td>
|
|
|
<td>${p.uptime ? `${Math.round(p.uptime)}%` : '--'}</td>
|
|
|
</tr>
|
|
|
`).join('');
|
|
|
}
|
|
|
|
|
|
function renderProvidersDetail() {
|
|
|
const container = document.getElementById('providersDetail');
|
|
|
if (!state.providers.length) {
|
|
|
container.innerHTML = '<div style="padding:40px; text-align:center; color:var(--muted);">No providers data available</div>';
|
|
|
return;
|
|
|
}
|
|
|
container.innerHTML = `
|
|
|
<div class="table-wrapper">
|
|
|
<table>
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>Name</th>
|
|
|
<th>Status</th>
|
|
|
<th>Response Time</th>
|
|
|
<th>Success Rate</th>
|
|
|
<th>Rate Limit</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
${state.providers.map(p => `
|
|
|
<tr>
|
|
|
<td>
|
|
|
<strong>${p.name || 'Unknown'}</strong>
|
|
|
<div style="font-size:11px;color:var(--muted);margin-top:2px;">${p.category || 'general'}</div>
|
|
|
</td>
|
|
|
<td>${renderStatusBadge(p.status)}</td>
|
|
|
<td><strong>${p.avg_response_time_ms ? `${p.avg_response_time_ms}ms` : (p.response_time_ms ? `${p.response_time_ms}ms` : '--')}</strong></td>
|
|
|
<td><strong>${p.uptime ? `${Math.round(p.uptime)}%` : '--'}</strong></td>
|
|
|
<td style="font-size:12px;color:var(--muted);">${p.rate_limit || '—'}</td>
|
|
|
</tr>`).join('')}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>`;
|
|
|
}
|
|
|
|
|
|
function renderStatusBadge(status = 'unknown') {
|
|
|
const normalized = (status || '').toLowerCase();
|
|
|
let cls = 'badge warn';
|
|
|
if (['online', 'healthy'].includes(normalized)) cls = 'badge success';
|
|
|
if (['offline', 'error'].includes(normalized)) cls = 'badge danger';
|
|
|
return `<span class="${cls}">${status || 'unknown'}</span>`;
|
|
|
}
|
|
|
|
|
|
function updateKPIs(data) {
|
|
|
const providers = Array.isArray(data) ? data : (data?.providers || []);
|
|
|
const total = providers.length;
|
|
|
const online = providers.filter(p => ['online', 'healthy'].includes((p.status || '').toLowerCase())).length;
|
|
|
const responseTimes = providers.map(p => p.response_time_ms || p.avg_response_time_ms).filter(Boolean);
|
|
|
const avgResponse = responseTimes.length ? Math.round(responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length) : 0;
|
|
|
|
|
|
document.getElementById('kpiTotalAPIs').textContent = total;
|
|
|
document.getElementById('kpiTotalTrend').textContent = `${total} tracked providers`;
|
|
|
document.getElementById('kpiOnline').textContent = online;
|
|
|
document.getElementById('kpiOnlineTrend').textContent = total ? `${Math.round((online / total) * 100)}% uptime` : 'No data';
|
|
|
document.getElementById('kpiAvgResponse').textContent = avgResponse ? `${avgResponse}ms` : '--';
|
|
|
document.getElementById('kpiResponseTrend').textContent = avgResponse < 500 ? 'Optimal' : avgResponse < 1000 ? 'Acceptable' : 'Slow';
|
|
|
updateHealthChart(avgResponse);
|
|
|
}
|
|
|
|
|
|
function updateLastUpdateDisplay() {
|
|
|
if (!state.lastUpdate) return;
|
|
|
document.getElementById('kpiLastUpdate').textContent = state.lastUpdate.toLocaleTimeString();
|
|
|
}
|
|
|
|
|
|
function initializeCharts() {
|
|
|
const healthCtx = document.getElementById('healthChart').getContext('2d');
|
|
|
const statusCtx = document.getElementById('statusChart').getContext('2d');
|
|
|
const marketCtx = document.getElementById('marketChart').getContext('2d');
|
|
|
|
|
|
if (state.charts.health) state.charts.health.destroy();
|
|
|
if (state.charts.status) state.charts.status.destroy();
|
|
|
if (state.charts.market) state.charts.market.destroy();
|
|
|
|
|
|
state.charts.health = new Chart(healthCtx, {
|
|
|
type: 'line',
|
|
|
data: { labels: [], datasets: [{ label: 'Avg Response (ms)', data: [], borderColor: '#2563eb', fill: false }] },
|
|
|
options: { responsive: true, maintainAspectRatio: false }
|
|
|
});
|
|
|
|
|
|
state.charts.status = new Chart(statusCtx, {
|
|
|
type: 'doughnut',
|
|
|
data: { labels: ['Online', 'Degraded', 'Offline'], datasets: [{ data: [0, 0, 0], backgroundColor: ['#16a34a', '#fcd34d', '#f87171'] }] },
|
|
|
options: { responsive: true, maintainAspectRatio: false }
|
|
|
});
|
|
|
|
|
|
state.charts.market = new Chart(marketCtx, {
|
|
|
type: 'bar',
|
|
|
data: { labels: [], datasets: [{ label: 'Market Cap (B USD)', data: [], backgroundColor: '#93c5fd' }] },
|
|
|
options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function updateHealthChart(value) {
|
|
|
if (!state.charts.health || !value) return;
|
|
|
const chart = state.charts.health;
|
|
|
chart.data.labels.push(new Date().toLocaleTimeString());
|
|
|
chart.data.datasets[0].data.push(value);
|
|
|
if (chart.data.labels.length > 12) {
|
|
|
chart.data.labels.shift();
|
|
|
chart.data.datasets[0].data.shift();
|
|
|
}
|
|
|
chart.update();
|
|
|
}
|
|
|
|
|
|
function updateStatusChart() {
|
|
|
if (!state.charts.status) return;
|
|
|
const online = state.providers.filter(p => (p.status || '').toLowerCase() === 'online').length;
|
|
|
const degraded = state.providers.filter(p => (p.status || '').toLowerCase() === 'degraded').length;
|
|
|
const offline = state.providers.length - online - degraded;
|
|
|
state.charts.status.data.datasets[0].data = [online, degraded, offline];
|
|
|
state.charts.status.update();
|
|
|
}
|
|
|
|
|
|
async function loadMarket() {
|
|
|
const data = await apiCall('/api/market');
|
|
|
state.market = data;
|
|
|
renderMarketCards();
|
|
|
renderMarketTable();
|
|
|
updateMarketChart();
|
|
|
}
|
|
|
|
|
|
function renderMarketCards() {
|
|
|
const stats = state.market.global || {};
|
|
|
const container = document.getElementById('marketGlobalStats');
|
|
|
container.innerHTML = `
|
|
|
<div><strong>Total Market Cap:</strong> $${formatNumber(stats.total_market_cap)}</div>
|
|
|
<div><strong>Total Volume:</strong> $${formatNumber(stats.total_volume)}</div>
|
|
|
<div><strong>BTC Dominance:</strong> ${stats.btc_dominance ? stats.btc_dominance.toFixed(2) + '%' : '--'}</div>
|
|
|
<div><strong>ETH Dominance:</strong> ${stats.eth_dominance ? stats.eth_dominance.toFixed(2) + '%' : '--'}</div>
|
|
|
<div><strong>Active Cryptos:</strong> ${stats.active_cryptocurrencies || '--'}</div>
|
|
|
<div><strong>Markets:</strong> ${stats.markets || '--'}</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
function renderMarketTable() {
|
|
|
const tbody = document.getElementById('marketTableBody');
|
|
|
const coins = state.market.cryptocurrencies || [];
|
|
|
if (!coins.length) {
|
|
|
tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:40px; color:var(--muted);">Market data unavailable</td></tr>';
|
|
|
return;
|
|
|
}
|
|
|
tbody.innerHTML = coins.slice(0, 12).map(coin => `
|
|
|
<tr>
|
|
|
<td>${coin.rank || coin.market_cap_rank || '-'}</td>
|
|
|
<td>${coin.name} <span style="color:var(--muted);">${coin.symbol}</span></td>
|
|
|
<td>$${formatNumber(coin.price)}</td>
|
|
|
<td style="color:${coin.change_24h >= 0 ? '#16a34a' : '#dc2626'};">${coin.change_24h ? coin.change_24h.toFixed(2) : '0'}%</td>
|
|
|
<td>$${formatNumber(coin.market_cap)}</td>
|
|
|
</tr>
|
|
|
`).join('');
|
|
|
}
|
|
|
|
|
|
function updateMarketChart() {
|
|
|
if (!state.charts.market) return;
|
|
|
const coins = state.market.cryptocurrencies || [];
|
|
|
const top = coins.slice(0, 5);
|
|
|
state.charts.market.data.labels = top.map(c => c.name);
|
|
|
state.charts.market.data.datasets[0].data = top.map(c => c.market_cap ? (c.market_cap / 1e9).toFixed(2) : 0);
|
|
|
state.charts.market.update();
|
|
|
}
|
|
|
|
|
|
async function loadTrending() {
|
|
|
const data = await apiCall('/api/trending');
|
|
|
state.trending = data.trending || [];
|
|
|
const list = document.getElementById('trendingList');
|
|
|
if (!state.trending.length) {
|
|
|
list.innerHTML = '<div class="list-item" style="color:var(--muted);">No trending assets</div>';
|
|
|
return;
|
|
|
}
|
|
|
list.innerHTML = state.trending.map(item => `
|
|
|
<div class="list-item">
|
|
|
<div style="font-weight:600;">${item.name} (${item.symbol})</div>
|
|
|
<div style="font-size:12px;color:var(--muted);">Rank: ${item.rank || '—'}</div>
|
|
|
</div>`).join('');
|
|
|
}
|
|
|
|
|
|
async function loadSentimentData() {
|
|
|
const data = await apiCall('/api/sentiment');
|
|
|
state.sentiment = data.fear_greed_index;
|
|
|
renderSentiment();
|
|
|
}
|
|
|
|
|
|
function renderSentiment() {
|
|
|
const container = document.getElementById('sentimentCard');
|
|
|
if (!state.sentiment) {
|
|
|
container.textContent = 'No sentiment data';
|
|
|
return;
|
|
|
}
|
|
|
const timestamp = Number(state.sentiment.timestamp);
|
|
|
container.innerHTML = `
|
|
|
<div style="font-size:32px; font-weight:700;">${state.sentiment.value}</div>
|
|
|
<div style="font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;">${state.sentiment.classification}</div>
|
|
|
<div style="font-size:12px; color:var(--muted);">Updated: ${timestamp ? new Date(timestamp * 1000).toLocaleString() : '--'}</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
async function loadDefi() {
|
|
|
const data = await apiCall('/api/defi');
|
|
|
state.defi = data.protocols || [];
|
|
|
const tbody = document.getElementById('defiTableBody');
|
|
|
if (!state.defi.length) {
|
|
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:40px; color:var(--muted);">No DeFi data</td></tr>';
|
|
|
return;
|
|
|
}
|
|
|
tbody.innerHTML = state.defi.slice(0, 10).map(proto => `
|
|
|
<tr>
|
|
|
<td>${proto.name}</td>
|
|
|
<td>$${formatNumber(proto.tvl)}</td>
|
|
|
<td style="color:${proto.change_24h >= 0 ? '#16a34a' : '#dc2626'};">${proto.change_24h ? proto.change_24h.toFixed(2) : 0}%</td>
|
|
|
<td>${proto.chain || '—'}</td>
|
|
|
</tr>`).join('');
|
|
|
}
|
|
|
|
|
|
async function loadNews() {
|
|
|
const data = await apiCall('/api/news');
|
|
|
state.news = data.articles || [];
|
|
|
const list = document.getElementById('newsList');
|
|
|
if (!state.news.length) {
|
|
|
list.innerHTML = '<div class="list-item" style="color:var(--muted);">No news available</div>';
|
|
|
return;
|
|
|
}
|
|
|
list.innerHTML = state.news.slice(0, 12).map(article => `
|
|
|
<div class="news-item list-item">
|
|
|
<h4>${article.title}</h4>
|
|
|
<div class="news-meta">${article.source || 'Unknown'} • ${article.published_at ? new Date(article.published_at).toLocaleString() : ''}</div>
|
|
|
<p style="margin:6px 0;">${article.description || ''}</p>
|
|
|
<a href="${article.link}" target="_blank" style="font-size:12px; color:var(--primary);">Read article →</a>
|
|
|
</div>`).join('');
|
|
|
}
|
|
|
|
|
|
async function loadErrorSummary() {
|
|
|
try {
|
|
|
const [summary, diagnostics] = await Promise.all([
|
|
|
apiCall('/api/logs/summary'),
|
|
|
apiCall('/api/diagnostics/errors')
|
|
|
]);
|
|
|
state.errorSummary = summary;
|
|
|
state.diagnostics = diagnostics;
|
|
|
renderErrorSummary();
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
document.getElementById('errorSummaryCard').textContent = 'Failed to load diagnostics';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function renderErrorSummary() {
|
|
|
const summary = state.errorSummary;
|
|
|
const card = document.getElementById('errorSummaryCard');
|
|
|
if (!summary) {
|
|
|
card.textContent = 'No diagnostics available';
|
|
|
return;
|
|
|
}
|
|
|
card.innerHTML = `
|
|
|
<div><strong>Total Logs:</strong> ${summary.total}</div>
|
|
|
<div><strong>Last Error:</strong> ${summary.last_error ? summary.last_error.provider + ' @ ' + summary.last_error.timestamp : 'None'}</div>
|
|
|
<div><strong>Top Offenders:</strong> ${Object.keys(summary.by_provider || {}).slice(0,3).join(', ') || '—'}</div>
|
|
|
`;
|
|
|
const diag = state.diagnostics || { recent: [] };
|
|
|
const list = document.getElementById('diagnosticsList');
|
|
|
list.innerHTML = diag.recent.slice(0,5).map(item => `
|
|
|
<div class="list-item">
|
|
|
<div style="font-weight:600;">${item.provider}</div>
|
|
|
<div style="font-size:12px; color:var(--muted);">${item.timestamp}</div>
|
|
|
<div style="font-size:13px; color:${item.status === 'offline' ? '#dc2626' : '#d97706'};">${item.message || 'No message'}</div>
|
|
|
</div>`).join('');
|
|
|
}
|
|
|
|
|
|
async function loadResourceSearch() {
|
|
|
const query = document.getElementById('resourceSearch')?.value || '';
|
|
|
const source = document.getElementById('resourceFilter').value;
|
|
|
const data = await apiCall(`/api/resources/search?q=${encodeURIComponent(query)}&source=${source}`);
|
|
|
state.resources = data.results;
|
|
|
document.getElementById('resourceCountProviders').textContent = `(${data.counts.providers})`;
|
|
|
document.getElementById('resourceCountModels').textContent = `(${data.counts.models})`;
|
|
|
document.getElementById('resourceCountDatasets').textContent = `(${data.counts.datasets})`;
|
|
|
renderResourceResults();
|
|
|
}
|
|
|
|
|
|
function renderResourceResults() {
|
|
|
const providersContainer = document.getElementById('resourceResultsProviders');
|
|
|
const modelsContainer = document.getElementById('resourceResultsModels');
|
|
|
const datasetsContainer = document.getElementById('resourceResultsDatasets');
|
|
|
|
|
|
providersContainer.innerHTML = state.resources.providers.slice(0,6).map(p => `
|
|
|
<div class="resource-item">
|
|
|
<strong>${p.name}</strong>
|
|
|
<div style="font-size:12px;color:var(--muted);">${p.category}</div>
|
|
|
<div style="font-size:12px;">Status: ${p.status}</div>
|
|
|
</div>`).join('') || '<div class="resource-item" style="color:var(--muted);">No matches</div>';
|
|
|
|
|
|
modelsContainer.innerHTML = state.resources.models.slice(0,6).map(m => `
|
|
|
<div class="resource-item">
|
|
|
<strong>${m.id}</strong>
|
|
|
<div style="font-size:12px;color:var(--muted);">${m.description || 'No description'}</div>
|
|
|
</div>`).join('') || '<div class="resource-item" style="color:var(--muted);">No matches</div>';
|
|
|
|
|
|
datasetsContainer.innerHTML = state.resources.datasets.slice(0,6).map(d => `
|
|
|
<div class="resource-item">
|
|
|
<strong>${d.id}</strong>
|
|
|
<div style="font-size:12px;color:var(--muted);">${d.description || 'No description'}</div>
|
|
|
</div>`).join('') || '<div class="resource-item" style="color:var(--muted);">No matches</div>';
|
|
|
}
|
|
|
|
|
|
async function handleExport(type) {
|
|
|
try {
|
|
|
const res = await apiCall(`/api/v2/export/${type}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
|
|
|
state.exports.unshift({ type, url: res.download_url, timestamp: res.timestamp });
|
|
|
renderExportHistory();
|
|
|
showToast(`${type.toUpperCase()} export ready`, 'success');
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
showToast('Export failed', 'error');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function handleBackup() {
|
|
|
try {
|
|
|
const res = await apiCall('/api/v2/backup', { method: 'POST' });
|
|
|
state.exports.unshift({ type: 'backup', url: res.download_url, timestamp: res.timestamp });
|
|
|
renderExportHistory();
|
|
|
showToast('Backup created', 'success');
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
showToast('Backup failed', 'error');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function renderExportHistory() {
|
|
|
const container = document.getElementById('exportHistory');
|
|
|
if (!state.exports.length) {
|
|
|
container.innerHTML = '<div style="color:var(--muted); font-size:13px;">No exports yet</div>';
|
|
|
return;
|
|
|
}
|
|
|
container.innerHTML = state.exports.slice(0,5).map(entry => `
|
|
|
<div class="list-item" style="border-bottom:1px solid var(--border);">
|
|
|
<div style="font-weight:600;">${entry.type.toUpperCase()}</div>
|
|
|
<div style="font-size:12px; color:var(--muted);">${new Date(entry.timestamp).toLocaleString()}</div>
|
|
|
<a href="${entry.url}" style="font-size:12px; color:var(--primary);" target="_blank">Download</a>
|
|
|
</div>`).join('');
|
|
|
}
|
|
|
|
|
|
async function handleImportSingle(event) {
|
|
|
event.preventDefault();
|
|
|
const form = event.target;
|
|
|
const payload = Object.fromEntries(new FormData(form).entries());
|
|
|
payload.requires_key = form.elements['requires_key'].checked;
|
|
|
payload.timeout_ms = Number(payload.timeout_ms) || 10000;
|
|
|
try {
|
|
|
await apiCall('/api/providers', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify(payload)
|
|
|
});
|
|
|
showToast('Provider imported', 'success');
|
|
|
form.reset();
|
|
|
loadProviders();
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
showToast('Import failed', 'error');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function handleImportBulk() {
|
|
|
const textarea = document.getElementById('bulkImportTextarea');
|
|
|
if (!textarea.value.trim()) {
|
|
|
showToast('Paste provider JSON first', 'error');
|
|
|
return;
|
|
|
}
|
|
|
try {
|
|
|
const providers = JSON.parse(textarea.value);
|
|
|
await apiCall('/api/v2/import/providers', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({ providers })
|
|
|
});
|
|
|
showToast('Bulk import complete', 'success');
|
|
|
textarea.value = '';
|
|
|
loadProviders();
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
showToast('Bulk import failed', 'error');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function switchTab(event, tabName) {
|
|
|
document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
|
|
|
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
|
|
event.currentTarget.classList.add('active');
|
|
|
document.getElementById(`tab-${tabName}`).classList.add('active');
|
|
|
state.currentTab = tabName;
|
|
|
if (tabName === 'market') loadMarket();
|
|
|
if (tabName === 'sentiment') { loadSentimentData(); loadDefi(); }
|
|
|
if (tabName === 'news') loadNews();
|
|
|
}
|
|
|
|
|
|
function startAutoRefresh() {
|
|
|
setInterval(() => {
|
|
|
if (state.wsConnected) {
|
|
|
refreshAll();
|
|
|
}
|
|
|
}, config.autoRefreshInterval);
|
|
|
}
|
|
|
|
|
|
function refreshAll() {
|
|
|
loadProviders();
|
|
|
loadMarket();
|
|
|
loadTrending();
|
|
|
loadSentimentData();
|
|
|
loadDefi();
|
|
|
loadErrorSummary();
|
|
|
loadNews();
|
|
|
loadResourceSearch();
|
|
|
}
|
|
|
|
|
|
function formatNumber(value) {
|
|
|
if (!value && value !== 0) return '--';
|
|
|
if (value >= 1e12) return (value / 1e12).toFixed(2) + 'T';
|
|
|
if (value >= 1e9) return (value / 1e9).toFixed(2) + 'B';
|
|
|
if (value >= 1e6) return (value / 1e6).toFixed(2) + 'M';
|
|
|
if (value >= 1e3) return (value / 1e3).toFixed(2) + 'K';
|
|
|
return Number(value).toFixed(2);
|
|
|
}
|
|
|
|
|
|
function setupResourceSearch() {
|
|
|
const input = document.getElementById('resourceSearch');
|
|
|
input.addEventListener('input', () => {
|
|
|
clearTimeout(state.resourceSearchTimeout);
|
|
|
state.resourceSearchTimeout = setTimeout(loadResourceSearch, 400);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
initializeWebSocket();
|
|
|
setupResourceSearch();
|
|
|
loadInitialData();
|
|
|
startAutoRefresh();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
|
