Guwan
/
yl-backend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: [日志管理simple]

This commit is contained in:
ovo 2025-03-30 22:18:26 +08:00
parent 80275af210
commit bc26f13802
1 changed files with 101 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/main/resources/static/log-viewer.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>日志查看器</title>
<link rel="icon" href="data:,">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@ -109,6 +110,25 @@
min-width: 60px;
text-align: center;
}
.log-message {
margin-bottom: 15px;
padding: 10px;
background: #fff;
border-radius: 4px;
border-left: 4px solid #2196f3;
white-space: pre-wrap;
word-break: break-word;
}
.error-message {
color: #721c24;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
</style>
</head>
<body>
@ -131,14 +151,13 @@
<template id="logTemplate">
<div class="log-container">
<div class="log-header">
<h1 class="log-title">日志详情</h1>
<div class="log-meta">
<div class="meta-item">
<span class="meta-label">时间戳:</span>
<span class="meta-label">时间:</span>
<span class="meta-value timestamp"></span>
</div>
<div class="meta-item">
<span class="meta-label">日志级别:</span>
<span class="meta-label">级别:</span>
<span class="meta-value">
<span class="level"></span>
</span>
@ -163,31 +182,79 @@
let currentPage = 1;
async function loadLogs() {
const pageSize = document.getElementById('pageSize').value;
const response = await fetch(`/api/common/logs?page=${currentPage}&size=${pageSize}`);
const result = await response.json();
const container = document.getElementById('logsContainer');
container.innerHTML = '';
result.records.forEach(log => {
const template = document.getElementById('logTemplate');
const logElement = template.content.cloneNode(true);
try {
const pageSize = document.getElementById('pageSize').value;
const response = await fetch(`/api/common/logs?page=${currentPage}&size=${pageSize}`);
// 填充基础信息
logElement.querySelector('.timestamp').textContent = log.timestamp;
logElement.querySelector('.level').textContent = log.level;
logElement.querySelector('.level').classList.add(`level-${log.level}`);
logElement.querySelector('.thread-name').textContent = log.threadName;
logElement.querySelector('.logger-name').textContent = log.loggerName;
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 填充JSON数据
logElement.querySelector('.json-viewer').innerHTML = formatJSON(log);
const result = await response.json();
console.log('API Response:', result);
container.appendChild(logElement);
});
updatePageInfo(result.current, result.pages);
if (!result) {
throw new Error('No data received from server');
}
const container = document.getElementById('logsContainer');
container.innerHTML = '';
// 确保 result.list 存在且是数组
const logs = Array.isArray(result.list) ? result.list : [];
if (logs.length === 0) {
container.innerHTML = '<div class="log-container"><p>没有找到日志数据</p></div>';
return;
}
logs.forEach(log => {
if (!log) return; // 跳过空记录
const template = document.getElementById('logTemplate');
const logElement = template.content.cloneNode(true);
try {
// 填充基础信息
const timestamp = log['@timestamp'] ? new Date(log['@timestamp']).toLocaleString() : 'N/A';
logElement.querySelector('.timestamp').textContent = timestamp;
const level = log.level || 'UNKNOWN';
logElement.querySelector('.level').textContent = level;
logElement.querySelector('.level').classList.add(`level-${level.toLowerCase()}`);
logElement.querySelector('.thread-name').textContent = log.threadName || 'N/A';
logElement.querySelector('.logger-name').textContent = log.loggerName || 'N/A';
// 填充消息内容
const messageElement = document.createElement('div');
messageElement.className = 'log-message';
messageElement.textContent = log.message || '';
logElement.querySelector('.log-body').insertBefore(messageElement, logElement.querySelector('.json-viewer'));
// 填充JSON数据
logElement.querySelector('.json-viewer').innerHTML = formatJSON(log);
container.appendChild(logElement);
} catch (err) {
console.error('Error processing log:', err, log);
}
});
// 更新分页信息
const pageNum = result.pageNum || 1;
const pages = result.pages || 1;
updatePageInfo(pageNum, pages);
} catch (err) {
console.error('Error loading logs:', err);
const errorMessage = err.message.includes('401')
? '访问未授权，请检查权限配置'
: `加载日志时发生错误: ${err.message}`;
document.getElementById('logsContainer').innerHTML =
`<div class="log-container"><p class="error-message">${errorMessage}</p></div>`;
}
}
function prevPage() {
@ -198,14 +265,19 @@
}
function nextPage() {
currentPage++;
loadLogs();
if (currentPage < totalPages) {
currentPage++;
loadLogs();
}
}
function updatePageInfo(current, total) {
document.getElementById('pageInfo').textContent = `第${current}页/共${total}页`;
totalPages = total;
}
let totalPages = 1;
// 格式化JSON显示
function formatJSON(obj, indent = 0) {
const space = ' '.repeat(indent);
@ -216,6 +288,8 @@
html += isArray ? '[\n' : '{\n';
Object.entries(obj).forEach(([key, value], index, array) => {
if (value === null || value === undefined) return;
html += space + ' ';
if (!isArray) {
html += `<span class="json-key">"${key}"</span>: `;