From 5c3fb00d57a9ac92123b353ef2c62ca09b3b6994 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Sun, 16 Feb 2025 20:46:41 +0800
Subject: [PATCH] feat(dashboard): Add clickable links to paths in metrics
 tables

- Make top paths and recent requests table entries clickable
- Open links in new tabs with appropriate security attributes
- Add hover and color styles to improve link visibility and interaction
---
 internal/metrics/collector.go |  6 +++---
 web/app/dashboard/page.tsx    | 22 ++++++++++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/internal/metrics/collector.go b/internal/metrics/collector.go
index 11723c5..ad9650e 100644
--- a/internal/metrics/collector.go
+++ b/internal/metrics/collector.go
@@ -202,13 +202,13 @@ func FormatUptime(d time.Duration) string {
 	seconds := int(d.Seconds()) % 60
 
 	if days > 0 {
-		return fmt.Sprintf("%d天%d小时%d分钟%d秒", days, hours, minutes, seconds)
+		return fmt.Sprintf("%d天%d时%d分%d秒", days, hours, minutes, seconds)
 	}
 	if hours > 0 {
-		return fmt.Sprintf("%d小时%d分钟%d秒", hours, minutes, seconds)
+		return fmt.Sprintf("%d时%d分%d秒", hours, minutes, seconds)
 	}
 	if minutes > 0 {
-		return fmt.Sprintf("%d分钟%d秒", minutes, seconds)
+		return fmt.Sprintf("%d分%d秒", minutes, seconds)
 	}
 	return fmt.Sprintf("%d秒", seconds)
 }
diff --git a/web/app/dashboard/page.tsx b/web/app/dashboard/page.tsx
index 8f9d466..67beea6 100644
--- a/web/app/dashboard/page.tsx
+++ b/web/app/dashboard/page.tsx
@@ -239,7 +239,16 @@ export default function DashboardPage() {
               <tbody>
                 {(metrics.top_paths || []).map((path, index) => (
                   <tr key={index} className="border-b">
-                    <td className="p-2">{path.path}</td>
+                    <td className="p-2">
+                      <a
+                        href={path.path}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-600 hover:text-blue-800 hover:underline"
+                      >
+                        {path.path}
+                      </a>
+                    </td>
                     <td className="p-2">{path.request_count}</td>
                     <td className="p-2">{path.error_count}</td>
                     <td className="p-2">{path.avg_latency}</td>
@@ -275,7 +284,16 @@ export default function DashboardPage() {
                   .map((req, index) => (
                   <tr key={index} className="border-b hover:bg-gray-50">
                     <td className="p-2">{formatDate(req.Time)}</td>
-                    <td className="p-2 max-w-xs truncate">{req.Path}</td>
+                    <td className="p-2 max-w-xs truncate">
+                      <a
+                        href={req.Path}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-600 hover:text-blue-800 hover:underline"
+                      >
+                        {req.Path}
+                      </a>
+                    </td>
                     <td className="p-2">
                       <span
                         className={`px-2 py-1 rounded-full text-xs ${getStatusColor(