优化时间范围选择

public/js/app.js

@@ -65,24 +65,20 @@
     serverDetailModal: document.getElementById('serverDetailModal'),
     serverDetailClose: document.getElementById('serverDetailClose'),
     serverDetailTitle: document.getElementById('serverDetailTitle'),
-    detailGrid: document.getElementById('detailGrid'),
+    serverDetailSubtitle: document.getElementById('serverDetailSubtitle'),
+    detailMetricsList: document.getElementById('detailMetricsList'),
     detailLoading: document.getElementById('detailLoading'),
-    detailCpuBusy: document.getElementById('detailCpuBusy'),
-    detailSysLoad: document.getElementById('detailSysLoad'),
-    detailMemUsedPct: document.getElementById('detailMemUsedPct'),
-    detailSwapUsedPct: document.getElementById('detailSwapUsedPct'),
-    detailRootFsUsedPct: document.getElementById('detailRootFsUsedPct'),
     detailCpuCores: document.getElementById('detailCpuCores'),
     detailMemTotal: document.getElementById('detailMemTotal'),
     detailUptime: document.getElementById('detailUptime'),
-    detailNetRx: document.getElementById('detailNetRx'),
-    detailNetTx: document.getElementById('detailNetTx')
+    detailContainer: document.getElementById('detailContainer')
   };
 
   // ---- State ----
   let previousMetrics = null;
   let networkChart = null;
   let user = null; // Currently logged in user
+  let currentServerDetail = { instance: null, job: null, source: null, charts: {} };
 
   // ---- Initialize ----
   function init() {
@@ -431,52 +427,185 @@
 
   // ---- Server Detail ----
   async function openServerDetail(instance, job, source) {
-    dom.serverDetailTitle.textContent = `${job} - 服务器详情`;
+    currentServerDetail = { instance, job, source, charts: {} };
+    dom.serverDetailTitle.textContent = `${job}`;
+    dom.serverDetailSubtitle.textContent = `${instance} (${source})`;
     dom.serverDetailModal.classList.add('active');
-    
+
     // Show loading
-    dom.detailGrid.style.opacity = '0.3';
+    dom.detailContainer.style.opacity = '0.3';
     dom.detailLoading.style.display = 'block';
+    dom.detailMetricsList.innerHTML = '';
 
     try {
       const url = `/api/metrics/server-details?instance=${encodeURIComponent(instance)}&job=${encodeURIComponent(job)}&source=${encodeURIComponent(source)}`;
       const response = await fetch(url);
       if (!response.ok) throw new Error('Fetch failed');
       const data = await response.json();
-      
+
       renderServerDetail(data);
     } catch (err) {
       console.error('Error fetching server details:', err);
     } finally {
-      dom.detailGrid.style.opacity = '1';
+      dom.detailContainer.style.opacity = '1';
       dom.detailLoading.style.display = 'none';
     }
   }
 
   function closeServerDetail() {
     dom.serverDetailModal.classList.remove('active');
+    // Destroy charts
+    Object.values(currentServerDetail.charts).forEach(chart => {
+      if (chart && chart.destroy) chart.destroy();
+    });
+    currentServerDetail = { instance: null, job: null, source: null, charts: {} };
   }
 
   function renderServerDetail(data) {
-    dom.detailCpuBusy.textContent = formatPercent(data.cpuBusy);
-    dom.detailSysLoad.textContent = data.sysLoad.toFixed(1) + '%';
-    dom.detailMemUsedPct.textContent = formatPercent(data.memUsedPct);
-    dom.detailSwapUsedPct.textContent = formatPercent(data.swapUsedPct);
-    dom.detailRootFsUsedPct.textContent = formatPercent(data.rootFsUsedPct);
     dom.detailCpuCores.textContent = data.cpuCores + ' 核心';
     dom.detailMemTotal.textContent = formatBytes(data.memTotal);
-    
+
     // Uptime formatting
     const uptimeSec = data.uptime;
     const days = Math.floor(uptimeSec / 86400);
     const hours = Math.floor((uptimeSec % 86400) / 3600);
     const mins = Math.floor((uptimeSec % 3600) / 60);
     dom.detailUptime.textContent = `${days}天 ${hours}小时 ${mins}分`;
-    
-    dom.detailNetRx.textContent = formatBandwidth(data.netRx);
-    dom.detailNetTx.textContent = formatBandwidth(data.netTx);
+
+    // Define metrics to show
+    const metrics = [
+      { key: 'cpuBusy', label: 'CPU 忙碌率 (Busy)', value: formatPercent(data.cpuBusy) },
+      { key: 'sysLoad', label: '系统负载 (Load)', value: data.sysLoad.toFixed(1) + '%' },
+      { key: 'memUsedPct', label: '内存使用率 (RAM)', value: formatPercent(data.memUsedPct) },
+      { key: 'swapUsedPct', label: 'SWAP 使用率', value: formatPercent(data.swapUsedPct) },
+      { key: 'rootFsUsedPct', label: '根分区使用率 (/)', value: formatPercent(data.rootFsUsedPct) },
+      { key: 'netRx', label: '网络接收速率 (RX)', value: formatBandwidth(data.netRx) },
+      { key: 'netTx', label: '网络发送速率 (TX)', value: formatBandwidth(data.netTx) }
+    ];
+
+    dom.detailMetricsList.innerHTML = metrics.map(m => `
+        <div class="metric-item" id="metric-${m.key}">
+            <div class="metric-item-header" onclick="toggleMetricExpand('${m.key}')">
+                <div class="metric-label-group">
+                    <span class="metric-label">${m.label}</span>
+                    <span class="metric-value">${m.value}</span>
+                </div>
+                <svg class="chevron-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+            </div>
+            <div class="metric-item-content">
+                <div class="chart-controls">
+                    <div class="time-range-group">
+                        <div class="time-range-selector">
+                            <button class="time-range-btn active" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
+                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '6h', event)">6h</button>
+                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '12h', event)">12h</button>
+                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '24h', event)">24h</button>
+                        </div>
+                        <div class="custom-range-selector">
+                            <input type="text" class="custom-range-input" id="custom-range-${m.key}" placeholder="相对范围 (如: 2h)" onkeydown="if(event.key==='Enter') loadCustomMetricHistory('${m.key}', event)">
+                        </div>
+                        <div class="absolute-range-selector">
+                            <input type="datetime-local" class="time-input" id="start-time-${m.key}">
+                            <span style="color: var(--text-secondary); font-size: 0.7rem;">至</span>
+                            <input type="datetime-local" class="time-input" id="end-time-${m.key}">
+                            <button class="btn-custom-go" onclick="loadCustomMetricHistory('${m.key}', event)">查询</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="detail-chart-wrapper">
+                    <canvas id="chart-${m.key}"></canvas>
+                </div>
+            </div>
+        </div>
+    `).join('');
   }
 
+  window.toggleMetricExpand = async function (metricKey) {
+    const el = document.getElementById(`metric-${metricKey}`);
+    const wasActive = el.classList.contains('active');
+
+    // Close all others
+    document.querySelectorAll('.metric-item').forEach(item => item.classList.remove('active'));
+
+    if (!wasActive) {
+      el.classList.add('active');
+      // Initial load
+      loadMetricHistory(metricKey, '1h');
+    }
+  };
+
+  window.loadMetricHistory = async function (metricKey, range, event, start = null, end = null) {
+    if (event) {
+      event.stopPropagation();
+      const group = event.target.closest('.time-range-group');
+      if (group) {
+        group.querySelectorAll('.time-range-btn').forEach(btn => btn.classList.remove('active'));
+        if (event.target.classList.contains('time-range-btn')) {
+          event.target.classList.add('active');
+        }
+      }
+    }
+
+    const canvas = document.getElementById(`chart-${metricKey}`);
+    if (!canvas) return;
+
+    let chart = currentServerDetail.charts[metricKey];
+    if (!chart) {
+      let unit = '';
+      if (metricKey.includes('Pct') || metricKey === 'cpuBusy') unit = '%';
+      if (metricKey.startsWith('net')) unit = 'B/s';
+
+      chart = new MetricChart(canvas, unit);
+      currentServerDetail.charts[metricKey] = chart;
+    }
+
+    try {
+      const { instance, job, source } = currentServerDetail;
+      let url = `/api/metrics/server-history?instance=${encodeURIComponent(instance)}&job=${encodeURIComponent(job)}&source=${encodeURIComponent(source)}&metric=${metricKey}`;
+
+      if (start && end) {
+        url += `&start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}`;
+      } else {
+        url += `&range=${range}`;
+      }
+
+      const res = await fetch(url);
+      if (!res.ok) throw new Error('Query failed');
+      const data = await res.json();
+      chart.setData(data);
+    } catch (err) {
+      console.error(`Error loading history for ${metricKey}:`, err);
+    }
+  };
+
+  window.loadCustomMetricHistory = async function (metricKey, event) {
+    if (event) event.stopPropagation();
+
+    const rangeInput = document.getElementById(`custom-range-${metricKey}`);
+    const startInput = document.getElementById(`start-time-${metricKey}`);
+    const endInput = document.getElementById(`end-time-${metricKey}`);
+
+    const range = (rangeInput.value || '').trim().toLowerCase();
+    const startTime = startInput.value;
+    const endTime = endInput.value;
+
+    if (startTime && endTime) {
+      // Absolute range
+      loadMetricHistory(metricKey, null, event, startTime, endTime);
+    } else if (range) {
+      // Relative range
+      if (!/^\d+[smhd]$/.test(range)) {
+        alert('格式不正确，请使用如: 2h, 30m, 1d 等格式');
+        return;
+      }
+      loadMetricHistory(metricKey, range, event);
+    } else {
+      alert('请输入相对范围或选择具体时间范围');
+    }
+  };
+
   // ---- Network History ----
   async function fetchNetworkHistory() {
     try {