File size: 4,253 Bytes
b66240d |
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 123 124 |
import apiClient from './apiClient.js';
class DebugConsoleView {
constructor(section, wsClient) {
this.section = section;
this.wsClient = wsClient;
this.healthInfo = section.querySelector('[data-health-info]');
this.wsInfo = section.querySelector('[data-ws-info]');
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()]);
// Update health info
if (this.healthInfo) {
if (health.ok) {
const data = health.data || {};
this.healthInfo.innerHTML = `
<p><strong>Status:</strong> <span class="text-success">${data.status || 'OK'}</span></p>
<p><strong>Uptime:</strong> ${data.uptime || 'N/A'}</p>
<p><strong>Version:</strong> ${data.version || 'N/A'}</p>
`;
} else {
this.healthInfo.innerHTML = `<div class="inline-message inline-error">${health.error || 'Unavailable'}</div>`;
}
}
// Update WebSocket info
if (this.wsInfo) {
const status = this.wsClient.status || 'disconnected';
const events = this.wsClient.getEvents();
this.wsInfo.innerHTML = `
<p><strong>Status:</strong> <span class="${status === 'connected' ? 'text-success' : 'text-danger'}">${status}</span></p>
<p><strong>Events:</strong> ${events.length}</p>
`;
}
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;
|