1088 lines
32 KiB
HTML
1088 lines
32 KiB
HTML
|
<div class="logs-container">
|
||
|
|
<!-- Logs Header -->
|
||
|
|
<div class="logs-header">
|
||
|
|
<div class="header-filters">
|
||
|
|
<div class="filter-group">
|
||
|
|
<label for="log-level-filter">Level</label>
|
||
|
|
<select id="log-level-filter" onchange="applyFilters()">
|
||
|
|
<option value="all">All Levels</option>
|
||
|
|
<option value="debug">Debug</option>
|
||
|
|
<option value="info">Info</option>
|
||
|
|
<option value="warn">Warning</option>
|
||
|
|
<option value="error">Error</option>
|
||
|
|
<option value="fatal">Fatal</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="filter-group">
|
||
|
|
<label for="service-filter">Service</label>
|
||
|
|
<select id="service-filter" onchange="applyFilters()"
|
||
|
|
hx-get="/api/monitoring/logs/services"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<option value="all">All Services</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="filter-group">
|
||
|
|
<label for="search-filter">Search</label>
|
||
|
|
<div class="search-input">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="11" cy="11" r="8"></circle>
|
||
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||
|
|
</svg>
|
||
|
|
<input type="text" id="search-filter" placeholder="Search logs..." onkeyup="debounceSearch(this.value)">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="filter-group">
|
||
|
|
<label for="time-filter">Time Range</label>
|
||
|
|
<select id="time-filter" onchange="applyFilters()">
|
||
|
|
<option value="live">Live</option>
|
||
|
|
<option value="15m">Last 15 minutes</option>
|
||
|
|
<option value="1h">Last 1 hour</option>
|
||
|
|
<option value="6h">Last 6 hours</option>
|
||
|
|
<option value="24h">Last 24 hours</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="header-actions">
|
||
|
|
<button class="action-btn" id="stream-toggle" onclick="toggleStream()">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="6" y="4" width="4" height="16"></rect>
|
||
|
|
<rect x="14" y="4" width="4" height="16"></rect>
|
||
|
|
</svg>
|
||
|
|
<span>Pause</span></span>
|
||
|
|
</button>
|
||
|
|
<button class="action-btn secondary" onclick="clearLogs()">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
||
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||
|
|
</svg>
|
||
|
|
Clear
|
||
|
|
</button>
|
||
|
|
<button class="action-btn secondary" onclick="downloadLogs()">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
||
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||
|
|
</svg>
|
||
|
|
Download
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Log Stats -->
|
||
|
|
<div class="log-stats">
|
||
|
|
<div class="stat-item" data-level="debug">
|
||
|
|
<span class="stat-dot debug"></span>
|
||
|
|
<span class="stat-label">Debug</span>
|
||
|
|
<span class="stat-count" id="debug-count">0</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-item" data-level="info">
|
||
|
|
<span class="stat-dot info"></span>
|
||
|
|
<span class="stat-label">Info</span>
|
||
|
|
<span class="stat-count" id="info-count">0</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-item" data-level="warn">
|
||
|
|
<span class="stat-dot warn"></span>
|
||
|
|
<span class="stat-label">Warning</span>
|
||
|
|
<span class="stat-count" id="warn-count">0</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-item" data-level="error">
|
||
|
|
<span class="stat-dot error"></span>
|
||
|
|
<span class="stat-label">Error</span>
|
||
|
|
<span class="stat-count" id="error-count">0</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-item" data-level="fatal">
|
||
|
|
<span class="stat-dot fatal"></span>
|
||
|
|
<span class="stat-label">Fatal</span>
|
||
|
|
<span class="stat-count" id="fatal-count">0</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-separator"></div>
|
||
|
|
<div class="stat-item total">
|
||
|
|
<span class="stat-label">Total</span>
|
||
|
|
<span class="stat-count" id="total-count">0</span>
|
||
|
|
</div>
|
||
|
|
<div class="connection-status" id="connection-status">
|
||
|
|
<span class="status-dot"></span>
|
||
|
|
<span class="status-text">Connecting...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Log Stream Container -->
|
||
|
|
<div class="log-stream-container">
|
||
|
|
<div class="log-stream" id="log-stream"
|
||
|
|
hx-ext="ws"
|
||
|
|
ws-connect="/ws/logs">
|
||
|
|
<!-- Logs will be streamed here via WebSocket -->
|
||
|
|
<div class="log-placeholder">
|
||
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
||
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||
|
|
<polyline points="10 9 9 9 8 9"></polyline>
|
||
|
|
</svg>
|
||
|
|
<p>Waiting</p> for logs...</p>
|
||
|
|
<span class="placeholder-hint">Logs will appear here in real-time</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="scroll-controls">
|
||
|
|
<button class="scroll-btn" id="scroll-top-btn" onclick="scrollToTop()" title="Scroll to top">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button class="scroll-btn active" id="scroll-bottom-btn" onclick="scrollToBottom()" title="Scroll to bottom (auto-scroll)">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Log Detail Panel (slides up) -->
|
||
|
|
<div class="log-detail-panel" id="log-detail-panel">
|
||
|
|
<div class="panel-header">
|
||
|
|
<h4>Log Details</h4>
|
||
|
|
<button class="close-btn" onclick="closeLogDetail()">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="panel-content" id="log-detail-content">
|
||
|
|
<!-- Log detail loaded here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Log Entry Template -->
|
||
|
|
<template id="log-entry-template">
|
||
|
|
<div class="log-entry" data-level="info" data-service="service">
|
||
|
|
<span class="log-timestamp">2024-01-15 12:34:56.789</span>
|
||
|
|
<span class="log-level">INFO</span>
|
||
|
|
<span class="log-service">service-name</span>
|
||
|
|
<span class="log-message">Log message content goes here</span>
|
||
|
|
<button class="log-expand" onclick="expandLog(this)" title="View details">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.logs-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: calc(100vh - 200px);
|
||
|
|
min-height: 500px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Header */
|
||
|
|
.logs-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-filters {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.375rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-group label {
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-group select {
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
color: var(--text);
|
||
|
|
padding: 0.5rem 0.75rem;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
cursor: pointer;
|
||
|
|
min-width: 140px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-group select:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 0.5rem 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input svg {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input input {
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
color: var(--text);
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
width: 180px;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input input::placeholder {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input:focus-within {
|
||
|
|
border-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.375rem;
|
||
|
|
padding: 0.5rem 0.875rem;
|
||
|
|
background: var(--primary);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
font-weight: 500;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn:hover {
|
||
|
|
background: var(--primary-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn.secondary {
|
||
|
|
background: var(--surface);
|
||
|
|
color: var(--text);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn.secondary:hover {
|
||
|
|
background: var(--surface-hover);
|
||
|
|
border-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn.paused {
|
||
|
|
background: var(--success);
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn.paused:hover {
|
||
|
|
background: #16a34a;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Log Stats */
|
||
|
|
.log-stats {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1.25rem;
|
||
|
|
padding: 0.75rem 1rem;
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 8px;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 0.25rem 0.5rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: background 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-item:hover {
|
||
|
|
background: var(--surface-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-item.active {
|
||
|
|
background: var(--primary-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-dot {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-dot.debug { background: #6b7280; }
|
||
|
|
.stat-dot.info { background: var(--primary); }
|
||
|
|
.stat-dot.warn { background: var(--warning); }
|
||
|
|
.stat-dot.error { background: var(--error); }
|
||
|
|
.stat-dot.fatal { background: #dc2626; }
|
||
|
|
|
||
|
|
.stat-label {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-count {
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text);
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-separator {
|
||
|
|
width: 1px;
|
||
|
|
height: 24px;
|
||
|
|
background: var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-item.total .stat-label {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-status {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
margin-left: auto;
|
||
|
|
padding: 0.375rem 0.75rem;
|
||
|
|
background: var(--bg);
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-status .status-dot {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--warning);
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-status.connected .status-dot {
|
||
|
|
background: var(--success);
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-status.disconnected .status-dot {
|
||
|
|
background: var(--error);
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { opacity: 1; }
|
||
|
|
50% { opacity: 0.5; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Log Stream */
|
||
|
|
.log-stream-container {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-stream {
|
||
|
|
flex: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: 0.5rem;
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-placeholder {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 100%;
|
||
|
|
min-height: 300px;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-placeholder svg {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-placeholder p {
|
||
|
|
font-size: 1rem;
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
|
|
margin-bottom: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.placeholder-hint {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Log Entry */
|
||
|
|
.log-entry {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 0.75rem;
|
||
|
|
padding: 0.375rem 0.5rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: background 0.15s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry:hover {
|
||
|
|
background: var(--bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry.hidden {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-timestamp {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 0.75rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-level {
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 0.125rem 0.375rem;
|
||
|
|
border-radius: 3px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
flex-shrink: 0;
|
||
|
|
min-width: 50px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry[data-level="debug"] .log-level {
|
||
|
|
background: rgba(107, 114, 128, 0.15);
|
||
|
|
color: #9ca3af;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry[data-level="info"] .log-level {
|
||
|
|
background: var(--primary-light);
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry[data-level="warn"] .log-level {
|
||
|
|
background: rgba(245, 158, 11, 0.15);
|
||
|
|
color: var(--warning);
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry[data-level="error"] .log-level {
|
||
|
|
background: rgba(239, 68, 68, 0.15);
|
||
|
|
color: var(--error);
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry[data-level="fatal"] .log-level {
|
||
|
|
background: rgba(220, 38, 38, 0.2);
|
||
|
|
color: #dc2626;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-service {
|
||
|
|
color: #8b5cf6;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
flex-shrink: 0;
|
||
|
|
max-width: 120px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-message {
|
||
|
|
color: var(--text);
|
||
|
|
flex: 1;
|
||
|
|
word-break: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-expand {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
border-radius: 4px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry:hover .log-expand {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-expand:hover {
|
||
|
|
background: var(--surface-hover);
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Scroll Controls */
|
||
|
|
.scroll-controls {
|
||
|
|
position: absolute;
|
||
|
|
right: 1rem;
|
||
|
|
bottom: 1rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
background: var(--bg);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 8px;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-btn:hover {
|
||
|
|
background: var(--surface-hover);
|
||
|
|
color: var(--text);
|
||
|
|
border-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-btn.active {
|
||
|
|
background: var(--primary-light);
|
||
|
|
color: var(--primary);
|
||
|
|
border-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Log Detail Panel */
|
||
|
|
.log-detail-panel {
|
||
|
|
position: absolute;
|
||
|
|
bottom: -300px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 300px;
|
||
|
|
background: var(--surface);
|
||
|
|
border-top: 1px solid var(--border);
|
||
|
|
transition: bottom 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-detail-panel.open {
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-detail-panel .panel-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.75rem 1rem;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-detail-panel .panel-header h4 {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-detail-panel .close-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-detail-panel .close-btn:hover {
|
||
|
|
background: var(--surface-hover);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-detail-panel .panel-content {
|
||
|
|
flex: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-section {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-label {
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
margin-bottom: 0.375rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-value {
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
color: var(--text);
|
||
|
|
background: var(--bg);
|
||
|
|
padding: 0.5rem 0.75rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive */
|
||
|
|
@media (max-width: 1024px) {
|
||
|
|
.logs-header {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-filters {
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-group {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input input {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-actions {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.log-stats {
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-separator {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-status {
|
||
|
|
width: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry {
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-timestamp {
|
||
|
|
order: 1;
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-level {
|
||
|
|
order: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-service {
|
||
|
|
order: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-message {
|
||
|
|
order: 5;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-expand {
|
||
|
|
order: 4;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// State
|
||
|
|
let isStreaming = true;
|
||
|
|
let autoScroll = true;
|
||
|
|
let logCounts = { debug: 0, info: 0, warn: 0, error: 0, fatal: 0 };
|
||
|
|
let searchDebounceTimer = null;
|
||
|
|
let currentFilters = {
|
||
|
|
level: 'all',
|
||
|
|
service: 'all',
|
||
|
|
search: ''
|
||
|
|
};
|
||
|
|
|
||
|
|
// WebSocket connection
|
||
|
|
let ws = null;
|
||
|
|
|
||
|
|
function initWebSocket() {
|
||
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
|
|
ws = new WebSocket(`${protocol}//${window.location.host}/ws/logs`);
|
||
|
|
|
||
|
|
ws.onopen = function() {
|
||
|
|
updateConnectionStatus('connected', 'Connected');
|
||
|
|
};
|
||
|
|
|
||
|
|
ws.onclose = function() {
|
||
|
|
updateConnectionStatus('disconnected', 'Disconnected');
|
||
|
|
// Reconnect after 3 seconds
|
||
|
|
setTimeout(initWebSocket, 3000);
|
||
|
|
};
|
||
|
|
|
||
|
|
ws.onerror = function() {
|
||
|
|
updateConnectionStatus('disconnected', 'Error');
|
||
|
|
};
|
||
|
|
|
||
|
|
ws.onmessage = function(event) {
|
||
|
|
if (!isStreaming) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const logData = JSON.parse(event.data);
|
||
|
|
appendLog(logData);
|
||
|
|
} catch (e) {
|
||
|
|
console.error('Failed to parse log message:', e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateConnectionStatus(status, text) {
|
||
|
|
const statusEl = document.getElementById('connection-status');
|
||
|
|
statusEl.className = `connection-status ${status}`;
|
||
|
|
statusEl.querySelector('.status-text').textContent = text;
|
||
|
|
}
|
||
|
|
|
||
|
|
function appendLog(log) {
|
||
|
|
const stream = document.getElementById('log-stream');
|
||
|
|
const placeholder = stream.querySelector('.log-placeholder');
|
||
|
|
if (placeholder) {
|
||
|
|
placeholder.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
const entry = document.createElement('div');
|
||
|
|
entry.className = 'log-entry';
|
||
|
|
entry.dataset.level = log.level || 'info';
|
||
|
|
entry.dataset.service = log.service || 'unknown';
|
||
|
|
entry.dataset.id = log.id || Date.now();
|
||
|
|
|
||
|
|
entry.innerHTML = `
|
||
|
|
<span class="log-timestamp">${formatTimestamp(log.timestamp)}</span>
|
||
|
|
<span class="log-level">${(log.level || 'INFO').toUpperCase()}</span>
|
||
|
|
<span class="log-service">${log.service || 'unknown'}</span>
|
||
|
|
<span class="log-message">${escapeHtml(log.message || '')}</span>
|
||
|
|
<button class="log-expand" onclick="expandLog(this)" title="View details">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
`;
|
||
|
|
|
||
|
|
// Store full log data for detail view
|
||
|
|
entry._logData = log;
|
||
|
|
|
||
|
|
// Apply current filters
|
||
|
|
if (!matchesFilters(entry)) {
|
||
|
|
entry.classList.add('hidden');
|
||
|
|
}
|
||
|
|
|
||
|
|
stream.appendChild(entry);
|
||
|
|
|
||
|
|
// Update counts
|
||
|
|
const level = log.level || 'info';
|
||
|
|
if (logCounts[level] !== undefined) {
|
||
|
|
logCounts[level]++;
|
||
|
|
document.getElementById(`${level}-count`).textContent = logCounts[level];
|
||
|
|
}
|
||
|
|
document.getElementById('total-count').textContent =
|
||
|
|
Object.values(logCounts).reduce((a, b) => a + b, 0);
|
||
|
|
|
||
|
|
// Auto-scroll to bottom
|
||
|
|
if (autoScroll) {
|
||
|
|
stream.scrollTop = stream.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Limit log entries to prevent memory issues
|
||
|
|
const maxEntries = 1000;
|
||
|
|
while (stream.children.length > maxEntries) {
|
||
|
|
const removed = stream.firstChild;
|
||
|
|
if (removed._logData) {
|
||
|
|
const removedLevel = removed._logData.level || 'info';
|
||
|
|
if (logCounts[removedLevel] > 0) {
|
||
|
|
logCounts[removedLevel]--;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
stream.removeChild(removed);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatTimestamp(timestamp) {
|
||
|
|
if (!timestamp) return '--';
|
||
|
|
const date = new Date(timestamp);
|
||
|
|
return date.toISOString().replace('T', ' ').slice(0, 23);
|
||
|
|
}
|
||
|
|
|
||
|
|
function escapeHtml(text) {
|
||
|
|
const div = document.createElement('div');
|
||
|
|
div.textContent = text;
|
||
|
|
return div.innerHTML;
|
||
|
|
}
|
||
|
|
|
||
|
|
function matchesFilters(entry) {
|
||
|
|
// Level filter
|
||
|
|
if (currentFilters.level !== 'all' && entry.dataset.level !== currentFilters.level) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Service filter
|
||
|
|
if (currentFilters.service !== 'all' && entry.dataset.service !== currentFilters.service) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Search filter
|
||
|
|
if (currentFilters.search) {
|
||
|
|
const text = entry.textContent.toLowerCase();
|
||
|
|
if (!text.includes(currentFilters.search.toLowerCase())) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function applyFilters() {
|
||
|
|
currentFilters.level = document.getElementById('log-level-filter').value;
|
||
|
|
currentFilters.service = document.getElementById('service-filter').value;
|
||
|
|
|
||
|
|
const entries = document.querySelectorAll('.log-entry');
|
||
|
|
entries.forEach(entry => {
|
||
|
|
if (matchesFilters(entry)) {
|
||
|
|
entry.classList.remove('hidden');
|
||
|
|
} else {
|
||
|
|
entry.classList.add('hidden');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function debounceSearch(value) {
|
||
|
|
clearTimeout(searchDebounceTimer);
|
||
|
|
searchDebounceTimer = setTimeout(() => {
|
||
|
|
currentFilters.search = value;
|
||
|
|
applyFilters();
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleStream() {
|
||
|
|
isStreaming = !isStreaming;
|
||
|
|
const btn = document.getElementById('stream-toggle');
|
||
|
|
|
||
|
|
if (isStreaming) {
|
||
|
|
btn.classList.remove('paused');
|
||
|
|
btn.innerHTML = `
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="6" y="4" width="4" height="16"></rect>
|
||
|
|
<rect x="14" y="4" width="4" height="16"></rect>
|
||
|
|
</svg>
|
||
|
|
<span>Pause</span>
|
||
|
|
`;
|
||
|
|
} else {
|
||
|
|
btn.classList.add('paused');
|
||
|
|
btn.innerHTML = `
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||
|
|
</svg>
|
||
|
|
<span>Resume</span>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearLogs() {
|
||
|
|
if (confirm('Are you sure you want to clear all logs?')) {
|
||
|
|
const stream = document.getElementById('log-stream');
|
||
|
|
stream.innerHTML = `
|
||
|
|
<div class="log-placeholder">
|
||
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
||
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||
|
|
<polyline points="10 9 9 9 8 9"></polyline>
|
||
|
|
</svg>
|
||
|
|
<p>Logs cleared</p>
|
||
|
|
<span class="placeholder-hint">New logs will appear here</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
// Reset counts
|
||
|
|
logCounts = { debug: 0, info: 0, warn: 0, error: 0, fatal: 0 };
|
||
|
|
Object.keys(logCounts).forEach(level => {
|
||
|
|
document.getElementById(`${level}-count`).textContent = '0';
|
||
|
|
});
|
||
|
|
document.getElementById('total-count').textContent = '0';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function downloadLogs() {
|
||
|
|
const entries = document.querySelectorAll('.log-entry');
|
||
|
|
let logs = [];
|
||
|
|
|
||
|
|
entries.forEach(entry => {
|
||
|
|
if (entry._logData) {
|
||
|
|
logs.push(entry._logData);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const blob = new Blob([JSON.stringify(logs, null, 2)], { type: 'application/json' });
|
||
|
|
const url = URL.createObjectURL(blob);
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.href = url;
|
||
|
|
a.download = `logs-${new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-')}.json`;
|
||
|
|
document.body.appendChild(a);
|
||
|
|
a.click();
|
||
|
|
document.body.removeChild(a);
|
||
|
|
URL.revokeObjectURL(url);
|
||
|
|
}
|
||
|
|
|
||
|
|
function scrollToTop() {
|
||
|
|
const stream = document.getElementById('log-stream');
|
||
|
|
stream.scrollTop = 0;
|
||
|
|
autoScroll = false;
|
||
|
|
updateScrollButtons();
|
||
|
|
}
|
||
|
|
|
||
|
|
function scrollToBottom() {
|
||
|
|
const stream = document.getElementById('log-stream');
|
||
|
|
stream.scrollTop = stream.scrollHeight;
|
||
|
|
autoScroll = true;
|
||
|
|
updateScrollButtons();
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateScrollButtons() {
|
||
|
|
document.getElementById('scroll-top-btn').classList.toggle('active', !autoScroll);
|
||
|
|
document.getElementById('scroll-bottom-btn').classList.toggle('active', autoScroll);
|
||
|
|
}
|
||
|
|
|
||
|
|
function expandLog(btn) {
|
||
|
|
const entry = btn.closest('.log-entry');
|
||
|
|
const logData = entry._logData || {
|
||
|
|
timestamp: entry.querySelector('.log-timestamp').textContent,
|
||
|
|
level: entry.dataset.level,
|
||
|
|
service: entry.dataset.service,
|
||
|
|
message: entry.querySelector('.log-message').textContent
|
||
|
|
};
|
||
|
|
|
||
|
|
const panel = document.getElementById('log-detail-panel');
|
||
|
|
const content = document.getElementById('log-detail-content');
|
||
|
|
|
||
|
|
content.innerHTML = `
|
||
|
|
<div class="detail-section">
|
||
|
|
<div class="detail-label">Timestamp</div>
|
||
|
|
<div class="detail-value">${logData.timestamp || '--'}</div>
|
||
|
|
</div>
|
||
|
|
<div class="detail-section">
|
||
|
|
<div class="detail-label">Level</div>
|
||
|
|
<div class="detail-value">${(logData.level || 'info').toUpperCase()}</div>
|
||
|
|
</div>
|
||
|
|
<div class="detail-section">
|
||
|
|
<div class="detail-label">Service</div>
|
||
|
|
<div class="detail-value">${logData.service || 'unknown'}</div>
|
||
|
|
</div>
|
||
|
|
<div class="detail-section">
|
||
|
|
<div class="detail-label">Message</div>
|
||
|
|
<div class="detail-value">${escapeHtml(logData.message || '')}</div>
|
||
|
|
</div>
|
||
|
|
${logData.stack ? `
|
||
|
|
<div class="detail-section">
|
||
|
|
<div class="detail-label">Stack Trace</div>
|
||
|
|
<div class="detail-value">${escapeHtml(logData.stack)}</div>
|
||
|
|
</div>
|
||
|
|
` : ''}
|
||
|
|
${logData.context ? `
|
||
|
|
<div class="detail-section">
|
||
|
|
<div class="detail-label">Context</div>
|
||
|
|
<div class="detail-value">${escapeHtml(JSON.stringify(logData.context, null, 2))}</div>
|
||
|
|
</div>
|
||
|
|
` : ''}
|
||
|
|
`;
|
||
|
|
|
||
|
|
panel.classList.add('open');
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeLogDetail() {
|
||
|
|
document.getElementById('log-detail-panel').classList.remove('open');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Detect scroll position for auto-scroll toggle
|
||
|
|
document.getElementById('log-stream').addEventListener('scroll', function() {
|
||
|
|
const stream = this;
|
||
|
|
const isAtBottom = stream.scrollHeight - stream.scrollTop - stream.clientHeight < 50;
|
||
|
|
|
||
|
|
if (!isAtBottom && autoScroll) {
|
||
|
|
autoScroll = false;
|
||
|
|
updateScrollButtons();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialize
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
initWebSocket();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Close detail panel on escape
|
||
|
|
document.addEventListener('keydown', function(e) {
|
||
|
|
if (e.key === 'Escape') {
|
||
|
|
closeLogDetail();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Click on stat item to filter by level
|
||
|
|
document.querySelectorAll('.stat-item[data-level]').forEach(item => {
|
||
|
|
item.addEventListener('click', function() {
|
||
|
|
const level = this.dataset.level;
|
||
|
|
const select = document.getElementById('log-level-filter');
|
||
|
|
select.value = select.value === level ? 'all' : level;
|
||
|
|
applyFilters();
|
||
|
|
|
||
|
|
// Visual feedback
|
||
|
|
document.querySelectorAll('.stat-item[data-level]').forEach(i => i.classList.remove('active'));
|
||
|
|
if (select.value !== 'all') {
|
||
|
|
this.classList.add('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|