feat: time column in conns

src/constants/index.ts

@@ -118,6 +118,7 @@ export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
   Chains = 'chains',
   DlSpeed = 'dlSpeed',
   ULSpeed = 'ulSpeed',
+  ConnectTime = 'connectTime',
   Download = 'dl',
   Upload = 'ul',
   Source = 'source',

src/i18n/en.ts

@@ -25,6 +25,7 @@ export default {
   process: 'Process',
   host: 'Host',
   chains: 'Chains',
+  connectTime: 'Time',
   dlSpeed: 'DL Speed',
   ulSpeed: 'UL Speed',
   dl: 'DL',

src/i18n/index.tsx

@@ -1,5 +1,6 @@
 import { I18nContext, createI18nContext, useI18n } from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
+import dayjs from 'dayjs'
 import { ParentComponent, createEffect, createSignal } from 'solid-js'
 import { LANG } from '~/constants'
 import dict from './dict'
@@ -24,6 +25,7 @@ const I18nUpdator: ParentComponent = (props) => {
 
   createEffect(() => {
     setLang(locale())
+    dayjs.locale(locale())
   })
 
   return props.children

src/i18n/zh.ts

@@ -25,6 +25,7 @@ export default {
   process: '进程',
   host: '主机',
   chains: '链路',
+  connectTime: '连接时间',
   dlSpeed: '下载速度',
   ulSpeed: '上传速度',
   dl: '下载量',

src/main.tsx

@@ -3,6 +3,7 @@ import '~/index.css'
 
 import { Router, hashIntegration } from '@solidjs/router'
 import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { render } from 'solid-js/web'
 import { App } from '~/App'

src/pages/Connections.tsx

@@ -18,6 +18,7 @@ import {
   getSortedRowModel,
 } from '@tanstack/solid-table'
 import byteSize from 'byte-size'
+import dayjs from 'dayjs'
 import { isIPv6 } from 'is-ip'
 import { For, createEffect, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
@@ -27,6 +28,7 @@ import {
   CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
   CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
 } from '~/constants'
+import { formatTimeFromNow } from '~/helpers'
 import { secret, useRequest, wsEndpointURL } from '~/signals'
 import type { Connection } from '~/types'
 
@@ -154,6 +156,13 @@ export default () => {
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Chains,
       accessorFn: (row) => row.chains.slice().reverse().join(' :: '),
     },
+    {
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.ConnectTime,
+      accessorFn: (row) => formatTimeFromNow(row.start),
+      sortingFn: (prev, next) =>
+        dayjs(prev.original.start).valueOf() -
+        dayjs(next.original.start).valueOf(),
+    },
     {
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.DlSpeed,
       accessorFn: (row) => `${byteSize(row.downloadSpeed)}/s`,