dns-server/static/js/server-status.js

// server-status.js - 服务器状态组件功能实现

// 全局变量
let serverStatusUpdateTimer = null;
let previousServerData = {
  cpu: 0,
  queries: 0
};

// 初始化服务器状态组件
function initServerStatusWidget() {
    console.log('初始化服务器状态组件');
    
    // 确保组件存在
    if (!document.getElementById('server-status-widget')) {
        console.warn('服务器状态组件不存在');
        return;
    }
    
    // 监听页面切换事件
    handlePageSwitchEvents();
    
    // 初始加载数据
    loadServerStatusData();
    
    // 监听WebSocket连接事件
    monitorWebSocketConnection();
}

// 处理页面切换事件
function handlePageSwitchEvents() {
    // 监听导航点击事件
    document.querySelectorAll('.sidebar-link').forEach(link => {
        link.addEventListener('click', () => {
            // 页面切换后重新初始化组件
            setTimeout(() => {
                if (document.getElementById('server-status-widget')) {
                    loadServerStatusData();
                }
            }, 300);
        });
    });
}

// 监听WebSocket连接
function monitorWebSocketConnection() {
    // 检查全局WebSocket连接
    if (window.wsConnection && window.wsConnection.readyState === WebSocket.OPEN) {
        setupWebSocketListeners();
    } else {
        // 如果WebSocket未连接，尝试监听其连接状态
        const originalOnOpen = window.wsConnection?.onopen;
        if (window.wsConnection) {
            window.wsConnection.onopen = function(event) {
                if (originalOnOpen) originalOnOpen(event);
                setupWebSocketListeners();
            };
        }
    }
}

// 设置WebSocket监听器
function setupWebSocketListeners() {
    // 保存原始的onmessage函数
    const originalOnMessage = window.wsConnection.onmessage;
    
    // 重写onmessage函数
    window.wsConnection.onmessage = function(event) {
        // 调用原始函数
        if (originalOnMessage) originalOnMessage(event);
        
        // 处理服务器状态数据
        try {
            const data = JSON.parse(event.data);
            if (data.type === 'initial_data' || data.type === 'stats_update') {
                updateServerStatusWidget(data.data);
            }
        } catch (error) {
            console.error('处理服务器状态WebSocket消息失败:', error);
        }
    };
}

// 加载服务器状态数据
async function loadServerStatusData() {
    try {
        // 使用现有的API获取系统状态
        const statusData = await window.api?.getStatus();
        if (statusData && !statusData.error) {
            updateServerStatusWidget(statusData);
        }
    } catch (error) {
        console.error('加载服务器状态数据失败:', error);
    }
}

// 更新服务器状态组件
function updateServerStatusWidget(stats) {
    // 确保组件存在
    const widget = document.getElementById('server-status-widget');
    if (!widget) return;
    
    // 提取CPU使用率
    let cpuUsage = 0;
    if (stats.system && stats.system.cpu) {
        cpuUsage = stats.system.cpu;
    } else if (stats.cpuUsage) {
        cpuUsage = stats.cpuUsage;
    }
    
    // 提取查询量
    let queryCount = 0;
    if (stats.dns) {
        queryCount = (stats.dns.Allowed || 0) + (stats.dns.Blocked || 0) + (stats.dns.Errors || 0);
    } else if (stats.totalQueries) {
        queryCount = stats.totalQueries;
    }
    
    // 更新CPU使用率
    if (document.getElementById('server-cpu-value')) {
        document.getElementById('server-cpu-value').textContent = cpuUsage.toFixed(1) + '%';
    }
    if (document.getElementById('server-cpu-bar')) {
        document.getElementById('server-cpu-bar').style.width = Math.min(cpuUsage, 100) + '%';
        
        // 根据CPU使用率改变颜色
        const cpuBar = document.getElementById('server-cpu-bar');
        if (cpuUsage > 80) {
            cpuBar.className = 'h-full bg-danger rounded-full';
        } else if (cpuUsage > 50) {
            cpuBar.className = 'h-full bg-warning rounded-full';
        } else {
            cpuBar.className = 'h-full bg-success rounded-full';
        }
    }
    
    // 更新查询量
    if (document.getElementById('server-queries-value')) {
        document.getElementById('server-queries-value').textContent = formatNumber(queryCount);
    }
    
    // 计算查询量百分比（假设最大查询量为10000）
    const queryPercentage = Math.min((queryCount / 10000) * 100, 100);
    if (document.getElementById('server-queries-bar')) {
        document.getElementById('server-queries-bar').style.width = queryPercentage + '%';
    }
    
    // 添加光晕提示效果
    if (previousServerData.cpu !== cpuUsage || previousServerData.queries !== queryCount) {
        addGlowEffect();
    }
    
    // 更新服务器状态指示器
    if (document.getElementById('server-status-indicator')) {
        const indicator = document.getElementById('server-status-indicator');
        
        // 检查系统状态
        if (stats.system && stats.system.status === 'error') {
            indicator.className = 'inline-block w-2 h-2 bg-danger rounded-full';
        } else {
            indicator.className = 'inline-block w-2 h-2 bg-success rounded-full';
        }
    }
    
    // 保存当前数据用于下次比较
    previousServerData = {
        cpu: cpuUsage,
        queries: queryCount
    };
}

// 添加光晕提示效果
function addGlowEffect() {
    const widget = document.getElementById('server-status-widget');
    if (!widget) return;
    
    // 添加光晕类
    widget.classList.add('glow-effect');
    
    // 2秒后移除光晕
    setTimeout(() => {
        widget.classList.remove('glow-effect');
    }, 2000);
}

// 格式化数字（添加千位分隔符）
function formatNumber(num) {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString();
}

// 在DOM加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
    // 延迟初始化，确保页面完全加载
    setTimeout(initServerStatusWidget, 500);
    
    // 监听页面切换事件（已在handlePageSwitchEvents中处理）
});

// 在页面卸载时清理资源
window.addEventListener('beforeunload', () => {
    if (serverStatusUpdateTimer) {
        clearInterval(serverStatusUpdateTimer);
        serverStatusUpdateTimer = null;
    }
});

// 导出函数供其他模块使用
window.serverStatusWidget = {
    init: initServerStatusWidget,
    update: updateServerStatusWidget
};