feat(connections): split source info into sourceIP and sourcePort

src/constants/index.ts

@@ -122,7 +122,8 @@ export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
   Download = 'dl',
   Upload = 'ul',
   ConnectTime = 'connectTime',
-  Source = 'source',
+  SourceIP = 'sourceIP',
+  SourcePort = 'sourcePort',
   Destination = 'destination',
 }
 

src/i18n/en.ts

@@ -30,7 +30,8 @@ export default {
   ulSpeed: 'UL Speed',
   dl: 'DL',
   ul: 'UL',
-  source: 'Source',
+  sourceIP: 'Source IP',
+  sourcePort: 'Source Port',
   destination: 'Destination',
   close: 'Close',
   reset: 'Reset',
@@ -66,6 +67,6 @@ export default {
   lg: 'Large size',
   switchEndpoint: 'Switch Endpoint',
   switchLanguage: 'Switch Language',
-  speedtestTimeoutDuration: 'Speedtest Timeout Duration',
+  latencyTestTimeoutDuration: 'Latency Test Timeout Duration',
   closedConnections: 'Closed Connections',
 }

src/i18n/zh.ts

@@ -30,7 +30,8 @@ export default {
   ulSpeed: '上传速度',
   dl: '下载量',
   ul: '上传量',
-  source: '源地址',
+  sourceIP: '源地址',
+  sourcePort: '源端口',
   destination: '目标地址',
   close: '关闭',
   reset: '重置',
@@ -66,6 +67,6 @@ export default {
   lg: '超大尺寸',
   switchEndpoint: '切换后端',
   switchLanguage: '切换语言',
-  speedtestTimeoutDuration: '测速超时时间',
+  latencyTestTimeoutDuration: '测速超时时间',
   closedConnections: '已关闭连接',
 }

src/pages/Config.tsx

@@ -26,6 +26,7 @@ import {
   autoSwitchTheme,
   favDayTheme,
   favNightTheme,
+  latencyTestTimeoutDuration,
   proxiesOrderingType,
   proxiesPreviewType,
   renderInTwoColumn,
@@ -34,16 +35,15 @@ import {
   setAutoSwitchTheme,
   setFavDayTheme,
   setFavNightTheme,
+  setLatencyTestTimeoutDuration,
   setProxiesOrderingType,
   setProxiesPreviewType,
   setRenderInTwoColumn,
   setRenderProxiesInSamePage,
   setSelectedEndpoint,
-  setSpeedtestTimeoutDuration,
   setTableSize,
   setTwemoji,
   setUrlForLatencyTest,
-  speedtestTimeoutDuration,
   tableSize,
   urlForLatencyTest,
   useRequest,
@@ -240,8 +240,10 @@ const ConfigForm = () => {
         <input
           type="number"
           class="input input-bordered w-full max-w-md"
-          value={speedtestTimeoutDuration()}
+          value={latencyTestTimeoutDuration()}
-          onChange={(e) => setSpeedtestTimeoutDuration(Number(e.target.value))}
+          onChange={(e) =>
+            setLatencyTestTimeoutDuration(Number(e.target.value))
+          }
         />
       </div>
 

src/pages/Connections.tsx

@@ -27,7 +27,6 @@ import {
 } from '@tanstack/solid-table'
 import byteSize from 'byte-size'
 import dayjs from 'dayjs'
-import { isIPv6 } from 'is-ip'
 import { differenceWith, isEqualWith } from 'lodash'
 import { For, createEffect, createMemo, createSignal, untrack } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
@@ -260,12 +259,14 @@ export default () => {
       sortingFn: (prev, next) => prev.original.upload - next.original.upload,
     },
     {
-      header: () => t('source'),
+      header: () => t('sourceIP'),
-      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Source,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP,
-      accessorFn: (row) =>
+      accessorFn: (row) => row.metadata.sourceIP,
-        isIPv6(row.metadata.sourceIP)
+    },
-          ? `[${row.metadata.sourceIP}]:${row.metadata.sourcePort}`
+    {
-          : `${row.metadata.sourceIP}:${row.metadata.sourcePort}`,
+      header: () => t('sourcePort'),
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.SourcePort,
+      accessorFn: (row) => row.metadata.sourcePort,
     },
     {
       header: () => t('destination'),
@@ -468,6 +469,7 @@ export default () => {
                                 <IconZoomInFilled size={18} />
                               )}
                             </div>
+
                             <div>
                               {flexRender(
                                 cell.column.columnDef.cell,

src/signals/config.ts

@@ -76,9 +76,9 @@ export const tableSizeClassName = (size: TAILWINDCSS_SIZE) => {
   return className
 }
 
-export const [speedtestTimeoutDuration, setSpeedtestTimeoutDuration] =
+export const [latencyTestTimeoutDuration, setLatencyTestTimeoutDuration] =
   makePersisted(createSignal(2000), {
-    name: 'speedtestTimeoutDuration',
+    name: 'latencyTestTimeoutDuration',
     storage: localStorage,
   })
 

src/signals/proxies.ts

@@ -1,7 +1,7 @@
 import { createSignal } from 'solid-js'
 import {
   autoCloseConns,
-  speedtestTimeoutDuration,
+  latencyTestTimeoutDuration,
   urlForLatencyTest,
   useRequest,
 } from '~/signals'
@@ -98,7 +98,7 @@ export const useProxies = () => {
       .get(`group/${proxyGroupName}/delay`, {
         searchParams: {
           url: urlForLatencyTest(),
-          timeout: speedtestTimeoutDuration(),
+          timeout: latencyTestTimeoutDuration(),
         },
       })
       .json()