feat(dashboard): add v2 client detail status (#5381)

web/frps/src/api/client.ts

@@ -24,3 +24,7 @@ export const getClientsV2 = (params: ClientListV2Params = {}) => {
 export const getClient = (key: string) => {
   return http.get<ClientInfoData>(`../api/clients/${key}`)
 }
+
+export const getClientV2 = (key: string) => {
+  return http.getV2<ClientInfoData>(`../api/v2/clients/${encodeURIComponent(key)}`)
+}

web/frps/src/types/client.ts

@@ -12,6 +12,13 @@ export interface ClientInfoData {
   lastConnectedAt: number
   disconnectedAt?: number
   online: boolean
+  status?: ClientStatus
+}
+
+export interface ClientStatus {
+  phase: 'online' | 'offline'
+  curConns: number
+  proxyCount: number
 }
 
 export interface ClientListV2Params {

web/frps/src/utils/client.ts

@@ -1,5 +1,5 @@
 import { formatDistanceToNow } from './format'
-import type { ClientInfoData } from '../types/client'
+import type { ClientInfoData, ClientStatus } from '../types/client'
 
 export class Client {
   key: string
@@ -15,6 +15,7 @@ export class Client {
   lastConnectedAt: Date
   disconnectedAt?: Date
   online: boolean
+  status: ClientStatus
 
   constructor(data: ClientInfoData) {
     this.key = data.key
@@ -37,6 +38,11 @@ export class Client {
       this.disconnectedAt = new Date(data.disconnectedAt * 1000)
     }
     this.online = data.online
+    this.status = data.status || {
+      phase: this.online ? 'online' : 'offline',
+      curConns: 0,
+      proxyCount: 0,
+    }
   }
 
   get displayName(): string {

web/frps/src/views/ClientDetail.vue

@@ -55,7 +55,7 @@
           <div class="info-section">
             <div class="info-item">
               <span class="info-label">Connections</span>
-              <span class="info-value">{{ totalConnections }}</span>
+              <span class="info-value">{{ client.status.curConns }}</span>
             </div>
             <div class="info-item">
               <span class="info-label">Run ID</span>
@@ -85,7 +85,7 @@
           <div class="proxies-header">
             <div class="proxies-title">
               <h2>Proxies</h2>
-              <span class="proxies-count">{{ filteredProxies.length }}</span>
+              <span class="proxies-count">{{ total }}</span>
             </div>
             <el-input
               v-model="proxySearch"
@@ -100,21 +100,32 @@
               <el-icon class="is-loading"><Loading /></el-icon>
               <span>Loading...</span>
             </div>
-            <div v-else-if="filteredProxies.length > 0" class="proxies-list">
+            <div v-else-if="proxies.length > 0" class="proxies-list">
               <ProxyCard
-                v-for="proxy in filteredProxies"
-                :key="proxy.name"
+                v-for="proxy in proxies"
+                :key="`${proxy.type}:${proxy.name}`"
                 :proxy="proxy"
                 show-type
               />
             </div>
-            <div v-else-if="clientProxies.length > 0" class="empty-state">
+            <div v-else-if="proxySearch.trim()" class="empty-state">
               <p>No proxies match "{{ proxySearch }}"</p>
             </div>
             <div v-else class="empty-state">
               <p>No proxies found</p>
             </div>
           </div>
+          <div v-if="total > 0" class="pagination-section">
+            <ElPagination
+              :current-page="page"
+              :page-size="pageSize"
+              :page-sizes="[10, 20, 50, 100]"
+              :total="total"
+              layout="total, sizes, prev, pager, next"
+              @current-change="onPageChange"
+              @size-change="onPageSizeChange"
+            />
+          </div>
         </div>
       </template>
 
@@ -130,13 +141,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElPagination } from 'element-plus'
 import { ArrowLeft, Loading, Search } from '@element-plus/icons-vue'
 import { Client } from '../utils/client'
-import { getClient } from '../api/client'
-import { getProxiesByType } from '../api/proxy'
+import { getClientV2 } from '../api/client'
+import { getProxiesV2 } from '../api/proxy'
 import {
   BaseProxy,
   TCPProxy,
@@ -149,6 +160,7 @@ import {
 } from '../utils/proxy'
 import { getServerInfo } from '../api/server'
 import ProxyCard from '../components/ProxyCard.vue'
+import type { ProxyStatsInfo } from '../types/proxy'
 
 const route = useRoute()
 const router = useRouter()
@@ -163,119 +175,190 @@ const goBack = () => {
   }
 }
 const proxiesLoading = ref(false)
-const allProxies = ref<BaseProxy[]>([])
+const proxies = ref<BaseProxy[]>([])
 const proxySearch = ref('')
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+let requestSeq = 0
+let searchDebounceTimer: number | null = null
 
-let serverInfo: {
+type ServerInfoLite = {
   vhostHTTPPort: number
   vhostHTTPSPort: number
   tcpmuxHTTPConnectPort: number
   subdomainHost: string
-} | null = null
-
-const clientProxies = computed(() => {
-  if (!client.value) return []
-  return allProxies.value.filter(
-    (p) =>
-      p.clientID === client.value!.clientID && p.user === client.value!.user,
-  )
-})
-
-const filteredProxies = computed(() => {
-  if (!proxySearch.value) return clientProxies.value
-  const search = proxySearch.value.toLowerCase()
-  return clientProxies.value.filter(
-    (p) =>
-      p.name.toLowerCase().includes(search) ||
-      p.type.toLowerCase().includes(search),
-  )
-})
-
-const totalConnections = computed(() => {
-  return clientProxies.value.reduce((sum, p) => sum + p.conns, 0)
-})
-
-const fetchServerInfo = async () => {
-  if (serverInfo) return serverInfo
-  const res = await getServerInfo()
-  serverInfo = res
-  return serverInfo
 }
 
-const fetchClient = async () => {
+let serverInfoPromise: Promise<ServerInfoLite> | null = null
+
+const fetchServerInfo = (): Promise<ServerInfoLite> => {
+  if (!serverInfoPromise) {
+    serverInfoPromise = getServerInfo().catch((err) => {
+      serverInfoPromise = null
+      throw err
+    })
+  }
+  return serverInfoPromise
+}
+
+const fetchClient = async (): Promise<boolean> => {
   const key = route.params.key as string
   if (!key) {
     loading.value = false
-    return
+    return false
   }
   try {
-    const data = await getClient(key)
+    const data = await getClientV2(key)
     client.value = new Client(data)
+    return true
   } catch (error: any) {
     ElMessage.error('Failed to fetch client: ' + error.message)
+    return false
   } finally {
     loading.value = false
   }
 }
 
-const fetchProxies = async () => {
-  proxiesLoading.value = true
-  const proxyTypes = ['tcp', 'udp', 'http', 'https', 'tcpmux', 'stcp', 'sudp']
-  const proxies: BaseProxy[] = []
-  try {
+const convertProxy = async (
+  proxy: ProxyStatsInfo,
+): Promise<BaseProxy | null> => {
+  const type = proxy.type || ''
+  if (type === 'tcp') {
+    return new TCPProxy(proxy)
+  }
+  if (type === 'udp') {
+    return new UDPProxy(proxy)
+  }
+  if (type === 'http') {
     const info = await fetchServerInfo()
-    for (const type of proxyTypes) {
-      try {
-        const json = await getProxiesByType(type)
-        if (!json.proxies) continue
-        if (type === 'tcp') {
-          proxies.push(...json.proxies.map((p: any) => new TCPProxy(p)))
-        } else if (type === 'udp') {
-          proxies.push(...json.proxies.map((p: any) => new UDPProxy(p)))
-        } else if (type === 'http' && info?.vhostHTTPPort) {
-          proxies.push(
-            ...json.proxies.map(
-              (p: any) =>
-                new HTTPProxy(p, info.vhostHTTPPort, info.subdomainHost),
-            ),
-          )
-        } else if (type === 'https' && info?.vhostHTTPSPort) {
-          proxies.push(
-            ...json.proxies.map(
-              (p: any) =>
-                new HTTPSProxy(p, info.vhostHTTPSPort, info.subdomainHost),
-            ),
-          )
-        } else if (type === 'tcpmux' && info?.tcpmuxHTTPConnectPort) {
-          proxies.push(
-            ...json.proxies.map(
-              (p: any) =>
-                new TCPMuxProxy(
-                  p,
-                  info.tcpmuxHTTPConnectPort,
-                  info.subdomainHost,
-                ),
-            ),
-          )
-        } else if (type === 'stcp') {
-          proxies.push(...json.proxies.map((p: any) => new STCPProxy(p)))
-        } else if (type === 'sudp') {
-          proxies.push(...json.proxies.map((p: any) => new SUDPProxy(p)))
-        }
-      } catch {
-        // Ignore
-      }
+    if (info && info.vhostHTTPPort) {
+      return new HTTPProxy(proxy, info.vhostHTTPPort, info.subdomainHost)
     }
-    allProxies.value = proxies
-  } catch {
-    // Ignore
+    return null
+  }
+  if (type === 'https') {
+    const info = await fetchServerInfo()
+    if (info && info.vhostHTTPSPort) {
+      return new HTTPSProxy(proxy, info.vhostHTTPSPort, info.subdomainHost)
+    }
+    return null
+  }
+  if (type === 'tcpmux') {
+    const info = await fetchServerInfo()
+    if (info && info.tcpmuxHTTPConnectPort) {
+      return new TCPMuxProxy(
+        proxy,
+        info.tcpmuxHTTPConnectPort,
+        info.subdomainHost,
+      )
+    }
+    return null
+  }
+  if (type === 'stcp') {
+    return new STCPProxy(proxy)
+  }
+  if (type === 'sudp') {
+    return new SUDPProxy(proxy)
+  }
+
+  const bp = new BaseProxy(proxy)
+  bp.type = type
+  return bp
+}
+
+const convertProxies = async (items: ProxyStatsInfo[]): Promise<BaseProxy[]> => {
+  const converted = await Promise.all(items.map((item) => convertProxy(item)))
+  return converted.filter((item): item is BaseProxy => item !== null)
+}
+
+const fetchProxies = async () => {
+  if (!client.value) return
+  const seq = ++requestSeq
+  proxiesLoading.value = true
+
+  try {
+    const q = proxySearch.value.trim()
+    const data = await getProxiesV2({
+      page: page.value,
+      pageSize: pageSize.value,
+      q: q || undefined,
+      clientID: client.value.clientID,
+      user: client.value.user,
+    })
+    if (seq !== requestSeq) return
+
+    const maxPage = Math.max(1, Math.ceil(data.total / data.pageSize))
+    if (data.items.length === 0 && data.total > 0 && data.page > maxPage) {
+      page.value = maxPage
+      await fetchProxies()
+      return
+    }
+
+    const converted = await convertProxies(data.items)
+    if (seq !== requestSeq) return
+
+    proxies.value = converted
+    total.value = data.total
+    page.value = data.page
+    pageSize.value = data.pageSize
+  } catch (error: any) {
+    if (seq !== requestSeq) return
+    ElMessage.error('Failed to fetch proxies: ' + error.message)
   } finally {
-    proxiesLoading.value = false
+    if (seq === requestSeq) {
+      proxiesLoading.value = false
+    }
   }
 }
 
-onMounted(() => {
-  fetchClient()
+const clearSearchDebounce = () => {
+  if (searchDebounceTimer !== null) {
+    window.clearTimeout(searchDebounceTimer)
+    searchDebounceTimer = null
+  }
+}
+
+const invalidateProxyRequests = () => {
+  requestSeq++
+  proxiesLoading.value = false
+}
+
+const resetPageAndFetch = () => {
+  clearSearchDebounce()
+  page.value = 1
+  fetchProxies()
+}
+
+const onPageChange = (value: number) => {
+  clearSearchDebounce()
+  page.value = value
+  fetchProxies()
+}
+
+const onPageSizeChange = (value: number) => {
+  pageSize.value = value
+  resetPageAndFetch()
+}
+
+watch(proxySearch, () => {
+  clearSearchDebounce()
+  invalidateProxyRequests()
+  page.value = 1
+  searchDebounceTimer = window.setTimeout(() => {
+    searchDebounceTimer = null
+    fetchProxies()
+  }, 300)
+})
+
+onUnmounted(() => {
+  clearSearchDebounce()
+})
+
+onMounted(async () => {
+  const ok = await fetchClient()
+  if (!ok || !client.value) return
+
   fetchProxies()
 })
 </script>
@@ -483,6 +566,12 @@ html.dark .status-badge.online {
   padding: 16px;
 }
 
+.pagination-section {
+  display: flex;
+  justify-content: center;
+  padding: 0 20px 20px;
+}
+
 .proxies-list {
   display: flex;
   flex-direction: column;