TestLogs/LTEMvcApp/Views/Home/Logs.cshtml

@{
    ViewData["Title"] = "实时日志";
}
<style>
    /* 页面布局 */
    .log-container {
        display: flex;
        height: calc(100vh - 120px);
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    }

    /* 左侧日志列表 */
    .log-list-panel {
        flex: 0 0 65%;
        border-right: 2px solid #ddd;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* 防止内部元素溢出 */
    }

    #log-scroll-area {
        flex-grow: 1;
        overflow-y: auto;
    }

    #log-content-area {
        width: 100%;
    }

    .log-item {
        padding: 6px 10px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
    }

    .log-item:hover {
        background-color: #e8f4ff;
    }
    .log-item.selected {
        background-color: #cce7ff;
        font-weight: bold;
    }

    .log-item > span {
        text-overflow: ellipsis;
        overflow: hidden;
        padding-right: 15px;
    }
    .log-timestamp { flex-basis: 18%; }
    .log-layer { flex-basis: 10%; }
    .log-direction { flex-basis: 8%; }
    .log-message { flex-basis: 24%; }
    .log-info { flex-basis: 40%; }

    /* 右侧日志详情 */
    .log-detail-panel {
        flex-grow: 1;
        padding: 0 20px;
        overflow-y: auto;
    }
    
    .log-detail-panel h4 {
        margin-top: 10px;
        border-bottom: 2px solid #007bff;
        padding-bottom: 5px;
        color: #0056b3;
    }

    .detail-item {
        margin-bottom: 12px;
    }

    .detail-item-label {
        font-weight: bold;
        color: #333;
    }

    .detail-item-value {
        background-color: #f7f7f7;
        padding: 8px;
        border-radius: 4px;
        word-break: break-all;
        white-space: pre-wrap;
        margin-top: 4px;
    }

    #detail-placeholder {
        color: #999;
        text-align: center;
        padding-top: 50px;
        font-size: 1.2em;
    }

    /* 状态栏 */
    .status-bar {
        padding: 8px 10px;
        background-color: #f8f9fa;
        border-top: 1px solid #ddd;
        font-size: 0.9em;
        color: #666;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 连接状态指示器 */
    .connection-status {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .status-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
    }

    .status-connected {
        background-color: #28a745;
        animation: pulse 2s infinite;
    }

    .status-connecting {
        background-color: #ffc107;
        animation: pulse 1s infinite;
    }

    .status-disconnected {
        background-color: #dc3545;
    }

    .status-error {
        background-color: #dc3545;
        animation: blink 1s infinite;
    }

    @@keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }

    @@keyframes blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0.3; }
    }

    /* 控制按钮 */
    .control-buttons {
        display: flex;
        gap: 8px;
    }

    .btn-small {
        padding: 4px 8px;
        font-size: 0.8em;
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-small:hover {
        background-color: #f8f9fa;
        border-color: #007bff;
    }

    .btn-small:active {
        background-color: #e9ecef;
    }

    /* 错误提示 */
    .error-message {
        background-color: #f8d7da;
        color: #721c24;
        padding: 8px 12px;
        border: 1px solid #f5c6cb;
        border-radius: 4px;
        margin-bottom: 10px;
        display: none;
    }

    /* 信息提示 */
    .info-message {
        background-color: #d1ecf1;
        color: #0c5460;
        padding: 8px 12px;
        border: 1px solid #bee5eb;
        border-radius: 4px;
        margin-bottom: 10px;
        display: none;
    }
</style>

<div class="log-container">
    <div class="log-list-panel">
        <!-- 状态提示区域 -->
        <div id="error-message" class="error-message"></div>
        <div id="info-message" class="info-message"></div>
        
        <div id="log-scroll-area">
            <div id="log-content-area"></div>
        </div>
        <div class="status-bar">
            <div>
                总日志条数: <span id="total-logs">0</span>
                <span id="new-logs-count" style="color: #28a745; margin-left: 10px;"></span>
            </div>
            <div class="connection-status">
                <span class="status-indicator" id="status-indicator"></span>
                <span id="status-text">连接中...</span>
                <div class="control-buttons">
                    <button class="btn-small" id="clear-logs-btn" title="清空日志">清空</button>
                    <button class="btn-small" id="reset-logs-btn" title="重置日志">重置</button>
                    <button class="btn-small" id="add-test-data-btn" title="添加测试数据">测试</button>
                    <button class="btn-small" id="reconnect-btn" title="重新连接">重连</button>
                </div>
            </div>
        </div>
    </div>
    <div class="log-detail-panel">
        <div id="detail-placeholder">
            <p>请从左侧选择一条日志以查看详情</p>
        </div>
        <div id="detail-content" class="d-none">
            <h4>日志详情</h4>
            <!-- 详情将在这里动态生成 -->
        </div>
    </div>
</div>

@section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.css" />
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const scrollArea = document.getElementById('log-scroll-area');
        const contentArea = document.getElementById('log-content-area');
        const totalLogsEl = document.getElementById('total-logs');
        const newLogsCountEl = document.getElementById('new-logs-count');
        const detailPlaceholder = document.getElementById('detail-placeholder');
        const detailContent = document.getElementById('detail-content');
        const statusIndicator = document.getElementById('status-indicator');
        const statusText = document.getElementById('status-text');
        const errorMessage = document.getElementById('error-message');
        const infoMessage = document.getElementById('info-message');
        const clearLogsBtn = document.getElementById('clear-logs-btn');
        const resetLogsBtn = document.getElementById('reset-logs-btn');
        const addTestDataBtn = document.getElementById('add-test-data-btn');
        const reconnectBtn = document.getElementById('reconnect-btn');

        let allLogsData = [];
        let eventSource = null;
        let reconnectAttempts = 0;
        const maxReconnectAttempts = 5;
        const reconnectDelay = 3000; // 3秒

        let clusterize = new Clusterize({
            rows: [],
            scrollId: 'log-scroll-area',
            contentId: 'log-content-area',
            tag: 'div',
            rows_in_block: 50,
            blocks_in_cluster: 4
        });

        // 更新连接状态
        function updateConnectionStatus(status, text) {
            statusIndicator.className = 'status-indicator status-' + status;
            statusText.textContent = text;
        }

        // 显示错误消息
        function showError(message) {
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
            setTimeout(() => {
                errorMessage.style.display = 'none';
            }, 5000);
        }

        // 显示信息消息
        function showInfo(message) {
            infoMessage.textContent = message;
            infoMessage.style.display = 'block';
            setTimeout(() => {
                infoMessage.style.display = 'none';
            }, 3000);
        }

        // 清空日志显示
        function clearLogsDisplay() {
            allLogsData = [];
            clusterize.clear();
            totalLogsEl.textContent = '0';
            newLogsCountEl.textContent = '';
            detailPlaceholder.classList.remove('d-none');
            detailContent.classList.add('d-none');
        }

        // 美化方向
        function formatDirection(dir) {
            return dir === 0 ? "Uplink" : "Downlink";
        }
        
        // 格式化日志条目为 HTML 字符串
        function formatLogItem(log, index) {
            let timestamp = 'Invalid Date';
            if (log && log.timestamp) {
                const date = new Date(log.timestamp);
                // 验证创建的日期对象是否有效
                if (date instanceof Date && !isNaN(date)) {
                    timestamp = date.toISOString();
                } else {
                    console.warn(`Could not parse timestamp: ${log.timestamp} for log:`, log);
                }
            } else {
                console.warn('Timestamp is missing for log:', log);
            }
            
            return `<div class="log-item" data-index="${index}">
                        <span class="log-timestamp" title="${timestamp}">${timestamp}</span>
                        <span class="log-layer" title="${log.layer || ''}">${log.layer || ''}</span>
                        <span class="log-direction" title="${formatDirection(log.direction)}">${formatDirection(log.direction)}</span>
                        <span class="log-message" title="${log.message || ''}">${log.message || ''}</span>
                        <span class="log-info" title="${log.info || ''}">${log.info || ''}</span>
                    </div>`;
        }

        // 更新日志列表
        function updateLogList(logs, prepend = false) {
            if (!logs || logs.length === 0) return;
            
            const newRows = logs.map((log, i) => formatLogItem(log, allLogsData.length + i));
            
            if (prepend) {
                 clusterize.prepend(newRows);
            } else {
                 clusterize.append(newRows);
            }
            allLogsData.push(...logs);
            totalLogsEl.textContent = allLogsData.length;
            
            // 显示新日志数量
            if (!prepend) {
                newLogsCountEl.textContent = `+${logs.length}`;
                setTimeout(() => {
                    newLogsCountEl.textContent = '';
                }, 2000);
            }
        }

        // 显示日志详情
        function showLogDetail(index) {
            const log = allLogsData[index];
            if (!log) return;
            
            detailPlaceholder.classList.add('d-none');
            
            let timestamp = 'Invalid Date';
            if (log && log.timestamp) {
                const date = new Date(log.timestamp);
                // 验证创建的日期对象是否有效
                if (date instanceof Date && !isNaN(date)) {
                    timestamp = date.toISOString();
                } else {
                    console.warn(`Could not parse timestamp in detail view: ${log.timestamp} for log:`, log);
                }
            } else {
                console.warn('Timestamp is missing for log detail:', log);
            }

            const detailHtml = `
                <div class="detail-item">
                    <div class="detail-item-label">Timestamp</div>
                    <div class="detail-item-value">${timestamp}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-item-label">Layer</div>
                    <div class="detail-item-value">${log.layer || 'N/A'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-item-label">Direction</div>
                    <div class="detail-item-value">${formatDirection(log.direction)} (${log.direction})</div>
                </div>
                <div class="detail-item">
                    <div class="detail-item-label">UeId</div>
                    <div class="detail-item-value">${log.ueId || 'N/A'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-item-label">Rnti</div>
                    <div class="detail-item-value">${log.rnti || 'N/A'}</div>
                </div>
                 <div class="detail-item">
                    <div class="detail-item-label">Client</div>
                    <div class="detail-item-value">${log.client || 'N/A'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-item-label">Message</div>
                    <div class="detail-item-value">${log.message || ''}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-item-label">Info</div>
                    <div class="detail-item-value">${log.info || ''}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-item-label">Data</div>
                    <div class="detail-item-value">${log.data || 'N/A'}</div>
                </div>
            `;
            
            detailContent.innerHTML = '<h4>日志详情</h4>' + detailHtml;
            detailContent.classList.remove('d-none');
        }

        // 建立SSE连接
        function connectSSE() {
            if (eventSource) {
                eventSource.close();
            }

            updateConnectionStatus('connecting', '连接中...');
            
            eventSource = new EventSource('/api/websocket/logs/stream');

            eventSource.addEventListener('connected', function(event) {
                console.log("SSE连接已建立");
                updateConnectionStatus('connected', '已连接');
                showInfo('日志流连接已建立');
                reconnectAttempts = 0; // 重置重连计数
            });

            eventSource.addEventListener('history', function(event) {
                console.log("接收到历史日志...", event.data);
                try {
                    const data = JSON.parse(event.data);
                    console.log("历史日志数据:", data);
                    if (data.logs && Array.isArray(data.logs)) {
                        updateLogList(data.logs);
                        showInfo(`加载了 ${data.logs.length} 条历史日志`);
                    } else {
                        console.warn("历史日志数据格式不正确:", data);
                        showError("历史日志数据格式不正确");
                    }
                } catch (error) {
                    console.error("解析历史日志数据失败:", error);
                    showError("解析历史日志数据失败: " + error.message);
                }
            });

            eventSource.addEventListener('new_logs', function(event) {
                console.log("接收到新日志...", event.data);
                try {
                    const data = JSON.parse(event.data);
                    console.log("新日志数据:", data);
                    if (data.logs && Array.isArray(data.logs)) {
                        updateLogList(data.logs);
                    } else {
                        console.warn("新日志数据格式不正确:", data);
                    }
                } catch (error) {
                    console.error("解析新日志数据失败:", error);
                    showError("解析新日志数据失败: " + error.message);
                }
            });

            eventSource.addEventListener('reset', function(event) {
                console.log("日志缓存已重置");
                try {
                    const data = JSON.parse(event.data);
                    clearLogsDisplay();
                    showInfo('日志缓存已重置');
                } catch (error) {
                    console.error("解析重置事件数据失败:", error);
                }
            });

            eventSource.addEventListener('error', function(event) {
                console.log("接收到错误事件");
                try {
                    const data = JSON.parse(event.data);
                    updateConnectionStatus('error', '连接错误');
                    showError(`连接错误: ${data.message}`);
                } catch (error) {
                    console.error("解析错误事件数据失败:", error);
                }
            });

            eventSource.addEventListener('disconnected', function(event) {
                console.log("连接已断开");
                updateConnectionStatus('disconnected', '已断开');
                showInfo('日志流连接已断开');
            });

            eventSource.addEventListener('fatal_error', function(event) {
                console.error("致命错误");
                try {
                    const data = JSON.parse(event.data);
                    updateConnectionStatus('error', '服务器错误');
                    showError(`服务器错误: ${data.message}`);
                } catch (error) {
                    console.error("解析致命错误数据失败:", error);
                }
            });

            eventSource.onerror = function (err) {
                console.error("SSE 错误:", err);
                updateConnectionStatus('error', '连接失败');
                
                // 自动重连
                if (reconnectAttempts < maxReconnectAttempts) {
                    reconnectAttempts++;
                    showError(`连接失败，${reconnectDelay/1000}秒后重试 (${reconnectAttempts}/${maxReconnectAttempts})`);
                    setTimeout(connectSSE, reconnectDelay);
                } else {
                    showError('连接失败，已达到最大重试次数');
                    updateConnectionStatus('disconnected', '连接失败');
                }
            };
        }

        // 事件委托处理点击事件
        contentArea.addEventListener('click', function(e) {
            const item = e.target.closest('.log-item');
            if (item) {
                // 移除之前选中的
                const selected = contentArea.querySelector('.log-item.selected');
                if (selected) {
                    selected.classList.remove('selected');
                }
                // 添加选中样式
                item.classList.add('selected');
                
                const index = parseInt(item.dataset.index, 10);
                showLogDetail(index);
            }
        });

        // 控制按钮事件
        clearLogsBtn.addEventListener('click', function() {
            if (confirm('确定要清空所有日志吗？')) {
                fetch('/api/websocket/logs/clear', { method: 'POST' })
                    .then(response => response.json())
                    .then(data => {
                        if (data.message) {
                            showInfo(data.message);
                            clearLogsDisplay();
                        }
                    })
                    .catch(error => {
                        showError('清空日志失败: ' + error.message);
                    });
            }
        });

        resetLogsBtn.addEventListener('click', function() {
            if (confirm('确定要重置日志缓存吗？')) {
                fetch('/api/websocket/logs/reset', { method: 'POST' })
                    .then(response => response.json())
                    .then(data => {
                        if (data.message) {
                            showInfo(data.message);
                            clearLogsDisplay();
                        }
                    })
                    .catch(error => {
                        showError('重置日志失败: ' + error.message);
                    });
            }
        });

        addTestDataBtn.addEventListener('click', function() {
            fetch('/api/websocket/logs/add-test-data', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.message) {
                        showInfo(data.message);
                    }
                })
                .catch(error => {
                    showError('添加测试数据失败: ' + error.message);
                });
        });

        reconnectBtn.addEventListener('click', function() {
            reconnectAttempts = 0; // 重置重连计数
            connectSSE();
        });

        // 初始化连接
        connectSSE();
    });
</script>
}