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/clipboard": "^1.5.7",
"@solid-primitives/event-listener": "^2.3.0", "@solid-primitives/event-listener": "^2.3.0",
"@solid-primitives/i18n": "^1.4.1", "@solid-primitives/i18n": "^1.4.1",
"@solid-primitives/keyed": "^1.2.0",
"@solid-primitives/media": "^2.2.5", "@solid-primitives/media": "^2.2.5",
"@solid-primitives/resize-observer": "^2.0.22", "@solid-primitives/resize-observer": "^2.0.22",
"@solid-primitives/storage": "^2.1.1", "@solid-primitives/storage": "^2.1.1",

View File

@ -26,9 +26,6 @@ dependencies:
'@solid-primitives/i18n': '@solid-primitives/i18n':
specifier: ^1.4.1 specifier: ^1.4.1
version: 1.4.1(solid-js@1.7.11) 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': '@solid-primitives/media':
specifier: ^2.2.5 specifier: ^2.2.5
version: 2.2.5(solid-js@1.7.11) version: 2.2.5(solid-js@1.7.11)
@ -2610,17 +2607,6 @@ packages:
solid-js: 1.7.11 solid-js: 1.7.11
dev: false 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): /@solid-primitives/media@2.2.5(solid-js@1.7.11):
resolution: resolution:
{ {

View File

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

View File

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

View File

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