web/frps: use API v2 for client and proxy details (#5386)

web/frps/src/api/proxy.ts

@@ -32,7 +32,7 @@ export const getProxiesV2 = async (params: ProxyListV2Params = {}) => {
   }
 }
 
-const toLegacyProxyStats = (proxy: ProxyV2Info): ProxyStatsInfo => ({
+export const toLegacyProxyStats = (proxy: ProxyV2Info): ProxyStatsInfo => ({
   name: proxy.name,
   type: proxy.type,
   conf: proxy.spec,
@@ -43,13 +43,20 @@ const toLegacyProxyStats = (proxy: ProxyV2Info): ProxyStatsInfo => ({
   curConns: proxy.status.curConns,
   lastStartTime: proxy.status.lastStartTime,
   lastCloseTime: proxy.status.lastCloseTime,
-  status: proxy.status.phase,
+  status: proxy.status.state || proxy.status.phase || '',
 })
 
 export const getProxy = (type: string, name: string) => {
   return http.get<ProxyStatsInfo>(`../api/proxy/${type}/${name}`)
 }
 
+export const getProxyByNameV2 = async (name: string) => {
+  const proxy = await http.getV2<ProxyV2Info>(
+    `../api/v2/proxies/${encodeURIComponent(name)}`,
+  )
+  return toLegacyProxyStats(proxy)
+}
+
 export const getProxyByName = (name: string) => {
   return http.get<ProxyStatsInfo>(`../api/proxies/${name}`)
 }

web/frps/src/types/proxy.ts

@@ -36,7 +36,8 @@ export interface ProxyV2Info {
 }
 
 export interface ProxyV2Status {
-  phase: string
+  state?: string
+  phase?: string
   todayTrafficIn: number
   todayTrafficOut: number
   curConns: number

web/frps/src/views/ProxyDetail.vue

@@ -241,7 +241,7 @@ import {
   Tickets,
   Location,
 } from '@element-plus/icons-vue'
-import { getProxyByName } from '../api/proxy'
+import { getProxyByNameV2 } from '../api/proxy'
 import { getServerInfo } from '../api/server'
 import {
   BaseProxy,
@@ -365,9 +365,9 @@ const fetchProxy = async () => {
   }
 
   try {
-    const data = await getProxyByName(name)
+    const data = await getProxyByNameV2(name)
     const info = await fetchServerInfo()
-    const type = data.conf?.type || ''
+    const type = data.type || data.conf?.type || ''
 
     if (type === 'tcp') {
       proxy.value = new TCPProxy(data)