Add frps proxy traffic API v2

Release.md

@@ -1,6 +1,7 @@
 ## Features
 
-* Expanded the frps dashboard API v2 migration across Clients, Proxies, Server Overview, Client Detail, and Proxy Detail, covering paginated users/clients/proxies, detail data, proxy traffic history, server system info, offline proxy statistics pruning, server-side pagination, search, and proxy type filtering.
+* Added dashboard API v2 pagination endpoints for users, clients, and proxies.
+* The frps dashboard Clients and Proxies pages now use API v2 pagination and server-side search, including proxy type filtering and searchable proxy spec fields such as remote ports, custom domains, and subdomains.
 
 ## Fixes
 

pkg/metrics/mem/server.go

@@ -239,11 +239,9 @@ func toProxyStats(name string, proxyStats *ProxyStatistics) *ProxyStats {
 	}
 	if !proxyStats.LastStartTime.IsZero() {
 		ps.LastStartTime = proxyStats.LastStartTime.Format("01-02 15:04:05")
-		ps.LastStartAt = proxyStats.LastStartTime.Unix()
 	}
 	if !proxyStats.LastCloseTime.IsZero() {
 		ps.LastCloseTime = proxyStats.LastCloseTime.Format("01-02 15:04:05")
-		ps.LastCloseAt = proxyStats.LastCloseTime.Unix()
 	}
 	return ps
 }

pkg/metrics/mem/server_test.go

@@ -22,12 +22,6 @@ func TestServerMetricsUsesClockForProxyTimestamps(t *testing.T) {
 	clk.SetTime(closedAt)
 	metrics.CloseProxy("proxy", "tcp")
 	require.Equal(closedAt, metrics.info.ProxyStatistics["proxy"].LastCloseTime)
-
-	stats := metrics.GetProxyByName("proxy")
-	require.Equal(start.Format("01-02 15:04:05"), stats.LastStartTime)
-	require.Equal(closedAt.Format("01-02 15:04:05"), stats.LastCloseTime)
-	require.Equal(start.Unix(), stats.LastStartAt)
-	require.Equal(closedAt.Unix(), stats.LastCloseAt)
 }
 
 func TestServerMetricsClearUselessInfoUsesClock(t *testing.T) {

pkg/metrics/mem/types.go

@@ -41,8 +41,6 @@ type ProxyStats struct {
 	TodayTrafficOut int64
 	LastStartTime   string
 	LastCloseTime   string
-	LastStartAt     int64
-	LastCloseAt     int64
 	CurConns        int64
 }
 

server/http/controller_v2.go

@@ -545,8 +545,8 @@ func (c *Controller) buildV2ProxyResp(ps *mem.ProxyStats) model.V2ProxyResp {
 			TodayTrafficIn:  ps.TodayTrafficIn,
 			TodayTrafficOut: ps.TodayTrafficOut,
 			CurConns:        ps.CurConns,
-			LastStartAt:     ps.LastStartAt,
-			LastCloseAt:     ps.LastCloseAt,
+			LastStartTime:   ps.LastStartTime,
+			LastCloseTime:   ps.LastCloseTime,
 		},
 	}
 }

server/http/controller_v2_test.go

@@ -421,22 +421,10 @@ func TestAPIV2ProxyListDetailAndUsers(t *testing.T) {
 	}
 
 	resp = performRequest(router, "/api/v2/proxies/tcp-alice")
-	rawProxyDetailResp := decodeResponse[v2EnvelopeForTest[map[string]json.RawMessage]](t, resp)
-	assertRawJSONKeysFromMessage(t, rawProxyDetailResp.Data["status"],
-		"curConns",
-		"lastCloseAt",
-		"lastStartAt",
-		"phase",
-		"todayTrafficIn",
-		"todayTrafficOut",
-	)
 	proxyDetailResp := decodeResponse[v2EnvelopeForTest[model.V2ProxyResp]](t, resp)
 	if proxyDetailResp.Data.Name != "tcp-alice" || proxyDetailResp.Data.User != "alice" {
 		t.Fatalf("proxy detail mismatch: %#v", proxyDetailResp.Data)
 	}
-	if proxyDetailResp.Data.Status.LastStartAt != 1783504200 || proxyDetailResp.Data.Status.LastCloseAt != 1783504300 {
-		t.Fatalf("proxy detail timestamp mismatch: %#v", proxyDetailResp.Data.Status)
-	}
 
 	resp = performRequest(router, "/api/v2/users?page=1&pageSize=50")
 	userResp := decodeResponse[v2EnvelopeForTest[model.V2PageResp[model.V2UserResp]]](t, resp)
@@ -756,10 +744,6 @@ func newV2TestController(t *testing.T) *Controller {
 				TodayTrafficIn:  30,
 				TodayTrafficOut: 40,
 				CurConns:        2,
-				LastStartTime:   "07-08 12:30:00",
-				LastCloseTime:   "07-08 12:31:40",
-				LastStartAt:     1783504200,
-				LastCloseAt:     1783504300,
 			},
 			"http-alice": {
 				Name:     "http-alice",

server/http/model/v2.go

@@ -87,8 +87,8 @@ type V2ProxyStatusResp struct {
 	TodayTrafficIn  int64  `json:"todayTrafficIn"`
 	TodayTrafficOut int64  `json:"todayTrafficOut"`
 	CurConns        int64  `json:"curConns"`
-	LastStartAt     int64  `json:"lastStartAt,omitempty"`
-	LastCloseAt     int64  `json:"lastCloseAt,omitempty"`
+	LastStartTime   string `json:"lastStartTime"`
+	LastCloseTime   string `json:"lastCloseTime"`
 }
 
 type V2ProxyTrafficResp struct {

web/frps/src/api/proxy.ts

@@ -1,5 +1,4 @@
 import { buildQueryString, http } from './http'
-import { formatUnixSeconds } from '../utils/format'
 import type { V2Page } from './http'
 import type {
   GetProxyResponse,
@@ -48,9 +47,9 @@ export const toLegacyProxyStats = (proxy: ProxyV2Info): ProxyStatsInfo => ({
   todayTrafficIn: proxy.status.todayTrafficIn,
   todayTrafficOut: proxy.status.todayTrafficOut,
   curConns: proxy.status.curConns,
-  lastStartTime: formatUnixSeconds(proxy.status.lastStartAt),
-  lastCloseTime: formatUnixSeconds(proxy.status.lastCloseAt),
-  status: proxy.status.phase,
+  lastStartTime: proxy.status.lastStartTime,
+  lastCloseTime: proxy.status.lastCloseTime,
+  status: proxy.status.state || proxy.status.phase || '',
 })
 
 export const getProxy = (type: string, name: string) => {

web/frps/src/types/client.ts

@@ -7,6 +7,7 @@ export interface ClientInfoData {
   wireProtocol?: string
   hostname: string
   clientIP?: string
+  metas?: Record<string, string>
   firstConnectedAt: number
   lastConnectedAt: number
   disconnectedAt?: number

web/frps/src/types/proxy.ts

@@ -36,12 +36,13 @@ export interface ProxyV2Info {
 }
 
 export interface ProxyV2Status {
-  phase: 'online' | 'offline'
+  state?: string
+  phase?: string
   todayTrafficIn: number
   todayTrafficOut: number
   curConns: number
-  lastStartAt?: number
-  lastCloseAt?: number
+  lastStartTime: string
+  lastCloseTime: string
 }
 
 export interface TrafficResponse {

web/frps/src/utils/client.ts

@@ -10,6 +10,7 @@ export class Client {
   wireProtocol: string
   hostname: string
   ip: string
+  metas: Map<string, string>
   firstConnectedAt: Date
   lastConnectedAt: Date
   disconnectedAt?: Date
@@ -25,6 +26,12 @@ export class Client {
     this.wireProtocol = data.wireProtocol || ''
     this.hostname = data.hostname
     this.ip = data.clientIP || ''
+    this.metas = new Map<string, string>()
+    if (data.metas) {
+      for (const [key, value] of Object.entries(data.metas)) {
+        this.metas.set(key, value)
+      }
+    }
     this.firstConnectedAt = new Date(data.firstConnectedAt * 1000)
     this.lastConnectedAt = new Date(data.lastConnectedAt * 1000)
     if (data.disconnectedAt && data.disconnectedAt > 0) {
@@ -45,6 +52,10 @@ export class Client {
     return this.runID
   }
 
+  get shortRunId(): string {
+    return this.runID.substring(0, 8)
+  }
+
   get wireProtocolLabel(): string {
     if (!this.wireProtocol) return ''
     return `Protocol ${this.wireProtocol}`
@@ -62,4 +73,28 @@ export class Client {
     if (!this.disconnectedAt) return ''
     return formatDistanceToNow(this.disconnectedAt)
   }
+
+  get statusColor(): string {
+    return this.online ? 'success' : 'danger'
+  }
+
+  get metasArray(): Array<{ key: string; value: string }> {
+    const arr: Array<{ key: string; value: string }> = []
+    this.metas.forEach((value, key) => {
+      arr.push({ key, value })
+    })
+    return arr
+  }
+
+  matchesFilter(searchText: string): boolean {
+    const search = searchText.toLowerCase()
+    return (
+      this.key.toLowerCase().includes(search) ||
+      this.user.toLowerCase().includes(search) ||
+      this.clientID.toLowerCase().includes(search) ||
+      this.runID.toLowerCase().includes(search) ||
+      this.wireProtocol.toLowerCase().includes(search) ||
+      this.hostname.toLowerCase().includes(search)
+    )
+  }
 }

web/frps/src/utils/format.ts

@@ -19,14 +19,6 @@ export function formatDistanceToNow(date: Date): string {
   return Math.floor(seconds) + ' seconds ago'
 }
 
-export function formatUnixSeconds(seconds?: number): string {
-  if (seconds == null || !Number.isFinite(seconds) || seconds <= 0) return ''
-
-  const date = new Date(seconds * 1000)
-  const pad = (value: number) => value.toString().padStart(2, '0')
-  return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
-}
-
 export function formatFileSize(bytes: number): string {
   if (!Number.isFinite(bytes) || bytes < 0) return '0 B'
   if (bytes === 0) return '0 B'