Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-09-20 01:52:47 +08:00
Code Issues Projects Releases Wiki Activity

feat(connection): filter connections with sourceIP, closes #246

Browse Source
This commit is contained in:
kunish 2023-09-22 00:56:18 +08:00
parent bfdb2c9e96
commit ffa244760f
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 42 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/Connections.tsx
View File

@ -28,6 +28,7 @@ import {
} from '@tanstack/solid-table' } from '@tanstack/solid-table'
import byteSize from 'byte-size' import byteSize from 'byte-size'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { uniq } from 'lodash'
import { For, Index, createMemo, createSignal } from 'solid-js' import { For, Index, createMemo, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { closeAllConnectionsAPI, closeSingleConnectionAPI } from '~/apis' import { closeAllConnectionsAPI, closeSingleConnectionAPI } from '~/apis'
@ -39,6 +40,7 @@ import {
import { CONNECTIONS_TABLE_ACCESSOR_KEY, MODAL } from '~/constants' import { CONNECTIONS_TABLE_ACCESSOR_KEY, MODAL } from '~/constants'
import { formatTimeFromNow } from '~/helpers' import { formatTimeFromNow } from '~/helpers'
import { import {
allConnections,
clientSourceIPTags, clientSourceIPTags,
connectionsTableColumnOrder, connectionsTableColumnOrder,
connectionsTableColumnVisibility, connectionsTableColumnVisibility,
@ -286,6 +288,12 @@ export default () => {
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
}) })
const sourceIPHeader = createMemo(() =>
table
.getFlatHeaders()
.find(({ id }) => id === CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP),
)
const tabs = createMemo(() => [ const tabs = createMemo(() => [
{ {
type: ActiveTab.activeConnections, type: ActiveTab.activeConnections,
@ -302,21 +310,40 @@ export default () => {
return ( return (
<div class="flex h-full flex-col gap-2"> <div class="flex h-full flex-col gap-2">
<div class="flex w-full flex-wrap items-center gap-2"> <div class="flex w-full flex-wrap items-center gap-2">
<div class="tabs-boxed tabs gap-2"> <div class="join items-center">
<Index each={tabs()}> <div class="tabs-boxed join-item tabs items-center gap-2 self-stretch">
{(tab) => ( <Index each={tabs()}>
<button {(tab) => (
class={twMerge( <button
activeTab() === tab().type && 'tab-active', class={twMerge(
'tab tab-sm gap-2 sm:tab-md', activeTab() === tab().type && 'tab-active',
)} 'tab tab-sm gap-2 sm:tab-md',
onClick={() => setActiveTab(tab().type)} )}
> onClick={() => setActiveTab(tab().type)}
<span>{tab().name}</span> >
<div class="badge badge-sm">{tab().count}</div> <span>{tab().name}</span>
</button> <div class="badge badge-sm">{tab().count}</div>
)} </button>
</Index> )}
</Index>
</div>
<select
class="select join-item select-bordered select-primary"
onChange={(e) =>
sourceIPHeader()?.column.setFilterValue(e.target.value)
}
>
<option value="">{t('all')}</option>
<Index
each={uniq(
allConnections().map(({ metadata: { sourceIP } }) => sourceIP),
).sort()}
>
{(sourceIP) => <option value={sourceIP()}>{sourceIP()}</option>}
</Index>
</select>
</div> </div>
<div class="join flex w-full items-center md:flex-1"> <div class="join flex w-full items-center md:flex-1">