feat: calculate download speed and upload speed

This commit is contained in:
kunish 2023-08-29 22:51:23 +08:00
parent 7336948ad3
commit 6a1c1abcbc
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430

View File

@ -15,11 +15,16 @@ import {
} from '@tanstack/solid-table' } from '@tanstack/solid-table'
import byteSize from 'byte-size' import byteSize from 'byte-size'
import { isIPv6 } from 'is-ip' import { isIPv6 } from 'is-ip'
import { For, createSignal } from 'solid-js' import { For, createEffect, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { secret, useRequest, wsEndpointURL } from '~/signals' import { secret, useRequest, wsEndpointURL } from '~/signals'
import type { Connection } from '~/types' import type { Connection } from '~/types'
type ConnectionWithSpeed = Connection & {
downloadSpeed: number
uploadSpeed: number
}
export default () => { export default () => {
const request = useRequest() const request = useRequest()
const [search, setSearch] = createSignal('') const [search, setSearch] = createSignal('')
@ -32,21 +37,48 @@ export default () => {
message: WebSocketEventMap['message'] message: WebSocketEventMap['message']
}>(ws, 'message') }>(ws, 'message')
const connections = () => { const [connectionsWithSpeed, setConnectionsWithSpeed] = createSignal<
ConnectionWithSpeed[]
>([])
createEffect(() => {
const data = messageEvent()?.data const data = messageEvent()?.data
if (!data) { if (!data) {
return [] return
} }
return ( setConnectionsWithSpeed((prevConnections) => {
JSON.parse(data) as { connections: Connection[] } const prevMap = new Map<string, Connection>()
).connections.slice(-100) prevConnections.forEach((prev) => prevMap.set(prev.id, prev))
}
const connections = (
JSON.parse(data) as { connections: Connection[] }
).connections.map((connection) => {
const prevConn = prevMap.get(connection.id)
if (!prevConn) {
return { ...connection, downloadSpeed: 0, uploadSpeed: 0 }
}
return {
...connection,
downloadSpeed: prevConn.download
? connection.download - prevConn.download
: 0,
uploadSpeed: prevConn.upload
? connection.upload - prevConn.upload
: 0,
}
})
return connections.slice(-100)
})
})
const onCloseConnection = (id: string) => request.delete(`connections/${id}`) const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
const columns: ColumnDef<Connection>[] = [ const columns: ColumnDef<ConnectionWithSpeed>[] = [
{ {
id: 'close', id: 'close',
header: () => ( header: () => (
@ -96,14 +128,27 @@ export default () => {
accessorFn: (row) => row.chains.join(' -> '), accessorFn: (row) => row.chains.join(' -> '),
}, },
{ {
accessorKey: 'Download', accessorKey: 'DL Speed',
accessorFn: (row) => byteSize(row.download), accessorFn: (row) => byteSize(row.downloadSpeed),
sortingFn: (a, b) => a.original.download - b.original.download, sortingFn: (prev, next) =>
prev.original.downloadSpeed - next.original.downloadSpeed,
}, },
{ {
accessorKey: 'Upload', accessorKey: 'UL Speed',
accessorFn: (row) => byteSize(row.uploadSpeed),
sortingFn: (prev, next) =>
prev.original.uploadSpeed - next.original.uploadSpeed,
},
{
accessorKey: 'DL',
accessorFn: (row) => byteSize(row.download),
sortingFn: (prev, next) =>
prev.original.download - next.original.download,
},
{
accessorKey: 'UL',
accessorFn: (row) => byteSize(row.upload), accessorFn: (row) => byteSize(row.upload),
sortingFn: (a, b) => a.original.upload - b.original.upload, sortingFn: (prev, next) => prev.original.upload - next.original.upload,
}, },
{ {
accessorKey: 'Source', accessorKey: 'Source',
@ -133,14 +178,14 @@ export default () => {
}, },
get data() { get data() {
return search() return search()
? connections().filter((connection) => ? connectionsWithSpeed().filter((connection) =>
Object.values(connection).some((conn) => Object.values(connection).some((conn) =>
JSON.stringify(conn) JSON.stringify(conn)
.toLowerCase() .toLowerCase()
.includes(search().toLowerCase()), .includes(search().toLowerCase()),
), ),
) )
: connections() : connectionsWithSpeed()
}, },
columns, columns,
onSortingChange: setSorting, onSortingChange: setSorting,