feat(connections): use Index instead of key

This commit is contained in:
kunish 2023-09-10 18:47:01 +08:00
parent 9a144e882d
commit 07f461f110
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
5 changed files with 19 additions and 29 deletions

View File

@ -18,7 +18,6 @@
"@solid-primitives/clipboard": "^1.5.7",
"@solid-primitives/event-listener": "^2.3.0",
"@solid-primitives/i18n": "^1.4.1",
"@solid-primitives/keyed": "^1.2.0",
"@solid-primitives/media": "^2.2.5",
"@solid-primitives/resize-observer": "^2.0.22",
"@solid-primitives/storage": "^2.1.1",

View File

@ -26,9 +26,6 @@ dependencies:
'@solid-primitives/i18n':
specifier: ^1.4.1
version: 1.4.1(solid-js@1.7.11)
'@solid-primitives/keyed':
specifier: ^1.2.0
version: 1.2.0(solid-js@1.7.11)
'@solid-primitives/media':
specifier: ^2.2.5
version: 2.2.5(solid-js@1.7.11)
@ -2610,17 +2607,6 @@ packages:
solid-js: 1.7.11
dev: false
/@solid-primitives/keyed@1.2.0(solid-js@1.7.11):
resolution:
{
integrity: sha512-0DuTeJdxWjCTu73XnDZs24JzfXckBnpvCfQ6Mf/kTPKkMZJh7tjkBnZEk48ckrE9xmwat9stIdfrBmZctsepIw==,
}
peerDependencies:
solid-js: ^1.6.12
dependencies:
solid-js: 1.7.11
dev: false
/@solid-primitives/media@2.2.5(solid-js@1.7.11):
resolution:
{

View File

@ -128,6 +128,8 @@ export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
Destination = 'destination',
}
export const CONNECTIONS_TABLE_MAX_CLOSED_ROWS = 1000
export const CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER = Object.values(
CONNECTIONS_TABLE_ACCESSOR_KEY,
)

View File

@ -1,6 +1,5 @@
import { writeClipboard } from '@solid-primitives/clipboard'
import { useI18n } from '@solid-primitives/i18n'
import { Key } from '@solid-primitives/keyed'
import { makePersisted } from '@solid-primitives/storage'
import {
IconCircleX,
@ -29,7 +28,7 @@ import {
} from '@tanstack/solid-table'
import byteSize from 'byte-size'
import dayjs from 'dayjs'
import { For, createMemo, createSignal } from 'solid-js'
import { For, Index, createMemo, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import {
Button,
@ -316,7 +315,7 @@ export default () => {
<div class="flex h-full flex-col gap-2">
<div class="flex w-full flex-wrap items-center gap-2">
<div class="tabs-boxed tabs gap-2">
<Key each={tabs()} by={({ type }) => type}>
<Index each={tabs()}>
{(tab) => (
<button
class={twMerge(
@ -329,7 +328,7 @@ export default () => {
<div class="badge badge-sm">{tab().count}</div>
</button>
)}
</Key>
</Index>
</div>
<div class="join flex w-full items-center md:flex-1">
@ -433,16 +432,13 @@ export default () => {
</thead>
<tbody>
<Key each={table.getRowModel().rows} by={({ id }) => id}>
<Index each={table.getRowModel().rows}>
{(keyedRow) => {
const row = keyedRow()
return (
<tr class="h-8 hover:!bg-primary hover:text-primary-content">
<Key
each={row.getVisibleCells()}
by={({ row }) => row.original.id}
>
<Index each={row.getVisibleCells()}>
{(keyedCell) => {
const cell = keyedCell()
@ -497,11 +493,11 @@ export default () => {
</td>
)
}}
</Key>
</Index>
</tr>
)
}}
</Key>
</Index>
</tbody>
</table>
</div>

View File

@ -1,5 +1,6 @@
import { differenceWith, isNumber, unionWith } from 'lodash'
import { Accessor, createEffect, createSignal, untrack } from 'solid-js'
import { CONNECTIONS_TABLE_MAX_CLOSED_ROWS } from '~/constants'
import { Connection, ConnectionRawMessage } from '~/types'
export type WsMsg = {
@ -53,11 +54,17 @@ export const useConnections = () => {
if (!paused()) {
const closedConns = diffClosedConnections(activeConns, allConns)
setActiveConnections(activeConns.slice(-200))
setClosedConnections(closedConns.slice(-200))
setActiveConnections(activeConns)
setClosedConnections(
closedConns.slice(-CONNECTIONS_TABLE_MAX_CLOSED_ROWS),
)
}
setAllConnections(allConns.slice(-400))
setAllConnections(
allConns.slice(
-(activeConns.length + CONNECTIONS_TABLE_MAX_CLOSED_ROWS),
),
)
})
})