优化一点东西懒得写了

2026-04-04 22:35:05 +08:00
parent 286eb1687d
commit e77bdbcc9e
3 changed files with 217 additions and 98 deletions
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -471,8 +471,19 @@
    dom.detailUptime.textContent = `${days}天 ${hours}小时 ${mins}分`;

    // Define metrics to show
+    const cpuValueHtml = `
+        <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 2px;">
+            <span style="font-weight: 700;">${formatPercent(data.cpuBusy)}</span>
+            <div style="font-size: 0.65rem; color: var(--text-secondary); display: flex; gap: 6px; font-weight: normal;">
+                <span>Sys: ${data.cpuSystem.toFixed(1)}%</span>
+                <span>User: ${data.cpuUser.toFixed(1)}%</span>
+                <span>Wait: ${data.cpuIowait.toFixed(1)}%</span>
+            </div>
+        </div>
+    `;
+
    const metrics = [
-      { key: 'cpuBusy', label: 'CPU 忙碌率 (Busy)', value: formatPercent(data.cpuBusy) },
+        { key: 'cpuBusy', label: 'CPU 使用率 (Busy Breakdown)', value: cpuValueHtml },
        { 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) },
@@ -512,7 +523,7 @@
                        </div>
                    </div>
                </div>
-                <div class="detail-chart-wrapper">
+                <div class="detail-chart-wrapper" style="${m.key === 'cpuBusy' ? 'height: 260px;' : ''}">
                    <canvas id="chart-${m.key}"></canvas>
                </div>
            </div>
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -278,7 +278,7 @@ class MetricChart {
  constructor(canvas, unit = '') {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
-    this.data = { timestamps: [], values: [] };
+    this.data = { timestamps: [], values: [], series: null };
    this.unit = unit; // '%', 'B/s', etc.
    this.dpr = window.devicePixelRatio || 1;
    this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
@@ -305,7 +305,7 @@ class MetricChart {
  }

  setData(data) {
-    this.data = data || { timestamps: [], values: [] };
+    this.data = data || { timestamps: [], values: [], series: null };
    this.animate();
  }

@@ -333,7 +333,7 @@ class MetricChart {

    ctx.clearRect(0, 0, w, h);

-    const { timestamps, values } = this.data;
+    const { timestamps, values, series } = this.data;
    if (!timestamps || timestamps.length < 2) {
      ctx.fillStyle = '#5a6380';
      ctx.font = '11px sans-serif';
@@ -342,8 +342,13 @@ class MetricChart {
      return;
    }

-    // Find max with cushion
-    let maxVal = Math.max(...values, 0.1);
+    // Determine Y max
+    let maxVal = 0;
+    if (series) {
+        // For stacked CPU, max sum should be 100
+        maxVal = 100;
+    } else {
+        maxVal = Math.max(...values, 0.1);
        if (this.unit === '%' && maxVal <= 100) {
            if (maxVal > 80) maxVal = 100;
            else if (maxVal > 40) maxVal = 80;
@@ -352,6 +357,7 @@ class MetricChart {
        } else {
            maxVal = maxVal * 1.25;
        }
+    }

    const len = timestamps.length;
    const xStep = chartW / (len - 1);
@@ -382,7 +388,67 @@ class MetricChart {
      ctx.fillText(label, p.left - 8, y + 3);
    }

-    // Path
+    if (series) {
+        // Draw Stacked Area
+        const modes = [
+            { name: 'idle', color: 'rgba(100, 116, 139, 0.4)', stroke: '#64748b' },   // Slate
+            { name: 'other', color: 'rgba(168, 85, 247, 0.5)', stroke: '#a855f7' },  // Purple
+            { name: 'irq', color: 'rgba(234, 179, 8, 0.5)', stroke: '#eab308' },    // Yellow
+            { name: 'iowait', color: 'rgba(239, 68, 68, 0.5)', stroke: '#ef4444' }, // Red
+            { name: 'system', color: 'rgba(6, 182, 212, 0.5)', stroke: '#06b6d4' }, // Cyan
+            { name: 'user', color: 'rgba(99, 102, 241, 0.5)', stroke: '#6366f1' }   // Indigo
+        ];
+
+        let currentBase = new Array(len).fill(0);
+        
+        modes.forEach(mode => {
+            const vals = series[mode.name];
+            if (!vals) return;
+
+            ctx.beginPath();
+            ctx.moveTo(getX(0), getY(currentBase[0] + vals[0]));
+            for (let i = 1; i < len; i++) {
+                ctx.lineTo(getX(i), getY(currentBase[i] + vals[i]));
+            }
+            ctx.lineTo(getX(len - 1), getY(currentBase[len - 1]));
+            for (let i = len - 1; i >= 0; i--) {
+                ctx.lineTo(getX(i), getY(currentBase[i]));
+            }
+            ctx.closePath();
+            ctx.fillStyle = mode.color;
+            ctx.fill();
+
+            // Stroke
+            ctx.beginPath();
+            ctx.moveTo(getX(0), getY(currentBase[0] + vals[0]));
+            for (let i = 1; i < len; i++) {
+                ctx.lineTo(getX(i), getY(currentBase[i] + vals[i]));
+            }
+            ctx.strokeStyle = mode.stroke;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+
+            // Update base
+            for (let i = 0; i < len; i++) {
+                currentBase[i] += vals[i];
+            }
+        });
+
+        // Add Legend at bottom right
+        ctx.font = '9px sans-serif';
+        ctx.textAlign = 'right';
+        let lx = w - 10;
+        let ly = h - 5;
+        [...modes].reverse().forEach(m => {
+            ctx.fillStyle = m.stroke;
+            ctx.fillRect(lx - 10, ly - 8, 8, 8);
+            ctx.fillStyle = '#5a6380';
+            ctx.fillText(m.name.charAt(0).toUpperCase() + m.name.slice(1), lx - 15, ly - 1);
+            lx -= 60;
+        });
+
+    } else {
+        // Draw Single Line Path
        ctx.beginPath();
        ctx.moveTo(getX(0), getY(values[0]));
        for (let i = 1; i < len; i++) {
@@ -418,6 +484,7 @@ class MetricChart {
        ctx.fillStyle = '#6366f1';
        ctx.fill();
    }
+  }

  destroy() {
    window.removeEventListener('resize', this._resize);
--- a/server/prometheus-service.js
+++ b/server/prometheus-service.js
@@ -421,6 +421,14 @@ async function getServerDetails(baseUrl, instance, job) {
  
  // Queries based on the requested dashboard structure
  const queries = {
+    // Split CPU
+    cpuSystem: `avg(rate(node_cpu_seconds_total{mode="system", instance="${node}"}[1m])) * 100`,
+    cpuUser: `avg(rate(node_cpu_seconds_total{mode="user", instance="${node}"}[1m])) * 100`,
+    cpuIowait: `avg(rate(node_cpu_seconds_total{mode="iowait", instance="${node}"}[1m])) * 100`,
+    cpuIrq: `avg(rate(node_cpu_seconds_total{mode=~"irq|softirq", instance="${node}"}[1m])) * 100`,
+    cpuOther: `avg(rate(node_cpu_seconds_total{mode=~"nice|steal|guest|guest_nice", instance="${node}"}[1m])) * 100`,
+    cpuIdle: `avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])) * 100`,
+    
    cpuBusy: `100 * (1 - avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])))`,
    sysLoad: `node_load1{instance="${node}",job="${job}"} * 100 / count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`,
    memUsedPct: `(1 - (node_memory_MemAvailable_bytes{instance="${node}", job="${job}"} / node_memory_MemTotal_bytes{instance="${node}", job="${job}"})) * 100`,
@@ -455,9 +463,42 @@ async function getServerHistory(baseUrl, instance, job, metric, range = '1h', st
  const url = normalizeUrl(baseUrl);
  const node = instance;
  
+  // Custom multi-metric handler for CPU Busy
+  if (metric === 'cpuBusy') {
+      const modes = {
+          system: 'system',
+          user: 'user',
+          iowait: 'iowait',
+          irq: 'irq|softirq',
+          other: 'nice|steal|guest|guest_nice',
+          idle: 'idle'
+      };
+
+      const rangeObj = parseRange(range, start, end);
+      const timestamps = [];
+      const series = {};
+      Object.keys(modes).forEach(m => series[m] = []);
+
+      const results = await Promise.all(Object.entries(modes).map(async ([name, mode]) => {
+          const expr = `avg(rate(node_cpu_seconds_total{mode=~"${mode}", instance="${node}"}[1m])) * 100`;
+          const res = await queryRange(url, expr, rangeObj.queryStart, rangeObj.queryEnd, rangeObj.step);
+          return { name, values: res.length > 0 ? res[0].values : [] };
+      }));
+
+      if (results[0].values.length === 0) return { timestamps: [], series: {} };
+
+      // Use first result for timestamps
+      results[0].values.forEach(v => timestamps.push(v[0] * 1000));
+      
+      results.forEach(r => {
+          r.values.forEach(v => series[r.name].push(parseFloat(v[1])));
+      });
+
+      return { timestamps, series };
+  }
+
  // Map metric keys to Prometheus expressions
  const metricMap = {
-    cpuBusy: `100 * (1 - avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])))`,
    sysLoad: `node_load1{instance="${node}",job="${job}"} * 100 / count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`,
    memUsedPct: `(1 - (node_memory_MemAvailable_bytes{instance="${node}", job="${job}"} / node_memory_MemTotal_bytes{instance="${node}", job="${job}"})) * 100`,
    swapUsedPct: `((node_memory_SwapTotal_bytes{instance="${node}",job="${job}"} - node_memory_SwapFree_bytes{instance="${node}",job="${job}"}) / (node_memory_SwapTotal_bytes{instance="${node}",job="${job}"})) * 100`,
@@ -469,17 +510,31 @@ async function getServerHistory(baseUrl, instance, job, metric, range = '1h', st
  const expr = metricMap[metric];
  if (!expr) throw new Error('Invalid metric for history');

+  const rangeObj = parseRange(range, start, end);
+
+  try {
+    const result = await queryRange(url, expr, rangeObj.queryStart, rangeObj.queryEnd, rangeObj.step);
+    if (!result || result.length === 0) return { timestamps: [], values: [] };
+    
+    return {
+      timestamps: result[0].values.map(v => v[0] * 1000),
+      values: result[0].values.map(v => parseFloat(v[1]))
+    };
+  } catch (err) {
+    console.error(`[Prometheus] Error fetching history for ${metric} on ${node}:`, err.message);
+    throw err;
+  }
+}
+
+function parseRange(range, start, end) {
    let duration, step, queryStart, queryEnd;
    
    if (start && end) {
        queryStart = Math.floor(new Date(start).getTime() / 1000);
        queryEnd = Math.floor(new Date(end).getTime() / 1000);
        duration = queryEnd - queryStart;
-    if (duration <= 0) throw new Error('End time must be after start time');
-    // Reasonable step for fixed range
        step = Math.max(15, Math.floor(duration / 100));
    } else {
-    // Relative range logic
        const rangeMap = {
            '15m': { duration: 900, step: 15 },
            '30m': { duration: 1800, step: 30 },
@@ -495,14 +550,12 @@ async function getServerHistory(baseUrl, instance, job, metric, range = '1h', st
            duration = rangeMap[range].duration;
            step = rangeMap[range].step;
        } else {
-      // Try to parse relative time string like "2h", "30m", "1d"
            const match = range.match(/^(\d+)([smhd])$/);
            if (match) {
                const val = parseInt(match[1]);
                const unit = match[2];
                const multipliers = { s: 1, m: 60, h: 3600, d: 86400 };
                duration = val * (multipliers[unit] || 3600);
-          // Calculate a reasonable step for ~60-120 data points
                step = Math.max(15, Math.floor(duration / 100));
            } else {
                duration = 3600;
@@ -512,19 +565,7 @@ async function getServerHistory(baseUrl, instance, job, metric, range = '1h', st
        queryEnd = Math.floor(Date.now() / 1000);
        queryStart = queryEnd - duration;
    }
-
-  try {
-    const result = await queryRange(url, expr, queryStart, queryEnd, step);
-    if (!result || result.length === 0) return { timestamps: [], values: [] };
-    
-    return {
-      timestamps: result[0].values.map(v => v[0] * 1000),
-      values: result[0].values.map(v => parseFloat(v[1]))
-    };
-  } catch (err) {
-    console.error(`[Prometheus] Error fetching history for ${metric} on ${node}:`, err.message);
-    throw err;
-  }
+    return { queryStart, queryEnd, step };
 }

 module.exports = {