From ecfffa882a159bb2a12954eed0f68eb4ec1a6120 Mon Sep 17 00:00:00 2001
From: mhsanaei <ho3ein.sanaei@gmail.com>
Date: Tue, 16 Sep 2025 14:15:18 +0200
Subject: CPU History, CPU Utilization

---
 web/controller/server.go |  32 +++++-
 web/html/index.html      | 262 +++++++++++++++++++++++++++++++++++++++++++++++
 web/service/server.go    | 150 ++++++++++++++++++++++++++-
 3 files changed, 438 insertions(+), 6 deletions(-)

(limited to 'web')

diff --git a/web/controller/server.go b/web/controller/server.go
index d5ae688b..3b93afd9 100644
--- a/web/controller/server.go
+++ b/web/controller/server.go
@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"net/http"
 	"regexp"
+	"strconv"
 	"time"
 
 	"x-ui/web/global"
@@ -39,6 +40,7 @@ func NewServerController(g *gin.RouterGroup) *ServerController {
 func (a *ServerController) initRouter(g *gin.RouterGroup) {
 
 	g.GET("/status", a.status)
+	g.GET("/cpuHistory", a.getCpuHistory)
 	g.GET("/getXrayVersion", a.getXrayVersion)
 	g.GET("/getConfigJson", a.getConfigJson)
 	g.GET("/getDb", a.getDb)
@@ -61,16 +63,18 @@ func (a *ServerController) initRouter(g *gin.RouterGroup) {
 
 func (a *ServerController) refreshStatus() {
 	a.lastStatus = a.serverService.GetStatus(a.lastStatus)
+	// collect cpu history when status is fresh
+	if a.lastStatus != nil {
+		a.serverService.AppendCpuSample(time.Now(), a.lastStatus.Cpu)
+	}
 }
 
 func (a *ServerController) startTask() {
 	webServer := global.GetWebServer()
 	c := webServer.GetCron()
 	c.AddFunc("@every 2s", func() {
-		now := time.Now()
-		if now.Sub(a.lastGetStatusTime) > time.Minute*3 {
-			return
-		}
+		// Always refresh to keep CPU history collected continuously.
+		// Sampling is lightweight and capped to ~6 hours in memory.
 		a.refreshStatus()
 	})
 }
@@ -81,6 +85,26 @@ func (a *ServerController) status(c *gin.Context) {
 	jsonObj(c, a.lastStatus, nil)
 }
 
+// getCpuHistory returns recent CPU utilization points.
+// Query param q=minutes (int). Bounds: 1..360 (6 hours). Defaults to 60.
+func (a *ServerController) getCpuHistory(c *gin.Context) {
+	minsStr := c.Query("q")
+	mins := 60
+	if minsStr != "" {
+		if v, err := strconv.Atoi(minsStr); err == nil {
+			mins = v
+		}
+	}
+	if mins < 1 {
+		mins = 1
+	}
+	if mins > 360 {
+		mins = 360
+	}
+	res := a.serverService.GetCpuHistory(mins)
+	jsonObj(c, res, nil)
+}
+
 func (a *ServerController) getXrayVersion(c *gin.Context) {
 	now := time.Now()
 	if now.Sub(a.lastGetVersionsTime) <= time.Minute {
diff --git a/web/html/index.html b/web/html/index.html
index 2ff8db3e..b6a9993e 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -41,6 +41,11 @@
                                 <div><b>{{ i18n "pages.index.frequency" }}:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
                               </template>
                             </a-tooltip>
+                            <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                              <a-button size="small" type="default" class="ml-8" @click="openCpuHistory()">
+                                <a-icon type="history" />
+                              </a-button>
+                            </a-tooltip>
                           </div>
                         </a-col>
                         <a-col :span="12" class="text-center">
@@ -423,6 +428,36 @@
       </a-list-item>
     </a-list>
   </a-modal>
+  <!-- CPU History Modal -->
+  <a-modal id="cpu-history-modal"
+           v-model="cpuHistoryModal.visible"
+           :closable="true" @cancel="() => cpuHistoryModal.visible = false"
+           :class="themeSwitcher.currentTheme"
+           width="900px" footer="">
+    <template slot="title">
+      CPU History
+      <a-select size="small" v-model="cpuHistoryModal.minutes" class="ml-10" style="width: 120px" @change="loadCpuHistory">
+        <a-select-option :value="15">15 min</a-select-option>
+        <a-select-option :value="60">1 hour</a-select-option>
+        <a-select-option :value="180">3 hours</a-select-option>
+        <a-select-option :value="360">6 hours</a-select-option>
+      </a-select>
+    </template>
+    <div style="padding: 8px 0;">
+      <sparkline :data="cpuHistoryLong"
+                 :labels="cpuHistoryLabels"
+                 :vb-width="840"
+                 :height="220"
+                 :stroke="status.cpu.color"
+                 :stroke-width="2.2"
+                 :show-grid="true"
+                 :show-axes="true"
+                 :tick-count-x="5"
+                 :fill-opacity="0.18"
+                 :marker-radius="3.2"
+                 :show-tooltip="true" />
+    </div>
+  </a-modal>
 </a-layout>
 {{template "page/body_scripts" .}}
 {{template "component/aSidebar" .}}
@@ -430,6 +465,190 @@
 {{template "component/aCustomStatistic" .}}
 {{template "modals/textModal"}}
 <script>
+  // Tiny Sparkline component using an inline SVG polyline
+  Vue.component('sparkline', {
+    props: {
+      data: { type: Array, required: true },
+      // viewBox width for drawing space; SVG width will be 100% of container
+      vbWidth: { type: Number, default: 320 },
+      height: { type: Number, default: 80 },
+      stroke: { type: String, default: '#008771' },
+      strokeWidth: { type: Number, default: 2 },
+      maxPoints: { type: Number, default: 120 },
+      showGrid: { type: Boolean, default: true },
+      gridColor: { type: String, default: 'rgba(255,255,255,0.08)' },
+      fillOpacity: { type: Number, default: 0.15 },
+      showMarker: { type: Boolean, default: true },
+      markerRadius: { type: Number, default: 2.8 },
+      // New opts for axes/labels/tooltip
+      labels: { type: Array, default: () => [] }, // same length as data for x labels (e.g., timestamps)
+      showAxes: { type: Boolean, default: false },
+      yTickStep: { type: Number, default: 25 }, // percent ticks
+      tickCountX: { type: Number, default: 4 },
+      paddingLeft: { type: Number, default: 32 },
+      paddingRight: { type: Number, default: 6 },
+      paddingTop: { type: Number, default: 6 },
+      paddingBottom: { type: Number, default: 20 },
+      showTooltip: { type: Boolean, default: false },
+    },
+    data() {
+      return {
+        hoverIdx: -1,
+      }
+    },
+    computed: {
+      viewBoxAttr() {
+        return '0 0 ' + this.vbWidth + ' ' + this.height
+      },
+      drawWidth() {
+        return Math.max(1, this.vbWidth - this.paddingLeft - this.paddingRight)
+      },
+      drawHeight() {
+        return Math.max(1, this.height - this.paddingTop - this.paddingBottom)
+      },
+      nPoints() {
+        return Math.min(this.data.length, this.maxPoints)
+      },
+      dataSlice() {
+        const n = this.nPoints
+        if (n === 0) return []
+        return this.data.slice(this.data.length - n)
+      },
+      labelsSlice() {
+        const n = this.nPoints
+        if (!this.labels || this.labels.length === 0 || n === 0) return []
+        const start = Math.max(0, this.labels.length - n)
+        return this.labels.slice(start)
+      },
+      pointsArr() {
+        const n = this.nPoints
+        if (n === 0) return []
+        const slice = this.dataSlice
+        const max = 100
+        const w = this.drawWidth
+        const h = this.drawHeight
+        const dx = n > 1 ? w / (n - 1) : 0
+        return slice.map((v, i) => {
+          const x = Math.round(this.paddingLeft + i * dx)
+          const y = Math.round(this.paddingTop + (h - (Math.max(0, Math.min(100, v)) / max) * h))
+          return [x, y]
+        })
+      },
+      points() {
+        return this.pointsArr.map(p => `${p[0]},${p[1]}`).join(' ')
+      },
+      areaPath() {
+        if (this.pointsArr.length === 0) return ''
+        const first = this.pointsArr[0]
+        const last = this.pointsArr[this.pointsArr.length - 1]
+        const line = this.points
+        // Close to bottom to create an area fill
+        return `M ${first[0]},${this.paddingTop + this.drawHeight} L ${line.replace(/ /g,' L ')} L ${last[0]},${this.paddingTop + this.drawHeight} Z`
+      },
+      gridLines() {
+        if (!this.showGrid) return []
+        const h = this.drawHeight
+        const w = this.drawWidth
+        // draw at 25%, 50%, 75%
+        return [0.25, 0.5, 0.75]
+          .map(r => Math.round(this.paddingTop + h * r))
+          .map(y => ({ x1: this.paddingLeft, y1: y, x2: this.paddingLeft + w, y2: y }))
+      },
+      lastPoint() {
+        if (this.pointsArr.length === 0) return null
+        return this.pointsArr[this.pointsArr.length - 1]
+      },
+      yTicks() {
+        if (!this.showAxes) return []
+        const step = Math.max(1, this.yTickStep)
+        const ticks = []
+        for (let p = 0; p <= 100; p += step) {
+          const y = Math.round(this.paddingTop + (this.drawHeight - (p / 100) * this.drawHeight))
+          ticks.push({ y, label: `${p}%` })
+        }
+        return ticks
+      },
+      xTicks() {
+        if (!this.showAxes) return []
+        const labels = this.labelsSlice
+        const n = this.nPoints
+        const m = Math.max(2, this.tickCountX)
+        const ticks = []
+        if (n === 0) return ticks
+        const w = this.drawWidth
+        const dx = n > 1 ? w / (n - 1) : 0
+        const positions = []
+        for (let i = 0; i < m; i++) {
+          const idx = Math.round((i * (n - 1)) / (m - 1))
+          positions.push(idx)
+        }
+        positions.forEach(idx => {
+          const label = labels[idx] != null ? String(labels[idx]) : String(idx)
+          const x = Math.round(this.paddingLeft + idx * dx)
+          ticks.push({ x, label })
+        })
+        return ticks
+      },
+    },
+    methods: {
+      onMouseMove(evt) {
+        if (!this.showTooltip || this.pointsArr.length === 0) return
+        const rect = evt.currentTarget.getBoundingClientRect()
+        const px = evt.clientX - rect.left
+        // translate to viewBox space
+        const x = (px / rect.width) * this.vbWidth
+        const n = this.nPoints
+        const dx = n > 1 ? this.drawWidth / (n - 1) : 0
+        const idx = Math.max(0, Math.min(n - 1, Math.round((x - this.paddingLeft) / (dx || 1))))
+        this.hoverIdx = idx
+      },
+      onMouseLeave() {
+        this.hoverIdx = -1
+      },
+      fmtHoverText() {
+        const labels = this.labelsSlice
+        const idx = this.hoverIdx
+        if (idx < 0 || idx >= this.dataSlice.length) return ''
+        const val = Math.max(0, Math.min(100, Number(this.dataSlice[idx] || 0)))
+        const lab = labels[idx] != null ? labels[idx] : ''
+        return `${val}%${lab ? ' • ' + lab : ''}`
+      },
+    },
+    template: `
+      <svg width="100%" :height="height" :viewBox="viewBoxAttr" preserveAspectRatio="none" style="display:block"
+           @mousemove="onMouseMove" @mouseleave="onMouseLeave">
+        <defs>
+          <linearGradient id="spkGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" :stop-color="stroke" :stop-opacity="fillOpacity"/>
+            <stop offset="100%" :stop-color="stroke" stop-opacity="0"/>
+          </linearGradient>
+        </defs>
+        <g v-if="showGrid">
+          <line v-for="(g,i) in gridLines" :key="i" :x1="g.x1" :y1="g.y1" :x2="g.x2" :y2="g.y2" :stroke="gridColor" stroke-width="1"/>
+        </g>
+        <g v-if="showAxes">
+          <!-- Y ticks/labels -->
+          <g v-for="(t,i) in yTicks" :key="'y'+i">
+            <text :x="Math.max(0, paddingLeft - 4)" :y="t.y + 4" text-anchor="end" font-size="10" fill="rgba(200,200,200,0.8)" v-text="t.label"></text>
+          </g>
+          <!-- X ticks/labels -->
+          <g v-for="(t,i) in xTicks" :key="'x'+i">
+            <text :x="t.x" :y="paddingTop + drawHeight + 14" text-anchor="middle" font-size="10" fill="rgba(200,200,200,0.8)" v-text="t.label"></text>
+          </g>
+        </g>
+        <path v-if="areaPath" :d="areaPath" fill="url(#spkGrad)" stroke="none" />
+        <polyline :points="points" fill="none" :stroke="stroke" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round"/>
+        <circle v-if="showMarker && lastPoint" :cx="lastPoint[0]" :cy="lastPoint[1]" :r="markerRadius" :fill="stroke" />
+        <!-- Hover marker/tooltip -->
+        <g v-if="showTooltip && hoverIdx >= 0">
+          <line :x1="pointsArr[hoverIdx][0]" :x2="pointsArr[hoverIdx][0]" :y1="paddingTop" :y2="paddingTop + drawHeight" stroke="rgba(255,255,255,0.25)" stroke-width="1" />
+          <circle :cx="pointsArr[hoverIdx][0]" :cy="pointsArr[hoverIdx][1]" r="3.5" :fill="stroke" />
+          <text :x="pointsArr[hoverIdx][0]" :y="paddingTop + 12" text-anchor="middle" font-size="11" fill="#fff" style="paint-order: stroke; stroke: rgba(0,0,0,0.35); stroke-width: 3;" v-text="fmtHoverText()"></text>
+        </g>
+      </svg>
+    `,
+  })
+
     class CurTotal {
 
         constructor(current, total) {
@@ -659,6 +878,10 @@ ${dateTime}
               spinning: false
             },
             status: new Status(),
+            cpuHistory: [], // keep last N cpu utilization points (0..100)
+            cpuHistoryLong: [], // long-range history for modal (values)
+            cpuHistoryLabels: [], // formatted timestamps matching long history
+            cpuHistoryModal: { visible: false, minutes: 60 },
             versionModal,
             logModal,
             xraylogModal,
@@ -689,7 +912,46 @@ ${dateTime}
             },
             setStatus(data) {
                 this.status = new Status(data);
+                // Push CPU percent into history (clamped 0..100)
+                const v = Math.max(0, Math.min(100, Number(data?.cpu ?? 0)))
+                this.cpuHistory.push(v)
+                const maxPoints = this.isMobile ? 60 : 120
+                if (this.cpuHistory.length > maxPoints) {
+                  this.cpuHistory.splice(0, this.cpuHistory.length - maxPoints)
+                }
             },
+      openCpuHistory() {
+        this.cpuHistoryModal.visible = true
+        this.loadCpuHistory()
+      },
+      async loadCpuHistory() {
+        const mins = this.cpuHistoryModal.minutes || 60
+        try {
+          const msg = await HttpUtil.get(`/panel/api/server/cpuHistory?q=${mins}`)
+          if (msg.success && Array.isArray(msg.obj)) {
+            // msg.obj is array of {t, cpu}
+            const arr = msg.obj.map(p => Math.max(0, Math.min(100, Number(p.cpu || 0))))
+            const labels = msg.obj.map(p => {
+              const t = p.t
+              let d
+              if (typeof t === 'number') {
+                // Heuristic: if seconds, convert to ms
+                d = new Date(t < 1e12 ? t * 1000 : t)
+              } else {
+                d = new Date(t)
+              }
+              if (isNaN(d.getTime())) return ''
+              const hh = String(d.getHours()).padStart(2, '0')
+              const mm = String(d.getMinutes()).padStart(2, '0')
+              return `${hh}:${mm}`
+            })
+            this.cpuHistoryLong = arr
+            this.cpuHistoryLabels = labels
+          }
+        } catch (e) {
+          console.error('Failed to load CPU history', e)
+        }
+      },
             async openSelectV2rayVersion() {
                 this.loading(true);
                 const msg = await HttpUtil.get('/panel/api/server/getXrayVersion');
diff --git a/web/service/server.go b/web/service/server.go
index 85af5597..de6cc7f5 100644
--- a/web/service/server.go
+++ b/web/service/server.go
@@ -16,6 +16,7 @@ import (
 	"runtime"
 	"strconv"
 	"strings"
+	"sync"
 	"time"
 
 	"x-ui/config"
@@ -98,6 +99,20 @@ type ServerService struct {
 	cachedIPv4     string
 	cachedIPv6     string
 	noIPv6         bool
+	// CPU utilization smoothing state
+	mu               sync.Mutex
+	lastCPUTimes     cpu.TimesStat
+	hasLastCPUSample bool
+	emaCPU           float64
+	// CPU history buffer (in-memory, protected by mu)
+	cpuHistory  []CPUSample
+	cpuCapacity int
+}
+
+// CPUSample represents a single CPU utilization sample with timestamp
+type CPUSample struct {
+	T   int64   `json:"t"`   // unix seconds
+	Cpu float64 `json:"cpu"` // percent 0..100
 }
 
 func getPublicIP(url string) string {
@@ -139,11 +154,11 @@ func (s *ServerService) GetStatus(lastStatus *Status) *Status {
 	}
 
 	// CPU stats
-	percents, err := cpu.Percent(0, false)
+	util, err := s.sampleCPUUtilization()
 	if err != nil {
 		logger.Warning("get cpu percent failed:", err)
 	} else {
-		status.Cpu = percents[0]
+		status.Cpu = util
 	}
 
 	status.CpuCores, err = cpu.Counts(false)
@@ -307,6 +322,137 @@ func (s *ServerService) GetStatus(lastStatus *Status) *Status {
 	return status
 }
 
+// AppendCpuSample appends a CPU sample into the in-memory history with capacity trimming.
+func (s *ServerService) AppendCpuSample(t time.Time, v float64) {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	if s.cpuCapacity == 0 {
+		s.cpuCapacity = 10800 // ~6 hours at 2s per sample
+	}
+	p := CPUSample{T: t.Unix(), Cpu: v}
+	s.cpuHistory = append(s.cpuHistory, p)
+	if len(s.cpuHistory) > s.cpuCapacity {
+		drop := len(s.cpuHistory) - s.cpuCapacity
+		s.cpuHistory = s.cpuHistory[drop:]
+	}
+}
+
+// GetCpuHistory returns samples from the last 'mins' minutes (bounded 1..360).
+func (s *ServerService) GetCpuHistory(mins int) []CPUSample {
+	if mins < 1 {
+		mins = 1
+	}
+	if mins > 360 {
+		mins = 360
+	}
+	cutoff := time.Now().Add(-time.Duration(mins) * time.Minute).Unix()
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	if len(s.cpuHistory) == 0 {
+		return nil
+	}
+	// find first index >= cutoff (linear scan from end is fine for these sizes)
+	i := len(s.cpuHistory) - 1
+	for ; i >= 0; i-- {
+		if s.cpuHistory[i].T < cutoff {
+			i++
+			break
+		}
+	}
+	if i < 0 {
+		i = 0
+	}
+	// copy to avoid exposing internal slice
+	out := make([]CPUSample, len(s.cpuHistory)-i)
+	copy(out, s.cpuHistory[i:])
+	return out
+}
+
+// sampleCPUUtilization returns a smoothed total CPU utilization percentage across all logical processors.
+// It computes utilization from CPU time deltas (non-blocking) and applies an exponential moving average
+// to reduce spikes similar to Task Manager's smoothing.
+func (s *ServerService) sampleCPUUtilization() (float64, error) {
+	// Prefer native Windows API to avoid external deps for CPU percent
+	if runtime.GOOS == "windows" {
+		if pct, err := sys.CPUPercentRaw(); err == nil {
+			s.mu.Lock()
+			// Smooth with EMA
+			const alpha = 0.3
+			if s.emaCPU == 0 {
+				s.emaCPU = pct
+			} else {
+				s.emaCPU = alpha*pct + (1-alpha)*s.emaCPU
+			}
+			val := s.emaCPU
+			s.mu.Unlock()
+			return val, nil
+		}
+		// If native call fails, fall back to gopsutil times
+	}
+	// Read aggregate CPU times (all CPUs combined)
+	times, err := cpu.Times(false)
+	if err != nil {
+		return 0, err
+	}
+	if len(times) == 0 {
+		return 0, fmt.Errorf("no cpu times available")
+	}
+
+	cur := times[0]
+
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	// If this is the first sample, initialize and return current EMA (0 by default)
+	if !s.hasLastCPUSample {
+		s.lastCPUTimes = cur
+		s.hasLastCPUSample = true
+		return s.emaCPU, nil
+	}
+
+	// Compute busy and total deltas
+	idleDelta := cur.Idle - s.lastCPUTimes.Idle
+	// Sum of busy deltas (exclude Idle)
+	busyDelta := (cur.User - s.lastCPUTimes.User) +
+		(cur.System - s.lastCPUTimes.System) +
+		(cur.Nice - s.lastCPUTimes.Nice) +
+		(cur.Iowait - s.lastCPUTimes.Iowait) +
+		(cur.Irq - s.lastCPUTimes.Irq) +
+		(cur.Softirq - s.lastCPUTimes.Softirq) +
+		(cur.Steal - s.lastCPUTimes.Steal) +
+		(cur.Guest - s.lastCPUTimes.Guest) +
+		(cur.GuestNice - s.lastCPUTimes.GuestNice)
+
+	totalDelta := busyDelta + idleDelta
+
+	// Update last sample for next time
+	s.lastCPUTimes = cur
+
+	// Guard against division by zero or negative deltas (e.g., counter resets)
+	if totalDelta <= 0 {
+		return s.emaCPU, nil
+	}
+
+	raw := 100.0 * (busyDelta / totalDelta)
+	if raw < 0 {
+		raw = 0
+	}
+	if raw > 100 {
+		raw = 100
+	}
+
+	// Exponential moving average to smooth spikes
+	const alpha = 0.3 // smoothing factor (0<alpha<=1). Higher = more responsive, lower = smoother
+	if s.emaCPU == 0 {
+		// Initialize EMA with the first real reading to avoid long warm-up from zero
+		s.emaCPU = raw
+	} else {
+		s.emaCPU = alpha*raw + (1-alpha)*s.emaCPU
+	}
+
+	return s.emaCPU, nil
+}
+
 func (s *ServerService) GetXrayVersions() ([]string, error) {
 	const (
 		XrayURL    = "https://api.github.com/repos/XTLS/Xray-core/releases"
-- 
cgit v1.2.3