Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-12-26 19:24:12 +08:00
Code Issues Projects Releases Wiki Activity

feat(logs): use Index instead of For

Browse Source
This commit is contained in:
kunish 2023-09-10 19:03:26 +08:00
parent 07f461f110
commit 669492f22c
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 90 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/constants/index.ts
View File

@ -128,7 +128,7 @@ export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
Destination = 'destination', Destination = 'destination',
} }
export const CONNECTIONS_TABLE_MAX_CLOSED_ROWS = 1000 export const CONNECTIONS_TABLE_MAX_CLOSED_ROWS = 500
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,
@ -140,6 +140,8 @@ export const CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY = {
[CONNECTIONS_TABLE_ACCESSOR_KEY.ID]: false, [CONNECTIONS_TABLE_ACCESSOR_KEY.ID]: false,
} }
export const LOGS_TABLE_MAX_ROWS = 1000
export enum TAILWINDCSS_SIZE { export enum TAILWINDCSS_SIZE {
XS = 'xs', XS = 'xs',
SM = 'sm', SM = 'sm',

116
src/pages/Connections.tsx
View File

@ -432,72 +432,66 @@ export default () => {
</thead> </thead>
<tbody> <tbody>
<Index each={table.getRowModel().rows}> <For each={table.getRowModel().rows}>
{(keyedRow) => { {(row) => (
const row = keyedRow() <tr class="h-8 hover:!bg-primary hover:text-primary-content">
<For each={row.getVisibleCells()}>
{(cell) => {
return (
<td
onContextMenu={(e) => {
e.preventDefault()
return ( const value = cell.renderValue() as null | string
<tr class="h-8 hover:!bg-primary hover:text-primary-content"> value && writeClipboard(value).catch(() => {})
<Index each={row.getVisibleCells()}> }}
{(keyedCell) => { >
const cell = keyedCell() {cell.getIsGrouped() ? (
<button
return ( class={twMerge(
<td row.getCanExpand()
onContextMenu={(e) => { ? 'cursor-pointer'
e.preventDefault() : 'cursor-normal',
'flex items-center gap-2',
const value = cell.renderValue() as null | string )}
value && writeClipboard(value).catch(() => {}) onClick={row.getToggleExpandedHandler()}
}} >
> <div>
{cell.getIsGrouped() ? ( {row.getIsExpanded() ? (
<button <IconZoomOutFilled size={18} />
class={twMerge( ) : (
row.getCanExpand() <IconZoomInFilled size={18} />
? 'cursor-pointer'
: 'cursor-normal',
'flex items-center gap-2',
)} )}
onClick={row.getToggleExpandedHandler()} </div>
>
<div>
{row.getIsExpanded() ? (
<IconZoomOutFilled size={18} />
) : (
<IconZoomInFilled size={18} />
)}
</div>
<div> <div>
{flexRender( {flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</div>
<div>({row.subRows.length})</div>
</button>
) : cell.getIsAggregated() ? (
flexRender(
cell.column.columnDef.aggregatedCell ??
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext(), cell.getContext(),
) )}
) : cell.getIsPlaceholder() ? null : ( </div>
flexRender(
<div>({row.subRows.length})</div>
</button>
) : cell.getIsAggregated() ? (
flexRender(
cell.column.columnDef.aggregatedCell ??
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext(), cell.getContext(),
) )
)} ) : cell.getIsPlaceholder() ? null : (
</td> flexRender(
) cell.column.columnDef.cell,
}} cell.getContext(),
</Index> )
</tr> )}
) </td>
}} )
</Index> }}
</For>
</tr>
)}
</For>
</tbody> </tbody>
</table> </table>
</div> </div>

55
src/pages/Logs.tsx
View File

@ -5,8 +5,9 @@ import {
flexRender, flexRender,
getCoreRowModel, getCoreRowModel,
} from '@tanstack/solid-table' } from '@tanstack/solid-table'
import { For, createEffect, createSignal } from 'solid-js' import { For, Index, createEffect, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { LOGS_TABLE_MAX_ROWS } from '~/constants'
import { tableSize, tableSizeClassName, useWsRequest } from '~/signals' import { tableSize, tableSizeClassName, useWsRequest } from '~/signals'
import { Log } from '~/types' import { Log } from '~/types'
@ -14,7 +15,7 @@ type LogWithSeq = Log & { seq: number }
export default () => { export default () => {
const [t] = useI18n() const [t] = useI18n()
let seq = 0 let seq = 1
const [search, setSearch] = createSignal('') const [search, setSearch] = createSignal('')
const [logs, setLogs] = createSignal<LogWithSeq[]>([]) const [logs, setLogs] = createSignal<LogWithSeq[]>([])
@ -27,7 +28,7 @@ export default () => {
return return
} }
setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, 100)) setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, LOGS_TABLE_MAX_ROWS))
seq++ seq++
}) })
@ -94,26 +95,34 @@ export default () => {
)} )}
> >
<thead class="sticky top-0 z-10"> <thead class="sticky top-0 z-10">
<For each={table.getHeaderGroups()}> <Index each={table.getHeaderGroups()}>
{(headerGroup) => ( {(keyedHeaderGroup) => {
<tr> const headerGroup = keyedHeaderGroup()
<For each={headerGroup.headers}>
{(header) => ( return (
<th class="bg-base-300"> <tr>
<div> <Index each={headerGroup.headers}>
{header.isPlaceholder {(keyedHeader) => {
? null const header = keyedHeader()
: flexRender(
header.column.columnDef.header, return (
header.getContext(), <th class="bg-base-300">
)} <div>
</div> {header.isPlaceholder
</th> ? null
)} : flexRender(
</For> header.column.columnDef.header,
</tr> header.getContext(),
)} )}
</For> </div>
</th>
)
}}
</Index>
</tr>
)
}}
</Index>
</thead> </thead>
<tbody> <tbody>