393 lines
14 KiB
JavaScript
393 lines
14 KiB
JavaScript
/**
|
||
* 系统监控服务
|
||
* 处理系统性能指标获取和展示
|
||
*/
|
||
|
||
// 日志自动刷新相关变量
|
||
let logRefreshTimer = null;
|
||
let logCountdownTimer = null;
|
||
let logCurrentInterval = 10;
|
||
let logFullContent = '';
|
||
|
||
// 设置自动刷新间隔
|
||
function setRefreshInterval() {
|
||
const select = document.getElementById('logRefreshInterval');
|
||
const countdownEl = document.getElementById('logRefreshCountdown');
|
||
const secondsEl = document.getElementById('countdownNumber');
|
||
|
||
if (!select) return;
|
||
|
||
logCurrentInterval = parseInt(select.value) || 10;
|
||
|
||
// 清除之前的定时器
|
||
if (logRefreshTimer) {
|
||
clearInterval(logRefreshTimer);
|
||
logRefreshTimer = null;
|
||
}
|
||
if (logCountdownTimer) {
|
||
clearInterval(logCountdownTimer);
|
||
logCountdownTimer = null;
|
||
}
|
||
|
||
// 如果选择关闭，不显示倒计时
|
||
if (select.value === '0') {
|
||
countdownEl.classList.add('hidden');
|
||
return;
|
||
}
|
||
|
||
// 显示倒计时
|
||
countdownEl.classList.remove('hidden');
|
||
secondsEl.textContent = logCurrentInterval;
|
||
|
||
// 启动倒计时
|
||
let countdown = logCurrentInterval;
|
||
logCountdownTimer = setInterval(() => {
|
||
countdown--;
|
||
if (countdown <= 0) {
|
||
countdown = logCurrentInterval;
|
||
}
|
||
secondsEl.textContent = countdown;
|
||
}, 1000);
|
||
|
||
// 启动自动刷新
|
||
logRefreshTimer = setInterval(() => {
|
||
if (typeof refreshLogs === 'function') {
|
||
refreshLogs();
|
||
}
|
||
}, logCurrentInterval * 1000);
|
||
}
|
||
|
||
// 获取系统性能监控数据
|
||
async function fetchSystemMetrics() {
|
||
try {
|
||
const response = await fetch(`${window.API_BASE}/health`);
|
||
const result = await response.json();
|
||
if (result.code === 0 && result.data) {
|
||
const data = result.data;
|
||
// 更新CPU使用率
|
||
const cpuEl = document.getElementById('cpuUsage');
|
||
if (cpuEl && data.cpu_percent !== undefined) {
|
||
cpuEl.textContent = data.cpu_percent;
|
||
cpuEl.className = data.cpu_percent > 80 ? 'text-red-500 font-medium' : '';
|
||
}
|
||
// 更新内存使用率
|
||
const memEl = document.getElementById('memUsage');
|
||
if (memEl && data.memory_percent !== undefined) {
|
||
memEl.textContent = data.memory_percent;
|
||
memEl.className = data.memory_percent > 80 ? 'text-red-500 font-medium' : '';
|
||
}
|
||
// 更新磁盘使用率
|
||
const diskEl = document.getElementById('diskUsage');
|
||
if (diskEl && data.disk_percent !== undefined) {
|
||
diskEl.textContent = data.disk_percent;
|
||
diskEl.className = data.disk_percent > 80 ? 'text-red-500 font-medium' : '';
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取系统监控数据失败:', error);
|
||
}
|
||
}
|
||
|
||
// 停止日志自动刷新（离开页面时调用）
|
||
function stopLogAutoRefresh() {
|
||
if (logRefreshTimer) {
|
||
clearInterval(logRefreshTimer);
|
||
logRefreshTimer = null;
|
||
}
|
||
if (logCountdownTimer) {
|
||
clearInterval(logCountdownTimer);
|
||
logCountdownTimer = null;
|
||
}
|
||
}
|
||
|
||
// 刷新日志
|
||
function refreshLogs() {
|
||
if (typeof switchLogTab === 'function') {
|
||
const currentLogTab = window.currentLogTab || 'system';
|
||
if (currentLogTab === 'system') {
|
||
if (typeof loadLogFiles === 'function' && document.getElementById('logTypeSelect')?.value) {
|
||
loadSelectedLog();
|
||
} else {
|
||
loadLogFiles();
|
||
}
|
||
} else {
|
||
loadTrainingLogFiles();
|
||
}
|
||
} else {
|
||
loadLogFiles();
|
||
}
|
||
// 重置倒计时
|
||
const select = document.getElementById('logRefreshInterval');
|
||
const secondsEl = document.getElementById('countdownNumber');
|
||
if (select && select.value !== '0' && secondsEl) {
|
||
secondsEl.textContent = logCurrentInterval;
|
||
}
|
||
}
|
||
|
||
// 滚动到日志底部
|
||
function scrollToLogBottom() {
|
||
const logContent = document.getElementById('logContent');
|
||
if (logContent) {
|
||
logContent.scrollTop = logContent.scrollHeight;
|
||
}
|
||
}
|
||
|
||
// 当前日志类型：system 或 training
|
||
window.currentLogTab = 'system';
|
||
|
||
// 切换日志类型标签
|
||
function switchLogTab(tab) {
|
||
window.currentLogTab = tab;
|
||
const systemTab = document.getElementById('logTabSystem');
|
||
const trainingTab = document.getElementById('logTabTraining');
|
||
const systemOptions = document.getElementById('systemLogOptions');
|
||
const trainingOptions = document.getElementById('trainingLogOptions');
|
||
|
||
if (tab === 'system') {
|
||
systemTab.className = 'px-4 py-1.5 text-sm rounded-md transition-colors bg-white shadow-sm text-primary';
|
||
trainingTab.className = 'px-4 py-1.5 text-sm rounded-md transition-colors text-gray-600 hover:text-gray-800';
|
||
systemOptions.classList.remove('hidden');
|
||
trainingOptions.classList.add('hidden');
|
||
loadLogFiles();
|
||
} else {
|
||
trainingTab.className = 'px-4 py-1.5 text-sm rounded-md transition-colors bg-white shadow-sm text-primary';
|
||
systemTab.className = 'px-4 py-1.5 text-sm rounded-md transition-colors text-gray-600 hover:text-gray-800';
|
||
trainingOptions.classList.remove('hidden');
|
||
systemOptions.classList.add('hidden');
|
||
loadTrainingLogFiles();
|
||
}
|
||
}
|
||
|
||
// 初始化日志查看器
|
||
function initLogViewer() {
|
||
const datePicker = document.getElementById('logDatePicker');
|
||
if (datePicker) {
|
||
const today = new Date().toISOString().split('T')[0];
|
||
datePicker.value = today;
|
||
}
|
||
// 加载默认日志类型
|
||
loadLogFiles();
|
||
// 启动自动刷新
|
||
setRefreshInterval();
|
||
}
|
||
|
||
// 加载训练日志文件列表
|
||
async function loadTrainingLogFiles() {
|
||
const logSelect = document.getElementById('trainingLogSelect');
|
||
if (!logSelect) return;
|
||
|
||
logSelect.innerHTML = '<option value="">加载中...</option>';
|
||
|
||
try {
|
||
const response = await fetch(`${window.API_BASE}/training-log-files`);
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && result.data) {
|
||
logSelect.innerHTML = '<option value="">请选择训练日志</option>';
|
||
result.data.forEach(log => {
|
||
const option = document.createElement('option');
|
||
option.value = log.file;
|
||
option.textContent = `${log.name} (PID: ${log.pid}, ${log.date}, ${log.size})`;
|
||
logSelect.appendChild(option);
|
||
});
|
||
// 如果有日志文件，自动加载第一个
|
||
if (result.data.length > 0) {
|
||
logSelect.value = result.data[0].file;
|
||
loadSelectedTrainingLog();
|
||
} else {
|
||
document.getElementById('logContent').textContent = '暂无训练日志';
|
||
document.getElementById('logFileInfo').textContent = '无训练日志';
|
||
}
|
||
} else {
|
||
logSelect.innerHTML = '<option value="">暂无训练日志</option>';
|
||
document.getElementById('logContent').textContent = '暂无训练日志';
|
||
document.getElementById('logFileInfo').textContent = '无训练日志';
|
||
}
|
||
} catch (error) {
|
||
console.error('加载训练日志列表失败:', error);
|
||
logSelect.innerHTML = '<option value="">加载失败</option>';
|
||
document.getElementById('logContent').textContent = '加载训练日志列表失败: ' + error.message;
|
||
}
|
||
}
|
||
|
||
// 加载选中的训练日志
|
||
async function loadSelectedTrainingLog() {
|
||
const logSelect = document.getElementById('trainingLogSelect');
|
||
const logFile = logSelect.value;
|
||
const logContent = document.getElementById('logContent');
|
||
const logFileInfo = document.getElementById('logFileInfo');
|
||
|
||
if (!logFile) {
|
||
logContent.textContent = '请选择训练日志';
|
||
logFileInfo.textContent = '无训练日志';
|
||
return;
|
||
}
|
||
|
||
logContent.textContent = '加载中...';
|
||
logFileInfo.textContent = '加载中...';
|
||
|
||
try {
|
||
const response = await fetch(`${window.API_BASE}/training-log-content?file=${encodeURIComponent(logFile)}`);
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && result.data) {
|
||
logFullContent = result.data.content || '';
|
||
logContent.textContent = logFullContent || '(空日志)';
|
||
logFileInfo.textContent = result.data.file + ' (' + result.data.size + ')';
|
||
// 清空搜索
|
||
document.getElementById('logSearchInput').value = '';
|
||
document.getElementById('logMatchCount').textContent = '';
|
||
// 滚动到底部
|
||
scrollToLogBottom();
|
||
} else {
|
||
logContent.textContent = '加载失败: ' + (result.message || '未知错误');
|
||
logFileInfo.textContent = '加载失败';
|
||
}
|
||
} catch (error) {
|
||
console.error('加载训练日志内容失败:', error);
|
||
logContent.textContent = '加载失败: ' + error.message;
|
||
logFileInfo.textContent = '加载失败';
|
||
}
|
||
}
|
||
|
||
// 加载日志文件列表
|
||
async function loadLogFiles() {
|
||
const datePicker = document.getElementById('logDatePicker');
|
||
const logTypeSelect = document.getElementById('logTypeSelect');
|
||
const selectedDate = datePicker ? datePicker.value : new Date().toISOString().split('T')[0];
|
||
|
||
if (!logTypeSelect) return;
|
||
logTypeSelect.innerHTML = '<option value="">加载中...</option>';
|
||
|
||
try {
|
||
const response = await fetch(`${window.API_BASE}/log-files?date=${selectedDate}`);
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && result.data) {
|
||
logTypeSelect.innerHTML = '<option value="">请选择日志文件</option>';
|
||
result.data.forEach(log => {
|
||
const option = document.createElement('option');
|
||
option.value = log.file;
|
||
option.textContent = log.name + ' (' + log.size + ')';
|
||
logTypeSelect.appendChild(option);
|
||
});
|
||
// 如果有日志文件，自动加载第一个
|
||
if (result.data.length > 0) {
|
||
logTypeSelect.value = result.data[0].file;
|
||
loadSelectedLog();
|
||
} else {
|
||
logTypeSelect.innerHTML = '<option value="">暂无日志文件</option>';
|
||
document.getElementById('logContent').textContent = '该日期暂无日志文件';
|
||
document.getElementById('logFileInfo').textContent = '无日志文件';
|
||
}
|
||
} else {
|
||
logTypeSelect.innerHTML = '<option value="">暂无日志文件</option>';
|
||
document.getElementById('logContent').textContent = '该日期暂无日志文件';
|
||
document.getElementById('logFileInfo').textContent = '无日志文件';
|
||
}
|
||
} catch (error) {
|
||
console.error('加载日志文件列表失败:', error);
|
||
logTypeSelect.innerHTML = '<option value="">加载失败</option>';
|
||
document.getElementById('logContent').textContent = '加载日志文件列表失败: ' + error.message;
|
||
}
|
||
}
|
||
|
||
// 加载选中的日志
|
||
async function loadSelectedLog() {
|
||
const logTypeSelect = document.getElementById('logTypeSelect');
|
||
const logFile = logTypeSelect.value;
|
||
const logContent = document.getElementById('logContent');
|
||
const logFileInfo = document.getElementById('logFileInfo');
|
||
|
||
if (!logFile) {
|
||
logContent.textContent = '请选择日志文件';
|
||
logFileInfo.textContent = '无日志文件';
|
||
return;
|
||
}
|
||
|
||
logContent.textContent = '加载中...';
|
||
logFileInfo.textContent = '加载中...';
|
||
|
||
try {
|
||
const response = await fetch(`${window.API_BASE}/log-content?file=${encodeURIComponent(logFile)}`);
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0) {
|
||
logFullContent = result.data.content || '';
|
||
logContent.textContent = logFullContent || '(空日志)';
|
||
logFileInfo.textContent = result.data.file + ' (' + result.data.size + ')';
|
||
// 清空搜索框和匹配计数
|
||
document.getElementById('logSearchInput').value = '';
|
||
document.getElementById('logMatchCount').textContent = '';
|
||
// 滚动到最底部
|
||
scrollToLogBottom();
|
||
} else {
|
||
logContent.textContent = '加载失败: ' + (result.message || '未知错误');
|
||
logFileInfo.textContent = '加载失败';
|
||
}
|
||
} catch (error) {
|
||
console.error('加载日志内容失败:', error);
|
||
logContent.textContent = '加载日志内容失败: ' + error.message;
|
||
logFileInfo.textContent = '加载失败';
|
||
}
|
||
}
|
||
|
||
// 过滤日志内容
|
||
function filterLogContent() {
|
||
const searchInput = document.getElementById('logSearchInput');
|
||
const matchCount = document.getElementById('logMatchCount');
|
||
const logContent = document.getElementById('logContent');
|
||
|
||
if (!searchInput || !matchCount || !logContent) return;
|
||
|
||
const keyword = searchInput.value.trim();
|
||
|
||
if (!keyword) {
|
||
logContent.textContent = logFullContent || '(空日志)';
|
||
matchCount.textContent = '';
|
||
scrollToLogBottom();
|
||
return;
|
||
}
|
||
|
||
const lines = logFullContent.split('\n');
|
||
const matchingLines = lines.filter(line => line.toLowerCase().includes(keyword.toLowerCase()));
|
||
|
||
if (matchingLines.length > 0) {
|
||
logContent.textContent = matchingLines.join('\n');
|
||
matchCount.textContent = `(${matchingLines.length}条匹配)`;
|
||
// 滚动到最底部查看最新匹配
|
||
scrollToLogBottom();
|
||
} else {
|
||
logContent.textContent = '未找到匹配的日志';
|
||
matchCount.textContent = '(0条匹配)';
|
||
}
|
||
}
|
||
|
||
// 清空日志内容显示
|
||
function clearLogContent() {
|
||
document.getElementById('logContent').textContent = '日志内容将在这里显示...';
|
||
document.getElementById('logFileInfo').textContent = '请选择日志文件';
|
||
const logTypeSelect = document.getElementById('logTypeSelect');
|
||
if (logTypeSelect) logTypeSelect.value = '';
|
||
document.getElementById('logSearchInput').value = '';
|
||
document.getElementById('logMatchCount').textContent = '';
|
||
logFullContent = '';
|
||
}
|
||
|
||
// 导出服务函数
|
||
window.SystemService = {
|
||
fetchSystemMetrics,
|
||
setRefreshInterval,
|
||
stopLogAutoRefresh,
|
||
refreshLogs,
|
||
scrollToLogBottom,
|
||
switchLogTab,
|
||
initLogViewer,
|
||
loadTrainingLogFiles,
|
||
loadSelectedTrainingLog,
|
||
loadLogFiles,
|
||
loadSelectedLog,
|
||
filterLogContent,
|
||
clearLogContent
|
||
};
|