mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat(connections): add sorting and close connection support
This commit is contained in:
parent
5f7293693a
commit
45c9740d3b
@ -1,18 +1,27 @@
|
|||||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
import { createEventSignal } from '@solid-primitives/event-listener'
|
||||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||||||
|
import {
|
||||||
|
IconSortAscending,
|
||||||
|
IconSortDescending,
|
||||||
|
IconX,
|
||||||
|
} from '@tabler/icons-solidjs'
|
||||||
import {
|
import {
|
||||||
ColumnDef,
|
ColumnDef,
|
||||||
|
SortingState,
|
||||||
createSolidTable,
|
createSolidTable,
|
||||||
flexRender,
|
flexRender,
|
||||||
getCoreRowModel,
|
getCoreRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
} from '@tanstack/solid-table'
|
} from '@tanstack/solid-table'
|
||||||
import byteSize from 'byte-size'
|
import byteSize from 'byte-size'
|
||||||
import { isIPv6 } from 'is-ip'
|
import { isIPv6 } from 'is-ip'
|
||||||
import { For, createSignal } from 'solid-js'
|
import { For, createSignal } from 'solid-js'
|
||||||
import { secret, wsEndpointURL } from '~/signals'
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import { secret, useRequest, wsEndpointURL } from '~/signals'
|
||||||
import type { Connection } from '~/types'
|
import type { Connection } from '~/types'
|
||||||
|
|
||||||
export const Connections = () => {
|
export const Connections = () => {
|
||||||
|
const request = useRequest()
|
||||||
const [search, setSearch] = createSignal('')
|
const [search, setSearch] = createSignal('')
|
||||||
|
|
||||||
const ws = createReconnectingWS(
|
const ws = createReconnectingWS(
|
||||||
@ -35,7 +44,34 @@ export const Connections = () => {
|
|||||||
).connections.slice(-100)
|
).connections.slice(-100)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
|
||||||
|
|
||||||
|
const [sorting, setSorting] = createSignal<SortingState>([])
|
||||||
|
|
||||||
const columns: ColumnDef<Connection>[] = [
|
const columns: ColumnDef<Connection>[] = [
|
||||||
|
{
|
||||||
|
id: 'close',
|
||||||
|
header: () => (
|
||||||
|
<div class="flex h-full items-center">
|
||||||
|
<button
|
||||||
|
class="btn btn-circle btn-outline btn-xs"
|
||||||
|
onClick={() => request.delete('connections')}
|
||||||
|
>
|
||||||
|
<IconX />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div class="flex h-full items-center">
|
||||||
|
<button
|
||||||
|
class="btn btn-circle btn-outline btn-xs"
|
||||||
|
onClick={() => onCloseConnection(row.id)}
|
||||||
|
>
|
||||||
|
<IconX />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'ID',
|
accessorKey: 'ID',
|
||||||
accessorFn: (row) => row.id,
|
accessorFn: (row) => row.id,
|
||||||
@ -93,6 +129,11 @@ export const Connections = () => {
|
|||||||
]
|
]
|
||||||
|
|
||||||
const table = createSolidTable({
|
const table = createSolidTable({
|
||||||
|
state: {
|
||||||
|
get sorting() {
|
||||||
|
return sorting()
|
||||||
|
},
|
||||||
|
},
|
||||||
get data() {
|
get data() {
|
||||||
return search()
|
return search()
|
||||||
? connections().filter((connection) =>
|
? connections().filter((connection) =>
|
||||||
@ -105,6 +146,8 @@ export const Connections = () => {
|
|||||||
: connections()
|
: connections()
|
||||||
},
|
},
|
||||||
columns,
|
columns,
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
getCoreRowModel: getCoreRowModel(),
|
getCoreRowModel: getCoreRowModel(),
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -125,12 +168,26 @@ export const Connections = () => {
|
|||||||
<For each={headerGroup.headers}>
|
<For each={headerGroup.headers}>
|
||||||
{(header) => (
|
{(header) => (
|
||||||
<th>
|
<th>
|
||||||
{header.isPlaceholder
|
<div
|
||||||
? null
|
class={twMerge(
|
||||||
: flexRender(
|
'flex items-center justify-between',
|
||||||
header.column.columnDef.header,
|
header.column.getCanSort() &&
|
||||||
header.getContext(),
|
'cursor-pointer select-none',
|
||||||
)}
|
)}
|
||||||
|
onClick={header.column.getToggleSortingHandler()}
|
||||||
|
>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext(),
|
||||||
|
)}
|
||||||
|
|
||||||
|
{{
|
||||||
|
asc: <IconSortAscending />,
|
||||||
|
desc: <IconSortDescending />,
|
||||||
|
}[header.column.getIsSorted() as string] ?? null}
|
||||||
|
</div>
|
||||||
</th>
|
</th>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
|
Loading…
Reference in New Issue
Block a user