Update public/index.html

public/index.html

@@ -809,18 +809,22 @@
   <script>
     // 全局变量，表示当前是否已登录
     let isLoggedIn = false;
+
     // 加载状态控制函数
     function showLoading() {
       document.getElementById('loadingOverlay').style.display = 'flex';
     }
+
     function hideLoading() {
       document.getElementById('loadingOverlay').style.display = 'none';
     }
+
     // 登录状态管理
     function checkLoginStatus() {
       const token = localStorage.getItem('authToken');
       const loginButton = document.getElementById('loginButton');
       const logoutButton = document.getElementById('logoutButton');
+
       if (token) {
         console.log('本地存储中找到 token，尝试验证:', token.slice(0, 8) + '...');
         showLoading();
@@ -869,6 +873,7 @@
         return Promise.resolve(false);
       }
     }
+
     function showLoginForm() {
       document.getElementById('loginOverlay').style.display = 'flex';
       document.getElementById('username').value = '';
@@ -876,9 +881,11 @@
       document.getElementById('loginError').style.display = 'none';
       document.getElementById('username').focus();
     }
+
     function hideLoginForm() {
       document.getElementById('loginOverlay').style.display = 'none';
     }
+
     function login() {
       const username = document.getElementById('username').value;
       const password = document.getElementById('password').value;
@@ -916,6 +923,7 @@
         loginError.style.display = 'block';
       });
     }
+
     function logout() {
       const token = localStorage.getItem('authToken');
       if (token) {
@@ -957,6 +965,7 @@
         refreshData(); // 登出后刷新数据以隐藏 private 实例
       }
     }
+
     function updateActionButtons(loggedIn) {
       console.log('更新操作按钮状态，是否已登录:', loggedIn);
       isLoggedIn = loggedIn;
@@ -979,6 +988,7 @@
         }
       });
     }
+
     // 使用 window.onload 确保页面完全加载后检查登录状态
     window.onload = async function() {
       console.log('页面加载完成，开始检查登录状态');
@@ -986,9 +996,11 @@
       console.log('登录状态检查完成，初始化数据');
       await initialize();
     };
+
     // 二次确认弹窗逻辑
     let pendingAction = null;
     let pendingRepoId = null;
+
     function showConfirmDialog(action, repoId, title, message) {
       pendingAction = action;
       pendingRepoId = repoId;
@@ -996,6 +1008,7 @@
       document.getElementById('confirmMessage').textContent = message;
       document.getElementById('confirmOverlay').style.display = 'flex';
     }
+
     function confirmAction() {
       if (pendingAction === 'restart') {
         restartSpace(pendingRepoId);
@@ -1004,11 +1017,13 @@
       }
       cancelAction();
     }
+
     function cancelAction() {
       pendingAction = null;
       pendingRepoId = null;
       document.getElementById('confirmOverlay').style.display = 'none';
     }
+
     async function getUsernames() {
       try {
         showLoading();
@@ -1040,6 +1055,7 @@
         return [];
       }
     }
+
     async function fetchInstances() {
       try {
         showLoading();
@@ -1066,20 +1082,24 @@
         return [];
       }
     }
+
     class MetricsStreamManager {
       constructor() {
         this.eventSource = null;
       }
+
       connect(subscribedInstances = []) {
         if (this.eventSource) {
           this.eventSource.close();
         }
+
         const instancesParam = subscribedInstances.join(',');
         const token = localStorage.getItem('authToken');
         // 由于 EventSource 不支持直接设置 Authorization 头，这里通过查询参数传递 token
         const url = `/api/proxy/live-metrics-stream?instances=${encodeURIComponent(instancesParam)}&token=${encodeURIComponent(token || '')}`;
         console.log('SSE 连接 URL:', url.split('&token=')[0] + (token ? '&token=... (隐藏)' : '&token=空'));
         this.eventSource = new EventSource(url);
+
         this.eventSource.addEventListener("metric", (event) => {
           try {
             const data = JSON.parse(event.data);
@@ -1089,6 +1109,7 @@
             console.error(`解析监控数据失败:`, error);
           }
         });
+
         this.eventSource.onerror = (error) => {
           console.error(`SSE 连接错误:`, error);
           this.eventSource.close();
@@ -1096,8 +1117,10 @@
           // 可选：尝试重新连接
           setTimeout(() => this.connect(subscribedInstances), 5000);
         };
+
         console.log(`SSE 连接已建立，订阅实例: ${instancesParam || '无'}`);
       }
+
       disconnect() {
         if (this.eventSource) {
           this.eventSource.close();
@@ -1106,12 +1129,14 @@
         }
       }
     }
+
     const metricsStreamManager = new MetricsStreamManager();
     const instanceMap = new Map();
     const serverStatus = new Map();
     let allInstances = []; // 存储所有实例数据，用于过滤和排序
     const chartInstances = new Map(); // 存储每个实例的图表实例
     const chartDataBuffer = new Map(); // 存储图表数据缓冲以减少更新频率
+
     async function initialize() {
       await getUsernames();
       const instances = await fetchInstances();
@@ -1128,6 +1153,7 @@
       updateSummary();
       updateActionButtons(isLoggedIn);
     }
+
     // 手动刷新数据函数
     async function refreshData() {
       metricsStreamManager.disconnect();
@@ -1142,10 +1168,12 @@
       await initialize();
       applyFiltersAndSort(); // 确保刷新后重新应用过滤和排序
     }
+
     function renderInstances(instances) {
       const serversContainer = document.getElementById('servers');
       serversContainer.innerHTML = ''; // 清空现有内容
       const userGroups = {};
+
       // 按用户分组
       instances.forEach(instance => {
         if (!userGroups[instance.owner]) {
@@ -1153,6 +1181,7 @@
         }
         userGroups[instance.owner].push(instance);
       });
+
       // 渲染每个用户组
       Object.keys(userGroups).forEach(owner => {
         let userGroup = document.createElement('details');
@@ -1169,23 +1198,27 @@
         userGroup.appendChild(userServers);
         
         serversContainer.appendChild(userGroup);
+
         // 渲染该用户下的实例
         userGroups[owner].forEach(instance => {
           renderInstanceCard(instance, userServers);
         });
       });
     }
+
     // 图表配置函数
     function createChart(instanceId) {
       const canvasId = `chart-${instanceId}`;
       const canvas = document.getElementById(canvasId);
       if (!canvas) return null;
+
       const gridColor = 'rgba(0, 212, 255, 0.1)';
       const textColor = '#E0E0FF';
       const cpuColor = '#00FFAA';
       const memoryColor = '#00D4FF';
       const uploadColor = '#FF9500';
       const downloadColor = '#FF00FF';
+
       const ctx = canvas.getContext('2d');
       const chart = new Chart(ctx, {
         type: 'line',
@@ -1285,31 +1318,37 @@
       chartInstances.set(instanceId, chart);
       return chart;
     }
+
     // 更新图表数据，带有缓冲机制减少更新频率
     function updateChart(instanceId, data) {
       let buffer = chartDataBuffer.get(instanceId) || { data: [], count: 0 };
       buffer.data.push(data);
       buffer.count++;
+
       if (buffer.count < 2) { // 每 2 次数据更新才渲染一次
         chartDataBuffer.set(instanceId, buffer);
         return;
       }
+
       let chart = chartInstances.get(instanceId);
       if (!chart) {
         chart = createChart(instanceId);
         if (!chart) return;
       }
+
       // 获取当前数据集
       const cpuData = chart.data.datasets[0].data;
       const memoryData = chart.data.datasets[1].data;
       const uploadData = chart.data.datasets[2].data;
       const downloadData = chart.data.datasets[3].data;
+
       // 追加最新数据
       const latestData = buffer.data[buffer.data.length - 1];
       cpuData.push(latestData.cpu_usage_pct);
       memoryData.push(((latestData.memory_used_bytes / latestData.memory_total_bytes) * 100).toFixed(2));
       uploadData.push((latestData.tx_bps / 1024).toFixed(2)); // 转换为 KB/s
       downloadData.push((latestData.rx_bps / 1024).toFixed(2)); // 转换为 KB/s
+
       // 限制数据点数量为 30 个
       if (cpuData.length > 30) {
         cpuData.shift();
@@ -1317,12 +1356,14 @@
         uploadData.shift();
         downloadData.shift();
       }
+
       // 更新图表
       chart.update();
       
       // 清空缓冲
       chartDataBuffer.set(instanceId, { data: [], count: 0 });
     }
+
     // 计算相对时间的辅助函数
     function formatRelativeTime(dateStr) {
       if (!dateStr) return '未知时间';
@@ -1334,6 +1375,7 @@
         const diffMins = Math.floor(diffSecs / 60);
         const diffHrs = Math.floor(diffMins / 60);
         const diffDays = Math.floor(diffHrs / 24);
+
         if (diffDays > 7) {
           return date.toLocaleDateString(); // 超过7天显示日期
         } else if (diffDays > 0) {
@@ -1350,15 +1392,19 @@
         return '未知时间';
       }
     }
+
     // 切换信息块显示/隐藏的函数
     function toggleInfoBlock(instanceId) {
       const card = document.getElementById(`instance-${instanceId}`);
       if (!card) return;
+
       card.classList.toggle('info-expanded');
     }
+
     function renderInstanceCard(instance, container) {
       const instanceId = instance.repo_id;
       instanceMap.set(instanceId, instance);
+
       const cardId = `instance-${instanceId}`;
       let card = document.getElementById(cardId);
       if (!card) {
@@ -1381,6 +1427,7 @@
         const description = instance.short_description && instance.short_description.trim() ? instance.short_description : 'N/A';
         // 处理 last_modified，格式化为相对时间
         const lastModified = formatRelativeTime(instance.last_modified);
+
         card.innerHTML = `
           <div class="server-header">
             <div class="server-name" onclick="toggleInfoBlock('${instanceId}')">
@@ -1447,12 +1494,14 @@
       }
       serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline: initialStatus === 'running', isSleep: initialStatus === 'sleeping', data: null, status: instance.status });
     }
+
     // 切换图表显示/隐藏
     function toggleChart(instanceId) {
       const card = document.getElementById(`instance-${instanceId}`);
       const chartContainer = document.getElementById(`chart-container-${instanceId}`);
       const toggleButton = card.querySelector('.chart-toggle-button');
       if (!card || !chartContainer) return;
+
       if (card.classList.contains('expanded')) {
         card.classList.remove('expanded');
         toggleButton.textContent = '查看图表';
@@ -1465,6 +1514,7 @@
         }
       }
     }
+
     function updateServerCard(data, instanceId, isSleep = false) {
       const cardId = `instance-${instanceId}`;
       let card = document.getElementById(cardId);
@@ -1474,10 +1524,12 @@
         // 如果卡片不存在，但实例存在，说明可能被过滤掉了，不渲染
         return;
       }
+
       if (card) {
         const statusDot = card.querySelector('.status-dot');
         let upload = 'N/A', download = 'N/A', cpuUsage = 'N/A', memoryUsage = 'N/A';
         let isOnline = false;
+
         if (data) {
           cpuUsage = `${data.cpu_usage_pct}%`;
           memoryUsage = `${((data.memory_used_bytes / data.memory_total_bytes) * 100).toFixed(2)}%`;
@@ -1504,14 +1556,17 @@
             isSleep = false;
           }
         }
+
         card.querySelector('.cpu-usage').textContent = cpuUsage;
         card.querySelector('.memory-usage').textContent = memoryUsage;
         card.querySelector('.upload').textContent = upload;
         card.querySelector('.download').textContent = download;
+
         serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline, isSleep, data: data || null, status: instance?.status || 'unknown' });
         updateSummary();
       }
     }
+
     async function restartSpace(repoId) {
       try {
         const token = localStorage.getItem('authToken');
@@ -1554,6 +1609,7 @@
         alert(`重启失败: ${error.message}`);
       }
     }
+
     async function rebuildSpace(repoId) {
       try {
         const token = localStorage.getItem('authToken');
@@ -1596,11 +1652,13 @@
         alert(`重建失败: ${error.message}`);
       }
     }
+
     function updateSummary() {
       let online = 0;
       let offline = 0;
       let totalUpload = 0;
       let totalDownload = 0;
+
       serverStatus.forEach((status, instanceId) => {
         const isRecentlyOnline = status.isOnline || status.status.toLowerCase() === 'running';
         if (isRecentlyOnline) {
@@ -1613,12 +1671,14 @@
           offline++;
         }
       });
+
       document.getElementById('totalServers').textContent = serverStatus.size;
       document.getElementById('onlineServers').textContent = online;
       document.getElementById('offlineServers').textContent = offline;
       document.getElementById('totalUpload').textContent = `${formatBytes(totalUpload)}/s`;
       document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
     }
+
     function formatBytes(bytes) {
       if (bytes === 0) return '0 B';
       const k = 1024;
@@ -1626,16 +1686,20 @@
       const i = Math.floor(Math.log(bytes) / Math.log(k));
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }
+
     setInterval(updateSummary, 5000);
+
     setInterval(async () => {
       metricsStreamManager.disconnect();
       await initialize();
     }, 300000);
+
     // 应用过滤和排序
     function applyFiltersAndSort() {
       const statusFilter = document.getElementById('statusFilter').value;
       const userFilter = document.getElementById('userFilter').value;
       const sortBy = document.getElementById('sortBy').value;
+
       // 过滤实例
       let filteredInstances = allInstances;
       if (statusFilter !== 'all') {
@@ -1644,6 +1708,7 @@
       if (userFilter !== 'all') {
         filteredInstances = filteredInstances.filter(instance => instance.owner === userFilter);
       }
+
       // 排序实例
       filteredInstances.sort((a, b) => {
         if (sortBy === 'name-asc') {
@@ -1659,6 +1724,7 @@
         }
         return 0;
       });
+
       // 重新渲染过滤和排序后的实例
       instanceMap.clear();
       serverStatus.clear();
@@ -1682,10 +1748,12 @@
       updateSummary();
       updateActionButtons(isLoggedIn);
     }
+
     // 新增函数：在新标签页中打开实例的URL
     function viewInstance(url) {
       window.open(url, '_blank');
     }
+
     // 新增函数：在新标签页中打开实例的管理页面
     function manageInstance(repoId) {
       const manageUrl = `https://huggingface.co/spaces/${repoId}`;