feat(logs): use Index instead of For

src/constants/index.ts

@@ -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',

src/pages/Connections.tsx

@@ -432,16 +432,11 @@ export default () => {
           </thead>
 
           <tbody>
-            <Index each={table.getRowModel().rows}>
+            <For each={table.getRowModel().rows}>
-              {(keyedRow) => {
+              {(row) => (
-                const row = keyedRow()
-
-                return (
                 <tr class="h-8 hover:!bg-primary hover:text-primary-content">
-                    <Index each={row.getVisibleCells()}>
+                  <For each={row.getVisibleCells()}>
-                      {(keyedCell) => {
+                    {(cell) => {
-                        const cell = keyedCell()
-
                       return (
                         <td
                           onContextMenu={(e) => {
@@ -493,11 +488,10 @@ export default () => {
                         </td>
                       )
                     }}
-                    </Index>
+                  </For>
                 </tr>
-                )
+              )}
-              }}
+            </For>
-            </Index>
           </tbody>
         </table>
       </div>

src/pages/Logs.tsx

@@ -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,11 +95,17 @@ export default () => {
           )}
         >
           <thead class="sticky top-0 z-10">
-            <For each={table.getHeaderGroups()}>
+            <Index each={table.getHeaderGroups()}>
-              {(headerGroup) => (
+              {(keyedHeaderGroup) => {
+                const headerGroup = keyedHeaderGroup()
+
+                return (
                   <tr>
-                  <For each={headerGroup.headers}>
+                    <Index each={headerGroup.headers}>
-                    {(header) => (
+                      {(keyedHeader) => {
+                        const header = keyedHeader()
+
+                        return (
                           <th class="bg-base-300">
                             <div>
                               {header.isPlaceholder
@@ -109,11 +116,13 @@ export default () => {
                                   )}
                             </div>
                           </th>
-                    )}
+                        )
-                  </For>
+                      }}
+                    </Index>
                   </tr>
-              )}
+                )
-            </For>
+              }}
+            </Index>
           </thead>
 
           <tbody>