feat(proxy): single proxy node latency test

src/App.tsx

@@ -30,9 +30,7 @@ const Config = lazy(() => import('~/pages/Config'))
 const ProtectedResources = () => {
   const latestConnectionMsg = useWsRequest<WsMsg>('connections')
 
-  createEffect(() => {
+  createEffect(() => setLatestConnectionMsg(latestConnectionMsg()))
-    setLatestConnectionMsg(latestConnectionMsg())
-  })
 
   return null
 }

src/apis/index.ts

@@ -146,6 +146,23 @@ export const selectProxyInGroupAPI = (groupName: string, proxyName: string) => {
   })
 }
 
+export const proxyLatencyTestAPI = (
+  proxyName: string,
+  url: string,
+  timeout: number,
+) => {
+  const request = useRequest()
+
+  return request
+    .get(`proxies/${proxyName}/delay`, {
+      searchParams: {
+        url,
+        timeout,
+      },
+    })
+    .json<{ delay: number }>()
+}
+
 export const proxyGroupLatencyTestAPI = (
   groupName: string,
   url: string,

src/components/ProxyNodeCard.tsx

@@ -1,6 +1,7 @@
+import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
 import { createMemo, Show } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { Latency } from '~/components'
+import { Button, Latency } from '~/components'
 import { filterSpecialProxyType, formatProxyType } from '~/helpers'
 import { useProxies } from '~/signals'
 
@@ -9,6 +10,7 @@ export const ProxyNodeCard = (props: {
   isSelected?: boolean
   onClick?: () => void
 }) => {
+  const { proxyLatencyTest } = useProxies()
   const { proxyName, isSelected, onClick } = props
   const { proxyNodeMap } = useProxies()
   const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
@@ -28,10 +30,23 @@ export const ProxyNodeCard = (props: {
         isSelected && 'border-primary bg-primary-content text-primary',
         onClick && 'cursor-pointer',
       )}
-      onClick={() => onClick?.()}
+      onClick={onClick}
       data-tip={proxyName}
     >
-      <div class="truncate text-left">{proxyName}</div>
+      <div class="flex items-center justify-between gap-2">
+        <span class="truncate text-left">{proxyName}</span>
+
+        <Button
+          class="btn-circle btn-ghost btn-sm"
+          icon={<IconBrandSpeedtest />}
+          onClick={(e) => {
+            e.stopPropagation()
+
+            void proxyLatencyTest(proxyName)
+          }}
+        />
+      </div>
+
       <div class="flex items-center justify-between gap-1">
         <div
           class={twMerge(
@@ -40,8 +55,10 @@ export const ProxyNodeCard = (props: {
           )}
         >
           {formatProxyType(proxyNode()?.type)}
+
           <Show when={specialType()}>{` :: ${specialType()}`}</Show>
         </div>
+
         <div class="text-xs">
           <Latency name={props.proxyName} />
         </div>

src/pages/Proxies.tsx

@@ -41,23 +41,23 @@ export default () => {
     fetchProxies,
     proxies,
     selectProxyInGroup,
-    latencyTestByProxyGroupName,
+    proxyGroupLatencyTest,
     latencyMap,
     proxyProviders,
     updateProviderByProviderName,
     updateAllProvider,
     healthCheckByProviderName,
+    collapsedMap,
+    setCollapsedMap,
+    latencyTestingMap,
+    setLatencyTestingMap,
   } = useProxies()
 
   onMount(fetchProxies)
 
-  const { map: collapsedMap, set: setCollapsedMap } = useStringBooleanMap()
-  const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } =
-    useStringBooleanMap()
-
   const onLatencyTestClick = async (e: MouseEvent, name: string) => {
     e.stopPropagation()
-    void setLatencyTestingMap(name, () => latencyTestByProxyGroupName(name))
+    void setLatencyTestingMap(name, () => proxyGroupLatencyTest(name))
   }
 
   const { map: healthCheckingMap, setWithCallback: setHealthCheckingMap } =

src/signals/proxies.ts

@@ -4,10 +4,12 @@ import {
   fetchProxiesAPI,
   fetchProxyProvidersAPI,
   proxyGroupLatencyTestAPI,
+  proxyLatencyTestAPI,
   proxyProviderHealthCheck,
   selectProxyInGroupAPI,
   updateProxyProviderAPI,
 } from '~/apis'
+import { useStringBooleanMap } from '~/helpers'
 import {
   autoCloseConns,
   latencyQualityMap,
@@ -26,6 +28,10 @@ type ProxyInfo = {
   type: string
 }
 
+const { map: collapsedMap, set: setCollapsedMap } = useStringBooleanMap()
+const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } =
+  useStringBooleanMap()
+
 // these signals should be global state
 const [proxies, setProxies] = createSignal<Proxy[]>([])
 const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
@@ -113,17 +119,30 @@ export const useProxies = () => {
     }
   }
 
-  const latencyTestByProxyGroupName = async (proxyGroupName: string) => {
+  const proxyLatencyTest = async (proxyName: string) => {
+    const { delay } = await proxyLatencyTestAPI(
+      proxyName,
+      urlForLatencyTest(),
+      latencyTestTimeoutDuration(),
+    )
+
+    setLatencyMap((latencyMap) => ({
+      ...latencyMap,
+      [proxyName]: delay,
+    }))
+  }
+
+  const proxyGroupLatencyTest = async (proxyGroupName: string) => {
     const data = await proxyGroupLatencyTestAPI(
       proxyGroupName,
       urlForLatencyTest(),
       latencyTestTimeoutDuration(),
     )
 
-    setLatencyMap({
+    setLatencyMap((latencyMap) => ({
-      ...latencyMap(),
+      ...latencyMap,
       ...data,
-    })
+    }))
 
     await fetchProxies()
   }
@@ -148,9 +167,14 @@ export const useProxies = () => {
   }
 
   return {
+    collapsedMap,
+    setCollapsedMap,
+    latencyTestingMap,
+    setLatencyTestingMap,
     proxies,
     proxyProviders,
-    latencyTestByProxyGroupName,
+    proxyLatencyTest,
+    proxyGroupLatencyTest,
     latencyMap,
     proxyNodeMap,
     fetchProxies,