638
public/js/main.js
Archivo normal
638
public/js/main.js
Archivo normal
@@ -0,0 +1,638 @@
|
||||
/**
|
||||
* Modern Log Tail Monitor Application
|
||||
* Real-time log monitoring with Server-Sent Events
|
||||
*/
|
||||
|
||||
class LogTailMonitor {
|
||||
constructor() {
|
||||
this.eventSource = null;
|
||||
this.isConnected = false;
|
||||
this.isPaused = false;
|
||||
this.autoScroll = true;
|
||||
this.currentFile = null;
|
||||
this.logLines = [];
|
||||
this.visibleLines = 0;
|
||||
this.totalLines = 0;
|
||||
this.filterText = '';
|
||||
this.highlightText = '';
|
||||
|
||||
this.elements = {};
|
||||
this.lastUpdateTime = null;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the application
|
||||
*/
|
||||
async init() {
|
||||
this.cacheElements();
|
||||
this.bindEvents();
|
||||
await this.loadFiles();
|
||||
this.checkUrlParams();
|
||||
|
||||
// Set initial connection status as disconnected
|
||||
this.setConnectionStatus(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Cache DOM elements for better performance
|
||||
*/
|
||||
cacheElements() {
|
||||
this.elements = {
|
||||
// Navigation
|
||||
connectionStatus: document.getElementById('connection-status'),
|
||||
currentFileDisplay: document.getElementById('current-file'),
|
||||
|
||||
// Sidebar
|
||||
fileList: document.getElementById('file-list'),
|
||||
refreshFilesBtn: document.getElementById('refresh-files'),
|
||||
|
||||
// Controls
|
||||
autoScrollToggle: document.getElementById('auto-scroll'),
|
||||
filterInput: document.getElementById('filter-input'),
|
||||
highlightInput: document.getElementById('highlight-input'),
|
||||
clearFilterBtn: document.getElementById('clear-filter'),
|
||||
clearHighlightBtn: document.getElementById('clear-highlight'),
|
||||
pauseBtn: document.getElementById('pause-btn'),
|
||||
clearLogsBtn: document.getElementById('clear-logs'),
|
||||
exportLogsBtn: document.getElementById('export-logs'),
|
||||
|
||||
// Log display
|
||||
logOutput: document.getElementById('log-output'),
|
||||
welcomeMessage: document.getElementById('welcome-message'),
|
||||
lineCount: document.getElementById('line-count'),
|
||||
visibleCount: document.getElementById('visible-count'),
|
||||
lastUpdateDisplay: document.getElementById('last-update-time'),
|
||||
|
||||
// Loading
|
||||
loadingOverlay: document.getElementById('loading-overlay')
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Bind event listeners
|
||||
*/
|
||||
bindEvents() {
|
||||
// File refresh
|
||||
this.elements.refreshFilesBtn.addEventListener('click', () => this.loadFiles());
|
||||
|
||||
// Controls
|
||||
this.elements.autoScrollToggle.addEventListener('change', (e) => {
|
||||
this.autoScroll = e.target.checked;
|
||||
});
|
||||
|
||||
this.elements.filterInput.addEventListener('input', (e) => {
|
||||
this.filterText = e.target.value;
|
||||
this.applyFilters();
|
||||
});
|
||||
|
||||
this.elements.highlightInput.addEventListener('input', (e) => {
|
||||
this.highlightText = e.target.value;
|
||||
this.applyFilters();
|
||||
});
|
||||
|
||||
this.elements.clearFilterBtn.addEventListener('click', () => {
|
||||
this.elements.filterInput.value = '';
|
||||
this.filterText = '';
|
||||
this.applyFilters();
|
||||
});
|
||||
|
||||
this.elements.clearHighlightBtn.addEventListener('click', () => {
|
||||
this.elements.highlightInput.value = '';
|
||||
this.highlightText = '';
|
||||
this.applyFilters();
|
||||
});
|
||||
|
||||
this.elements.pauseBtn.addEventListener('click', () => this.togglePause());
|
||||
this.elements.clearLogsBtn.addEventListener('click', () => this.clearLogs());
|
||||
this.elements.exportLogsBtn.addEventListener('click', () => this.exportLogs());
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
switch (e.key) {
|
||||
case 'f':
|
||||
e.preventDefault();
|
||||
this.elements.filterInput.focus();
|
||||
break;
|
||||
case 'h':
|
||||
e.preventDefault();
|
||||
this.elements.highlightInput.focus();
|
||||
break;
|
||||
case 'p':
|
||||
e.preventDefault();
|
||||
this.togglePause();
|
||||
break;
|
||||
case 'l':
|
||||
e.preventDefault();
|
||||
this.clearLogs();
|
||||
break;
|
||||
case 's':
|
||||
e.preventDefault();
|
||||
this.exportLogs();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Check URL parameters for initial file selection
|
||||
*/
|
||||
checkUrlParams() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const file = params.get('file');
|
||||
if (file) {
|
||||
this.startTailing(file);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load available files from the server
|
||||
*/
|
||||
async loadFiles() {
|
||||
try {
|
||||
this.elements.fileList.innerHTML = '<div class="loading"><i class="fas fa-spinner fa-spin"></i><span>Loading files...</span></div>';
|
||||
|
||||
// First check server health
|
||||
const healthResponse = await fetch('api/health');
|
||||
if (healthResponse.ok) {
|
||||
const healthData = await healthResponse.json();
|
||||
console.log('Server status:', healthData);
|
||||
}
|
||||
|
||||
const response = await fetch('api/files');
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'ok' && Array.isArray(data.files)) {
|
||||
this.renderFileList(data.files);
|
||||
// Set connection status to connected when we can load files
|
||||
this.setConnectionStatus(true);
|
||||
} else {
|
||||
throw new Error('Invalid response format');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load files:', error);
|
||||
this.elements.fileList.innerHTML = `
|
||||
<div class="loading">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<span>Failed to load files: ${error.message}</span>
|
||||
</div>
|
||||
`;
|
||||
// Set connection status to disconnected when we can't load files
|
||||
this.setConnectionStatus(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the file list in the sidebar
|
||||
*/
|
||||
renderFileList(files) {
|
||||
if (files.length === 0) {
|
||||
this.elements.fileList.innerHTML = `
|
||||
<div class="loading">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
<span>No files found</span>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
this.elements.fileList.innerHTML = '';
|
||||
|
||||
files.forEach(file => {
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.className = 'file-item';
|
||||
fileItem.innerHTML = `
|
||||
<i class="fas fa-file-alt"></i>
|
||||
<span>${this.escapeHtml(file.name)}</span>
|
||||
`;
|
||||
|
||||
fileItem.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Remove active class from all items
|
||||
document.querySelectorAll('.file-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// Add active class to clicked item
|
||||
fileItem.classList.add('active');
|
||||
|
||||
// Start tailing the selected file
|
||||
this.startTailing(file.name);
|
||||
history.pushState(null, '', `?file=${encodeURIComponent(file.name)}`);
|
||||
});
|
||||
|
||||
this.elements.fileList.appendChild(fileItem);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Start tailing a specific file
|
||||
*/
|
||||
async startTailing(filename, isReconnect = false) {
|
||||
this.showLoading('Connecting to ' + filename + '...');
|
||||
|
||||
// Stop current connection
|
||||
this.stopTailing();
|
||||
|
||||
// Update UI
|
||||
this.currentFile = filename;
|
||||
this.elements.currentFileDisplay.textContent = filename;
|
||||
this.elements.welcomeMessage.style.display = 'none';
|
||||
|
||||
// Update active file in sidebar
|
||||
document.querySelectorAll('.file-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
const itemText = item.querySelector('span').textContent;
|
||||
if (itemText === filename) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Clear existing logs only if it's not a reconnection
|
||||
if (!isReconnect) {
|
||||
this.clearLogs();
|
||||
} else {
|
||||
// Add a reconnection indicator to the existing logs
|
||||
this.addReconnectionMessage();
|
||||
}
|
||||
|
||||
try {
|
||||
// Start SSE connection with reconnect parameter if needed
|
||||
const url = `api/files/${encodeURIComponent(filename)}${isReconnect ? '?reconnect=true' : ''}`;
|
||||
this.eventSource = new EventSource(url);
|
||||
|
||||
this.eventSource.onopen = () => {
|
||||
this.hideLoading();
|
||||
this.setConnectionStatus(true);
|
||||
console.log('SSE connection established');
|
||||
|
||||
// If this is a reconnection, add a success message
|
||||
if (isReconnect) {
|
||||
this.addReconnectionSuccessMessage();
|
||||
}
|
||||
};
|
||||
|
||||
this.eventSource.onmessage = (event) => {
|
||||
if (!this.isPaused) {
|
||||
this.handleLogMessage(event.data);
|
||||
}
|
||||
};
|
||||
|
||||
this.eventSource.onerror = (error) => {
|
||||
console.error('SSE Error:', error);
|
||||
this.setConnectionStatus(false);
|
||||
this.hideLoading();
|
||||
|
||||
// Show error message to user
|
||||
if (this.eventSource.readyState === EventSource.CLOSED) {
|
||||
console.log('SSE connection closed');
|
||||
}
|
||||
|
||||
// Auto-reconnect after delay, but don't clear logs
|
||||
setTimeout(() => {
|
||||
if (this.currentFile && this.eventSource.readyState === EventSource.CLOSED) {
|
||||
console.log('Attempting to reconnect...');
|
||||
this.startTailing(this.currentFile, true); // true = isReconnect
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to start tailing:', error);
|
||||
this.hideLoading();
|
||||
this.setConnectionStatus(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop the current SSE connection
|
||||
*/
|
||||
stopTailing() {
|
||||
if (this.eventSource) {
|
||||
this.eventSource.close();
|
||||
this.eventSource = null;
|
||||
}
|
||||
this.setConnectionStatus(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle incoming log messages
|
||||
*/
|
||||
handleLogMessage(data) {
|
||||
if (!data || data.length === 0) return;
|
||||
|
||||
// Update last update time
|
||||
this.lastUpdateTime = new Date();
|
||||
this.updateLastUpdateDisplay();
|
||||
|
||||
// Process the log data
|
||||
const processedData = this.processLogData(data);
|
||||
|
||||
// Create log line element
|
||||
const logLine = this.createLogLine(processedData);
|
||||
|
||||
// Add to logs array
|
||||
this.logLines.push(logLine);
|
||||
this.totalLines++;
|
||||
|
||||
// Remove old lines if too many
|
||||
if (this.logLines.length > 1000) {
|
||||
const removedLine = this.logLines.shift();
|
||||
if (removedLine.parentNode) {
|
||||
removedLine.parentNode.removeChild(removedLine);
|
||||
}
|
||||
}
|
||||
|
||||
// Apply filters to the new line
|
||||
this.applyFiltersToLine(logLine);
|
||||
|
||||
// Add to DOM
|
||||
this.elements.logOutput.appendChild(logLine);
|
||||
|
||||
// Auto scroll if enabled
|
||||
if (this.autoScroll) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
|
||||
// Update stats
|
||||
this.updateStats();
|
||||
}
|
||||
|
||||
/**
|
||||
* Process raw log data
|
||||
*/
|
||||
processLogData(data) {
|
||||
// Clean up escape sequences and unicode
|
||||
return data
|
||||
.replace(/\\x22/gim, '"')
|
||||
.replace(/\\x5c/gim, '\\')
|
||||
.replace(/\\u[a-fA-F0-9]{4}/gm, (match) =>
|
||||
String.fromCodePoint('0x' + match.toLowerCase().replace(/\\u/, ''))
|
||||
)
|
||||
.replace(/\\x[a-fA-F0-9]{2}/gm, (match) =>
|
||||
String.fromCharCode(parseInt(match.substr(2, 2), 16))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a log line element
|
||||
*/
|
||||
createLogLine(content) {
|
||||
const logLine = document.createElement('div');
|
||||
logLine.className = 'log-line';
|
||||
logLine.textContent = content;
|
||||
|
||||
// Classify log level
|
||||
this.classifyLogLine(logLine, content);
|
||||
|
||||
// Add click handler for expansion
|
||||
logLine.addEventListener('click', () => {
|
||||
logLine.classList.toggle('expanded');
|
||||
this.elements.autoScrollToggle.checked = false;
|
||||
this.autoScroll = false;
|
||||
|
||||
// Auto-collapse after 20 seconds
|
||||
setTimeout(() => {
|
||||
logLine.classList.remove('expanded');
|
||||
this.elements.autoScrollToggle.checked = true;
|
||||
this.autoScroll = true;
|
||||
}, 20000);
|
||||
});
|
||||
|
||||
return logLine;
|
||||
}
|
||||
|
||||
/**
|
||||
* Classify log line by content patterns
|
||||
*/
|
||||
classifyLogLine(element, content) {
|
||||
// Success patterns (2xx HTTP status codes)
|
||||
if (content.match(/"Mozilla\//) && content.match(/\" 2[0-9]{2} [0-9]/)) {
|
||||
element.classList.add('success');
|
||||
}
|
||||
// Error patterns (non-2xx HTTP status codes)
|
||||
else if ((content.match(/ HTTP\//) && !content.match(/\" 2[0-9]{2} /)) ||
|
||||
content.match(/(UDP|TCP)+ [^2]{1}[0-9]{2} \"/)) {
|
||||
element.classList.add('error');
|
||||
}
|
||||
// Info patterns (social media bots)
|
||||
else if (content.match(/("PeerTube\/|"Friendica|"Misskey\/|"Pleroma|\(Mastodon\/)/)) {
|
||||
element.classList.add('info');
|
||||
}
|
||||
// Warning patterns
|
||||
else if (content.toLowerCase().includes('warning') || content.toLowerCase().includes('warn')) {
|
||||
element.classList.add('warning');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply filters to all log lines
|
||||
*/
|
||||
applyFilters() {
|
||||
this.logLines.forEach(line => this.applyFiltersToLine(line));
|
||||
this.updateStats();
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply filters to a single log line
|
||||
*/
|
||||
applyFiltersToLine(line) {
|
||||
const content = line.textContent.toLowerCase();
|
||||
const filterLower = this.filterText.toLowerCase();
|
||||
const highlightLower = this.highlightText.toLowerCase();
|
||||
|
||||
// Apply filter
|
||||
if (filterLower && !content.includes(filterLower)) {
|
||||
line.classList.add('hidden');
|
||||
} else {
|
||||
line.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Apply highlight
|
||||
if (highlightLower && content.includes(highlightLower)) {
|
||||
line.classList.add('highlighted');
|
||||
} else {
|
||||
line.classList.remove('highlighted');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle pause state
|
||||
*/
|
||||
togglePause() {
|
||||
this.isPaused = !this.isPaused;
|
||||
|
||||
const icon = this.elements.pauseBtn.querySelector('i');
|
||||
const text = this.elements.pauseBtn.querySelector('span');
|
||||
|
||||
if (this.isPaused) {
|
||||
icon.className = 'fas fa-play';
|
||||
text.textContent = 'Resume';
|
||||
this.elements.pauseBtn.classList.add('btn-warning');
|
||||
} else {
|
||||
icon.className = 'fas fa-pause';
|
||||
text.textContent = 'Pause';
|
||||
this.elements.pauseBtn.classList.remove('btn-warning');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all log lines
|
||||
*/
|
||||
clearLogs() {
|
||||
this.elements.logOutput.innerHTML = '';
|
||||
this.logLines = [];
|
||||
this.totalLines = 0;
|
||||
this.updateStats();
|
||||
}
|
||||
|
||||
/**
|
||||
* Export filtered logs
|
||||
*/
|
||||
exportLogs() {
|
||||
const visibleLines = this.logLines
|
||||
.filter(line => !line.classList.contains('hidden'))
|
||||
.map(line => line.textContent)
|
||||
.join('\n');
|
||||
|
||||
if (!visibleLines) {
|
||||
alert('No logs to export');
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([visibleLines], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${this.currentFile || 'logs'}_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update connection status indicator
|
||||
*/
|
||||
setConnectionStatus(connected) {
|
||||
this.isConnected = connected;
|
||||
const status = this.elements.connectionStatus;
|
||||
|
||||
if (connected) {
|
||||
status.className = 'status-indicator connected';
|
||||
status.innerHTML = '<i class="fas fa-circle"></i><span>Connected</span>';
|
||||
} else {
|
||||
status.className = 'status-indicator disconnected';
|
||||
status.innerHTML = '<i class="fas fa-circle"></i><span>Disconnected</span>';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update statistics display
|
||||
*/
|
||||
updateStats() {
|
||||
this.visibleLines = this.logLines.filter(line => !line.classList.contains('hidden')).length;
|
||||
|
||||
this.elements.lineCount.textContent = this.totalLines;
|
||||
this.elements.visibleCount.textContent = this.visibleLines;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update last update time display
|
||||
*/
|
||||
updateLastUpdateDisplay() {
|
||||
if (this.lastUpdateTime) {
|
||||
const timeStr = this.lastUpdateTime.toLocaleTimeString();
|
||||
this.elements.lastUpdateDisplay.innerHTML = `<i class="fas fa-clock"></i><span>Last update: ${timeStr}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to bottom of log container
|
||||
*/
|
||||
scrollToBottom() {
|
||||
this.elements.logOutput.scrollTop = this.elements.logOutput.scrollHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show loading overlay
|
||||
*/
|
||||
showLoading(message = 'Loading...') {
|
||||
const overlay = this.elements.loadingOverlay;
|
||||
const spinner = overlay.querySelector('.loading-spinner span');
|
||||
spinner.textContent = message;
|
||||
overlay.classList.add('visible');
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide loading overlay
|
||||
*/
|
||||
hideLoading() {
|
||||
this.elements.loadingOverlay.classList.remove('visible');
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a reconnection message to the log
|
||||
*/
|
||||
addReconnectionMessage() {
|
||||
const reconnectLine = document.createElement('div');
|
||||
reconnectLine.className = 'log-line reconnect-message';
|
||||
reconnectLine.innerHTML = '<i class="fas fa-plug"></i> Reconnecting to log stream...';
|
||||
|
||||
this.elements.logOutput.appendChild(reconnectLine);
|
||||
|
||||
if (this.autoScroll) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a successful reconnection message to the log
|
||||
*/
|
||||
addReconnectionSuccessMessage() {
|
||||
const successLine = document.createElement('div');
|
||||
successLine.className = 'log-line reconnect-success';
|
||||
successLine.innerHTML = '<i class="fas fa-check-circle"></i> Successfully reconnected - continuing log stream...';
|
||||
|
||||
this.elements.logOutput.appendChild(successLine);
|
||||
|
||||
if (this.autoScroll) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the application when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.logMonitor = new LogTailMonitor();
|
||||
});
|
||||
|
||||
// Handle page visibility changes - attempt reconnection instead of reload
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible' && window.logMonitor) {
|
||||
// Try to reconnect to current file if connection was lost
|
||||
if (window.logMonitor.currentFile && (!window.logMonitor.eventSource || window.logMonitor.eventSource.readyState === EventSource.CLOSED)) {
|
||||
console.log('Page became visible, attempting to reconnect...');
|
||||
setTimeout(() => {
|
||||
window.logMonitor.startTailing(window.logMonitor.currentFile, true);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
Referencia en una nueva incidencia
Block a user