File size: 4,142 Bytes
452f691 dd7ffbd 452f691 dd7ffbd 452f691 dd7ffbd 452f691 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
import apiClient from './apiClient.js';
class DebugConsoleView {
constructor(section, wsClient) {
this.section = section;
this.wsClient = wsClient;
this.healthStatus = section.querySelector('[data-health-status]');
this.providersContainer = section.querySelector('[data-providers]');
this.requestLogBody = section.querySelector('[data-request-log]');
this.errorLogBody = section.querySelector('[data-error-log]');
this.wsLogBody = section.querySelector('[data-ws-log]');
this.refreshButton = section.querySelector('[data-refresh-health]');
}
init() {
this.refresh();
if (this.refreshButton) {
this.refreshButton.addEventListener('click', () => this.refresh());
}
apiClient.onLog(() => this.renderRequestLogs());
apiClient.onError(() => this.renderErrorLogs());
this.wsClient.onStatusChange(() => this.renderWsLogs());
this.wsClient.onMessage(() => this.renderWsLogs());
}
async refresh() {
const [health, providers] = await Promise.all([apiClient.getHealth(), apiClient.getProviders()]);
if (health.ok) {
this.healthStatus.textContent = health.data?.status || 'OK';
} else {
this.healthStatus.textContent = 'Unavailable';
}
if (providers.ok) {
const list = providers.data || [];
this.providersContainer.innerHTML = list
.map(
(provider) => `
<div class="glass-card">
<h4>${provider.name}</h4>
<p>Status: <span class="${provider.status === 'healthy' ? 'text-success' : 'text-danger'}">${
provider.status || 'unknown'
}</span></p>
<p>Latency: ${provider.latency || '—'}ms</p>
</div>
`,
)
.join('');
} else {
this.providersContainer.innerHTML = `<div class="inline-message inline-error">${providers.error}</div>`;
}
this.renderRequestLogs();
this.renderErrorLogs();
this.renderWsLogs();
}
renderRequestLogs() {
if (!this.requestLogBody) return;
const logs = apiClient.getLogs();
this.requestLogBody.innerHTML = logs
.slice(-12)
.reverse()
.map(
(log) => `
<tr>
<td>${log.time}</td>
<td>${log.method}</td>
<td>${log.endpoint}</td>
<td>${log.status}</td>
<td>${log.duration}ms</td>
</tr>
`,
)
.join('');
}
renderErrorLogs() {
if (!this.errorLogBody) return;
const logs = apiClient.getErrors();
if (!logs.length) {
this.errorLogBody.innerHTML = '<tr><td colspan="3">No recent errors.</td></tr>';
return;
}
this.errorLogBody.innerHTML = logs
.slice(-8)
.reverse()
.map(
(log) => `
<tr>
<td>${log.time}</td>
<td>${log.endpoint}</td>
<td>${log.message}</td>
</tr>
`,
)
.join('');
}
renderWsLogs() {
if (!this.wsLogBody) return;
const events = this.wsClient.getEvents();
if (!events.length) {
this.wsLogBody.innerHTML = '<tr><td colspan="3">No WebSocket events yet.</td></tr>';
return;
}
this.wsLogBody.innerHTML = events
.slice(-12)
.reverse()
.map(
(event) => `
<tr>
<td>${event.time}</td>
<td>${event.type}</td>
<td>${event.messageType || event.status || event.details || ''}</td>
</tr>
`,
)
.join('');
}
}
export default DebugConsoleView;
|