Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-10 05:15:35 +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',
}
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(
CONNECTIONS_TABLE_ACCESSOR_KEY,
@ -140,6 +140,8 @@ export const CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY = {
[CONNECTIONS_TABLE_ACCESSOR_KEY.ID]: false,
}
export const LOGS_TABLE_MAX_ROWS = 1000
export enum TAILWINDCSS_SIZE {
XS = 'xs',
SM = 'sm',

116
src/pages/Connections.tsx
View File

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

55
src/pages/Logs.tsx
View File

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