From 83e0226e414c1c0ce5c83920ed963d3c110d09a0 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Sun, 1 Dec 2024 00:03:26 +0800
Subject: [PATCH] feat(monitoring, public): enhance metrics logging and display

- Added a new function to format latency metrics in both Go and JavaScript for improved readability.
- Updated the LogRequest function to parse and store only the domain of the referer, enhancing data clarity.
- Modified the recent requests and top referers display logic in the HTML to improve performance and maintainability.
- Ensured that the recent requests are displayed in a more user-friendly format, including formatted latency values.
---
 monitoring/metrics.go | 28 +++++++++++++++++++----
 public/index.html     | 53 ++++++++++++++++++++++++++++---------------
 2 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/monitoring/metrics.go b/monitoring/metrics.go
index 0aed431..cf16de8 100644
--- a/monitoring/metrics.go
+++ b/monitoring/metrics.go
@@ -1,6 +1,8 @@
 package monitoring
 
 import (
+	"fmt"
+	"net/url"
 	"runtime"
 	"strings"
 	"sync"
@@ -88,13 +90,31 @@ func CollectMetrics() *SystemMetrics {
 	return &metrics
 }
 
+func formatLatency(microseconds float64) string {
+	if microseconds < 1000 {
+		return fmt.Sprintf("%.2fµs", microseconds)
+	}
+	if microseconds < 1000000 {
+		return fmt.Sprintf("%.2fms", microseconds/1000)
+	}
+	return fmt.Sprintf("%.2fs", microseconds/1000000)
+}
+
 func LogRequest(log RequestLog) {
 	mu.Lock()
 	defer mu.Unlock()
 
 	metrics.RequestCount++
 	metrics.StatusCodes[log.StatusCode]++
-	metrics.TopReferers[log.Referer]++
+
+	// 处理 referer，只保留域名
+	if log.Referer != "direct" {
+		if parsedURL, err := url.Parse(log.Referer); err == nil {
+			metrics.TopReferers[parsedURL.Host]++
+		}
+	} else {
+		metrics.TopReferers["direct"]++
+	}
 
 	// 只记录 API 请求
 	if strings.HasPrefix(log.Path, "/pic/") || strings.HasPrefix(log.Path, "/video/") {
@@ -105,10 +125,10 @@ func LogRequest(log RequestLog) {
 			metrics.PathLatencies[log.Path] = log.Latency
 		}
 
-		// 保存最近请求记录
-		metrics.RecentRequests = append(metrics.RecentRequests, log)
+		// 保存最近请求记录，插入到开头
+		metrics.RecentRequests = append([]RequestLog{log}, metrics.RecentRequests...)
 		if len(metrics.RecentRequests) > 100 {
-			metrics.RecentRequests = metrics.RecentRequests[1:]
+			metrics.RecentRequests = metrics.RecentRequests[:100]
 		}
 	}
 }
diff --git a/public/index.html b/public/index.html
index 23d0628..d289413 100644
--- a/public/index.html
+++ b/public/index.html
@@ -218,6 +218,39 @@
         }
         
         function updateMetricsDisplay(metrics) {
+            // 格式化延迟显示
+            function formatLatency(microseconds) {
+                if (microseconds < 1000) {
+                    return `${microseconds.toFixed(2)}µs`;
+                }
+                if (microseconds < 1000000) {
+                    return `${(microseconds/1000).toFixed(2)}ms`;
+                }
+                return `${(microseconds/1000000).toFixed(2)}s`;
+            }
+
+            // 最近请求
+            const recentRequestsHtml = metrics.recent_requests.map(req => `
+                <tr>
+                    <td>${new Date(req.time).toLocaleString()}</td>
+                    <td>${req.path}</td>
+                    <td>${req.method}</td>
+                    <td>${req.status_code}</td>
+                    <td>${formatLatency(req.latency)}</td>
+                </tr>
+            `).join('');
+
+            // 热门引用来源
+            const topReferersHtml = Object.entries(metrics.top_referers)
+                .sort(([, a], [, b]) => b - a)
+                .slice(0, 10)
+                .map(([referer, count]) => `
+                    <div class="referer-item">
+                        <span class="referer">${referer}</span>
+                        <span class="count">${count}</span>
+                    </div>
+                `).join('');
+
             const metricsHtml = `
                 <div class="metrics-container">
                     <div class="metrics-section">
@@ -273,15 +306,7 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    ${metrics.recent_requests.slice(0, 10).map(req => `
-                                        <tr>
-                                            <td>${new Date(req.time).toLocaleString()}</td>
-                                            <td>${req.path}</td>
-                                            <td>${req.method}</td>
-                                            <td>${req.status_code}</td>
-                                            <td>${req.latency.toFixed(2)}ms</td>
-                                        </tr>
-                                    `).join('')}
+                                    ${recentRequestsHtml}
                                 </tbody>
                             </table>
                         </div>
@@ -290,15 +315,7 @@
                     <div class="metrics-section">
                         <h3>热门引用来源</h3>
                         <div class="top-referers">
-                            ${Object.entries(metrics.top_referers)
-                                .sort(([,a], [,b]) => b - a)
-                                .slice(0, 10)
-                                .map(([referer, count]) => `
-                                    <div class="referer-item">
-                                        <span class="referer">${referer || '直接访问'}</span>
-                                        <span class="count">${count}</span>
-                                    </div>
-                                `).join('')}
+                            ${topReferersHtml}
                         </div>
                     </div>
                 </div>