85
index.js
85
index.js
@@ -11,6 +11,52 @@ const http = require('http'),
|
||||
}),
|
||||
directory = process.argv[2] || './logs'
|
||||
|
||||
// Helper function to read last N lines from a file
|
||||
function readLastLines(filePath, numLines = 100) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const stats = fs.statSync(filePath)
|
||||
const fileSize = stats.size
|
||||
|
||||
if (fileSize === 0) {
|
||||
resolve([])
|
||||
return
|
||||
}
|
||||
|
||||
const buffer = Buffer.alloc(Math.min(fileSize, 64 * 1024)) // Read max 64KB
|
||||
const fd = fs.openSync(filePath, 'r')
|
||||
|
||||
// Calculate read position (start from end, go backwards)
|
||||
const readSize = Math.min(fileSize, buffer.length)
|
||||
const position = Math.max(0, fileSize - readSize)
|
||||
|
||||
fs.readSync(fd, buffer, 0, readSize, position)
|
||||
fs.closeSync(fd)
|
||||
|
||||
// Convert to string and split by lines
|
||||
const content = buffer.toString('utf8', 0, readSize)
|
||||
let lines = content.split('\n')
|
||||
|
||||
// Remove last empty line if exists
|
||||
if (lines[lines.length - 1] === '') {
|
||||
lines.pop()
|
||||
}
|
||||
|
||||
// If we read from the middle of the file, remove the first partial line
|
||||
if (position > 0 && lines.length > 0) {
|
||||
lines.shift()
|
||||
}
|
||||
|
||||
// Return last N lines
|
||||
const result = lines.slice(-numLines)
|
||||
resolve(result)
|
||||
|
||||
} catch (error) {
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Middleware
|
||||
app.disable('x-powered-by')
|
||||
app.use((req, res, next) => {
|
||||
@@ -69,7 +115,7 @@ app.get('/tail/api/files', (req, res) => {
|
||||
})
|
||||
|
||||
// Tail a specific file
|
||||
app.get('/tail/api/files/:endpoint', (req, res) => {
|
||||
app.get('/tail/api/files/:endpoint', async (req, res) => {
|
||||
const endpoint = path.normalize(req.params.endpoint)
|
||||
const file = path.join(directory, endpoint)
|
||||
const isReconnect = req.query.reconnect === 'true'
|
||||
@@ -90,6 +136,37 @@ app.get('/tail/api/files/:endpoint', (req, res) => {
|
||||
res.header('Cache-Control', 'no-cache')
|
||||
res.header('X-Accel-Buffering', 'no')
|
||||
|
||||
// Send initial message
|
||||
const initialMessage = isReconnect
|
||||
? `Reconnected to ${endpoint}...`
|
||||
: `Tailing ${endpoint}...`
|
||||
res.write(Buffer.from(`data: ${initialMessage}\n\n`))
|
||||
|
||||
// If it's not a reconnection, send the last 100 lines first
|
||||
if (!isReconnect) {
|
||||
try {
|
||||
const lastLines = await readLastLines(file, 100)
|
||||
|
||||
if (lastLines.length > 0) {
|
||||
// Send a separator message
|
||||
res.write(Buffer.from(`data: ===== Last ${lastLines.length} lines =====\n\n`))
|
||||
|
||||
// Send each line with a marker that it's historical
|
||||
lastLines.forEach(line => {
|
||||
if (line.trim()) {
|
||||
res.write(Buffer.from(`data: [HISTORY] ${line}\n\n`))
|
||||
}
|
||||
})
|
||||
|
||||
// Send separator for new content
|
||||
res.write(Buffer.from(`data: ===== Live tail starts here =====\n\n`))
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Could not read file history:', error.message)
|
||||
res.write(Buffer.from(`data: Could not load file history: ${error.message}\n\n`))
|
||||
}
|
||||
}
|
||||
|
||||
const transform = new Transform({
|
||||
transform: (chunk, enc, cb) => {
|
||||
cb(null, Buffer.from('data: ' + chunk.toString() + '\n\n'))
|
||||
@@ -105,12 +182,6 @@ app.get('/tail/api/files/:endpoint', (req, res) => {
|
||||
detectTruncate: true
|
||||
})
|
||||
|
||||
// Send initial message
|
||||
const initialMessage = isReconnect
|
||||
? `Reconnected to ${endpoint}...`
|
||||
: `Tailing ${endpoint}...`
|
||||
res.write(Buffer.from(`data: ${initialMessage}\n\n`))
|
||||
|
||||
// Handle stream events
|
||||
stream.on('error', error => {
|
||||
console.error('Stream error:', error)
|
||||
|
||||
764
public/main.css
Archivo normal
764
public/main.css
Archivo normal
@@ -0,0 +1,764 @@
|
||||
/* Reset and base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Color palette */
|
||||
--primary-color: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--secondary-color: #64748b;
|
||||
--accent-color: #06b6d4;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
--bg-dark: #0f172a;
|
||||
--bg-darker: #020617;
|
||||
|
||||
/* Text colors */
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--text-muted: #94a3b8;
|
||||
--text-inverse: #ffffff;
|
||||
|
||||
/* Border colors */
|
||||
--border-light: #e2e8f0;
|
||||
--border-medium: #cbd5e1;
|
||||
--border-dark: #475569;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
|
||||
/* Border radius */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease-in-out;
|
||||
--transition-normal: 250ms ease-in-out;
|
||||
--transition-slow: 350ms ease-in-out;
|
||||
}
|
||||
|
||||
/* Dark mode variables */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--text-muted: #94a3b8;
|
||||
--border-light: #334155;
|
||||
--border-medium: #475569;
|
||||
--border-dark: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* App container */
|
||||
.app-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.navbar {
|
||||
background: var(--bg-primary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-brand i {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-brand h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-brand a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-brand a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--bg-tertiary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border-light);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.status-indicator.connected {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--success-color);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.status-indicator.connected i {
|
||||
color: var(--success-color);
|
||||
animation: pulse-green 2s infinite;
|
||||
}
|
||||
|
||||
.status-indicator.disconnected {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--danger-color);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.status-indicator.disconnected i {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
@keyframes pulse-green {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.current-file {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
background: var(--bg-primary);
|
||||
border-right: 1px solid var(--border-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.file-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.file-item.active {
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-item i {
|
||||
color: var(--text-muted);
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.file-item.active i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Log viewer */
|
||||
.log-viewer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Controls panel */
|
||||
.controls-panel {
|
||||
background: var(--bg-primary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding: var(--spacing-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.control-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Toggle switch */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--border-medium);
|
||||
transition: var(--transition-fast);
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: var(--transition-fast);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
/* Input groups */
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
padding-left: 2.5rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
width: 200px;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.input-group i {
|
||||
position: absolute;
|
||||
left: var(--spacing-md);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
position: absolute;
|
||||
right: var(--spacing-sm);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-clear:hover {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: var(--spacing-sm);
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--border-light);
|
||||
color: var(--text-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Log container */
|
||||
.log-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
background: var(--bg-primary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.stat i {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Log content */
|
||||
.log-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-md);
|
||||
background: var(--bg-darker);
|
||||
color: var(--text-inverse);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Welcome message */
|
||||
.welcome-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.welcome-icon {
|
||||
font-size: 4rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.welcome-message h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.welcome-message p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.feature i {
|
||||
color: var(--primary-color);
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
/* Log lines */
|
||||
.log-line {
|
||||
display: block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: pointer;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.log-line:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.log-line.expanded {
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
border-left-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.log-line.highlighted {
|
||||
animation: pulse 1s infinite alternate;
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
border-left-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.log-line.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Log line types */
|
||||
.log-line.success {
|
||||
border-left-color: var(--success-color);
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.log-line.error {
|
||||
border-left-color: var(--danger-color);
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.log-line.warning {
|
||||
border-left-color: var(--warning-color);
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
.log-line.info {
|
||||
border-left-color: var(--accent-color);
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
}
|
||||
|
||||
.log-line.reconnect-message {
|
||||
border-left-color: var(--warning-color);
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: var(--warning-color);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin: var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.log-line.reconnect-message i {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.log-line.reconnect-success {
|
||||
border-left-color: var(--success-color);
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--success-color);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin: var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.log-line.reconnect-success i {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.log-line.historical {
|
||||
opacity: 0.7;
|
||||
border-left-color: var(--text-muted);
|
||||
background: rgba(148, 163, 184, 0.05);
|
||||
}
|
||||
|
||||
.log-line.separator-message {
|
||||
border-left-color: var(--accent-color);
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin: var(--spacing-md) 0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.log-line.separator-message.history-separator {
|
||||
border-left-color: var(--warning-color);
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.log-line.separator-message.live-separator {
|
||||
border-left-color: var(--success-color);
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.log-line.separator-message i {
|
||||
margin: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-xl);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.loading-overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.loading-spinner i {
|
||||
font-size: 2rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse {
|
||||
from { opacity: 0.8; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.log-line {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.log-content::-webkit-scrollbar,
|
||||
.file-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track,
|
||||
.file-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb,
|
||||
.file-list::-webkit-scrollbar-thumb {
|
||||
background: var(--border-medium);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover,
|
||||
.file-list::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-dark);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.controls-panel {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.nav-info {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
670
public/main.js
Archivo normal
670
public/main.js
Archivo normal
@@ -0,0 +1,670 @@
|
||||
/**
|
||||
* 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();
|
||||
|
||||
// Check if it's a separator or special message
|
||||
if (data.includes('===== Last') && data.includes('lines =====')) {
|
||||
this.addSeparatorMessage(data, 'history-separator');
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.includes('===== Live tail starts here =====')) {
|
||||
this.addSeparatorMessage(data, 'live-separator');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if it's a historical line
|
||||
const isHistorical = data.startsWith('[HISTORY] ');
|
||||
const processedData = isHistorical ?
|
||||
this.processLogData(data.substring(10)) : // Remove [HISTORY] prefix
|
||||
this.processLogData(data);
|
||||
|
||||
// Create log line element
|
||||
const logLine = this.createLogLine(processedData, isHistorical);
|
||||
|
||||
// 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, isHistorical = false) {
|
||||
const logLine = document.createElement('div');
|
||||
logLine.className = 'log-line';
|
||||
if (isHistorical) {
|
||||
logLine.classList.add('historical');
|
||||
}
|
||||
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 separator message to the log
|
||||
*/
|
||||
addSeparatorMessage(text, type) {
|
||||
const separatorLine = document.createElement('div');
|
||||
separatorLine.className = `log-line separator-message ${type}`;
|
||||
separatorLine.innerHTML = `<i class="fas fa-minus"></i> ${text} <i class="fas fa-minus"></i>`;
|
||||
|
||||
this.elements.logOutput.appendChild(separatorLine);
|
||||
|
||||
if (this.autoScroll) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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