feat(connections): show connection detail on click of a button

src/components/ConnectionsTableOrderingModal.tsx

@@ -95,41 +95,40 @@ export const ConnectionsTableOrderingModal = (props: {
   }
 
   return (
-    <>
-      <input type="checkbox" id="connection-modal" class="modal-toggle" />
-      <div class="modal">
-        <div class="modal-box w-80">
-          <DragDropProvider
-            onDragStart={onDragStart}
-            onDragEnd={onDragEnd as DragEventHandler}
-            collisionDetector={closestCenter}
-          >
-            <DragDropSensors />
-            <div class="column self-stretch">
-              <SortableProvider ids={props.order}>
-                <For each={props.order}>{(key) => <FormRow key={key} />}</For>
-              </SortableProvider>
-            </div>
-            <DragOverlay>
-              <Show when={activeKey()}>
-                <div class="sortable">{t(activeKey()!)}</div>
-              </Show>
-            </DragOverlay>
-          </DragDropProvider>
+    <dialog id="connections-table-ordering-modal" class="modal">
+      <div class="modal-box w-80">
+        <DragDropProvider
+          onDragStart={onDragStart}
+          onDragEnd={onDragEnd as DragEventHandler}
+          collisionDetector={closestCenter}
+        >
+          <DragDropSensors />
+          <div class="column self-stretch">
+            <SortableProvider ids={props.order}>
+              <For each={props.order}>{(key) => <FormRow key={key} />}</For>
+            </SortableProvider>
+          </div>
+          <DragOverlay>
+            <Show when={activeKey()}>
+              <div class="sortable">{t(activeKey()!)}</div>
+            </Show>
+          </DragOverlay>
+        </DragDropProvider>
 
-          <Button
-            class="btn-neutral btn-sm ml-auto mt-4 block"
-            onClick={() => {
-              props.onOrderChange(CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER)
-              props.onVisibleChange(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY)
-            }}
-          >
-            {t('reset')}
-          </Button>
-        </div>
-
-        <label class="modal-backdrop" for="connection-modal" />
+        <Button
+          class="btn-neutral btn-sm ml-auto mt-4 block"
+          onClick={() => {
+            props.onOrderChange(CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER)
+            props.onVisibleChange(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY)
+          }}
+        >
+          {t('reset')}
+        </Button>
       </div>
-    </>
+
+      <form method="dialog" class="modal-backdrop">
+        <button />
+      </form>
+    </dialog>
   )
 }

src/constants/index.ts

@@ -110,6 +110,7 @@ export enum LANG {
 }
 
 export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
+  Details = 'details',
   Close = 'close',
   ID = 'ID',
   Type = 'type',

src/i18n/en.ts

@@ -74,4 +74,5 @@ export default {
   all: 'All',
   sequence: 'Sequence',
   payload: 'Payload',
+  details: 'Details',
 }

src/i18n/zh.ts

@@ -73,4 +73,5 @@ export default {
   all: '全部',
   sequence: '序列号',
   payload: '内容',
+  details: '详情',
 }

src/pages/Connections.tsx

@@ -3,6 +3,7 @@ import { useI18n } from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
 import {
   IconCircleX,
+  IconInfoCircle,
   IconPlayerPause,
   IconPlayerPlay,
   IconSettings,
@@ -25,7 +26,7 @@ import {
 } from '@tanstack/solid-table'
 import byteSize from 'byte-size'
 import dayjs from 'dayjs'
-import { For, createMemo, createSignal } from 'solid-js'
+import { Component, For, Show, createMemo, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Button, ConnectionsTableOrderingModal } from '~/components'
 import {
@@ -35,6 +36,7 @@ import {
 } from '~/constants'
 import { formatTimeFromNow } from '~/helpers'
 import {
+  allConnections,
   tableSize,
   tableSizeClassName,
   useConnections,
@@ -50,6 +52,34 @@ enum ActiveTab {
   closedConnections = 'closedConnections',
 }
 
+const ConnectionDetailsModal: Component<{
+  selectedConnectionID?: string
+}> = (props) => {
+  return (
+    <dialog id="connections-table-details-modal" class="modal">
+      <div class="modal-box">
+        <Show when={props.selectedConnectionID}>
+          <pre>
+            <code>
+              {JSON.stringify(
+                allConnections.find(
+                  ({ id }) => id === props.selectedConnectionID,
+                ),
+                null,
+                2,
+              )}
+            </code>
+          </pre>
+        </Show>
+      </div>
+
+      <form method="dialog" class="modal-backdrop">
+        <button />
+      </form>
+    </dialog>
+  )
+}
+
 export default () => {
   const [t] = useI18n()
   const request = useRequest()
@@ -75,7 +105,33 @@ export default () => {
     },
   )
 
+  const [selectedConnectionID, setSelectedConnectionID] = createSignal<string>()
+
   const columns = createMemo<ColumnDef<Connection>[]>(() => [
+    {
+      header: () => t('details'),
+      enableGrouping: false,
+      enableSorting: false,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Details,
+      cell: ({ row }) => (
+        <div class="flex h-4 items-center">
+          <Button
+            class="btn-circle btn-xs"
+            onClick={() => {
+              setSelectedConnectionID(row.original.id)
+
+              const modal = document.querySelector(
+                '#connections-table-details-modal',
+              ) as HTMLDialogElement | null
+
+              modal?.showModal()
+            }}
+          >
+            <IconInfoCircle size="16" />
+          </Button>
+        </div>
+      ),
+    },
     {
       header: () => t('close'),
       enableGrouping: false,
@@ -293,21 +349,19 @@ export default () => {
             <IconCircleX />
           </Button>
 
-          <label for="connection-modal" class="btn btn-circle btn-sm sm:btn-md">
-            <IconSettings />
-          </label>
-        </div>
+          <Button
+            class="btn btn-circle btn-sm sm:btn-md"
+            onClick={() => {
+              const modal = document.querySelector(
+                '#connections-table-ordering-modal',
+              ) as HTMLDialogElement | null
 
-        <ConnectionsTableOrderingModal
-          order={columnOrder()}
-          visible={columnVisibility()}
-          onOrderChange={(data: ColumnOrder) => {
-            setColumnOrder([...data])
-          }}
-          onVisibleChange={(data: ColumnVisibility) =>
-            setColumnVisibility({ ...data })
-          }
-        />
+              modal?.showModal()
+            }}
+          >
+            <IconSettings />
+          </Button>
+        </div>
       </div>
 
       <div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
@@ -427,6 +481,17 @@ export default () => {
           </tbody>
         </table>
       </div>
+
+      <ConnectionsTableOrderingModal
+        order={columnOrder()}
+        visible={columnVisibility()}
+        onOrderChange={(data: ColumnOrder) => setColumnOrder(data)}
+        onVisibleChange={(data: ColumnVisibility) =>
+          setColumnVisibility({ ...data })
+        }
+      />
+
+      <ConnectionDetailsModal selectedConnectionID={selectedConnectionID()} />
     </div>
   )
 }

src/signals/connections.ts

@@ -11,7 +11,7 @@ export type WsMsg = {
 // we make connections global, so we can keep track of connections when user in proxy page
 // when user selects proxy and close some connections they can back and check connections
 // they closed
-let allConnections: Connection[] = []
+export let allConnections: Connection[] = []
 
 export const setAllConnections = (allConns: Connection[]) => {
   allConnections = allConns