优化时间范围选择

2026-04-04 22:27:35 +08:00
parent 4f04227976
commit 75736c0c4c
6 changed files with 662 additions and 68 deletions
--- a/public/js/app.js
+++ b/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 {
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -273,3 +273,154 @@ class AreaChart {
    if (this.animFrame) cancelAnimationFrame(this.animFrame);
  }
 }
+
+class MetricChart {
+  constructor(canvas, unit = '') {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.data = { timestamps: [], values: [] };
+    this.unit = unit; // '%', 'B/s', etc.
+    this.dpr = window.devicePixelRatio || 1;
+    this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
+    this.animProgress = 0;
+    
+    this._resize = this.resize.bind(this);
+    window.addEventListener('resize', this._resize);
+    this.resize();
+  }
+
+  resize() {
+    const parent = this.canvas.parentElement;
+    if (!parent) return;
+    const rect = parent.getBoundingClientRect();
+    if (rect.width === 0) return;
+    this.width = rect.width;
+    this.height = rect.height;
+    this.canvas.width = this.width * this.dpr;
+    this.canvas.height = this.height * this.dpr;
+    this.canvas.style.width = this.width + 'px';
+    this.canvas.style.height = this.height + 'px';
+    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.draw();
+  }
+
+  setData(data) {
+    this.data = data || { timestamps: [], values: [] };
+    this.animate();
+  }
+
+  animate() {
+    if (this.animFrame) cancelAnimationFrame(this.animFrame);
+    const start = performance.now();
+    const duration = 500;
+    const step = (now) => {
+      const elapsed = now - start;
+      this.animProgress = Math.min(elapsed / duration, 1);
+      this.animProgress = 1 - Math.pow(1 - this.animProgress, 3);
+      this.draw();
+      if (elapsed < duration) this.animFrame = requestAnimationFrame(step);
+    };
+    this.animFrame = requestAnimationFrame(step);
+  }
+
+  draw() {
+    const ctx = this.ctx;
+    const w = this.width;
+    const h = this.height;
+    const p = this.padding;
+    const chartW = w - p.left - p.right;
+    const chartH = h - p.top - p.bottom;
+
+    ctx.clearRect(0, 0, w, h);
+
+    const { timestamps, values } = this.data;
+    if (!timestamps || timestamps.length < 2) {
+      ctx.fillStyle = '#5a6380';
+      ctx.font = '11px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('正在加载或暂无数据...', w / 2, h / 2);
+      return;
+    }
+
+    // Find max with cushion
+    let maxVal = Math.max(...values, 0.1);
+    if (this.unit === '%' && maxVal <= 100) {
+        if (maxVal > 80) maxVal = 100;
+        else if (maxVal > 40) maxVal = 80;
+        else if (maxVal > 20) maxVal = 50;
+        else maxVal = 25;
+    } else {
+        maxVal = maxVal * 1.25;
+    }
+
+    const len = timestamps.length;
+    const xStep = chartW / (len - 1);
+    const getX = (i) => p.left + i * xStep;
+    const getY = (val) => p.top + chartH - (val / (maxVal || 1)) * chartH * this.animProgress;
+
+    // Grid
+    ctx.strokeStyle = 'rgba(99, 102, 241, 0.05)';
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 3; i++) {
+      const y = p.top + (chartH / 3) * i;
+      ctx.beginPath();
+      ctx.moveTo(p.left, y);
+      ctx.lineTo(p.left + chartW, y);
+      ctx.stroke();
+      
+      const v = (maxVal * (1 - i / 3));
+      ctx.fillStyle = '#5a6380';
+      ctx.font = '9px "JetBrains Mono", monospace';
+      ctx.textAlign = 'right';
+      
+      let label = '';
+      if (this.unit === 'B/s') {
+          label = window.formatBandwidth ? window.formatBandwidth(v) : v.toFixed(0);
+      } else {
+          label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit;
+      }
+      ctx.fillText(label, p.left - 8, y + 3);
+    }
+
+    // Path
+    ctx.beginPath();
+    ctx.moveTo(getX(0), getY(values[0]));
+    for (let i = 1; i < len; i++) {
+        const prevX = getX(i - 1);
+        const currX = getX(i);
+        const prevY = getY(values[i - 1]);
+        const currY = getY(values[i]);
+        const midX = (prevX + currX) / 2;
+        ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
+    }
+    
+    // Stroke
+    ctx.strokeStyle = '#6366f1';
+    ctx.lineWidth = 2;
+    ctx.lineJoin = 'round';
+    ctx.stroke();
+
+    // Fill
+    ctx.lineTo(getX(len - 1), p.top + chartH);
+    ctx.lineTo(getX(0), p.top + chartH);
+    ctx.closePath();
+    const grad = ctx.createLinearGradient(0, p.top, 0, p.top + chartH);
+    grad.addColorStop(0, 'rgba(99, 102, 241, 0.15)');
+    grad.addColorStop(1, 'rgba(99, 102, 241, 0)');
+    ctx.fillStyle = grad;
+    ctx.fill();
+    
+    // Last point pulse
+    const lastX = getX(len - 1);
+    const lastY = getY(values[len - 1]);
+    ctx.beginPath();
+    ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
+    ctx.fillStyle = '#6366f1';
+    ctx.fill();
+  }
+
+  destroy() {
+    window.removeEventListener('resize', this._resize);
+    if (this.animFrame) cancelAnimationFrame(this.animFrame);
+  }
+}