botui/ui/suite/monitoring/logs.html

<!-- Logs partial -->
<link rel="stylesheet" href="/static/suite/monitoring/logs.css">
<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="applyLogFilters()">
                    <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="applyLogFilters()"
                        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="debounceLogSearch(this.value)">
                </div>
            </div>
            <div class="filter-group">
                <label for="time-filter">Time Range</label>
                <select id="time-filter" onchange="applyLogFilters()">
                    <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>
            </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">
            <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 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>

<script src="/static/suite/monitoring/logs.js"></script>